psp_panel/src/app/shared/components/key-value.component/key-value.component.ts

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?: string | boolean | number;
  @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'
  );
}