From 12c8195090e42ecef71b8f206096ef9cee822fa4 Mon Sep 17 00:00:00 2001
From: "s.esmaeili" <s.esmaeili@feep.ir>
Date: Mon, 14 Sep 2026 15:22:54 +0330
Subject: [PATCH] admin-panel: convert city create form into a modal (pilot)

Establishes the pattern the remaining 15 add/edit forms will follow:
- The form component accepts open?/id? props. When open is defined it's
  used as-is; asModal is fixed at mount (not reactive) since the parent
  decides once whether this instance is a modal or a route page.
- As a modal it renders through BaseFormModal (header=title, footer=
  buttons, body=form) and emits success + update:open instead of
  navigating; as a route page (the old /city/create still exists and still
  works) it falls back to the original <a-card> + button layout unchanged.
- The list page gets a ListPageHeader add button above the list, gated on
  the exact rid the route used to gate on (cities.create), opening the
  modal instead of navigating.

Verified: pnpm build passes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/admin-panel/src/views/city/cityList.vue  |  7 +++
 .../admin-panel/src/views/city/createCity.vue | 59 +++++++++++++++++--
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/apps/admin-panel/src/views/city/cityList.vue b/apps/admin-panel/src/views/city/cityList.vue
index af4dec1..7c36a28 100644
--- a/apps/admin-panel/src/views/city/cityList.vue
+++ b/apps/admin-panel/src/views/city/cityList.vue
@@ -6,6 +6,8 @@
   -->
   <div id="page-user-list">
     <a-card title="لیست شهر ها">
+      <ListPageHeader rid="cities.create" add-label="افزودن شهر" @add="addOpen = true" />
+
       <XTable ref="citiesTable" :model="model">
         <template #percent="{ text }">
           {{ text ?? '-' }}
@@ -47,6 +49,8 @@
           </a-form-item>
         </a-form>
       </a-modal>
+
+      <CreateCity :open="addOpen" @update:open="addOpen = $event" @success="citiesTable?.fetch()" />
     </a-card>
   </div>
 </template>
@@ -56,6 +60,8 @@ import { reactive, ref } from 'vue';
 import { message } from 'ant-design-vue';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import XTable from '../../components/x-table/XTable.vue';
+import ListPageHeader from '../../components/common/ListPageHeader.vue';
+import CreateCity from './createCity.vue';
 import { buildCityListModel } from './CityListModel';
 import { useUsersStore } from '../../stores/users';
 import { useDeleteHandler } from '../../composables/useDeleteHandler';
@@ -66,6 +72,7 @@ const hasPermission = (rid: string) => Boolean(users.hasPermission(rid));
 
 const model = buildCityListModel();
 const citiesTable = ref<{ fetch: () => Promise<void> } | null>(null);
+const addOpen = ref(false);
 const visible = ref(false);
 const tempRow = ref<Record<string, any> | undefined>(undefined);
 const form = reactive<Record<string, any>>({ title: '', percent: null, percent_aux: null });
diff --git a/apps/admin-panel/src/views/city/createCity.vue b/apps/admin-panel/src/views/city/createCity.vue
index 4614569..3aa6efa 100644
--- a/apps/admin-panel/src/views/city/createCity.vue
+++ b/apps/admin-panel/src/views/city/createCity.vue
@@ -1,6 +1,35 @@
 <template>
-  <!-- Ported from legacy henza_admin/src/views/city/createCity.vue. -->
-  <a-spin :spinning="loading">
+  <!--
+    Ported from legacy henza_admin/src/views/city/createCity.vue.
+    Converted from a standalone page to a modal (BaseFormModal): the /city/create
+    route still exists and still renders this component directly for a route-based
+    fallback (a-form as a plain page), but cityList.vue now opens it as a modal via
+    the `open`/`id` props instead of navigating.
+  -->
+  <BaseFormModal
+    v-if="asModal"
+    :open="Boolean(open)"
+    :id="id"
+    add-title="افزودن شهر"
+    edit-title="افزودن شهر"
+    :loading="loading"
+    :submitting="loading"
+    width="sm"
+    @update:open="$emit('update:open', $event)"
+    @submit="handleSubmit"
+  >
+    <div class="grid-2">
+      <a-form-item label="نام شهر" :validate-status="err.title ? 'error' : ''" :help="err.title">
+        <a-input v-model:value="form.title" />
+      </a-form-item>
+      <a-form-item label="استان">
+        <a-input v-model:value="form.province" />
+      </a-form-item>
+    </div>
+  </BaseFormModal>
+
+  <!-- route-based fallback for direct links to /city/create -->
+  <a-spin v-else :spinning="loading">
     <a-form layout="vertical" @submit.prevent="handleSubmit">
       <a-card title="افزودن شهر">
         <div class="grid-2">
@@ -19,11 +48,28 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
+import BaseFormModal from '../../components/common/BaseFormModal.vue';
 import api from '../../api/client';
 
+const props = defineProps<{
+  /** Present -> rendered as a modal by the parent list page. */
+  open?: boolean;
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+  (e: 'success'): void;
+}>();
+
+// `asModal` is fixed at mount: the parent decides which way this component is
+// used (modal vs the plain /city/create route) by passing `open` or not.
+const asModal = props.open !== undefined;
+
+const route = useRoute();
 const router = useRouter();
+
 const loading = ref(false);
 const form = reactive<Record<string, any>>({ title: '', province: '' });
 const err = reactive<Record<string, string>>({});
@@ -38,7 +84,12 @@ async function handleSubmit() {
     loading.value = true;
     await api.post('cities', form);
     message.info('اطلاعات با موفقیت به ثبت رسید.');
-    router.push('/city/list');
+    if (asModal) {
+      emit('success');
+      emit('update:open', false);
+    } else {
+      router.push('/city/list');
+    }
   } catch (e: any) {
     message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
   } finally {