Pick asset screen design

2 years ago · 5b1e067a93
parent 7d2afa23cc
commit 5b1e067a93
8 changed files with 77 additions and 52 deletions
--- a/assets/images/search.svg
+++ b/assets/images/search.svg
@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9499 9.51862C12.6027 8.54479 12.984 7.37301 12.984 6.11339C12.984 2.74246 10.2534 0 6.89703 0C3.54065 0 0.810059 2.74246 0.810059 6.11336C0.810059 9.48425 3.54068 12.2267 6.89706 12.2267C8.176 12.2267 9.36378 11.8282 10.3445 11.1488L15.1958 16L16.8101 14.3788L11.9499 9.51862ZM6.89706 10.5097C4.48871 10.5097 2.52931 8.54181 2.52931 6.12299C2.52931 3.70421 4.48868 1.73634 6.89706 1.73634C9.30543 1.73634 11.2648 3.70421 11.2648 6.12302C11.2648 8.54184 9.3054 10.5097 6.89706 10.5097Z" fill="#767676"/>
+</svg>
--- a/lib/l10n/app_ar.arb
+++ b/lib/l10n/app_ar.arb
@ -37,6 +37,7 @@
  "back": "السابق",
  "search": "بحث",
  "searchByName": "بحث بالاسم",
+  "searchByAssetNumber": "بحث برقم الجهاز",
  "address": "العنوان",
  "addressNotFound": "لا يوجد عنوان",
  "addressValidateMessage": "العنوان مطلوب",
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@ -37,6 +37,7 @@
  "back": "Back",
  "search": "Search",
  "searchByName": "Search by name",
+  "searchByAssetNumber": "Search by asset number",
  "address": "Address",
  "addressNotFound": "Address not found",
  "addressValidateMessage": "Address validateMessage",
--- a/lib/new_views/common_widgets/app_text_form_field.dart
+++ b/lib/new_views/common_widgets/app_text_form_field.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:test_sa/extensions/context_extension.dart';
 import 'package:test_sa/extensions/int_extensions.dart';
-import 'package:test_sa/models/enums/translation_keys.dart';
 import 'package:test_sa/new_views/app_style/app_color.dart';
 import 'package:test_sa/new_views/app_style/app_text_style.dart';

@ -20,11 +19,13 @@ class AppTextFormField extends StatefulWidget {
  final TextAlign textAlign;
  final FocusNode node;
  final Widget suffixIcon;
+  final Widget prefixIcon;
  final IconData prefixIconData;
  final int prefixIconSize;
  final TextEditingController controller;
  final TextInputAction textInputAction;
  final VoidCallback onAction;
+  final Color backgroundColor;

  const AppTextFormField({
    Key key,
@ -42,11 +43,13 @@ class AppTextFormField extends StatefulWidget {
    this.style,
    this.textAlign,
    this.suffixIcon,
+    this.prefixIcon,
    this.prefixIconData,
    this.prefixIconSize,
    this.controller,
    this.textInputAction,
    this.onAction,
+    this.backgroundColor,
  }) : super(key: key);

  @override
@ -93,19 +96,20 @@ class _AppTextFormFieldState extends State<AppTextFormField> {
          constraints: const BoxConstraints(),
          suffixIconConstraints: const BoxConstraints(minWidth: 0),
          filled: true,
-          fillColor: context.isDark ? AppColor.neutral50 : Colors.white,
+          fillColor: widget.backgroundColor ?? (context.isDark ? AppColor.neutral50 : Colors.white),
          errorStyle: AppTextStyle.tiny.copyWith(color: context.isDark ? AppColor.red50 : AppColor.red60),
          floatingLabelStyle: AppTextStyle.body1?.copyWith(fontWeight: FontWeight.w500, color: context.isDark ? null : AppColor.neutral20),
          hintText: widget.hintText ?? "",
          labelText: widget.labelText ?? "",
-          suffixIcon: widget.suffixIcon ??
+          prefixIcon: widget.prefixIcon ??
              (widget.prefixIconData == null
                  ? null
                  : Icon(
-                widget.prefixIconData,
-                size: widget.prefixIconSize == null ? 20.toScreenWidth : (widget.prefixIconSize - 10).toScreenWidth,
-                color: AppColor.neutral70,
-              )),
+                      widget.prefixIconData,
+                      size: widget.prefixIconSize == null ? 20.toScreenWidth : (widget.prefixIconSize - 10).toScreenWidth,
+                      color: AppColor.neutral70,
+                    )),
+          suffixIcon: widget.suffixIcon,
        ),
      ),
    );
