Skip to content

feat(VCST-3810): update vc-table #2048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
goldenmaya wants to merge 11 commits into
base: dev
Choose a base branch
from
Draft

feat(VCST-3810): update vc-table #2048

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b60096e
fix: remove unused
goldenmaya Oct 14, 2025
369f9e1
feat: implement BEM in vc-table
goldenmaya Oct 14, 2025
b7cac96
Merge branch 'dev' into feat/VCST-3810-vc-table
goldenmaya Nov 7, 2025
ad5578c
feat: add default skeletons and update components
muller39 Nov 12, 2025
d26f4f7
feat: add story
muller39 Nov 12, 2025
c3e0427
fix: remove extra code
muller39 Nov 17, 2025
ea3ef73
fix: add default skeleton row size
muller39 Nov 17, 2025
25aee16
Merge branch 'dev' into feat/VCST-3810-vc-table
muller39 Nov 17, 2025
b3a10ef
fix: types
muller39 Nov 18, 2025
40bf0f2
fix: types
muller39 Nov 18, 2025
75d8cae
Merge branch 'dev' into feat/VCST-3810-vc-table
goldenmaya Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 19 additions & 73 deletions client-app/modules/loyalty/pages/points-history.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div v-if="!balanceLoading">
{{ $t("loyalty.points-history.current-balance", { currentBalance: currentBalance }) }}
</div>
</div>
</div>

<VcWidget size="lg">
<template #default-container>
Expand All @@ -21,10 +21,13 @@
:page="page"
:hide-default-footer="false"
mobile-breakpoint="lg"
:skeleton-rows="itemsPerPage"
@page-changed="changePage"
>
<template #mobile-item="itemData">
<div class="grid w-full cursor-pointer appearance-none grid-cols-2 items-center gap-y-4 border-b border-neutral-200 p-6 text-left">
<div
class="grid w-full cursor-pointer appearance-none grid-cols-2 items-center gap-y-4 border-b border-neutral-200 p-6 text-left"
>
<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("loyalty.points-history.operation") }}
Expand Down Expand Up @@ -58,48 +61,11 @@
{{ itemData.item?.amount }}
</span>
</div>

</div>
</template>

<template #mobile-skeleton>
<div v-for="i in itemsPerPage" :key="i" class="grid grid-cols-2 gap-y-4 border-b border-neutral-200 p-6">
<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("loyalty.points-history.operation") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("loyalty.points-history.operation-type") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("loyalty.points-history.date") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("loyalty.points-history.amount") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>
</div>
</template>

<template #desktop-body>
<tr
v-for="log in historyLogs"
:key="log.id"
class="cursor-default even:bg-neutral-50 hover:bg-neutral-200"
>
<tr v-for="log in historyLogs" :key="log.id" class="cursor-default even:bg-neutral-50 hover:bg-neutral-200">
<td class="overflow-hidden text-ellipsis p-5">
{{ getOperation(log) }}
</td>
Expand All @@ -118,49 +84,33 @@
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="i in itemsPerPage" :key="i" class="even:bg-neutral-50">
<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="w-4/12 p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>

<template #page-limit-message>
{{ $t("ui_kit.reach_limit.page_limit_filters") }}
</template>
</VcTable>
</template>
</template>
</VcWidget>
</div>
</div>
</template>

<script setup lang="ts">

import { computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useLoyaltyBalance } from "../composables/useLoyaltyBalance";
import { useLoyaltyPointsHistory } from "../composables/useLoyaltyPointsHistory";
import { CUSTOMER_ORDER_OBJECT_TYPE, REGISTRATION_OBJECT_TYPE, REDEEMED_OPERATION, EARNED_OPERATION } from "../constants";
import {
CUSTOMER_ORDER_OBJECT_TYPE,
REGISTRATION_OBJECT_TYPE,
REDEEMED_OPERATION,
EARNED_OPERATION,
} from "../constants";
import type { LoyaltyOperationLog } from "../api/graphql/types";

const { t } = useI18n();

const columns = computed<ITableColumn[]>(() => [
{ id: "operation", title: t("loyalty.points-history.operation"), sortable: false },
{ id: "operationType", title: t("loyalty.points-history.operation-type"), sortable: false },
{ id: "operationType", title: t("loyalty.points-history.operation-type"), sortable: false },
{ id: "createdDate", title: t("loyalty.points-history.date"), sortable: false, classes: "!px-3" },
{ id: "amount", title: t("loyalty.points-history.amount"), sortable: false, align: "right" },
]);
Expand All @@ -175,11 +125,7 @@ const {
page,
} = useLoyaltyPointsHistory();

const {
fetchLoyaltyBalance,
loading: balanceLoading,
currentBalance,
} = useLoyaltyBalance();
const { fetchLoyaltyBalance, loading: balanceLoading, currentBalance } = useLoyaltyBalance();

