tehran_taj/apps/admin-panel/src/views/branch/AddBranches.vue

<template>
  <!--
    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.)
  -->
  <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">
          <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>

        <a-button type="primary" @click="handleSubmit">ثبت اطلاعات</a-button>
      </a-card>
    </a-form>
  </a-spin>
</template>

<script setup lang="ts">
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 = asModal ? props.id : (route.params.id as string | undefined);
const loading = ref(false);
const adminUsers = ref<{ id: string; name: string }[]>([]);

const form = reactive<Record<string, any>>({
  name: '',
  phone: '',
  address: '',
  user_id: undefined,
});
const err = reactive<Record<string, string>>({});

function filterOption(input: string, option: any) {
  return String(option?.children?.[0]?.children ?? '').includes(input);
}

async function handleSubmit() {
  Object.keys(err).forEach((k) => delete err[k]);
  if (!form.name) {
    err.name = 'لطفا مقدار را وارد کنید';
    return;
  }
  try {
    loading.value = true;
    if (id) {
      await api.put(`branch/${id}`, form);
    } else {
      await api.post('branch', form);
    }
    message.info('اطلاعات با موفقیت به ثبت رسید.');
    if (!id) {
      Object.assign(form, { name: '', phone: '', address: '', user_id: undefined });
    }
    if (asModal) {
      emit('success');
      emit('update:open', false);
    } else {
      router.push('/branch/list');
    }
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  try {
    const { data } = await api.get('user/list');
    adminUsers.value = data;
  } catch (e) {
    console.log(e);
  }
  if (id) {
    try {
      const { data } = await api.get(`branch/${id}`);
      Object.assign(form, {
        name: data.name ?? '',
        phone: data.phone ?? '',
        address: data.address ?? '',
        user_id: data.user_id ?? undefined,
      });
    } catch (e) {
      console.log(e);
    }
  }
});
</script>

<!-- .grid-2 now comes from the global utilities.less (dedup) -->