--- a/lib/new_views/common_widgets/asset_info_card.dart
+++ b/lib/new_views/common_widgets/asset_info_card.dart
@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:test_sa/extensions/context_extension.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
+import 'package:test_sa/extensions/text_extensions.dart';
+import 'package:test_sa/extensions/widget_extensions.dart';
+
+import '../../models/device/device.dart';
+
+class AssetInfoCard extends StatelessWidget {
+  const AssetInfoCard({Key key, @required this.asset}) : super(key: key);
+
+  final Device asset;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          asset.modelDefinition?.assetName?.heading5(context),
+          8.height,
+          "${context.translation.assetNo}: ${asset.assetNumber}".bodyText(context),
+          "${context.translation.manufacture}: ${asset.modelDefinition?.manufacturerName}".bodyText(context),
+          "${context.translation.model}: ${asset.modelDefinition?.modelName}".bodyText(context),
+          "${context.translation.serialNumber}: ${asset.assetNumber}".bodyText(context),
+          const Divider().defaultStyle(context),
+          "${context.translation.department}: ${asset.department?.departmentName}".bodyText(context),
+          "${context.translation.site}: ${asset.site?.custName}".bodyText(context),
+        ],
+      ).paddingAll(16),
+    );
+  }
+}
--- a/lib/views/widgets/equipment/pick_asset.dart
+++ b/lib/views/widgets/equipment/pick_asset.dart
@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:test_sa/extensions/context_extension.dart';
-import 'package:test_sa/extensions/int_extensions.dart';
 import 'package:test_sa/extensions/text_extensions.dart';
 import 'package:test_sa/extensions/widget_extensions.dart';
 import 'package:test_sa/views/widgets/equipment/single_device_picker.dart';

 import '../../../models/device/device.dart';
 import '../../../new_views/app_style/app_color.dart';
+import '../../../new_views/common_widgets/asset_info_card.dart';

 class PickAsset extends StatelessWidget {
  final Function(Device) onPickAsset;
@ -36,29 +36,11 @@ class PickAsset extends StatelessWidget {
                Device device = await Navigator.of(context).pushNamed(SingleDevicePicker.id) as Device;
                onPickAsset(device);
              }).expanded,
-              "qr".toSvgAsset(height: 24, fit: BoxFit.fitHeight).onPress(() {
-                /// TODO [Zaid] : open qr reader
-              }),
+              "qr".toSvgAsset(height: 24, fit: BoxFit.fitHeight, color: context.isDark ? AppColor.primary40 : AppColor.primary70),
            ],
          ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8),
        ),
-        if (device != null)
-          Card(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                device.modelDefinition?.assetName?.heading5(context),
-                8.height,
-                "${context.translation.assetNo}: ${device.assetNumber}".bodyText(context),
-                "${context.translation.manufacture}: ${device.modelDefinition?.manufacturerName}".bodyText(context),
-                "${context.translation.model}: ${device.modelDefinition?.modelName}".bodyText(context),
-                "${context.translation.serialNumber}: ${device.assetNumber}".bodyText(context),
-                const Divider().defaultStyle(context),
-                "${context.translation.department}: ${device.department?.departmentName}".bodyText(context),
-                "${context.translation.site}: ${device.site?.custName}".bodyText(context),
-              ],
-            ).paddingAll(16),
-          ).paddingOnly(top: 8),
+        if (device != null) AssetInfoCard(asset: device).paddingOnly(top: 8),
      ],
    );
  }
--- a/lib/views/widgets/equipment/single_device_picker.dart
+++ b/lib/views/widgets/equipment/single_device_picker.dart
@ -1,17 +1,20 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:test_sa/controllers/localization/localization.dart';
 import 'package:test_sa/controllers/providers/api/devices_provider.dart';
 import 'package:test_sa/controllers/providers/api/user_provider.dart';
 import 'package:test_sa/controllers/providers/settings/setting_provider.dart';
 import 'package:test_sa/extensions/context_extension.dart';
-import 'package:test_sa/views/widgets/equipment/device_item.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
+import 'package:test_sa/extensions/text_extensions.dart';
+import 'package:test_sa/extensions/widget_extensions.dart';
+import 'package:test_sa/new_views/common_widgets/app_text_form_field.dart';
 import 'package:test_sa/views/widgets/loaders/lazy_loading.dart';
 import 'package:test_sa/views/widgets/loaders/loading_manager.dart';
 import 'package:test_sa/views/widgets/loaders/no_item_found.dart';

 import '../../../models/device/device.dart';
