Add receipt customization feature with multiple templates and drag-and-drop component editor

assets/l10n/en/printer.yaml

@@ -110,6 +110,54 @@ receipt:
   paid: Paid
   price: Price
   change: Change
+  editor:
+    title: Customize Receipt
+    empty: No receipt templates yet
+    createFirst: Create First Template
+  template:
+    title:
+      create: Create Receipt Template
+      update: Edit Receipt Template
+    name:
+      label: Template Name
+      errorRepeat: Template name already exists
+    toDefault:
+      label: Enable This Template
+      helper: Only one template can be enabled at a time
+      confirmChangeTitle: Change Default Template?
+      confirmChangeContent: This will disable the current default template "{name}". Continue?
+    editComponents: Edit Components
+  component:
+    count:
+    - =1: '{count} component'
+      other: '{count} components'
+    - count: {type: int, mode: plural, format: compactLong}
+    addTitle: Add Component
+    orderTable: Order Table
+    textField: Text Field
+    divider: Divider
+    timestamp: Order Timestamp
+    orderId: Order ID
+    totalSection: Total Section
+    paymentSection: Payment Section
+    text: Text
+    fontSize: Font Size
+    height: Height
+    alignment: Alignment
+    alignLeft: Left
+    alignCenter: Center
+    alignRight: Right
+    dateFormat: Date Format
+    dateFormatFull: Full (Date & Time)
+    dateFormatDate: Date Only
+    dateFormatTime: Time Only
+    showProductName: Show Product Name
+    showCatalogName: Show Catalog Name
+    orderIdDesc: Display order identifier
+    paymentDesc: Show payment details
+  editorReset: Reset
+  editorResetTitle: Reset to Default?
+  editorResetContent: This will restore the default component layout. All customizations will be lost.
 info:
   title: Printer Information
   name: Name

assets/l10n/zh/printer.yaml

@@ -101,6 +101,54 @@ receipt:
   paid: 付額
   price: 總價
   change: 找錢
+  editor:
+    title: 自訂收據格式
+    empty: 尚無收據範本
+    createFirst: 建立第一個範本
+  template:
+    title:
+      create: 建立收據範本
+      update: 編輯收據範本
+    name:
+      label: 範本名稱
+      errorRepeat: 範本名稱已存在
+    toDefault:
+      label: 啟用此範本
+      helper: 一次只能啟用一個範本
+      confirmChangeTitle: 變更預設範本？
+      confirmChangeContent: 這將停用目前的預設範本「{name}」。繼續？
+    editComponents: 編輯元件
+  component:
+    count:
+    - =1: '{count} 個元件'
+      other: '{count} 個元件'
+    - count: {type: int, mode: plural, format: compactLong}
+    addTitle: 新增元件
+    orderTable: 訂單表格
+    textField: 文字欄位
+    divider: 分隔線
+    timestamp: 訂單時間戳記
+    orderId: 訂單編號
+    totalSection: 總計區塊
+    paymentSection: 付款區塊
+    text: 文字
+    fontSize: 字型大小
+    height: 高度
+    alignment: 對齊方式
+    alignLeft: 靠左
+    alignCenter: 置中
+    alignRight: 靠右
+    dateFormat: 日期格式
+    dateFormatFull: 完整（日期與時間）
+    dateFormatDate: 僅日期
+    dateFormatTime: 僅時間
+    showProductName: 顯示產品名稱
+    showCatalogName: 顯示目錄名稱
+    orderIdDesc: 顯示訂單識別碼
+    paymentDesc: 顯示付款詳情
+  editorReset: 重置
+  editorResetTitle: 重置為預設？
+  editorResetContent: 這將恢復預設的元件佈局。所有自訂設定將會遺失。
 info:
   title: 出單機資訊
   name: 名稱

lib/main.dart

@@ -20,6 +20,7 @@ import 'models/repository/cashier.dart';
 import 'models/repository/menu.dart';
 import 'models/repository/order_attributes.dart';
 import 'models/repository/quantities.dart';
+import 'models/repository/receipt_templates.dart';
 import 'models/repository/replenisher.dart';
 import 'models/repository/seller.dart';
 import 'models/repository/stock.dart';
@@ -65,6 +66,7 @@ void main() async {
       await Stock().initialize();
       await Quantities().initialize();
       await OrderAttributes().initialize();
+      await ReceiptTemplates().initialize();
       await Replenisher().initialize();
       await Cashier().reset();
       await Analysis().initialize();
@@ -86,6 +88,7 @@ void main() async {
           ChangeNotifierProvider.value(value: Cashier.instance),
           ChangeNotifierProvider.value(value: Cart.instance),
           ChangeNotifierProvider.value(value: Printers.instance),
+          ChangeNotifierProvider.value(value: ReceiptTemplates.instance),
         ],
         child: const App(),
       ));

lib/models/objects/receipt_template_object.dart

@@ -0,0 +1,57 @@
+import 'package:possystem/models/model_object.dart';
+import 'package:possystem/models/receipt_component.dart';
+import 'package:possystem/models/repository/receipt_templates.dart';
+
+class ReceiptTemplateObject extends ModelObject<ReceiptTemplate> {
+  final String? id;
+  final String? name;
+  final bool? isDefault;
+  final List<ReceiptComponent>? components;
+
+  ReceiptTemplateObject({
+    this.id,
+    this.name,
+    this.isDefault,
+    this.components,
+  });
+
+  @override
+  Map<String, Object> toMap() {
+    return {
+      'name': name!,
+      'isDefault': isDefault!,
+      'components': components!.map((c) => c.toJson()).toList(),
+    };
+  }
+
+  @override
+  Map<String, Object> diff(ReceiptTemplate model) {
+    final result = <String, Object>{};
+    final prefix = model.prefix;
+
+    if (name != null && name != model.name) {
+      model.name = name!;
+      result['$prefix.name'] = name!;
+    }
+    if (isDefault != null && isDefault != model.isDefault) {
+      model.isDefault = isDefault!;
+      result['$prefix.isDefault'] = isDefault!;
+    }
+    if (components != null) {
+      model.components = components!;
+      result['$prefix.components'] = components!.map((c) => c.toJson()).toList();
+    }
+
+    return result;
+  }
+
+  factory ReceiptTemplateObject.build(Map<String, Object?> data) {
+    final componentsList = data['components'] as List?;
+    return ReceiptTemplateObject(
+      id: data['id'] as String,
+      name: data['name'] as String,
+      isDefault: data['isDefault'] as bool,
+      components: componentsList?.map((e) => ReceiptComponent.fromJson(e as Map<String, Object?>)).toList(),
+    );
+  }
+}