sfp_front_vue_diarista_backoffice/src/pages/city/components/AddEditCityDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin overflow-hidden" style="width: 800px">
      <DefaultDialogHeader :title="title" @close="onDialogCancel" />
      <q-form ref="formRef" @submit="onOKClick">
        <q-card-section class="row q-col-gutter-sm">
          <q-input
            v-model="form.name"
            :label="$t('common.terms.name')"
            :rules="[inputRules.required]"
            :error="!!serverErrors?.name"
            :error-message="serverErrors?.name"
            class="col-md-6 col-12"
            @update:model-value="serverErrors.name = null"
          />
          <CountrySelect
            ref="countrySelectRef"
            v-model="selectedCountry"
            :label="$t('ui.navigation.country')"
            :rules="[inputRules.required]"
            :error="!!serverErrors?.country_id"
            :error-message="serverErrors?.country_id"
            :initial-id="city ? city.country_id : null"
            class="col-md-6 col-12"
            @update:model-value="serverErrors.country_id = null"
          />
          <StateSelect
            v-model="selectedState"
            :country="selectedCountry"
            :initial-id="form.state_id"
            :label="$t('ui.navigation.state')"
            :rules="[inputRules.required]"
            :error="!!serverErrors?.state_id"
            :error-message="serverErrors?.state_id"
            class="col-md-6 col-12"
            @selected-country-id="countrySelectRef.selectCountryById($event)"
            @update:model-value="serverErrors.state_id = null"
          />
          <q-select
            v-model="selectedStatus"
            :label="$t('common.terms.status')"
            :options="statusOptions"
            :rules="[inputRules.required]"
            :error="!!serverErrors?.status"
            :error-message="serverErrors?.status"
            class="col-md-6 col-12"
            @update:model-value="serverErrors.status = null"
          />
        </q-card-section>
        <q-card-actions align="center">
          <q-btn color="primary" label="Cancel" @click="onDialogCancel" />
          <q-space />
          <q-btn
            color="primary"
            label="OK"
            :type="'submit'"
            :loading="loading"
            :disable="!hasUpdatedFields"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { ref, useTemplateRef, onMounted, watch } from "vue";
import { useInputRules } from "src/composables/useInputRules";
import { useDialogPluginComponent } from "quasar";
import { useI18n } from "vue-i18n";
import { createCity, updateCity } from "src/api/city";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import CountrySelect from "src/components/regions/CountrySelect.vue";
import StateSelect from "src/components/regions/StateSelect.vue";

defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits,
]);

const { city, title } = defineProps({
  city: {
    type: Object,
    default: null,
  },
  title: {
    type: Function,
    default: () => useI18n().t("common.terms.title"),
  },
});

const { t } = useI18n();
const { inputRules } = useInputRules();

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const formRef = useTemplateRef("formRef");
const countrySelectRef = useTemplateRef("countrySelectRef");

const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
  name: city ? city?.name : "",
  country_id: city ? city?.country_id : null,
  state_id: city ? city?.state_id : null,
  status: city ? city?.status : "ACTIVE",
});

const {
  loading,
  serverErrors,
  execute: submitForm,
} = useSubmitHandler({
  onSuccess: () => onDialogOK(true),
  formRef: formRef,
});

const selectedCountry = ref(null);
const selectedState = ref(null);
const selectedStatus = ref({
  label: t("common.status.active"),
  value: "ACTIVE",
});
const statusOptions = ref([
  { label: t("common.status.active"), value: "ACTIVE" },
  { label: t("common.status.inactive"), value: "INACTIVE" },
]);

const onOKClick = async () => {
  if (city) {
    await submitForm(() => updateCity(getUpdatedFields.value, city.id));
  } else {
    await submitForm(() => createCity({ ...form }));
  }
};

watch(selectedStatus, () => {
  form.status = selectedStatus.value?.value;
});

watch(selectedCountry, () => {
  form.country_id = selectedCountry.value?.value;
});

watch(selectedState, () => {
  form.state_id = selectedState.value?.value;
});

onMounted(async () => {
  if (city) {
    selectedStatus.value = statusOptions.value.find(
      (status) => status.value === city.status,
    );
  }
});
</script>