Finish create manual invoice popup form

src/components/CreateManualInvoiceForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -19,15 +19,17 @@ const manualInvoiceFormData = reactive({
     maxShipped: Date.vnNew(),
 });
 
-const isInvoicing = ref(false);
+const formModelPopupRef = ref();
 const invoiceOutSerialsOptions = ref([]);
 const taxAreasOptions = ref([]);
 const ticketsOptions = ref([]);
 const clientsOptions = ref([]);
+const isLoading = computed(() => formModelPopupRef.value?.isLoading);
 
-const onDataSaved = (formData, requestResponse) => {
+const onDataSaved = async (formData, requestResponse) => {
     emit('onDataSaved', formData, requestResponse);
-    router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
+    if (requestResponse && requestResponse.id)
+        router.push({ name: 'InvoiceOutSummary', params: { id: requestResponse.id } });
 };
 </script>
 
@@ -57,6 +59,7 @@ const onDataSaved = (formData, requestResponse) => {
         auto-load
     />
     <FormModelPopup
+        ref="formModelPopupRef"
         :title="t('Create manual invoice')"
         url-create="InvoiceOuts/createManualInvoice"
         model="invoiceOut"
@@ -64,6 +67,10 @@ const onDataSaved = (formData, requestResponse) => {
         @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
+            <span v-if="isLoading" class="text-primary invoicing-text">
+                <QIcon name="warning" class="fill-icon q-mr-sm" size="md" />
+                {{ t('Invoicing in progress...') }}
+            </span>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
@@ -142,6 +149,17 @@ const onDataSaved = (formData, requestResponse) => {
     </FormModelPopup>
 </template>
 
+<style lang="scss" scoped>
+.invoicing-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $primary;
+    font-size: 24px;
+    margin-bottom: 8px;
+}
+</style>
+
 <i18n>
 es:
     Create manual invoice: Crear factura manual
@@ -152,4 +170,5 @@ es:
     Area: Area
     Reference: Referencia
     Or: O
+    Invoicing in progress...: Facturación en progreso...
 </i18n>

src/components/FormModel.vue

@@ -69,10 +69,6 @@ const $props = defineProps({
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 
-defineExpose({
-    save,
-});
-
 const componentIsRendered = ref(false);
 
 onMounted(async () => {
@@ -205,6 +201,11 @@ watch(formUrl, async () => {
     reset();
     fetch();
 });
+
+defineExpose({
+    save,
+    isLoading,
+});
 </script>
 <template>
     <div class="column items-center full-width">

src/components/FormModelPopup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FormModel from 'components/FormModel.vue';
@@ -39,21 +39,28 @@ const $props = defineProps({
 
 const { t } = useI18n();
 
+const formModelRef = ref(null);
 const closeButton = ref(null);
-const isLoading = ref(false);
 
 const onDataSaved = (formData, requestResponse) => {
     emit('onDataSaved', formData, requestResponse);
     closeForm();
 };
 
-const closeForm = () => {
+const isLoading = computed(() => formModelRef.value?.isLoading);
+
+const closeForm = async () => {
     if (closeButton.value) closeButton.value.click();
 };
+
+defineExpose({
+    isLoading,
+});
 </script>
 
 <template>
     <FormModel
+        ref="formModelRef"
         :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :default-actions="false"

src/css/app.scss

@@ -97,6 +97,10 @@ select:-webkit-autofill {
     background-color: var(--vn-light-gray);
 }
 
+.fill-icon {
+    font-variation-settings: 'FILL' 1;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';