sfp_front_vue_alugap_owner/src/pages/profile/components/ProfileEditDialog.vue

<template>
  <q-dialog v-model="dialogModel" persistent>
    <q-card style="max-width: 100%; border-radius: 8px">
      <DefaultDialogHeader title="Editar meus dados" @close="closeDialog" />

      <q-form
        ref="editFormRef"
        class="column q-gutter-sm q-pa-md bg-grey-2"
        @submit="submitForm"
      >
        <div
          class="bg-white radius-8 q-pa-sm q-mb-xl"
          style="border: 1px solid #ccc"
        >
          <div class="column q-gutter-sm" style="border-radius: 8px">
            <div class="text-subtitle2 text-weight-bold text-primary">
              Dados pessoais
            </div>

            <q-separator />

            <div class="grid-2">
              <q-input
                v-model="localForm.name"
                bg-color="white"
                label="Nome"
                outlined
                :error="Boolean(serverErrors.name)"
                :error-message="serverErrors.name"
                :loading="submitting"
                :rules="[inputRules.required]"
              />

              <q-input
                v-model="localForm.document"
                bg-color="white"
                label="Número de documento"
                outlined
                :error="Boolean(serverErrors.document_number)"
                :error-message="serverErrors.document_number"
                :loading="submitting"
              />
            </div>
          </div>

          <div class="column q-gutter-sm" style="border-radius: 8px">
            <div class="text-subtitle2 text-weight-bold text-primary">
              Acesso
            </div>

            <q-separator />

            <div class="grid-3">
              <q-input
                v-model="localForm.email"
                bg-color="white"
                label="Email"
                outlined
                :error="Boolean(serverErrors.email)"
                :error-message="serverErrors.email"
                :loading="submitting"
                :rules="[inputRules.required, inputRules.email]"
              />

              <DefaultPasswordInput
                v-model="localForm.password"
                bg-color="white"
                label="Senha"
                outlined
                :error="Boolean(serverErrors.password)"
                :error-message="serverErrors.password"
                :loading="submitting"
                :rules="passwordRules"
              />

              <DefaultPasswordInput
                v-model="localForm.confirmPassword"
                bg-color="white"
                label="Confirmar Senha"
                outlined
                :loading="submitting"
                :rules="confirmPasswordRules"
              />
            </div>
          </div>
        </div>

        <div class="row justify-end q-gutter-sm">
          <q-btn
            class="bg-white"
            color="primary"
            label="Cancelar"
            outline
            @click="closeDialog"
          />

          <q-btn
            color="primary"
            label="Salvar"
            type="submit"
            :loading="submitting"
          />
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";

const dialogModel = defineModel({ default: false });

const emit = defineEmits(["submit", "close"]);

const { form, inputRules, serverErrors, submitting } = defineProps({
  // eslint-disable-next-line vue/require-default-prop
  form: Object,
  // eslint-disable-next-line vue/require-default-prop
  inputRules: Object,
  serverErrors: { type: Object, default: () => ({}) },
  submitting: Boolean,
});

const editFormRef = ref(null);

const localForm = reactive({
  name: "",
  document: "",
  email: "",
  password: "",
  confirmPassword: "",
});

const passwordRules = computed(() =>
  localForm.password ? [inputRules.min(6)] : [],
);

const confirmPasswordRules = computed(() =>
  localForm.password
    ? [inputRules.required, inputRules.samePassword(localForm.password)]
    : [],
);

const syncLocalForm = () => {
  Object.assign(localForm, {
    name: form.name ?? "",
    document: form.document ?? "",
    email: form.email ?? "",
    password: form.password ?? "",
    confirmPassword: form.confirmPassword ?? "",
  });
};

watch(
  () => [dialogModel.value, form],
  () => {
    if (dialogModel.value) syncLocalForm();
  },
  { deep: true, immediate: true },
);

const closeDialog = () => {
  dialogModel.value = false;
  emit("close");
};

const submitForm = async () => {
  const isValid = await editFormRef.value?.validate();
  if (!isValid) return;

  emit("submit", { ...localForm });
};
</script>

<style scoped>
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
</style>