feat: integra frontend

src/components/shared/AvatarImageComponent.vue

@@ -82,6 +82,12 @@ function onDrop(event) {
     emit("update:file", file);
   }
 }
+
+defineExpose({
+  setImageUrl(url) {
+    imageUrl.value = url;
+  },
+});
 </script>
 
 <style scoped>

src/pages/unit/tabs/UnitDataTab.vue

@@ -156,7 +156,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultCepInput from "src/components/defaults/DefaultCepInput.vue";
@@ -166,10 +166,10 @@ import CitySelect from "src/components/selects/CitySelect.vue";
 import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
 import { useSubmitHandler } from "src/composables/useSubmitHandler";
 import { useInputRules } from "src/composables/useInputRules";
-import { createUnit } from "src/api/unit";
+import { createUnit, getUnit, updateUnit } from "src/api/unit";
 import masks from "src/helpers/masks";
 
-defineProps({
+const props = defineProps({
   unitId: {
     type: Number,
     default: null,
@@ -187,7 +187,7 @@ const selectedCity = ref(null);
 
 const { inputRules } = useInputRules();
 
-const { form, getFormAsFormData } = useFormUpdateTracker({
+const { form, getFormAsFormData, setUpdateFormAsOriginal } = useFormUpdateTracker({
   fantasy_name: null,
   social_reason: null,
   cnpj: null,
@@ -204,7 +204,6 @@ const { form, getFormAsFormData } = useFormUpdateTracker({
   secondary_email: null,
   phone_number: null,
   cell_number: null,
-  avatar: null,
 });
 
 watch(selectedState, (state) => {
@@ -219,6 +218,45 @@ function onAvatarChange(file) {
   form.avatar = file;
 }
 
+onMounted(async () => {
+  if (!props.unitId) return;
+
+  try {
+    const unit = await getUnit(props.unitId);
+
+    form.fantasy_name = unit.fantasy_name;
+    form.social_reason = unit.social_reason;
+    form.cnpj = unit.cnpj;
+    form.state_registration = unit.state_registration;
+    form.name_responsible = unit.name_responsible;
+    form.street = unit.street;
+    form.address_number = unit.address_number;
+    form.postal_code = unit.postal_code;
+    form.neighborhood = unit.neighborhood;
+    form.complement = unit.complement;
+    form.email = unit.email;
+    form.secondary_email = unit.secondary_email;
+    form.phone_number = unit.phone_number;
+    form.cell_number = unit.cell_number;
+    form.state_id = unit.state_id;
+    form.city_id = unit.city_id;
+
+    if (unit.state_id) {
+      stateSelectRef.value?.selectStateById(unit.state_id);
+    }
+    if (unit.city_id) {
+      citySelectRef.value?.selectCityById(unit.city_id);
+    }
+    if (unit.avatar) {
+      avatarRef.value?.setImageUrl(unit.avatar);
+    }
+
+    setUpdateFormAsOriginal();
+  } catch (e) {
+    console.error(e);
+  }
+});
+
 const { loading, execute } = useSubmitHandler({
   formRef,
   onSuccess: () => {
@@ -229,6 +267,11 @@ const { loading, execute } = useSubmitHandler({
 async function onSave() {
   await execute(() => {
     const formData = getFormAsFormData();
+
+    if (props.unitId) {
+      return updateUnit(props.unitId, formData);
+    }
+
     return createUnit(formData);
   });
 }