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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import type { ProjectCardDto } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';

const route = useRoute();
const router = useRouter();
const isNew = computed(() => route.name === 'project-card-new');
const pageTitle = computed(() => (isNew.value ? 'کارت جدید' : 'ویرایش کارت'));

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const title = ref('');
const notes = ref('');
const cardId = ref('');

async function load() {
  if (isNew.value) return;
  const id = String(route.params.id || '');
  if (!id) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<ProjectCardDto>(`/project-cards/${id}`);
    cardId.value = data.id;
    title.value = data.title;
    notes.value = data.notes ?? '';
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری کارت ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function save() {
  if (title.value.trim().length < 2 || saving.value) return;
  saving.value = true;
  error.value = '';
  try {
    if (isNew.value) {
      const boardId =
        typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
      const { data } = await api.post<ProjectCardDto>('/project-cards', {
        title: title.value.trim(),
        notes: notes.value.trim() || undefined,
        boardId,
        personId:
          typeof route.query.personId === 'string' ? route.query.personId : undefined,
      });
      await router.replace({ name: 'project-card-detail', params: { id: data.id } });
    } else {
      await api.patch(`/project-cards/${cardId.value}`, {
        title: title.value.trim(),
        notes: notes.value.trim() || null,
      });
    }
  } catch {
    error.value = 'ذخیره کارت ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

async function removeCard() {
  if (isNew.value || !cardId.value) return;
  if (!confirm('کارت حذف شود؟')) return;
  try {
    await api.delete(`/project-cards/${cardId.value}`);
    await router.push({ name: 'projects' });
  } catch {
    error.value = 'حذف کارت ناموفق بود.';
  }
}

function cancel() {
  void router.push({ name: 'projects' });
}

onMounted(load);
</script>

<template>
  <section class="page">
    <header class="desktop-head">
      <div class="title-block">
        <span class="doc-ico"><UiIcon name="document" :size="22" /></span>
        <div>
          <h1>{{ pageTitle }}</h1>
          <p class="crumb">
            <RouterLink :to="{ name: 'projects' }">پروژه‌ها</RouterLink>
            <span>›</span>
            <strong>{{ pageTitle }}</strong>
          </p>
        </div>
      </div>
      <div class="desk-actions">
        <button
          class="btn primary"
          type="button"
          :disabled="saving || title.trim().length < 2"
          @click="save"
        >
          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
        </button>
        <button class="btn cancel" type="button" @click="cancel">انصراف</button>
        <button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
      </div>
    </header>

    <header class="mobile-head">
      <button
        class="icon-btn"
        type="button"
        aria-label="ذخیره"
        :disabled="saving || title.trim().length < 2"
        @click="save"
      >
        <UiIcon name="check-plain" :size="22" />
      </button>
      <h1>{{ pageTitle }}</h1>
      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
        <UiIcon name="x" :size="20" />
      </button>
    </header>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>

    <form v-else class="card" @submit.prevent="save">
      <div class="field">
        <label for="card-title">عنوان</label>
        <input id="card-title" v-model="title" type="text" required minlength="2" maxlength="200" />
      </div>
      <div class="field">
        <label for="card-notes">یادداشت</label>
        <textarea id="card-notes" v-model="notes" rows="5" maxlength="4000" />
      </div>
      <div class="mobile-actions">
        <button class="btn primary" type="submit" :disabled="saving || title.trim().length < 2">
          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
        </button>
        <button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
      </div>
    </form>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 0.85rem;
  max-width: 640px;
  min-width: 0;
  width: 100%;
}

.desktop-head {
  display: none;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.title-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.doc-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #0f766e;
}

h1 {
  margin: 0;
  font-size: 1.35rem;
}

.crumb {
  margin: 0.2rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.82rem;
}

.crumb a {
  color: #0f766e;
  font-weight: 700;
  text-decoration: none;
}

.desk-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mobile-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}

.mobile-head h1 {
  text-align: center;
  font-size: 1.05rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #0f766e;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.card {
  display: grid;
  gap: 0.85rem;
  background: #fff;
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 0 0.85rem;
  font: inherit;
  box-sizing: border-box;
}

textarea {
  min-height: 5.5rem;
  padding: 0.65rem 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--control-h);
  padding: 0 0.95rem;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.btn.primary {
  background: #14b8a6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
}

.btn.cancel {
  background: #fff;
  color: #64748b;
  border-color: #e2e8f0;
}

.btn.danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}

.mobile-actions {
  display: grid;
  gap: 0.5rem;
}

.error {
  color: #b91c1c;
  margin: 0;
}

.muted {
  color: #64748b;
  margin: 0;
}

@media (min-width: 960px) {
  .desktop-head {
    display: flex;
  }

  .mobile-head,
  .mobile-actions {
    display: none;
  }
}
</style>