From 5f607823b717510b7ab4c7151716a13c93574e37 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 19:50:31 +0200
Subject: [PATCH] feat AccountCreate

---
 src/pages/Account/AccountCreate.vue | 165 ++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 src/pages/Account/AccountCreate.vue

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
new file mode 100644
index 000000000..6044db303
--- /dev/null
+++ b/src/pages/Account/AccountCreate.vue
@@ -0,0 +1,165 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
+import { toDate } from 'src/filters';
+
+const state = useState();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const user = state.getUser();
+const newAccountForm = reactive({
+    supplierFk: null,
+    travelFk: Number(route.query?.travelFk) || null,
+    companyFk: user.value.companyFk || null,
+});
+const suppliersOptions = ref([]);
+const travelsOptions = ref([]);
+const companiesOptions = ref([]);
+
+const redirectToAccountBasicData = (_, { id }) => {
+    router.push({ name: 'AccountBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Travels/filter"
+        :filter="{ fields: ['id', 'warehouseInName'] }"
+        order="id"
+        @on-fetch="(data) => (travelsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                url="Entries/filter"
+                custom-route-redirect-name="AccountSummary"
+                data-key="AccountSummary"
+                :label="t('Search entries')"
+                :info="t('You can search by account reference')"
+            />
+        </Teleport>
+    </template>
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="Entries"
+            model="account"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToAccountBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.companyFk')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<i18n>
+    es:
+        Supplier: Proveedor
+        Travel: Envío
+        Company: Empresa
+</i18n>