Editing of the project's Kariz page

apps/web/src/views/ProjectCardFormView.vue

@@ -6,9 +6,28 @@ import { api } from '@/lib/api';
 import type { ProjectCardDto } from '@mento/shared';
 import UiIcon from '@/components/UiIcon.vue';
 
+const props = withDefaults(
+  defineProps<{
+    embedded?: boolean;
+    cardId?: string;
+    initialBoardId?: string;
+    initialStageId?: string;
+  }>(),
+  { embedded: false },
+);
+
+const emit = defineEmits<{
+  saved: [];
+  cancel: [];
+}>();
+
 const route = useRoute();
 const router = useRouter();
-const isNew = computed(() => route.name === 'project-card-new');
+const id = computed(() => {
+  if (props.embedded) return props.cardId ?? '';
+  return String(route.params.id || '');
+});
+const isNew = computed(() => (props.embedded ? !props.cardId : route.name === 'project-card-new'));
 const pageTitle = computed(() => (isNew.value ? 'کارت جدید' : 'ویرایش کارت'));
 
 const loading = ref(false);
@@ -16,17 +35,15 @@ 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;
+  const cardId = id.value;
+  if (!cardId) return;
   loading.value = true;
   error.value = '';
   try {
-    const { data } = await api.get<ProjectCardDto>(`/project-cards/${id}`);
-    cardId.value = data.id;
+    const { data } = await api.get<ProjectCardDto>(`/project-cards/${cardId}`);
     title.value = data.title;
     notes.value = data.notes ?? '';
   } catch (e) {
@@ -46,21 +63,33 @@ async function save() {
   error.value = '';
   try {
     if (isNew.value) {
-      const boardId =
-        typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
+      const boardId = props.embedded
+        ? props.initialBoardId
+        : 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,
+        stageId: props.embedded ? props.initialStageId : undefined,
         personId:
           typeof route.query.personId === 'string' ? route.query.personId : undefined,
       });
+      if (props.embedded) {
+        emit('saved');
+        return;
+      }
       await router.replace({ name: 'project-card-detail', params: { id: data.id } });
     } else {
-      await api.patch(`/project-cards/${cardId.value}`, {
+      await api.patch(`/project-cards/${id.value}`, {
         title: title.value.trim(),
         notes: notes.value.trim() || null,
       });
+      if (props.embedded) {
+        emit('saved');
+        return;
+      }
     }
   } catch {
     error.value = 'ذخیره کارت ناموفق بود.';
@@ -70,10 +99,14 @@ async function save() {
 }
 
 async function removeCard() {
-  if (isNew.value || !cardId.value) return;
+  if (isNew.value || !id.value) return;
   if (!confirm('کارت حذف شود؟')) return;
   try {
-    await api.delete(`/project-cards/${cardId.value}`);
+    await api.delete(`/project-cards/${id.value}`);
+    if (props.embedded) {
+      emit('saved');
+      return;
+    }
     await router.push({ name: 'projects' });
   } catch {
     error.value = 'حذف کارت ناموفق بود.';
@@ -81,6 +114,10 @@ async function removeCard() {
 }
 
 function cancel() {
+  if (props.embedded) {
+    emit('cancel');
+    return;
+  }
   void router.push({ name: 'projects' });
 }
 
@@ -88,8 +125,20 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <header class="desktop-head">
+  <section class="page" :class="{ embedded }">
+    <div v-if="embedded" class="embed-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 v-if="!embedded" class="desktop-head">
       <div class="title-block">
         <span class="doc-ico"><UiIcon name="document" :size="22" /></span>
         <div>
@@ -115,7 +164,7 @@ onMounted(load);
       </div>
     </header>
 
-    <header class="mobile-head">
+    <header v-if="!embedded" class="mobile-head">
       <button
         class="icon-btn"
         type="button"
@@ -143,7 +192,7 @@ onMounted(load);
         <label for="card-notes">یادداشت</label>
         <textarea id="card-notes" v-model="notes" rows="5" maxlength="4000" />
       </div>
-      <div class="mobile-actions">
+      <div v-if="!embedded" class="mobile-actions">
         <button class="btn primary" type="submit" :disabled="saving || title.trim().length < 2">
           {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
         </button>
@@ -162,6 +211,16 @@ onMounted(load);
   width: 100%;
 }
 
+.page.embedded {
+  max-width: none;
+}
+
+.embed-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 .desktop-head {
   display: none;
   justify-content: space-between;