CRM_Montzar/apps/web/src/views/AttachmentsView.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { formatJalaliNumeric } from '@/lib/jalali';
import type { NoteAttachmentDto, NoteDto, PaginatedResponse } from '@mento/shared';

type Row = NoteAttachmentDto & {
  noteId: string;
  noteTitle: string;
};

const loading = ref(false);
const error = ref('');
const items = ref<Row[]>([]);

function sizeLabel(bytes: number) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<PaginatedResponse<NoteDto>>('/notes', {
      params: { limit: 100 },
    });
    items.value = data.items.flatMap((note) =>
      (note.attachments ?? []).map((att) => ({
        ...att,
        noteId: note.id,
        noteTitle: note.title?.trim() || note.body.slice(0, 40) || 'یادداشت',
      })),
    );
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? 'بارگذاری پیوست‌ها ناموفق بود.'
      : 'بارگذاری پیوست‌ها ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

async function download(row: Row) {
  const { data } = await api.get<Blob>(
    `/notes/${row.noteId}/attachments/${row.id}/download`,
    { responseType: 'blob' },
  );
  const url = URL.createObjectURL(data);
  const a = document.createElement('a');
  a.href = url;
  a.download = row.fileName;
  a.click();
  URL.revokeObjectURL(url);
}

onMounted(load);
</script>

<template>
  <section class="page" dir="rtl">
    <header class="head">
      <div>
        <h1>پیوست‌ها</h1>
        <p class="sub">فایل‌های پیوست‌شده به یادداشت‌ها</p>
      </div>
    </header>
    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
    <p v-else-if="!items.length" class="muted">پیوستی ثبت نشده.</p>
    <div v-else class="table-wrap">
      <div class="tc-row">
        <TableColumnsMenu table-key="attachments" align="end" />
      </div>
      <table v-table-cols="'attachments'">
        <thead>
          <tr>
            <th>نام فایل</th>
            <th>یادداشت</th>
            <th>حجم</th>
            <th>تاریخ</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in items" :key="`${row.noteId}-${row.id}`">
            <td>{{ row.fileName }}</td>
            <td>
              <RouterLink :to="{ name: 'notes' }">
                {{ row.noteTitle }}
              </RouterLink>
            </td>
            <td>{{ sizeLabel(row.sizeBytes) }}</td>
            <td>{{ formatJalaliNumeric(new Date(row.createdAt)) }}</td>
            <td>
              <button type="button" @click="download(row)">دانلود</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>

<style scoped>
.page { display: grid; gap: 1rem; }
h1 { margin: 0; font-size: 1.25rem; }
.sub, .muted { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
.error { color: var(--danger, #dc2626); font-weight: 600; }
.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; text-align: right; }
th { background: #f8fafc; color: #64748b; font-size: 0.82rem; }
a { color: #0f766e; font-weight: 700; }
button {
  min-height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 0.75rem; background: #fff; cursor: pointer; font: inherit;
}
</style>