tehran_taj/apps/admin-panel/src/views/city/cityList.vue

<template>
  <!--
    Ported from legacy henza_admin/src/views/city/cityList.vue.
    The two percent columns are edited in a modal that legacy loads through two
    separate GETs (get-percent / get-percent-aux) before opening.
  -->
  <div id="page-user-list">
    <a-card title="لیست شهر ها">
      <XTable ref="citiesTable" :model="model">
        <template #percent="{ text }">
          {{ text ?? '-' }}
        </template>

        <template #percent_aux="{ text }">
          {{ text ?? '-' }}
        </template>

        <template #opt="{ record }">
          <a-tooltip v-if="hasPermission('cities.list.view.edit')" title="ویرایش">
            <EditOutlined class="cursor-pointer mx-1 text-primary" @click="edit(record)" />
          </a-tooltip>

          <a-tooltip v-if="hasPermission('cities.list.remove')" title="حذف">
            <a-popconfirm
              placement="top"
              ok-text="بله"
              cancel-text="خیر"
              @confirm="confirmDelete(`cities/${record.id}`)"
            >
              <template #title><p>آیا مطمئن به حذف شهر مورد نظر هستید ؟</p></template>
              <DeleteOutlined class="cursor-pointer mx-1 text-danger" />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </XTable>

      <a-modal v-model:open="visible" title="ویرایش شهر" @ok="save">
        <a-form layout="vertical">
          <a-form-item label="نام شهر">
            <a-input v-model:value="form.title" />
          </a-form-item>
          <a-form-item label="درصد مشتری عمده">
            <a-input-number v-model:value="form.percent" class="w-full" :step="0.1" />
          </a-form-item>
          <a-form-item label="درصد کارشناس فروش">
            <a-input-number v-model:value="form.percent_aux" class="w-full" :step="0.1" />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
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 { buildCityListModel } from './CityListModel';
import { useUsersStore } from '../../stores/users';
import { useDeleteHandler } from '../../composables/useDeleteHandler';
import api from '../../api/client';

const users = useUsersStore();
const hasPermission = (rid: string) => Boolean(users.hasPermission(rid));

const model = buildCityListModel();
const citiesTable = ref<{ fetch: () => Promise<void> } | null>(null);
const visible = ref(false);
const tempRow = ref<Record<string, any> | undefined>(undefined);
const form = reactive<Record<string, any>>({ title: '', percent: null, percent_aux: null });

/**
 * legacy edit(): fetches the two percents separately before opening the modal.
 * Both are already on the row here, but the legacy calls are kept so the two
 * endpoints stay exercised and the values are always current.
 */
async function edit(row: Record<string, any>) {
  tempRow.value = row;
  form.title = row.title ?? '';
  try {
    const [p, pa] = await Promise.all([
      api.get(`cities/get-percent/${row.id}`),
      api.get(`cities/get-percent-aux/${row.id}`),
    ]);
    form.percent = p.data === null ? null : Number(p.data);
    form.percent_aux = pa.data === null ? null : Number(pa.data);
  } catch (e) {
    form.percent = row.percent === null ? null : Number(row.percent);
    form.percent_aux = row.percent_aux === null ? null : Number(row.percent_aux);
  }
  visible.value = true;
}

async function save() {
  try {
    await api.put(`cities/${tempRow.value?.id}`, {
      title: form.title,
      percent: form.percent,
      percent_aux: form.percent_aux,
    });
    message.success('تغییرات ثبت شد');
    visible.value = false;
    citiesTable.value?.fetch();
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا در ثبت تغییرات');
  }
}

// The backend refuses while customers, branches or addresses reference it.
const { remove: confirmDelete } = useDeleteHandler({
  onSuccess: () => citiesTable.value?.fetch(),
  successMessage: 'شهر حذف شد',
  fallbackErrorMessage: 'خطا در حذف شهر',
});
</script>