update pos consumer

2026-03-29 18:07:10 +03:30
parent 1e2f94261e
commit c10623bc3f
86 changed files with 2935 additions and 385 deletions
@@ -1,6 +1,17 @@
-<div class="inline-flex gap-2 items-center w-full">
-  <span class="text-muted-color text-base font-normal shrink-0">{{ label }}:</span>
-  <ng-content>
-    <span class="text-text-color text-base font-bold grow">{{ value || "-" }}</span>
-  </ng-content>
+<div class="inline-flex flex-col gap-1 w-full">
+  <div class="inline-flex gap-2 items-center w-full">
+    <span class="text-muted-color text-base font-normal flex-auto grow-0">{{ label }}:</span>
+    <div class="shrink-0 grow">
+      <ng-content>
+        @if (valueType() === "badge") {
+          <p-badge [value]="valueToShow()?.toString()" [severity]="value ? 'success' : 'danger'" />
+        } @else {
+          <span class="text-text-color text-base font-bold grow"> {{ valueToShow() }}</span>
+        }
+      </ng-content>
+    </div>
+  </div>
+  @if (hint) {
+    <span class="text-muted-color text-sm font-normal">{{ hint }}</span>
+  }
 </div>
@@ -1,10 +1,13 @@
+import { formatDurationToText, formatJalali, JALALI_DATE_FORMATS } from '@/utils';
+import priceMaskUtils from '@/utils/price-mask.utils';
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
+import { Badge } from 'primeng/badge';

@Component({
  selector: 'app-key-value',
  standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, Badge],
  templateUrl: './key-value.component.html',
  host: {
    class: 'w-full block',
@@ -12,5 +15,86 @@ import { Component, Input } from '@angular/core';
 })
 export class KeyValueComponent {
  @Input() label!: string;
-  @Input() value?: string = '-';
+  @Input() value?: string | boolean | number;
+  @Input() hint?: string;
+  @Input() type:
+    | 'price'
+    | 'active'
+    | 'boolean'
+    | 'has'
+    | 'date'
+    | 'dateTime'
+    | 'duration'
+    | 'simple' = 'simple';
+  @Input() trueValueToShow?: string;
+  @Input() falseValueToShow?: string;
+  @Input() variant?: 'badge' | 'text';
+
+  valueToShow = signal(this.setValueToShow());
+
+  ngOnChanges() {
+    this.valueToShow.set(this.setValueToShow());
+  }
+
+  setValueToShow() {
+    let value = this.value;
+    if (this.type !== 'simple') {
+      if (this.value) {
+        if (this.trueValueToShow) {
+          value = this.trueValueToShow;
+        } else {
+          switch (this.type) {
+            case 'date':
+              if (typeof this.value === 'boolean') return '-';
+
+              // @ts-ignore
+              return formatJalali(this.value);
+            case 'dateTime':
+              if (typeof this.value === 'boolean') return '-';
+              // @ts-ignore
+
+              return formatJalali(this.value, JALALI_DATE_FORMATS.NUMERIC_WITH_TIME);
+            case 'duration':
+              return formatDurationToText(this.value as string);
+            case 'price':
+              return priceMaskUtils.formatWithCurrency(this.value as number);
+            case 'active':
+              value = 'فعال';
+              break;
+            case 'boolean':
+              value = 'بله';
+              break;
+            case 'has':
+              value = 'دارد';
+              break;
+          }
+        }
+      } else {
+        if (this.falseValueToShow) {
+          value = this.falseValueToShow;
+        } else {
+          switch (this.type) {
+            case 'active':
+              value = 'غیر فعال';
+              break;
+            case 'boolean':
+              value = 'خیر';
+              break;
+            case 'has':
+              value = 'ندارد';
+              break;
+          }
+        }
+      }
+    }
+    switch (this.type) {
+      case 'simple':
+        return this.value || '';
+    }
+    return value;
+  }
+
+  valueType = computed(() =>
+    this.variant || ['boolean', 'has', 'active'].includes(this.type) ? 'badge' : 'text',
+  );
 }