admin-panel: convert branch and workshop add/edit forms into modals

Both share FacilityList.vue, which now accepts an addRid/addLabel pair and a
#form slot: when addRid is supplied, edit opens the slot's modal instead of
navigating, and a ListPageHeader add button appears above the list. Branch
and workshop each plug their own AddBranches/AddWorkshop instance into that
slot, keyed by editingId so switching rows remounts the form (fresh
onMounted load) rather than needing new watch-based reactivity.

The /branch/add, /branch/edit/:id, /workshop/add, /workshop/edit/:id routes
are unchanged and still work as a route-based fallback.

Verified: pnpm build passes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
s.esmaeili
2026-09-14 16:46:14 +03:30
co-authored by Claude Sonnet 5
parent 12c8195090
commit 1ac3b03ad5
5 changed files with 195 additions and 11 deletions
@@ -2,11 +2,55 @@
<!--
Ported from legacy henza_admin/src/views/branch/AddBranches.vue.
Serves BOTH create and edit — EditBranches.vue is a wrapper over it.
Converted to a modal (BaseFormModal): the /branch/add and /branch/edit/:id
routes still exist and still render this component directly as a route-based
fallback, but ListBranches.vue now opens it as a modal via open/id props.
A branch's manager is an EXISTING admin picked from user/list. (The workshop
form differs: it creates its supervisor inline — see AddWorkshop.vue.)
-->
<a-spin :spinning="loading">
<BaseFormModal
v-if="asModal"
:open="Boolean(open)"
:id="id"
add-title="افزودن شعبه"
edit-title="ویرایش شعبه"
:loading="loading"
:submitting="loading"
@update:open="$emit('update:open', $event)"
@submit="handleSubmit"
>
<div class="grid-2">
<a-form-item label="نام شعبه" :validate-status="err.name ? 'error' : ''" :help="err.name">
<a-input v-model:value="form.name" />
</a-form-item>
<a-form-item label="تلفن شعبه">
<a-input v-model:value="form.phone" />
</a-form-item>
<a-form-item label="مدیر">
<a-select
v-model:value="form.user_id"
show-search
allow-clear
placeholder="انتخاب کنید"
:filter-option="filterOption"
>
<a-select-option v-for="u in adminUsers" :key="u.id" :value="u.id">
{{ u.name }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<a-form-item label="آدرس">
<a-textarea v-model:value="form.address" :auto-size="{ minRows: 2, maxRows: 5 }" />
</a-form-item>
</BaseFormModal>
<!-- route-based fallback for direct links to /branch/add and /branch/edit/:id -->
<a-spin v-else :spinning="loading">
<a-form layout="vertical" @submit.prevent="handleSubmit">
<a-card :title="id ? 'ویرایش شعبه' : 'افزودن شعبه'" class="mb-base">
<div class="grid-2">
@@ -47,12 +91,27 @@
import { onMounted, reactive, ref } from 'vue';
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;
}>();
// Fixed at mount: the parent decides once whether this instance is a modal
// or the plain /branch/add or /branch/edit/:id route.
const asModal = props.open !== undefined;
const route = useRoute();
const router = useRouter();
const id = route.params.id as string | undefined;
const id = asModal ? props.id : (route.params.id as string | undefined);
const loading = ref(false);
const adminUsers = ref<{ id: string; name: string }[]>([]);
@@ -82,7 +141,12 @@ async function handleSubmit() {
await api.post('branch', form);
}
message.info('اطلاعات با موفقیت به ثبت رسید.');
router.push('/branch/list');
if (asModal) {
emit('success');
emit('update:open', false);
} else {
router.push('/branch/list');
}
} catch (e: any) {
message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
} finally {