From 73530169374f3ef090146d83d9eb79d5416c6cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9rik=20BENOIST?= Date: Sat, 13 Jan 2024 06:47:33 +0100 Subject: [PATCH] feat: obi visualization --- dependencies.txt | 1 + package.json | 1 + pnpm-lock.yaml | 12 + src/@core/initCore.ts | 10 + src/assets/images/misc/logo-proximis.png | Bin 0 -> 7368 bytes src/composables/useApi.ts | 8 + src/models/Order.ts | 28 +- src/pages/obi/order/details/[id].vue | 68 +++-- src/pages/obi/order/list/index.vue | 35 ++- src/views/pages/order/view/OrderOms.vue | 239 ++++++++++++++++++ src/views/pages/order/view/OrderPanel.vue | 52 +--- .../pages/order/view/OrderTabGeneralH.vue | 42 +-- 12 files changed, 390 insertions(+), 106 deletions(-) create mode 100644 src/assets/images/misc/logo-proximis.png create mode 100644 src/views/pages/order/view/OrderOms.vue diff --git a/dependencies.txt b/dependencies.txt index e706105..f75f750 100755 --- a/dependencies.txt +++ b/dependencies.txt @@ -59,5 +59,6 @@ - vite-plugin-vue-devtools : [npm](https://www.npmjs.com/package/vite-plugin-vue-devtools), [GitHub](https://github.com/antfu/vite-plugin-vue-devtools) - Plugin Vite pour intégrer les outils de développement Vue.js - vite-plugin-vue-layouts : [npm](https://www.npmjs.com/package/vite-plugin-vue-layouts), [GitHub](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - Plugin Vite pour la gestion des mises en page Vue.js - vite-plugin-vuetify : [npm](https://www.npmjs.com/package/vite-plugin-vuetify), [GitHub](https://github.com/antfu/vite-plugin-vuetify) - Plugin Vite pour l'intégration de Vuetify +- vue-json-pretty : [npm](https://www.npmjs.com/package/vue-json-pretty), [GitHub](https://github.com/leezng/vue-json-pretty) - A pretty-print JSON Vue-component - vue-shepherd : [npm](https://www.npmjs.com/package/vue-shepherd), [GitHub](https://github.com/hipstersmoothie/vue-shepherd) - Tour de guide pour les applications Vue.js - vue-tsc : [npm](https://www.npmjs.com/package/vue-tsc), [GitHub](https://github.com/johnsoncodehk/vue-tsc) - Plugin TypeScript pour la compilation de fichiers `.vue` diff --git a/package.json b/package.json index f05270a..3c6a253 100755 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "vue-chartjs": "^5.2.0", "vue-flatpickr-component": "11.0.3", "vue-i18n": "^9.5.0", + "vue-json-pretty": "^2.3.0", "vue-prism-component": "^2.0.0", "vue-router": "^4.2.5", "vue3-apexcharts": "^1.4.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc00613..8bd006c 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -115,6 +115,9 @@ dependencies: vue-i18n: specifier: ^9.5.0 version: 9.6.5(vue@3.3.8) + vue-json-pretty: + specifier: ^2.3.0 + version: 2.3.0(vue@3.3.8) vue-prism-component: specifier: ^2.0.0 version: 2.0.0 @@ -7978,6 +7981,15 @@ packages: '@vue/devtools-api': 6.5.1 vue: 3.3.8(typescript@5.2.2) + /vue-json-pretty@2.3.0(vue@3.3.8): + resolution: {integrity: sha512-iBul6Xg7vZfMV2MQC/gGtzbyg8FLk6cJ8KG91f37UEkQyXqHg91VQJ24bDBXNVuOSP04BUKxWagD3V2N/WEy0g==} + engines: {node: '>= 10.0.0', npm: '>= 5.0.0'} + peerDependencies: + vue: '>=3.0.0' + dependencies: + vue: 3.3.8(typescript@5.2.2) + dev: false + /vue-prism-component@2.0.0: resolution: {integrity: sha512-1ofrL+GCZOv4HqtX5W3EgkhSAgadSeuD8FDTXbwhLy8kS+28RCR8t2S5VTeM9U/peAaXLBpSgRt3J25ao8KTeg==} dev: false diff --git a/src/@core/initCore.ts b/src/@core/initCore.ts index 2b5d888..4ffdae8 100755 --- a/src/@core/initCore.ts +++ b/src/@core/initCore.ts @@ -1,4 +1,6 @@ import { useStorage } from '@vueuse/core' +import { setDefaultOptions } from 'date-fns' +import { enUS, fr } from 'date-fns/locale' import flatpickr from 'flatpickr' import { French } from 'flatpickr/dist/l10n/fr' import { useTheme } from 'vuetify' @@ -19,10 +21,14 @@ const _syncAppRtl = () => { if (locale.value === 'fr') { if (flatpickr.l10ns.fr) flatpickr.localize(French) + + setDefaultOptions({ locale: fr }) } else { if (flatpickr.l10ns.en) flatpickr.localize(flatpickr.l10ns.en) + + setDefaultOptions({ locale: enUS }) } // watch and change lang attribute of html on language change @@ -39,10 +45,14 @@ const _syncAppRtl = () => { if (storedLang.value === 'fr') { if (flatpickr.l10ns.fr) flatpickr.localize(flatpickr.l10ns.fr) + + setDefaultOptions({ locale: fr }) } else { if (flatpickr.l10ns.en) flatpickr.localize(flatpickr.l10ns.en) + + setDefaultOptions({ locale: enUS }) } // set isAppRtl value based on selected language diff --git a/src/assets/images/misc/logo-proximis.png b/src/assets/images/misc/logo-proximis.png new file mode 100644 index 0000000000000000000000000000000000000000..0b1125ca78e1f44af1ed4c5261b6432c725263fe GIT binary patch literal 7368 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 literal 0 HcmV?d00001 diff --git a/src/composables/useApi.ts b/src/composables/useApi.ts index af9ab8b..ecb9025 100755 --- a/src/composables/useApi.ts +++ b/src/composables/useApi.ts @@ -38,5 +38,13 @@ export const useApi = createFetch({ return { data: parsedData, response } }, + onFetchError(ctx) { + const errorData = ctx.data ? JSON.parse(ctx.data) : { title: 'Hunter x Hunter' } + const status = ctx.response ? ctx.response.status : 'unknown' + + ctx.error = { status, error: errorData.error || errorData.title } + + return ctx + }, }, }) diff --git a/src/models/Order.ts b/src/models/Order.ts index aa2affa..9bae701 100644 --- a/src/models/Order.ts +++ b/src/models/Order.ts @@ -12,9 +12,6 @@ interface transaction { transactionDate: Date transactionNo: string transactionTypeDescription: string - transactionSubtotal: number - transactionTax: number - transactionTotal: number } interface Common { @@ -22,8 +19,6 @@ interface Common { requestingLocationCd: string requestingSystemCd: string customerId: string - customerFirstName: string - customerLastName: string status: string submitOrdMsg: string fdateCreation: Date @@ -66,3 +61,26 @@ export interface Order { lines: Lines[] history: History[] } + +export interface OrderOms { + common: OrderOmsCommon + oms: Proximis +} + +export interface OrderOmsCommon { + urlApp: string +} + +export interface Proximis { + item: ProximisItem +} + +export interface ProximisItem { + id: number + modificationDate: Date + code: string + fulfillSystem: string + creationDate: Date + fulfillStoreCode: string + status: string +} diff --git a/src/pages/obi/order/details/[id].vue b/src/pages/obi/order/details/[id].vue index aaaeefc..d504584 100644 --- a/src/pages/obi/order/details/[id].vue +++ b/src/pages/obi/order/details/[id].vue @@ -16,12 +16,21 @@ const tabs = [ { title: 'Flow' }, ] -const { data, error } = await useApi(`/obi/order/${route.params.id}`) +const { data, error, execute: fetchOrder } = await useApi(`/obi/order/${route.params.id}`) -if (error.value) - console.log(error.value) -else if (data.value) - orderData.value = data.value +const handleData = () => { + if (error.value) + console.log(error.value) + else if (data.value) + orderData.value = data.value +} + +const refreshData = async () => { + await fetchOrder() + handleData() +} + +handleData() + +