Editing of the project's Kariz page

apps/web/src/components/pipeline/DealCard.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
-import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
-import { formatCurrencyParts, PIPELINE_ACCENT } from '@/lib/pipeline-board';
+import type { PipelineAccent, PipelineDeal, PipelineUiCopy } from '@/lib/pipeline-board';
+import {
+  DEAL_BOARD_COPY,
+  formatCurrencyParts,
+  PIPELINE_ACCENT,
+} from '@/lib/pipeline-board';
 
-const props = defineProps<{
-  deal: PipelineDeal;
-  accent: PipelineAccent;
-  dragging?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    deal: PipelineDeal;
+    accent: PipelineAccent;
+    dragging?: boolean;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
@@ -17,8 +25,11 @@ const emit = defineEmits<{
   menu: [dealId: string];
 }>();
 
+const showAmount = computed(
+  () => !props.copy.hideAmount && props.deal.amount != null,
+);
 const money = computed(() =>
-  formatCurrencyParts(props.deal.amount, props.deal.currencyUnit ?? 'تومان'),
+  formatCurrencyParts(props.deal.amount ?? 0, props.deal.currencyUnit ?? 'تومان'),
 );
 const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 </script>
@@ -26,7 +37,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 <template>
   <article
     class="deal-card"
-    :class="{ dragging }"
+    :class="{ dragging, 'no-amount': !showAmount }"
     draggable="true"
     role="listitem"
     :aria-grabbed="dragging ? 'true' : 'false'"
@@ -46,7 +57,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
     <button
       type="button"
       class="menu"
-      aria-label="گزینه‌های معامله"
+      :aria-label="copy.itemMenuAria"
       @click.stop="emit('menu', deal.id)"
     >
       <UiIcon name="dots-v" :size="16" />
@@ -62,7 +73,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
       {{ deal.date }}
       <UiIcon name="calendar" :size="13" />
     </span>
-    <div class="amount">
+    <div v-if="showAmount" class="amount">
       <strong>{{ money.number }}</strong>
       <span>{{ money.unit }}</span>
     </div>
@@ -111,6 +122,10 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
 }
 
+.deal-card.no-amount .date {
+  grid-column: 2 / -1;
+}
+
 .deal-card:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;