import { Maybe } from '@/core'; import { formatDurationToText, formatJalali, JALALI_DATE_FORMATS } from '@/utils'; import priceMaskUtils from '@/utils/price-mask.utils'; import { CommonModule } from '@angular/common'; import { Component, computed, Input, signal } from '@angular/core'; import { Tag } from 'primeng/tag'; import { TDataType } from '../pageDataList/page-data-list.component'; @Component({ selector: 'app-key-value', standalone: true, imports: [CommonModule, Tag], templateUrl: './key-value.component.html', host: { class: 'w-full block', }, }) export class KeyValueComponent { @Input() label!: string; @Input() value?: Maybe; @Input() hint?: string; @Input() alignment?: 'start' | 'center' | 'end' = 'start'; @Input() type: TDataType = 'simple'; @Input() trueValueToShow?: string; @Input() falseValueToShow?: string; @Input() variant?: 'tag' | 'text'; tagSeverity = computed(() => (this.value ? 'success' : 'danger')); 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; case 'number': value = '0'; break; } } } } switch (this.type) { case 'simple': return this.value || '-----'; } return value; } valueType = computed(() => this.variant || ['boolean', 'has', 'active'].includes(this.type) ? 'tag' : 'text' ); }