hedena_gold/apps/admin-panel/src/views/user/UserCreate.vue

<template>
  <!--
    Ported from legacy henza_admin/src/views/user/UserCreate.vue.
    Serves BOTH create and edit — UserEdit.vue is only a wrapper around it.
    Converted to a modal (BaseFormModal): the /user/create and /user/edit/:id
    routes still exist and still render this component directly as a
    route-based fallback, but ListUser.vue now opens it as a modal via
    open/id props.

    Legacy fields: fname, lname, mobile, ut, password, password_confirmation.
    The schema stores one `fullName`, so the two name inputs are joined on submit
    and split back on load.
  -->
  <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-3">
      <a-form-item label="نام" :validate-status="err.fname ? 'error' : ''" :help="err.fname">
        <a-input v-model:value="form.fname" />
      </a-form-item>

      <a-form-item
        label="نام خانوادگی"
        :validate-status="err.lname ? 'error' : ''"
        :help="err.lname"
      >
        <a-input v-model:value="form.lname" />
      </a-form-item>

      <a-form-item
        label="شماره موبایل"
        :validate-status="err.mobile ? 'error' : ''"
        :help="err.mobile"
      >
        <a-input v-model:value="form.mobile" />
      </a-form-item>

      <a-form-item label="نوع کاربری" :validate-status="err.ut ? 'error' : ''" :help="err.ut">
        <a-select v-model:value="form.ut" allow-clear placeholder="انتخاب کنید">
          <a-select-option v-for="t in userTypes" :key="t.id" :value="t.id">
            {{ t.title }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="رمز عبور"
        :validate-status="err.password ? 'error' : ''"
        :help="err.password"
      >
        <a-input-password v-model:value="form.password" />
      </a-form-item>

      <a-form-item
        label="تأیید رمز عبور"
        :validate-status="err.password_confirmation ? 'error' : ''"
        :help="err.password_confirmation"
      >
        <a-input-password v-model:value="form.password_confirmation" />
      </a-form-item>
    </div>

    <p v-if="id" class="hint">برای تغییر ندادن رمز عبور، هر دو فیلد رمز را خالی بگذارید.</p>
  </BaseFormModal>

  <!-- route-based fallback for direct links to /user/create and /user/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-3">
          <a-form-item label="نام" :validate-status="err.fname ? 'error' : ''" :help="err.fname">
            <a-input v-model:value="form.fname" />
          </a-form-item>

          <a-form-item
            label="نام خانوادگی"
            :validate-status="err.lname ? 'error' : ''"
            :help="err.lname"
          >
            <a-input v-model:value="form.lname" />
          </a-form-item>

          <a-form-item
            label="شماره موبایل"
            :validate-status="err.mobile ? 'error' : ''"
            :help="err.mobile"
          >
            <a-input v-model:value="form.mobile" />
          </a-form-item>

          <a-form-item label="نوع کاربری" :validate-status="err.ut ? 'error' : ''" :help="err.ut">
            <a-select v-model:value="form.ut" allow-clear placeholder="انتخاب کنید">
              <a-select-option v-for="t in userTypes" :key="t.id" :value="t.id">
                {{ t.title }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="رمز عبور"
            :validate-status="err.password ? 'error' : ''"
            :help="err.password"
          >
            <a-input-password v-model:value="form.password" />
          </a-form-item>

          <a-form-item
            label="تأیید رمز عبور"
            :validate-status="err.password_confirmation ? 'error' : ''"
            :help="err.password_confirmation"
          >
            <a-input-password v-model:value="form.password_confirmation" />
          </a-form-item>
        </div>

        <p v-if="id" class="hint">برای تغییر ندادن رمز عبور، هر دو فیلد رمز را خالی بگذارید.</p>

        <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<{
  open?: boolean;
  id?: string;
}>();
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void;
  (e: 'success'): void;
}>();

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 userTypes = ref<{ id: number; title: string }[]>([]);

const form = reactive<Record<string, any>>({
  fname: '',
  lname: '',
  mobile: '',
  ut: undefined,
  password: '',
  password_confirmation: '',
});

const err = reactive<Record<string, string>>({});
const REQUIRED = 'لطفا مقدار را وارد کنید';

function validate(): boolean {
  Object.keys(err).forEach((k) => delete err[k]);
  if (!form.fname) err.fname = REQUIRED;
  if (!form.lname) err.lname = REQUIRED;
  if (!form.mobile) err.mobile = REQUIRED;
  if (form.ut === undefined || form.ut === null) err.ut = REQUIRED;

  // On create a password is mandatory; on edit, blank means "leave unchanged".
  if (!id && !form.password) err.password = REQUIRED;
  if (form.password && form.password !== form.password_confirmation) {
    err.password_confirmation = 'رمز عبور و تأیید آن یکسان نیستند';
  }
  return Object.keys(err).length === 0;
}

async function handleSubmit() {
  if (!validate()) return;
  try {
    loading.value = true;
    const payload: Record<string, unknown> = {
      name: `${form.fname} ${form.lname}`.trim(),
      mobile: form.mobile,
      ut: form.ut,
    };
    if (form.password) payload.password = form.password;

    if (id) {
      await api.put(`users/${id}`, payload);
    } else {
      await api.post('users', payload);
    }
    message.info('اطلاعات با موفقیت به ثبت رسید.');
    if (asModal) {
      emit('success');
      emit('update:open', false);
    } else {
      router.push('/user/list');
    }
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا در ثبت اطلاعات.');
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  try {
    const { data } = await api.get('const/__list__ut');
    userTypes.value = data;
  } catch (e) {
    console.log(e);
  }

  if (id) {
    try {
      const { data } = await api.get(`admin/users/${id}`);
      // one fullName -> two inputs: first token is the given name
      const parts = String(data.name ?? '').trim().split(' ');
      Object.assign(form, {
        fname: parts[0] ?? '',
        lname: parts.slice(1).join(' '),
        mobile: data.mobile ?? '',
        ut: data.ut ?? undefined,
        password: '',
        password_confirmation: '',
      });
    } catch (e) {
      console.log(e);
    }
  }
});
</script>

<style scoped>
/* .grid-3 now comes from the global utilities.less (dedup) */
.hint {
  color: #888;
  font-size: 12px;
  margin-bottom: 1rem;
}
</style>