You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cloudsolutions-atoms/lib/views/widgets/equipment/asset_detail_page.dart

327 lines
14 KiB
Dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/api_routes/urls.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/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/device/asset_by_id_model.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/views/widgets/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.dart';
import 'package:test_sa/views/widgets/loaders/app_loading.dart';
import 'package:test_sa/views/widgets/loaders/failed_loading.dart';
import '../../../new_views/app_style/app_color.dart';
import '../requests/request_status.dart';
class AssetDetailPage extends StatefulWidget {
static const String id = "/asset-details";
const AssetDetailPage({Key? key}) : super(key: key);
@override
_AssetDetailPageState createState() {
return _AssetDetailPageState();
}
}
class _AssetDetailPageState extends State<AssetDetailPage> with SingleTickerProviderStateMixin {
late AnimationController _animationController;
int? assetId;
AssetProvider? _assetProvider;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 1400),
vsync: this,
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
assetId ??= ModalRoute.of(context)?.settings.arguments as int;
_assetProvider ??= Provider.of<AssetProvider>(context, listen: false);
_assetProvider?.stateCode = null;
return Scaffold(
appBar: DefaultAppBar(title: context.translation.assetDetails),
body: FutureBuilder<AssetByIdModel>(
future: _assetProvider!.getAssetById(assetId!, context.translation),
builder: (BuildContext context, AsyncSnapshot<AssetByIdModel> snapshot) {
if (snapshot.hasError) {
return FailedLoading(
message: snapshot.error.toString(),
onReload: () {
setState(() {});
},
);
}
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: ALoading());
} else if (snapshot.hasData) {}
if (snapshot.hasData) {
AssetByIdModel assetModel = snapshot.data!;
// Start animation when data is loaded
_animationController.forward(from: 0.0);
// Image animation - fade in with scale
final imageAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.4, curve: Curves.easeOut),
),
);
final imageScaleAnimation = Tween<double>(begin: 0.92, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.4, curve: Curves.easeOutCubic),
),
);
// Status label animation
final statusAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.15, 0.5, curve: Curves.easeOut),
),
);
final statusSlideAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.2),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.15, 0.5, curve: Curves.easeOutCubic),
),
);
// Header animation
final headerAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.25, 0.6, curve: Curves.easeOut),
),
);
final headerSlideAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.2),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.25, 0.6, curve: Curves.easeOutCubic),
),
);
// Details row animation
final detailsAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.35, 0.75, curve: Curves.easeOut),
),
);
final detailsSlideAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.15),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.35, 0.75, curve: Curves.easeOutCubic),
),
);
// Dates section animation
final datesAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.50, 0.9, curve: Curves.easeOut),
),
);
final datesSlideAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.15),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.50, 0.9, curve: Curves.easeOutCubic),
),
);
// Description animation (if exists)
final descAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.65, 1.0, curve: Curves.easeOut),
),
);
final descSlideAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.1),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.65, 1.0, curve: Curves.easeOutCubic),
),
);
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Animated image
FadeTransition(
opacity: imageAnimation,
child: ScaleTransition(
scale: imageScaleAnimation,
child: AspectRatio(
aspectRatio: 159 / 94,
child: Container(
width: 95,
height: 95,
decoration: ShapeDecoration(
color: AppColor.neutral30,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(assetModel.assetPhoto != null ? URLs.getFileUrl(assetModel.assetPhoto!)! : "https://www.lasteelcraft.com/images/no-image-available.png"),
)),
),
),
),
),
6.height,
// Animated content column
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Status label with animation
if (assetModel.commissioningStatus != null)
FadeTransition(
opacity: statusAnimation,
child: SlideTransition(
position: statusSlideAnimation,
child: StatusLabel(
label: assetModel.commissioningStatus!.name,
textColor: AppColor.getRequestStatusTextColorByName(context, assetModel.commissioningStatus!.name!),
backgroundColor: AppColor.getRequestStatusColorByName(context, assetModel.commissioningStatus!.name!),
),
),
),
if (assetModel.commissioningStatus != null) 8.height,
// Header with animation
FadeTransition(
opacity: headerAnimation,
child: SlideTransition(
position: headerSlideAnimation,
child: InfoHeader16Widget(assetModel.modelDefinition?.assetName?.cleanupWhitespace.capitalizeFirstOfEach ?? "-"),
),
),
8.height,
// Details row with animation
FadeTransition(
opacity: detailsAnimation,
child: SlideTransition(
position: detailsSlideAnimation,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InfoTextWidget(label: context.translation.assetNo, value: assetModel.multiAssets!.first.assetNumber, showEmptyValue: true),
InfoTextWidget(label: context.translation.modelName, value: assetModel.modelDefinition!.modelName, showEmptyValue: true),
InfoTextWidget(label: context.translation.supplier, value: assetModel.supplier?.suppliername, showEmptyValue: true),
InfoTextWidget(label: context.translation.manufacture, value: assetModel.modelDefinition!.manufacturerName, showEmptyValue: true),
],
).expanded,
8.width,
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InfoTextWidget(label: context.translation.snNo, value: assetModel.multiAssets!.first.assetSerialNo, showEmptyValue: true),
InfoTextWidget(label: context.translation.site, value: assetModel.site?.custName?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
InfoTextWidget(label: context.translation.building, value: assetModel.building?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
InfoTextWidget(label: context.translation.floor, value: assetModel.floor?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
InfoTextWidget(label: context.translation.md, value: assetModel.department?.departmentName?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
InfoTextWidget(label: context.translation.room, value: assetModel.room?.name?.cleanupWhitespace.capitalizeFirstOfEach, showEmptyValue: true),
],
).expanded,
],
),
),
),
8.height,
// Divider with animation
FadeTransition(
opacity: datesAnimation,
child: const Divider(color: AppColor.neutral30, height: 1, thickness: 1),
),
8.height,
// Dates section with animation
FadeTransition(
opacity: datesAnimation,
child: SlideTransition(
position: datesSlideAnimation,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InfoTextWidget(label: context.translation.installationDate, value: assetModel.installationDate?.toAssetDetailsFormat, showEmptyValue: true),
InfoTextWidget(label: context.translation.nextPmDate, value: assetModel.nextPMDate?.toAssetDetailsFormat, showEmptyValue: true),
InfoTextWidget(label: context.translation.lastPmDate, value: assetModel.lastPMDate?.toAssetDetailsFormat, showEmptyValue: true),
],
),
),
),
// Description with animation (if exists)
if ((assetModel.modelDefinition?.assetDescription ?? "").isNotEmpty) ...[
8.height,
FadeTransition(
opacity: descAnimation,
child: const Divider().defaultStyle(context),
),
FadeTransition(
opacity: descAnimation,
child: SlideTransition(
position: descSlideAnimation,
child: InfoTextWidget(label: assetModel.modelDefinition!.assetDescription!, showEmptyValue: true, isMsg: true),
),
),
]
],
)
],
).toShadowContainer(context),
);
}
return const Center(child: ALoading());
},
),
);
}
}