fbenoist68
/
hdwposxy
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects Releases 3 Wiki Activity

feat: obi visualization

feat/issue-3/obi
Frédérik Benoist 2024-01-21 16:32:53 +01:00
parent 4ba95b3e88
commit d0841d9e6a
14 changed files with 361 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/obi/order/details/[id].vue
View File

@ -12,10 +12,10 @@ const orderData = ref<Order>()
const orderTab = ref(null)
const tabs = [
{ title: 'General' },
{ title: 'Preparation' },
{ title: 'Receipt' },
{ title: 'Flow' },
{ title: t('General') },
{ title: t('Preparation') },
{ title: t('Receipt') },
{ title: t('Flow') },
]
const { data, error, execute: fetchOrder } = await useApi<Order>(`/obi/order/${route.params.id}`)
@ -80,7 +80,7 @@ handleData()
color="primary"
@click="refreshData"
>
Reload
{{ t("Reload") }}
</VBtn>
</div>
</div>

166
src/pages/obi/order/list/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { format } from 'date-fns'
import { endOfMonth, format, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns'
import { VDataTableServer } from 'vuetify/labs/VDataTable'
import { paginationMeta } from '@api-utils/paginationMeta'
@ -8,10 +8,10 @@ const { t } = useI18n()
// Data table Headers
const headers = [
{ title: 'Id', key: 'meta.id' },
{ title: 'Order', key: 'common.orderId' },
{ title: 'Date', key: 'common.transaction.transactionDate' },
{ title: 'Status', key: 'common.statusData.code' },
{ title: 'Type', key: 'common.transaction.transactionTypeDescription' },
{ title: t('Order'), key: 'common.orderId' },
{ title: t('Date'), key: 'common.transaction.transactionDate' },
{ title: t('Status'), key: 'common.statusData.code' },
{ title: t('Type'), key: 'common.transaction.transactionTypeDescription' },
]
const selectedStatus = ref()
@ -48,6 +48,9 @@ const page = ref(1)
const sortBy = ref('request_id')
const orderBy = ref('desc')
const beginDate = ref<Date | null>(null)
const endDate = ref<Date | null>(null)
const sortByMapping = (sortby: string) => {
const headerMapping: { [key: string]: string } = {
'meta.id': 'request_id',
@ -80,6 +83,8 @@ const { data: ordersData } = await useApi<any>(createUrl('/obi/order',
orderBy,
status: selectedStatus,
type: selectedType,
minDate: beginDate,
maxDate: endDate,
},
},
))
@ -88,16 +93,44 @@ const widgetData = computed(() => ordersData.value.statistics)
const orders = computed(() => ordersData.value.orders)
const totalOrder = computed(() => ordersData.value.total)
const minDate = ref(new Date(2023, 1, 7))
const maxDate = ref(new Date())
const dateRange = ref([minDate.value.getTime(), maxDate.value.getTime()])
watch(beginDate, newBeginDate => {
if (endDate.value && newBeginDate !== null && newBeginDate > endDate.value)
endDate.value = newBeginDate
})
const updateDates = () => {
dateRange.value = dateRange.value.map(date => new Date(date).getTime())
watch(endDate, newEndDate => {
if (beginDate.value && newEndDate !== null && newEndDate < beginDate.value)
beginDate.value = newEndDate
})
const selectLastMonth = () => {
beginDate.value = startOfMonth(subMonths(new Date(), 1))
endDate.value = endOfMonth(subMonths(new Date(), 1))
}
const formattedStartDate = computed(() => format(new Date(dateRange.value[0]), 'dd/MM/yyyy'))
const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd/MM/yyyy'))
const selectThisMonth = () => {
const today = new Date()
const firstDayOfMonth = startOfMonth(today)
const lastDayOfMonth = endOfMonth(today)
beginDate.value = firstDayOfMonth
endDate.value = today < lastDayOfMonth ? today : lastDayOfMonth
}
const selectLast7Days = () => {
beginDate.value = startOfDay(subDays(new Date(), 6))
endDate.value = startOfDay(new Date())
}
const selectToday = () => {
beginDate.value = startOfDay(new Date())
endDate.value = startOfDay(new Date())
}
const clearDates = () => {
beginDate.value = null
endDate.value = null
}
</script>
<template>
@ -120,7 +153,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
<VCol
cols="12"
sm="6"
md="3"
md="2"
class="px-6"
>
<div
@ -205,41 +238,65 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
/>
</VCol>
</VRow>
<VRow>
<!-- 👉 dates range -->
<VRangeSlider
v-model="dateRange"
:min="minDate.getTime()"
:max="maxDate.getTime()"
class="mb-4"
:thumb-label="false"
@change="updateDates"
<VCol
cols="12"
sm="4"
>
<template #prepend>
<VTextField
v-model="formattedStartDate"
hide-details
single-line
type="String"
variant="outlined"
density="compact"
readonly
style="inline-size: 120px"
/>
</template>
<template #append>
<VTextField
v-model="formattedEndDate"
hide-details
single-line
type="String"
variant="outlined"
density="compact"
readonly
style="inline-size: 120px"
/>
</template>
</VRangeSlider>
<!-- 👉 Begin Date -->
<AppDateTimePicker
v-model="beginDate"
:placeholder="$t('Date begin')"
:config="{ altFormat: 'J M Y', altInput: true, dateFormat: 'Ymd' }"
/>
</VCol>
<VCol
cols="12"
sm="4"
>
<!-- 👉 End Date -->
<AppDateTimePicker
v-model="endDate"
:placeholder="$t('Date end')"
:config="{ altFormat: 'J M Y', altInput: true, dateFormat: 'Ymd' }"
/>
</VCol>
<VCol
cols="12"
sm="4"
>
<VBtn
variant="text"
@click="selectLastMonth"
>
{{ $t('Last month') }}
</VBtn>
<VBtn
variant="text"
@click="selectThisMonth"
>
{{ $t('This month') }}
</VBtn>
<VBtn
variant="text"
@click="selectLast7Days"
>
{{ $t('Last 7 days') }}
</VBtn>
<VBtn
variant="text"
@click="selectToday"
>
{{ $t('Today') }}
</VBtn>
<VBtn
variant="text"
@click="clearDates"
>
{{ $t('All') }}
</VBtn>
</VCol>
</VRow>
</VCardText>
</VCard>
@ -251,7 +308,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
<VTextField
v-model="searchQuery"
density="compact"
placeholder="Search"
:placeholder="$t('Search')"
style=" max-inline-size: 200px; min-inline-size: 200px;"
/>
@ -331,7 +388,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
v-bind="slotProps"
:icon="false"
>
Previous
{{ $t('$vuetify.pagination.ariaLabel.previous') }}
</VBtn>
</template>
@ -342,7 +399,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
v-bind="slotProps"
:icon="false"
>
Next
{{ $t('$vuetify.pagination.ariaLabel.next') }}
</VBtn>
</template>
</VPagination>
@ -352,14 +409,3 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
</VCard>
</div>
</template>
<style lang="scss" scoped>
.customer-title:hover{
color: rgba(var(--v-theme-primary)) !important;
}
.product-widget{
border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
padding-block-end: 1rem;
}
</style>

3
src/plugins/fake-api/utils/paginationMeta.ts
View File

@ -1,6 +1,7 @@
export const paginationMeta = <T extends { page: number; itemsPerPage: number }>(options: T, total: number) => {
const start = (options.page - 1) * options.itemsPerPage + 1
const end = Math.min(options.page * options.itemsPerPage, total)
const { t } = useI18n()
return `Showing ${total === 0 ? 0 : start} to ${end} of ${total} entries`
return `${t('Showing')} ${total === 0 ? 0 : start} ${t('to')} ${end} ${t('of')} ${total} ${t('entries')}`
}

52
src/plugins/i18n/locales/ar.json
View File

@ -70,8 +70,57 @@
"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",
"Sign": "Sign",
"Order list": "قائمة الطلبات",
"Status": "الحالة",
"Type": "النوع",
"Last month": "الشهر الماضي",
"This month": "هذا الشهر",
"Last 7 days": "آخر 7 أيام",
"Today": "اليوم",
"All": "الكل",
"Date begin": "Date begin",
"Date end": "Date end",
"Order": "الطلب",
"showing": "Showing",
"to": "to",
"of": "of",
"entries": "entries",
"Consumed": "Consumed",
"Created": "Created",
"Qty": "Qty",
"General": "General",
"Preparation": "Preparation",
"Receipt": "Receipt",
"Order lines": "Order lines",
"Transaction date history": "Transaction date history",
"Creation date history": "Creation date history",
"Status order history": "Status order history",
"Order was": "Order was",
"Your order has been": "Your order has been",
"Order line was": "Order line was",
"successfully": "successfully",
"OMS": "OMS",
"OMS Partner": "OMS Partner",
"Transaction details": "Transaction details",
"Last status": "Last status",
"Added": "Added",
"Modified": "Modified",
"Transaction": "Transaction",
"Open order": "Open order",
"Origin request": "Origin request",
"Cust Id": "Cust Id",
"Ship for Pickup": "Ship for Pickup",
"Order transaction": "Order transaction",
"Order Details": "Order Details",
"Package": "Package",
"Tracking": "Tracking",
"Cd": "Cd",
"Weight": "Weight",
"N°Exp": "N°Exp",
"Carrier": "Carrier",
"URL": "URL",
"Restocking": "Restocking",
"---------------------------": "---------------------------",
"UI Elements": "عناصر واجهة المستخدم",
"Forms & Tables": "النماذج والجداول",
@ -212,7 +261,6 @@
"Ecommerce": "التجارة الإلكترونية",
"Product": "المنتج",
"Category": "الفئة",
"Order": "طلب",
"Details": "تفاصيل",
"Customer": "الزبون",
"Manage Review": "إدارة المراجعة",

50
src/plugins/i18n/locales/en.json
View File

@ -72,6 +72,55 @@
"Connect to invidual POS": "Connect to invidual POS",
"Orders list": "Orders list",
"Sign": "Sign",
"Status": "Status",
"Type": "Type",
"Last month": "Last month",
"This month": "This month",
"Last 7 days": "Last 7 days",
"Today": "Today",
"All": "All",
"Date begin": "Date begin",
"Date end": "Date end",
"Order": "Order",
"Showing": "Showing",
"to": "to",
"of": "of",
"entries": "entries",
"Consumed": "Consumed",
"Created": "Created",
"Qty": "Qty",
"Preparation": "Preparation",
"Receipt": "Réception",
"Order lines": "Order lines",
"Status history": "Status history",
"Transaction date history": "Transaction date history",
"Creation date history": "Creation date history",
"Status order history": "Status order history",
"Order was": "Order was",
"Order has been": "Order has been",
"Order line was": "Order line was",
"successfully": "successfully",
"OMS": "OMS",
"OMS Partner": "OMS Partner",
"Transaction details": "Transaction details",
"Last status": "Last status",
"Added": "Added",
"Modified": "Modified",
"Transaction": "Transaction",
"Open order": "Open order",
"Origin request": "Origin request",
"Cust Id": "Cust Id",
"Ship for Pickup": "Ship for Pickup",
"Order transaction": "Order transaction",
"Order Details": "Order Details",
"Package": "Package",
"Tracking": "Tracking",
"Cd": "Cd",
"Weight": "Weight",
"N°Exp": "N°Exp",
"Carrier": "Carrier",
"URL": "URL",
"Restocking": "Restocking",
"---------------------------": "---------------------------",
"UI Elements": "UI Elements",
"Forms & Tables": "Forms & Tables",
@ -218,7 +267,6 @@
"Swiper": "Swiper",
"Product": "Product",
"Category": "Category",
"Order": "Order",
"Details": "Details",
"Customer": "Customer",
"Manage Review": "Manage Review",

53
src/plugins/i18n/locales/fr.json
View File

@ -72,6 +72,56 @@
"Connect to invidual POS": "Connexion à une caisse individuelle",
"Orders list": "Liste des commandes",
"Sign": "Enseigne",
"Order list": "Liste des commandes",
"Status": "Statut",
"Type": "Type",
"Last month": "Mois dernier",
"This month": "Ce mois",
"Last 7 days": "7 derniers jours",
"Today": "Aujourd'hui",
"All": "Tous",
"Date begin": "Date début",
"Date end": "Date fin",
"Order": "Commande",
"Showing": "Affichage",
"to": "à",
"of": "parmi",
"entries": "entrées",
"Consumed": "Consumed",
"Created": "Créé",
"Qty": "Qté",
"Preparation": "Preparation",
"Receipt": "Réception",
"Order lines": "Lignes de commande",
"Status history": "Histo. statuts",
"Transaction date history": "Histo. dates transaction",
"Creation date history": "Histo. dates création",
"Status order history": "Historique statuts commande",
"Order was": "Commande a été",
"Order has been": "Commande a été",
"Order line was": "Ligne a été",
"successfully": "avec succès",
"OMS": "OMS",
"OMS Partner": "Partenaire OMS",
"Transaction details": "Détails transaction",
"Last status": "Dernier statut",
"Added": "Ajouté",
"Modified": "Modifié",
"Transaction": "Transaction",
"Open order": "Commande",
"Origin request": "Origine",
"Cust Id": "Id client",
"Ship for Pickup": "Ship for Pickup",
"Order transaction": "Transaction commande",
"Order Details": "Details commande",
"Package": "Colis",
"Tracking": "Tracking",
"Cd": "Cd",
"Weight": "Poids",
"N°Exp": "N°Exp",
"Carrier": "Transport",
"URL": "URL",
"Restocking": "Restocking",
"---------------------------": "---------------------------",
"UI Elements": "ÉLÉMENTS DE L'UI",
"Forms & Tables": "Formulaires et tableaux",
@ -214,7 +264,6 @@
"Ecommerce": "Commerce électronique",
"Product": "Produit",
"Category": "Catégorie",
"Order": "Ordre",
"Details": "Détails",
"Customer": "Client",
"Manage Review": "Gérer la revue",
@ -252,7 +301,7 @@
"dataFooter": {
"itemsPerPageText": "Objets par page:",
"itemsPerPageAll": "Tout",
"pageText": "{0}-{1} of {2}",
"pageText": "{0}-{1} de {2}",
"firstPage": "Première page",
"prevPage": "Page précédente",
"nextPage": "Page suivante",

5
src/plugins/i18n/vue-i18n.d.ts vendored
View File

@ -6,10 +6,13 @@
/**
* you need to import the some interfaces
*/
import ar from '@/plugins/i18n/locales/ar.json';
import en from '@/plugins/i18n/locales/en.json';
import fr from '@/plugins/i18n/locales/fr.json';
import 'vue-i18n';
type LocaleMessage = typeof en
type LocaleMessage = typeof en & typeof fr & typeof ar;
declare module 'vue-i18n' {
export interface DefineLocaleMessage extends LocaleMessage {

7
src/plugins/vuetify/index.ts
View File

@ -1,10 +1,13 @@
import { deepMerge } from '@antfu/utils'
import type { App } from 'vue'
import { useI18n } from 'vue-i18n'
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
import defaults from './defaults'
import { icons } from './icons'
import { staticPrimaryColor, themes } from './theme'
import { getI18n } from '@/plugins/i18n/index'
// Styles
import { cookieRef } from '@/@layouts/stores/config'
@ -37,7 +40,9 @@ export default function (app: App) {
defaults,
icons,
theme: optionTheme,
locale: {
adapter: createVueI18nAdapter({ i18n: getI18n(), useI18n }),
},
})
app.use(vuetify)

4
src/utils/order.ts
View File

@ -1,7 +1,7 @@
export const resolveOrderStatus = (status: string) => {
if (status === 'received')
if (status === 'received' || status === 'fulfilled')
return { text: status, color: 'success' }
else if (status === 'fulfilled' || status === 'polled')
else if (status === 'polled')
return { text: status, color: 'info' }
else if (status === 'intransit polled')
return { text: status, color: 'warning' }

22
src/views/pages/order/view/OrderOms.vue
View File

@ -7,6 +7,8 @@ import 'vue-json-pretty/lib/styles.css'
const props = defineProps<Props>()
const { t } = useI18n()
interface Props {
orderData: Order
}
@ -56,10 +58,10 @@ const openOmsOrderPage = (): void => {
<VCol cols="6">
<VCardText class="pa-4">
<h6 class="text-lg text-no-wrap font-weight-medium">
Proximis
{{ $t('OMS') }}
</h6>
<p class="mb-2">
OMS Partner
{{ $t('OMS Partner') }}
</p>
</VCardText>
</VCol>
@ -81,7 +83,7 @@ const openOmsOrderPage = (): void => {
<div v-if="omsData">
<VList class="card-list mt-0">
<div class="text-disabled text-uppercase text-sm">
Transaction details
{{ $t('Transaction details') }}
</div>
<VListItem>
<div class="text-body-1 mt-2">
@ -95,7 +97,7 @@ const openOmsOrderPage = (): void => {
<VList class="card-list mt-2">
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Last status:</span>
<span class="font-weight-bold me-2">{{ $t('Last status') }}:</span>
<span>
{{ omsData.oms.item.status }}
</span>
@ -105,7 +107,7 @@ const openOmsOrderPage = (): void => {
<VList class="card-list mt-2">
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Added:</span>
<span class="font-weight-bold me-2">{{ $t('Added') }}:</span>
<span>
{{ format(omsData.oms.item.modificationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
</span>
@ -125,7 +127,7 @@ const openOmsOrderPage = (): void => {
<VList class="card-list mt-2">
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Modified:</span>
<span class="font-weight-bold me-2">{{ $t('Modified') }}:</span>
<span>
{{ format(omsData.oms.item.creationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
</span>
@ -147,7 +149,7 @@ const openOmsOrderPage = (): void => {
class="mt-0"
@click="openOrderMessageDialog"
>
Transaction
{{ $t('Transaction') }}
</VBtn>
</VCardText>
</VCol>
@ -162,7 +164,7 @@ const openOmsOrderPage = (): void => {
class="mt-0"
@click="openOmsOrderPage"
>
Open order
{{ $t('Open order') }}
</VBtn>
</VCardText>
</VCol>
@ -191,7 +193,7 @@ const openOmsOrderPage = (): void => {
/>
</VBtn>
<VToolbarTitle>Order transaction</VToolbarTitle>
<VToolbarTitle>{{ t("Order transaction") }}</VToolbarTitle>
<VSpacer />
@ -200,7 +202,7 @@ const openOmsOrderPage = (): void => {
variant="text"
@click="OrderMessageDialogVisible = false"
>
Close
{{ t("Close") }}
</VBtn>
</VToolbarItems>
</VToolbar>

12
src/views/pages/order/view/OrderPanel.vue
View File

@ -20,12 +20,12 @@ interface Props {
<!-- 👉 Order Details -->
<VCardText>
<div class="text-disabled text-uppercase text-sm">
Order Details
{{ $t('Order Details') }}
</div>
<VList class="card-list mt-2">
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Origin request:</span>
<span class="font-weight-bold me-2">{{ $t('Origin request') }}:</span>
<span>
{{ props.orderData.common.requestingLocationCd }} / {{ props.orderData.common.requestingSystemCd }}
</span>
@ -33,7 +33,7 @@ interface Props {
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Cust Id:</span>
<span class="font-weight-bold me-2">{{ $t('Cust Id') }}:</span>
<span>
{{ props.orderData.common.customerId }}
</span>
@ -41,7 +41,7 @@ interface Props {
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Date creation:</span>
<span class="font-weight-bold me-2">{{ $t('Created') }}:</span>
<span>
{{ format(props.orderData.common.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
</span>
@ -49,7 +49,7 @@ interface Props {
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Ship for Pickup:</span>
<span class="font-weight-bold me-2">{{ $t('Ship for Pickup') }}:</span>
<span>
{{ props.orderData.common.shipforpickupLocationCd }} / {{ props.orderData.common.shipforpickupSystemCd }}
</span>
@ -57,7 +57,7 @@ interface Props {
</VListItem>
</VList>
<div class="text-disabled text-uppercase mt-4 text-sm">
Transaction
{{ $t('Transaction') }}
</div>
<VList class="card-list mt-2">
<VListItem>

92
src/views/pages/order/view/OrderTabGeneralH.vue
View File

@ -19,7 +19,6 @@ const headers = computed(() => [
{ title: t('Date'), key: 'transactionDate' },
{ title: t('Status'), key: 'status' },
{ title: t('Consumed'), key: 'consumed' },
{ title: t('Created'), key: 'fdateCreation' },
])
</script>
@ -29,7 +28,7 @@ const headers = computed(() => [
<VCardItem>
<template #title>
<h5 class="text-h5">
Order Lines
{{ $t('Order lines') }}
</h5>
</template>
</VCardItem>
@ -52,43 +51,53 @@ const headers = computed(() => [
</VChip>
</template>
<template #item.status="{ item }">
<VChip
variant="outlined"
label
>
{{ item.status }}
</VChip>
</template>
<!-- Expanded Row Data -->
<template #expanded-row="slotProps">
<td :colspan="headers.length">
<VTable
density="compact"
class="text-no-wrap"
>
<thead>
<tr>
<th class="text-uppercase">
Status history
</th>
<th class="text-uppercase">
Transaction date history
</th>
<th class="text-uppercase">
Creation date history
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in slotProps.item.history"
:key="item.statusId"
<VCardText>
<VTimeline
truncate-line="both"
align="start"
side="end"
line-color="primary"
density="compact"
class="v-timeline-density-compact"
>
<template
v-for="(historyItem, index) in slotProps.item.history"
:key="index"
>
<td>
{{ item.status }}
</td>
<td>
{{ format(item.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
</td>
<td>
{{ format(item.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
</td>
</tr>
</tbody>
</VTable>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center">
<div class="app-timeline-title">
<VChip
variant="outlined"
label
>
{{ historyItem.status }}
</VChip>
(Id#{{ historyItem.statusId }})
</div>
<div class="app-timeline-meta">
{{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
</div>
</div>
</VTimelineItem>
</template>
</VTimeline>
</VCardText>
</td>
</template>
@ -115,7 +124,7 @@ const headers = computed(() => [
</VCard>
<!-- 👉 Order History -->
<VCard title="Status order history">
<VCard :title="$t('Status order history')">
<VCardText>
<VTimeline
truncate-line="both"
@ -135,15 +144,18 @@ const headers = computed(() => [
>
<div class="d-flex justify-space-between align-center">
<div class="app-timeline-title">
Order was {{ historyItem.status }} (Id: #{{ historyItem.statusId }})
<VChip
variant="outlined"
label
>
{{ historyItem.status }}
</VChip>
(Id#{{ historyItem.statusId }})
</div>
<div class="app-timeline-meta">
{{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
</div>
</div>
<p class="app-timeline-text mb-0">
Your order has been {{ historyItem.status }} successfully
</p>
</VTimelineItem>
</template>
</VTimeline>

18
src/views/pages/order/view/OrderTabPreparationH.vue
View File

@ -80,7 +80,7 @@ const panelStatus = ref(0)
<VList class="card-list mt-1">
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">N°Exp:</span>
<span class="font-weight-bold me-2">{{ $t('N°Exp') }}:</span>
<span>
{{ preparationLine.numeroExpedition }}
</span>
@ -88,7 +88,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">Cd:</span>
<span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
<span>
{{ preparationLine.fulfillmentSystemCd }} / {{ preparationLine.fulfillmentLocationCd }}
</span>
@ -96,7 +96,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">Qty:</span>
<span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
<span>
{{ preparationLine.validatedFulfillQty }} / {{ preparationLine.fulfillQty }}
</span>
@ -104,7 +104,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Carrier:</span>
<span class="font-weight-bold me-2">{{ $t('Carrier') }}:</span>
<span>
{{ preparationLine.carrier }}
</span>
@ -112,7 +112,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Tracking:</span>
<span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
<span>
{{ preparationLine.trackingCode }}
</span>
@ -120,7 +120,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">URL:</span>
<span class="font-weight-bold me-2">{{ $t('URL') }}:</span>
<span>
<a
v-if="preparationLine.trackingUrl"
@ -133,7 +133,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Restocking:</span>
<span class="font-weight-bold me-2">{{ $t('Restocking') }}:</span>
<span>
{{ preparationLine.restockingCode }}
</span>
@ -144,9 +144,9 @@ const panelStatus = ref(0)
v-bind="resolveOrderStatus(preparationLine.status)"
variant="tonal"
label
size="default"
size="x-small"
/>
{{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
{{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
</VListItem>
</VList>
</VCardText>

14
src/views/pages/order/view/OrderTabReceptionH.vue
View File

@ -80,7 +80,7 @@ const panelStatus = ref(0)
<VList class="card-list mt-1">
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">Colis:</span>
<span class="font-weight-bold me-2">{{ $t('Package') }}:</span>
<span>
{{ receptionLine.colisId }}
</span>
@ -88,7 +88,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">Cd:</span>
<span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
<span>
{{ receptionLine.intransitSystemCd }} / {{ receptionLine.intransitLocationCd }}
</span>
@ -96,7 +96,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem cla>
<div class="text-body-1">
<span class="font-weight-bold me-2">Qty:</span>
<span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
<span>
{{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
</span>
@ -104,7 +104,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Tracking:</span>
<span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
<span>
{{ receptionLine.trackingNumber }}
</span>
@ -112,7 +112,7 @@ const panelStatus = ref(0)
</VListItem>
<VListItem>
<div class="text-body-1">
<span class="font-weight-bold me-2">Weight:</span>
<span class="font-weight-bold me-2">{{ $t('Weight') }}:</span>
<span>
{{ receptionLine.orderLineShipWeight }}
</span>
@ -123,9 +123,9 @@ const panelStatus = ref(0)
v-bind="resolveOrderStatus(receptionLine.status)"
variant="tonal"
label
size="default"
size="x-small"
/>
{{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
{{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
</VListItem>
</VList>
</VCardText>