search asset ui
nextwo
1 year ago
parent
a9fb22583e
commit
9a1303fc5e
@ -0,0 +1,228 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:test_sa/controllers/providers/api/devices_provider.dart';
|
||||
import 'package:test_sa/extensions/context_extension.dart';
|
||||
import 'package:test_sa/extensions/int_extensions.dart';
|
||||
import 'package:test_sa/extensions/widget_extensions.dart';
|
||||
import 'package:test_sa/new_views/common_widgets/app_text_form_field.dart';
|
||||
|
||||
import '../../../models/device/asset.dart';
|
||||
import '../../../models/device/asset_search.dart';
|
||||
import '../../../new_views/app_style/app_color.dart';
|
||||
import '../../../new_views/common_widgets/app_lazy_loading.dart';
|
||||
import '../../../new_views/common_widgets/custom_app_bar.dart';
|
||||
import '../../widgets/bottom_sheets/asset_detail_bottom_sheet.dart';
|
||||
import '../../widgets/equipment/asset_item_listview.dart';
|
||||
import '../../widgets/horizontal_list_widget.dart';
|
||||
import '../../widgets/loaders/lazy_loading.dart';
|
||||
import '../../widgets/loaders/no_item_found.dart';
|
||||
|
||||
class SearchAssetPage extends StatefulWidget {
|
||||
/// add on route
|
||||
static const String id = "asset_search_page";
|
||||
final AssetSearch data;
|
||||
|
||||
const SearchAssetPage({Key key, this.data}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<SearchAssetPage> createState() => _SearchAssetPageState();
|
||||
}
|
||||
|
||||
class _SearchAssetPageState extends State<SearchAssetPage> {
|
||||
int _selectedIndex = 0;
|
||||
AssetSearch search;
|
||||
TextEditingController _searchController;
|
||||
AssetProvider _deviceProvider;
|
||||
List<Asset> _searchableList = [];
|
||||
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
|
||||
bool _isFirst = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
search = widget.data ?? AssetSearch();
|
||||
_searchController = TextEditingController(text: search.assetName);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_searchController?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<String> searchBy = [
|
||||
context.translation.assetName,
|
||||
context.translation.assetNumber,
|
||||
context.translation.oracleCode,
|
||||
context.translation.snNumber,
|
||||
context.translation.model,
|
||||
context.translation.supplier,
|
||||
context.translation.site,
|
||||
context.translation.manufacture,
|
||||
context.translation.md,
|
||||
context.translation.location,
|
||||
];
|
||||
|
||||
_deviceProvider = Provider.of<AssetProvider>(context, listen: false);
|
||||
|
||||
return Scaffold(
|
||||
resizeToAvoidBottomInset: false,
|
||||
appBar: CustomAppBar(
|
||||
title: context.translation.searchAsset,
|
||||
|
||||
/// comment reset button because it isn't exist in new design
|
||||
// actions: [
|
||||
// if (_showResetButton())
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.center,
|
||||
// children: [
|
||||
// Text(
|
||||
// context.translation.reset,
|
||||
// style: AppTextStyles.bodyText2.copyWith(color: const Color(0xFF4A8DB7)),
|
||||
// ).paddingAll(8).onPress(() {
|
||||
// setState(() {
|
||||
// _searchController.text = "";
|
||||
// });
|
||||
// }),
|
||||
// ],
|
||||
// )
|
||||
// ],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: HorizontalListWidget(
|
||||
list: searchBy,
|
||||
callBackFunction: (index) {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
},
|
||||
).paddingOnly(top: 16),
|
||||
),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: AppTextFormField(
|
||||
controller: _searchController,
|
||||
labelText: "${context.translation.searchBy} ${searchBy[_selectedIndex]}",
|
||||
onChange: (text) {
|
||||
_searchController.text = text;
|
||||
_searchController.selection = TextSelection.fromPosition(TextPosition(offset: _searchController.text.length));
|
||||
setState(() {});
|
||||
},
|
||||
onSaved: (value) {
|
||||
setState(() {
|
||||
search = AssetSearch();
|
||||
});
|
||||
_setValue(value);
|
||||
},
|
||||
suffixIcon: IconButton(
|
||||
icon: const Icon(Icons.search),
|
||||
onPressed: _searchController.text.isNotEmpty ? _search : null,
|
||||
color: AppColor.neutral20,
|
||||
).paddingOnly(end: 6),
|
||||
).paddingOnly(top: 18, start: 18, end: 18),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 25,
|
||||
child: _searchableList.isEmpty
|
||||
? _isFirst
|
||||
? const SizedBox()
|
||||
: NoItemFound(message: context.translation.noDeviceFound)
|
||||
: LazyLoading(
|
||||
nextPage: _deviceProvider.nextPage,
|
||||
onLazyLoad: () async {
|
||||
if (_searchController.text.isNotEmpty) {
|
||||
await _deviceProvider.getAssets(search: search, isSearchBy: true);
|
||||
setState(() {
|
||||
_searchableList.clear();
|
||||
_searchableList.addAll(_deviceProvider.devices);
|
||||
});
|
||||
}
|
||||
},
|
||||
child: ListView.separated(
|
||||
itemCount: _searchableList.length,
|
||||
separatorBuilder: (listContext, itemIndex) => 8.height,
|
||||
itemBuilder: (listContext, itemIndex) {
|
||||
return AssetItemListView(
|
||||
device: _searchableList[itemIndex],
|
||||
onPressed: (device) {
|
||||
Navigator.of(context).pop();
|
||||
Navigator.of(context).pop(device);
|
||||
// showModalBottomSheet(
|
||||
// context: context,
|
||||
// isScrollControlled: true,
|
||||
// shape: const RoundedRectangleBorder(
|
||||
// borderRadius: BorderRadius.vertical(
|
||||
// top: Radius.circular(20),
|
||||
// ),
|
||||
// ),
|
||||
// clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
// builder: (BuildContext context) => AssetDetailBottomSheet(device),
|
||||
// );
|
||||
},
|
||||
);
|
||||
},
|
||||
).paddingOnly(start: 16, end: 16),
|
||||
),
|
||||
)
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
void _search() async {
|
||||
FocusScope.of(context).unfocus();
|
||||
_formKey.currentState.save();
|
||||
_deviceProvider.searchReset();
|
||||
showDialog(context: context, barrierDismissible: false, builder: (context) => const AppLazyLoading());
|
||||
await _deviceProvider.getAssets(search: search, isSearchBy: true);
|
||||
setState(() {
|
||||
_searchableList.clear();
|
||||
_searchableList.addAll(_deviceProvider.searchDevices);
|
||||
_isFirst = false;
|
||||
});
|
||||
Navigator.pop(context);
|
||||
}
|
||||
|
||||
_setValue(value) {
|
||||
/// todo : check oracle code and location (no matched parameter)
|
||||
switch (_selectedIndex) {
|
||||
case 0:
|
||||
search.assetName = value;
|
||||
break;
|
||||
case 1:
|
||||
search.assetNo = value;
|
||||
break;
|
||||
case 3:
|
||||
search.assetSerialNumber = value;
|
||||
break;
|
||||
case 4:
|
||||
search.model = value;
|
||||
break;
|
||||
case 5:
|
||||
search.supplier = value;
|
||||
break;
|
||||
case 6:
|
||||
search.site = value;
|
||||
break;
|
||||
case 7:
|
||||
search.manufacturer = value;
|
||||
break;
|
||||
case 8:
|
||||
search.modelDefinition = value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// bool _showResetButton() {
|
||||
// return (_searchController?.text?.isNotEmpty ?? false);
|
||||
// }
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
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 '../../new_views/app_style/app_color.dart';
|
||||
|
||||
class HorizontalListWidget extends StatefulWidget {
|
||||
const HorizontalListWidget({Key key, @required this.list,this.callBackFunction}) : super(key: key);
|
||||
final List<String> list;
|
||||
final Function(int index) callBackFunction;
|
||||
|
||||
@override
|
||||
State<HorizontalListWidget> createState() => _HorizontalListWidgetState();
|
||||
}
|
||||
|
||||
class _HorizontalListWidgetState extends State<HorizontalListWidget> {
|
||||
int _selectedIndex = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 35.toScreenHeight,
|
||||
child: ListView.builder(
|
||||
itemCount: widget.list.length,
|
||||
scrollDirection: Axis.horizontal,
|
||||
shrinkWrap: true,
|
||||
padding: EdgeInsetsDirectional.only(start: 16.toScreenWidth),
|
||||
itemBuilder: (context, index) => Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 4.toScreenWidth),
|
||||
padding: EdgeInsets.symmetric(horizontal: 20.toScreenWidth),
|
||||
alignment: Alignment.center,
|
||||
decoration: ShapeDecoration(
|
||||
color: _selectedIndex == index ? Colors.transparent : AppColor.selectedButtonColor(context),
|
||||
shape: RoundedRectangleBorder(
|
||||
side: _selectedIndex == index ? BorderSide(width: 2, color: (context.isDark ? AppColor.backgroundLight : AppColor.backgroundDark)) : BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
),
|
||||
child: (widget.list[index]).tinyFont(context).custom(color: AppColor.filterButtonTextColor(context)),
|
||||
).onPress(() {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
widget.callBackFunction?.call(index);
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue