src/pages/Customer/Card/CustomerUnpaid.vue

@@ -1,57 +1,113 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FormModel from 'components/FormModel.vue';
+import axios from 'axios';
+
+import useNotify from 'src/composables/useNotify';
+
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const { notify } = useNotify();
 
 const unpaidClient = ref(false);
-const initialData = reactive({
+const isLoading = ref(false);
+const amount = ref(null);
+const dated = ref(null);
+
+const initialData = ref({
     dated: '2001-01-01T11:00:00.000Z',
-    clientFk: 1,
 });
 
-const onFetch = () => {
-    unpaidClient.value = true;
+onBeforeMount(async () => {
+    try {
+        const { data } = await axios.get(`ClientUnpaids/${route.params.id}`);
+        amount.value = data.amount;
+        dated.value = data.dated;
+        initialData.value = data;
+    } catch (error) {
+        setInitialData();
+    }
+});
+
+const setInitialData = () => {
+    amount.value = initialData.value.amount;
+    dated.value = initialData.value.dated;
+};
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    const payload = {
+        amount: amount.value,
+        clientFk: route.params.id,
+        dated: dated.value,
+    };
+    try {
+        await axios.patch('ClientUnpaids', payload);
+        notify('globals.dataSaved', 'positive');
+        unpaidClient.value = true;
+    } catch (error) {
+        notify('errors.create', 'negative');
+    } finally {
+        isLoading.value = false;
+    }
 };
 </script>
 
 <template>
-    <FormModel
-        :form-initial-data="initialData"
-        :observe-form-changes="true"
-        :url="`ClientUnpaids/${route.params.id}`"
-        @on-fetch="onFetch"
-        url-create="ClientUnpaids"
-        auto-load
-    >
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
-                </div>
-            </VnRow>
+    <Teleport to="#st-actions">
+        <QBtnGroup push class="q-gutter-x-sm">
+            <QBtn
+                :disabled="isLoading"
+                :label="t('globals.reset')"
+                :loading="isLoading"
+                @click="setInitialData"
+                color="primary"
+                flat
+                icon="restart_alt"
+                type="reset"
+            />
+            <QBtn
+                :disabled="isLoading"
+                :label="t('globals.save')"
+                :loading="isLoading"
+                @click="onSubmit"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
 
-            <VnRow class="row q-gutter-md q-mb-md" v-if="unpaidClient">
-                <div class="col">
-                    <VnInputDate :label="t('Date')" v-model="data.dated" />
-                </div>
-                <div class="col">
-                    <VnInput
-                        :label="t('Amount')"
-                        clearable
-                        type="number"
-                        v-model="data.amount"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <QForm>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md" v-if="unpaidClient">
+                    <div class="col">
+                        <VnInputDate :label="t('Date')" v-model="dated" />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Amount')"
+                            clearable
+                            type="number"
+                            v-model="amount"
+                        />
+                    </div>
+                </VnRow>
+            </QForm>
+        </QCard>
+    </div>
 </template>
 
 <i18n>

src/pages/Customer/components/CustomerSamplesPreview.vue

@@ -15,8 +15,8 @@ const $props = defineProps({
 </script>
 
 <template>
-    <QDialog ref="dialogRef">
-        <QCard class="q-pa-lg">
+    <QDialog ref="dialogRef" full-width>
+        <QCard class="dialog-width q-pa-lg">
             <QCardSection>
                 <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                     <QIcon name="close" size="sm" />
@@ -26,3 +26,9 @@ const $props = defineProps({
         </QCard>
     </QDialog>
 </template>
+
+<style lang="scss" scoped>
+.dialog-width {
+    max-width: 900px !important;
+}
+</style>