-import '../app_text_form_field.dart';
+import '../../../new_views/app_style/app_color.dart';
+import '../../../new_views/common_widgets/asset_info_card.dart';
 import '../qr/scan_qr.dart';

 class SingleDevicePicker extends StatefulWidget {
@ -30,7 +33,6 @@ class _SingleDevicePickerState extends State<SingleDevicePicker> {
  List<Device> _initList = [];
  bool _firstTime = true;

-
  TextEditingController numberController = TextEditingController();
  TextEditingController snController = TextEditingController();

@ -100,11 +102,11 @@ class _SingleDevicePickerState extends State<SingleDevicePicker> {
                padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                child: Column(
                  children: [
-                    ATextFormField(
-                      hintText: "Search by Asset Number",
+                    AppTextFormField(
+                      labelText: context.translation.searchByAssetNumber,
                      controller: numberController,
-                      style: Theme.of(context).textTheme.subtitle1,
-                      suffixIcon: const Icon(Icons.search_rounded),
+                      prefixIcon: "search".toSvgAsset().paddingAll(16),
+                      backgroundColor: context.isDark ? AppColor.neutral40 : AppColor.neutral30,
                      textInputAction: TextInputAction.search,
                      onAction: () async {
                        _devicesProvider.reset();
@ -117,11 +119,11 @@ class _SingleDevicePickerState extends State<SingleDevicePicker> {
                    const SizedBox(
                      height: 8,
                    ),
-                    ATextFormField(
-                      hintText: context.translation.searchBySn,
+                    AppTextFormField(
+                      labelText: context.translation.searchBySn,
                      controller: snController,
-                      style: Theme.of(context).textTheme.subtitle1,
-                      suffixIcon: const Icon(Icons.search_rounded),
+                      prefixIcon: "search".toSvgAsset().paddingAll(16),
+                      backgroundColor: context.isDark ? AppColor.neutral40 : AppColor.neutral30,
                      textInputAction: TextInputAction.search,
                      onAction: () async {
                        _devicesProvider.reset();
@ -146,16 +148,13 @@ class _SingleDevicePickerState extends State<SingleDevicePicker> {
                                user: _userProvider.user, host: _settingProvider.host, hospitalId: _userProvider.user.clientId, serialNumber: snController.text, number: numberController.text);
                          },
                          child: ListView.builder(
-                            padding: EdgeInsets.zero,
+                            padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth),
                            shrinkWrap: true,
                            itemCount: _searchableList.length,
                            itemBuilder: (listContext, itemIndex) {
-                              return DeviceItem(
-                                device: _searchableList[itemIndex],
-                                onPressed: (device) {
-                                  Navigator.of(context).pop(device);
-                                },
-                              );
+                              return AssetInfoCard(asset: _searchableList[itemIndex]).onPress(() {
+                                Navigator.of(context).pop(_searchableList[itemIndex]);
+                              });
                            },
                          ),
                        )),
@ -165,7 +164,7 @@ class _SingleDevicePickerState extends State<SingleDevicePicker> {
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: "some tag 2",
-        child: const Icon(Icons.qr_code_scanner),
+        child: "qr".toSvgAsset(height: 32, fit: BoxFit.fitHeight, color: Theme.of(context).scaffoldBackgroundColor),
        onPressed: () async {
          String result = await Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const ScanQr()),
--- a/lib/views/widgets/sound/sound_player.dart
+++ b/lib/views/widgets/sound/sound_player.dart
@ -1,5 +1,6 @@
 import 'package:audioplayers/audioplayers.dart';
 import 'package:flutter/material.dart';
+import 'package:test_sa/extensions/context_extension.dart';
 import 'package:test_sa/extensions/widget_extensions.dart';
 import 'package:test_sa/new_views/app_style/app_color.dart';
 import 'package:test_sa/new_views/app_style/app_text_style.dart';
@ -30,13 +31,14 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
      decoration: ShapeDecoration(
        color: Theme.of(context).cardColor,
        shape: RoundedRectangleBorder(
-          side: const BorderSide(width: 1, color: Color(0xFFEAF1F4)),
+          side: BorderSide(width: 1, color: (context.isDark ? AppColor.neutral20 : AppColor.neutral30)),
          borderRadius: BorderRadius.circular(32),
        ),
      ),
      child: Icon(
        icon,
-        color: Theme.of(context).primaryColor,
+        size: 30,
+        color: (context.isDark ? AppColor.primary40 : AppColor.primary70).withOpacity(0.5),
      ),
    ).onPress(onpress);
  }
@ -63,7 +65,7 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
          rebuild();
        });
      case PlayerState.stopped:
-        return audioPlayerButton(_isLocalFile ? Icons.play_circle_fill_outlined : Icons.download_rounded, () async {
+        return audioPlayerButton(_isLocalFile ? Icons.play_arrow_rounded : Icons.download_rounded, () async {
          _failedToLoad = false;
          try {
            await _audioPlayer.play(
@ -179,7 +181,7 @@ class _ASoundPlayerState extends State<ASoundPlayer> {
                  value: _audioPosition?.inMilliseconds?.toDouble() ?? 0.0,
                  min: 0,
                  max: _audioTime?.inMilliseconds?.toDouble() ?? 60.0,
-                  activeColor: Theme.of(context).primaryColor,
+                  activeColor: context.isDark ? AppColor.primary40 : AppColor.primary70,
                  inactiveColor: AppColor.neutral30,
                  onChangeStart: (value) {
                    _sliderMoving = true;