async function changePage(newPage: number) {
page.value = newPage;
Expand All @@ -204,14 +150,14 @@ function getOperationType(log: LoyaltyOperationLog) {
return t("loyalty.points-history.redeemed");
}

if (log.operationType === EARNED_OPERATION ) {
if (log.operationType === EARNED_OPERATION) {
return t("loyalty.points-history.earned");
}

return log.operationType;
}

onMounted(async () => {
await Promise.all([ fetchHistory(), fetchLoyaltyBalance() ]);
await Promise.all([fetchHistory(), fetchLoyaltyBalance()]);
});
</script>
27 changes: 1 addition & 26 deletions client-app/modules/purchase-requests/pages/purchase-requests.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
:pages="pages"
:page="page"
:description="$t('purchase_requests.meta.table_description')"
:skeleton-rows="itemsPerPage"
@item-click="goToPurchaseRequest"
@header-click="applySorting"
@page-changed="changePage"
Expand Down Expand Up @@ -58,24 +59,6 @@
</div>
</template>

<template #mobile-skeleton>
<div v-for="i in itemsPerPage" :key="i" class="grid grid-cols-2 gap-y-4 border-b border-neutral-200 p-6">
<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("purchase_requests.purchase_request_number_label") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("purchase_requests.date_label") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>
</div>
</template>

<template #desktop-body>
<tr
v-for="purchaseRequest in purchaseRequests"
Expand All @@ -92,14 +75,6 @@
</td>
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="i in itemsPerPage" :key="i" class="even:bg-neutral-50">
<td v-for="column in columns" :key="column.id" class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>
</VcTable>
</template>
</VcWidget>
Expand Down
42 changes: 2 additions & 40 deletions client-app/modules/quotes/pages/quotes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

<VcButton size="sm" variant="outline" prepend-icon="plus" @click="requestQuote">
<span class="hidden sm:inline">{{ $t("quotes.request_quote_button") }}</span>

<span class="sm:hidden">{{ $t("quotes.request_quote_button") }}</span>
</VcButton>
</div>
Expand Down Expand Up @@ -58,6 +59,7 @@
:pages="pages"
:page="page"
:description="$t('quotes.meta.table_description')"
:skeleton-rows="itemsPerPage"
@item-click="goToQuoteDetails"
@header-click="applySorting"
@page-changed="changePage"
Expand Down Expand Up @@ -106,38 +108,6 @@
</button>
</template>

<template #mobile-skeleton>
<div v-for="i in itemsPerPage" :key="i" class="grid grid-cols-2 gap-y-4 border-b border-neutral-200 p-6">
<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("quotes.quote_number_label") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("quotes.date_label") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("quotes.total_label") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("quotes.status_label") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>
</div>
</template>

<template #desktop-body>
<tr
v-for="quote in quotes"
Expand All @@ -162,14 +132,6 @@
</td>
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="i in itemsPerPage" :key="i" class="even:bg-neutral-50">
<td v-for="column in columns" :key="column.id" class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>
</VcTable>
</template>
</VcWidget>
Expand Down
58 changes: 2 additions & 56 deletions client-app/pages/account/addresses.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

<VcButton v-if="paginatedAddresses.length" size="sm" variant="outline" @click="openAddOrUpdateAddressModal()">
<span class="sm:hidden">{{ $t("common.buttons.add_new") }}</span>

<span class="hidden sm:inline">{{ $t("common.buttons.add_new_address") }}</span>
</VcButton>
</div>
Expand Down Expand Up @@ -35,6 +36,7 @@
:pages="pages"
:page="page"
:description="$t('pages.account.addresses.meta.table_description')"
:skeleton-rows="itemsPerPage"
@page-changed="onPageChange"
@header-click="applySorting"
>
Expand Down Expand Up @@ -92,38 +94,6 @@
</div>
</template>

<template #mobile-skeleton>
<div v-for="i in itemsPerPage" :key="i" class="grid grid-cols-2 gap-y-4 border-b border-neutral-200 p-6">
<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("common.labels.recipient_name") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("common.labels.address") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("common.labels.phone") }}
</span>
<div class="mr-4 h-6 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex flex-col">
<span class="text-sm text-neutral-400">
{{ $t("common.labels.email") }}
</span>
<div class="h-6 animate-pulse bg-neutral-200"></div>
</div>
</div>
</template>

<template #desktop-body>
<tr v-for="address in paginatedAddresses" :key="address.id" class="even:bg-neutral-50">
<td class="overflow-hidden text-ellipsis p-5">{{ address.firstName }} {{ address.lastName }}</td>
Expand Down Expand Up @@ -151,30 +121,6 @@
</td>
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="i in itemsPerPage" :key="i" class="even:bg-neutral-50">
<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="w-4/12 p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>

<td class="p-5">
<div class="h-6 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>
</VcTable>
</template>
</VcWidget>
Expand Down
Loading