From 5419bb538e152537ea964bb56b1862852c3e96e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9rik=20BENOIST?= Date: Sun, 7 Jan 2024 21:10:13 +0100 Subject: [PATCH 1/9] feat: add obi order visualization --- dependencies.txt | 63 +++++ src/models/Order.ts | 68 +++++ src/navigation/horizontal/index.ts | 7 + src/navigation/vertical/index.ts | 7 + src/pages/flux/bl/not_sent/index.vue | 1 + src/pages/obi/order/details/[id].vue | 109 ++++++++ src/pages/obi/order/list/index.vue | 244 ++++++++++++++++++ src/pages/store/list/index.vue | 1 + src/plugins/i18n/locales/ar.json | 1 + src/plugins/i18n/locales/en.json | 1 + src/plugins/i18n/locales/fr.json | 1 + src/views/pages/order/view/OrderPanel.vue | 133 ++++++++++ .../pages/order/view/OrderTabGeneralH.vue | 158 ++++++++++++ typed-router.d.ts | 2 + 14 files changed, 796 insertions(+) create mode 100755 dependencies.txt create mode 100644 src/models/Order.ts create mode 100644 src/pages/obi/order/details/[id].vue create mode 100644 src/pages/obi/order/list/index.vue create mode 100644 src/views/pages/order/view/OrderPanel.vue create mode 100755 src/views/pages/order/view/OrderTabGeneralH.vue diff --git a/dependencies.txt b/dependencies.txt new file mode 100755 index 0000000..e706105 --- /dev/null +++ b/dependencies.txt @@ -0,0 +1,63 @@ +# Dépendances avec les liens npm et GitHub + +## Dépendances de développement +- @antfu/eslint-config-vue : [npm](https://www.npmjs.com/package/@antfu/eslint-config-vue), [GitHub](https://github.com/antfu/eslint-config) - Configuration ESLint pour les projets Vue.js +- @antfu/utils : [npm](https://www.npmjs.com/package/@antfu/utils), [GitHub](https://github.com/antfu/utils) - Utilitaires utiles pour le développement avec Vite +- @fullcalendar/core : [npm](https://www.npmjs.com/package/@fullcalendar/core), [GitHub](https://github.com/fullcalendar/fullcalendar) - Bibliothèque de calendrier complète pour les applications web +- @fullcalendar/daygrid : [npm](https://www.npmjs.com/package/@fullcalendar/daygrid), [GitHub](https://github.com/fullcalendar/daygrid) - Extension de grille de jours pour FullCalendar +- @fullcalendar/interaction : [npm](https://www.npmjs.com/package/@fullcalendar/interaction), [GitHub](https://github.com/fullcalendar/interaction) - Prise en charge de l'interaction utilisateur pour FullCalendar +- @fullcalendar/list : [npm](https://www.npmjs.com/package/@fullcalendar/list), [GitHub](https://github.com/fullcalendar/list) - Extension de liste pour FullCalendar +- @fullcalendar/timegrid : [npm](https://www.npmjs.com/package/@fullcalendar/timegrid), [GitHub](https://github.com/fullcalendar/timegrid) - Extension de grille temporelle pour FullCalendar +- @fullcalendar/vue3 : [npm](https://www.npmjs.com/package/@fullcalendar/vue3), [GitHub](https://github.com/fullcalendar/vue) - Intégration Vue 3 pour FullCalendar +- @iconify-json/mdi : [npm](https://www.npmjs.com/package/@iconify-json/mdi), [GitHub](https://github.com/iconify/iconify-json) - Bibliothèque d'icônes Material Design pour Iconify +- @iconify/tools : [npm](https://www.npmjs.com/package/@iconify/tools), [GitHub](https://github.com/iconify/iconify-tools) - Outils pour travailler avec Iconify +- @iconify/utils : [npm](https://www.npmjs.com/package/@iconify/utils), [GitHub](https://github.com/iconify/iconify-utils) - Utilitaires pour Iconify +- @iconify/vue : [npm](https://www.npmjs.com/package/@iconify/vue), [GitHub](https://github.com/iconify/iconify-vue) - Composant Vue pour Iconify +- @intlify/unplugin-vue-i18n : [npm](https://www.npmjs.com/package/@intlify/unplugin-vue-i18n), [GitHub](https://github.com/intlify/unplugin) - Plugin Vue I18n pour Vite +- @tabler/icons : [npm](https://www.npmjs.com/package/@tabler/icons), [GitHub](https://github.com/tabler/tabler-icons) - Bibliothèque d'icônes Tabler +- @tiptap/extension-character-count : [npm](https://www.npmjs.com/package/@tiptap/extension-character-count), [GitHub](https://github.com/ueberdosis/tiptap) - Extension pour compter le nombre de caractères dans Tiptap +- @tiptap/extension-placeholder : [npm](https://www.npmjs.com/package/@tiptap/extension-placeholder), [GitHub](https://github.com/ueberdosis/tiptap) - Extension de l'indicateur de position dans Tiptap +- @tiptap/extension-subscript : [npm](https://www.npmjs.com/package/@tiptap/extension-subscript), [GitHub](https://github.com/ueberdosis/tiptap) - Extension pour le texte en indice dans Tiptap +- @tiptap/extension-superscript : [npm](https://www.npmjs.com/package/@tiptap/extension-superscript), [GitHub](https://github.com/ueberdosis/tiptap) - Extension pour le texte en exposant dans Tiptap +- @tiptap/extension-underline : [npm](https://www.npmjs.com/package/@tiptap/extension-underline), [GitHub](https://github.com/ueberdosis/tiptap) - Extension pour souligner le texte dans Tiptap +- @types/mapbox-gl : [npm](https://www.npmjs.com/package/@types/mapbox-gl), [GitHub](https://github.com/DefinitelyTyped/DefinitelyTyped) - Types TypeScript pour Mapbox GL +- @types/node : [npm](https://www.npmjs.com/package/@types/node), [GitHub](https://github.com/DefinitelyTyped/DefinitelyTyped) - Types TypeScript pour Node.js +- @types/webfontloader : [npm](https://www.npmjs.com/package/@types/webfontloader), [GitHub](https://github.com/DefinitelyTyped/DefinitelyTyped) - Types TypeScript pour WebFontLoader +- @typescript-eslint/eslint-plugin : [npm](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin), [GitHub](https://github.com/typescript-eslint/typescript-eslint) - Plugin ESLint pour TypeScript +- @typescript-eslint/parser : [npm](https://www.npmjs.com/package/@typescript-eslint/parser), [GitHub](https://github.com/typescript-eslint/typescript-eslint) - Analyseur ESLint pour TypeScript +- @videojs-player/vue : [npm](https://www.npmjs.com/package/@videojs-player/vue), [GitHub](https://github.com/videojs/theater) - Composant Vue pour Video.js +- @vitejs/plugin-vue : [npm](https://www.npmjs.com/package/@vitejs/plugin-vue), [GitHub](https://github.com/vitejs/vite) +- @vitejs/plugin-vue-jsx : [npm](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx), [GitHub](https://github.com/vitejs/vite) +- date-fns : [npm](https://www.npmjs.com/package/date-fns), [GitHub](https://github.com/date-fns/date-fns) - Bibliothèque JavaScript moderne de manipulation de dates +- eslint : [npm](https://www.npmjs.com/package/eslint), [GitHub](https://github.com/eslint/eslint) - Linter JavaScript/TypeScript +- eslint-config-airbnb-base : [npm](https://www.npmjs.com/package/eslint-config-airbnb-base), [GitHub](https://github.com/airbnb/javascript) - Configuration ESLint pour les règles Airbnb (base) +- eslint-import-resolver-typescript : [npm](https://www.npmjs.com/package/eslint-import-resolver-typescript), [GitHub](https://github.com/alexgorbatchev/eslint-import-resolver-typescript) - Résolveur d'importation ESLint pour TypeScript +- eslint-plugin-case-police : [npm](https://www.npmjs.com/package/eslint-plugin-case-police), [GitHub](https://github.com/antfu/eslint-plugin-case-police) - Plugin ESLint pour l'ajustement de casse dans le code +- eslint-plugin-import : [npm](https://www.npmjs.com/package/eslint-plugin-import), [GitHub](https://github.com/benmosher/eslint-plugin-import) - Plugin ESLint pour les règles d'importation +- eslint-plugin-promise : [npm](https://www.npmjs.com/package/eslint-plugin-promise), [GitHub](https://github.com/xjamundx/eslint-plugin-promise) - Plugin ESLint pour les règles liées aux promesses +- eslint-plugin-regex : [npm](https://www.npmjs.com/package/eslint-plugin-regex), [GitHub](https://github.com/ota-meshi/eslint-plugin-regex) - Plugin ESLint pour les règles de regex +- eslint-plugin-sonarjs : [npm](https://www.npmjs.com/package/eslint-plugin-sonarjs), [GitHub](https://github.com/SonarSource/eslint-plugin-sonarjs) - Plugin ESLint pour les règles SonarJS +- eslint-plugin-unicorn : [npm](https://www.npmjs.com/package/eslint-plugin-unicorn), [GitHub](https://github.com/sindresorhus/eslint-plugin-unicorn) - Plugin ESLint pour des règles diverses et utiles +- eslint-plugin-vue : [npm](https://www.npmjs.com/package/eslint-plugin-vue), [GitHub](https://github.com/vuejs/eslint-plugin-vue) - Plugin ESLint pour les règles Vue.js +- msw : [npm](https://www.npmjs.com/package/msw), [GitHub](https://github.com/mswjs/msw) - Outil de simulation de requêtes HTTP pour les tests +- postcss-html : [npm](https://www.npmjs.com/package/postcss-html), [GitHub](https://github.com/yisar/postcss-html) - Plugin PostCSS pour traiter les fichiers HTML en CSS +- postcss-scss : [npm](https://www.npmjs.com/package/postcss-scss), [GitHub](https://github.com/postcss/postcss-scss) - Plugin PostCSS pour la syntaxe SCSS +- sass : [npm](https://www.npmjs.com/package/sass), [GitHub](https://github.com/sass/sass) - Préprocesseur CSS Sass +- stylelint : [npm](https://www.npmjs.com/package/stylelint), [GitHub](https://github.com/stylelint/stylelint) - Linter pour les feuilles de style CSS/SCSS +- stylelint-codeguide : [npm](https://www.npmjs.com/package/stylelint-codeguide), [GitHub](https://github.com/kristerkari/stylelint-codeguide) - Guide de style et configuration Stylelint +- stylelint-config-idiomatic-order : [npm](https://www.npmjs.com/package/stylelint-config-idiomatic-order), [GitHub](https://github.com/ream88/stylelint-config-idiomatic-order) - Configuration Stylelint avec un ordre idiomatique +- stylelint-config-standard-scss : [npm](https://www.npmjs.com/package/stylelint-config-standard-scss), [GitHub](https://github.com/kristerkari/stylelint-config-standard-scss) - Configuration Stylelint pour SCSS basée sur les règles standard +- stylelint-use-logical-spec : [npm](https://www.npmjs.com/package/stylelint-use-logical-spec), [GitHub](https://github.com/iKettles/stylelint-use-logical-spec) - Plugin Stylelint pour promouvoir l'utilisation de spécifications logiques +- tsx : [npm](https://www.npmjs.com/package/tsx), [GitHub](https://github.com/windicss/tsx) - Plugin WindiCSS pour la prise en charge de JSX/TSX +- type-fest : [npm](https://www.npmjs.com/package/type-fest), [GitHub](https://github.com/sindresorhus/type-fest) - Collection de types TypeScript utiles +- typescript : [npm](https://www.npmjs.com/package/typescript), [GitHub](https://github.com/microsoft/TypeScript) - Langage de programmation TypeScript +- unplugin-auto-import : [npm](https://www.npmjs.com/package/unplugin-auto-import), [GitHub](https://github.com/antfu/unplugin-auto-import) - Plugin Vite pour l'importation automatique +- unplugin-vue-components : [npm](https://www.npmjs.com/package/unplugin-vue-components), [GitHub](https://github.com/antfu/unplugin) - Plugin Vite pour la gestion des composants Vue +- unplugin-vue-router : [npm](https://www.npmjs.com/package/unplugin-vue-router), [GitHub](https://github.com/antfu/unplugin-vue-router) - Plugin Vite pour Vue Router +- video.js : [npm](https://www.npmjs.com/package/video.js), [GitHub](https://github.com/videojs/video.js) - Bibliothèque de lecteur vidéo JavaScript +- vite : [npm](https://www.npmjs.com/package/vite), [GitHub](https://github.com/vitejs/vite) - Constructeur d'outils rapide pour le développement web moderne +- 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-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/src/models/Order.ts b/src/models/Order.ts new file mode 100644 index 0000000..aa2affa --- /dev/null +++ b/src/models/Order.ts @@ -0,0 +1,68 @@ +interface meta { + id: number +} + +interface statusData { + code: string + title: string +} + +interface transaction { + transactionTypeId: number + transactionDate: Date + transactionNo: string + transactionTypeDescription: string + transactionSubtotal: number + transactionTax: number + transactionTotal: number +} + +interface Common { + orderId: string + requestingLocationCd: string + requestingSystemCd: string + customerId: string + customerFirstName: string + customerLastName: string + status: string + submitOrdMsg: string + fdateCreation: Date + consumed: boolean + shipforpickupLocationCd: string + shipforpickupSystemCd: string + statusData: statusData + transaction: transaction +} + +interface Lines { + lineOrderId: number + lineItemNo: number + orderId: string + requestId: number + lineItemOms: string + itemId: string + orderedLineQty: number + status: string + transactionDate: Date + shippingAgent: string + trackingNumber: string + fulfillmentId: string + cartonNumber: string + fdateCreation: Date + consumed: boolean +} + +interface History { + statusId: number + Id: number + status: string + transactionDate: Date + fdateCreation: Date +} + +export interface Order { + meta: meta + common: Common + lines: Lines[] + history: History[] +} diff --git a/src/navigation/horizontal/index.ts b/src/navigation/horizontal/index.ts index aa53d60..5776e6c 100755 --- a/src/navigation/horizontal/index.ts +++ b/src/navigation/horizontal/index.ts @@ -23,6 +23,13 @@ export default [ { title: 'OBI', icon: { icon: 'tabler-shopping-bag-check' }, + children: [ + { + title: 'Orders list', + to: { name: 'obi-order-list' }, + icon: { icon: 'tabler-bug' }, + }, + ], }, { title: 'Dotsoft', diff --git a/src/navigation/vertical/index.ts b/src/navigation/vertical/index.ts index aa53d60..a2891d4 100755 --- a/src/navigation/vertical/index.ts +++ b/src/navigation/vertical/index.ts @@ -23,6 +23,13 @@ export default [ { title: 'OBI', icon: { icon: 'tabler-shopping-bag-check' }, + children: [ + { + title: 'Orders', + to: { name: 'obi-order-list' }, + icon: { icon: 'tabler-bug' }, + }, + ], }, { title: 'Dotsoft', diff --git a/src/pages/flux/bl/not_sent/index.vue b/src/pages/flux/bl/not_sent/index.vue index 7984128..9a327af 100644 --- a/src/pages/flux/bl/not_sent/index.vue +++ b/src/pages/flux/bl/not_sent/index.vue @@ -302,6 +302,7 @@ const exportEXCEL = () => { :items-per-page="options.itemsPerPage" :page="options.page" :options="options" + density="compact" /> diff --git a/src/pages/obi/order/details/[id].vue b/src/pages/obi/order/details/[id].vue new file mode 100644 index 0000000..aaaeefc --- /dev/null +++ b/src/pages/obi/order/details/[id].vue @@ -0,0 +1,109 @@ + + + diff --git a/src/pages/obi/order/list/index.vue b/src/pages/obi/order/list/index.vue new file mode 100644 index 0000000..b7f5d1e --- /dev/null +++ b/src/pages/obi/order/list/index.vue @@ -0,0 +1,244 @@ + + + + + diff --git a/src/pages/store/list/index.vue b/src/pages/store/list/index.vue index 06a8e60..8b5565e 100644 --- a/src/pages/store/list/index.vue +++ b/src/pages/store/list/index.vue @@ -275,6 +275,7 @@ watch(route, (to, from) => { :items-per-page="stStoreList.itemsPerPage" :page="stStoreList.currentPage" :sort-by="stStoreList.getSortBy()" + density="compact" @update:sort-by="sortBy => { stStoreList.setSortBy(sortBy[0]?.key) ; stStoreList.setSortOrder(sortBy[0]?.order) }" @update:items-per-page="itemsPerPage => { stStoreList.setItemsPerPage(itemsPerPage) }" @update:page="page => { stStoreList.setCurrentPage(page) }" diff --git a/src/plugins/i18n/locales/ar.json b/src/plugins/i18n/locales/ar.json index bf1b24a..0a9575c 100755 --- a/src/plugins/i18n/locales/ar.json +++ b/src/plugins/i18n/locales/ar.json @@ -70,6 +70,7 @@ "Dates range error": "With a date range, a text of at least 5 characters must be specified", "Close": "Close", "Connect to invidual POS": "Connect to invidual POS", + "Orders list": "Orders list", "---------------------------": "---------------------------", "UI Elements": "عناصر واجهة المستخدم", "Forms & Tables": "النماذج والجداول", diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json index 2cd707a..222e1dd 100755 --- a/src/plugins/i18n/locales/en.json +++ b/src/plugins/i18n/locales/en.json @@ -70,6 +70,7 @@ "Dates range error": "With a date range, a text of at least 5 characters must be specified", "Close": "Close", "Connect to invidual POS": "Connect to invidual POS", + "Orders list": "Orders list", "---------------------------": "---------------------------", "UI Elements": "UI Elements", "Forms & Tables": "Forms & Tables", diff --git a/src/plugins/i18n/locales/fr.json b/src/plugins/i18n/locales/fr.json index 4f6b2b4..cc042fb 100755 --- a/src/plugins/i18n/locales/fr.json +++ b/src/plugins/i18n/locales/fr.json @@ -70,6 +70,7 @@ "Dates range error": "Dans le cas d'une plage de dates, un texte d'au moins 5 caractères doit être spécifié.", "Close": "Fermer", "Connect to invidual POS": "Connexion à une caisse individuelle", + "Orders list": "Liste des commandes", "---------------------------": "---------------------------", "UI Elements": "ÉLÉMENTS DE L'UI", "Forms & Tables": "Formulaires et tableaux", diff --git a/src/views/pages/order/view/OrderPanel.vue b/src/views/pages/order/view/OrderPanel.vue new file mode 100644 index 0000000..4e12ad3 --- /dev/null +++ b/src/views/pages/order/view/OrderPanel.vue @@ -0,0 +1,133 @@ +import { propsToCopy } from '@iconify/utils/lib/icon-set/get-icons'; + + + + + diff --git a/src/views/pages/order/view/OrderTabGeneralH.vue b/src/views/pages/order/view/OrderTabGeneralH.vue new file mode 100755 index 0000000..368ee7e --- /dev/null +++ b/src/views/pages/order/view/OrderTabGeneralH.vue @@ -0,0 +1,158 @@ + + +