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 all 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
66 changes: 1 addition & 65 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 @@ -63,42 +63,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("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">
<td class="overflow-hidden text-ellipsis p-5">
Expand All @@ -119,26 +83,6 @@
</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>
Expand Down Expand Up @@ -170,15 +114,7 @@ const columns = computed<ITableColumn[]>(() => [
{ id: "amount", title: t("loyalty.points-history.amount"), sortable: false, align: "right" },
]);

const {
fetchHistory,
sort,
loading: historyLoading,
historyLogs,
itemsPerPage,
pages,
page,
} = useLoyaltyPointsHistory();
const { fetchHistory, sort, loading: historyLoading, historyLogs, pages, page } = useLoyaltyPointsHistory();

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

Expand Down
30 changes: 1 addition & 29 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 @@ -58,26 +58,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 @@ -94,14 +74,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 All @@ -126,7 +98,7 @@ usePageHead({
title: t("purchase_requests.meta.title"),
});

const { loading, purchaseRequests, itemsPerPage, pages, page, sort } = usePurchaseRequests();
const { loading, purchaseRequests, pages, page, sort } = usePurchaseRequests();

const columns = ref<ITableColumn[]>([
{
Expand Down
46 changes: 1 addition & 45 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 @@ -107,42 +107,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 @@ -167,14 +131,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 Expand Up @@ -204,7 +160,7 @@ usePageHead({

const { browserTarget } = useBrowserTarget();

const { quotes, fetching, itemsPerPage, pages, page, keyword, sort, fetchQuotes } = useUserQuotes();
const { quotes, fetching, pages, page, keyword, sort, fetchQuotes } = useUserQuotes();
const { mutate: createQuote } = useMutation(CreateQuoteDocument);

const sortQueryParam = useRouteQueryParam<string>(QueryParamName.Sort, {
Expand Down
60 changes: 0 additions & 60 deletions client-app/pages/account/addresses.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,42 +93,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 @@ -156,30 +120,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
44 changes: 0 additions & 44 deletions client-app/pages/company/info.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,42 +213,6 @@
</div>
</template>

<template #mobile-skeleton>
<div
v-for="i in paginatedAddresses.length"
:key="i"
class="relative mb-3 flex items-start rounded-[--vc-radius] border px-3.5 py-4 last:mb-0"
>
<div class="grow space-y-2.5 pe-2">
<div>
<div class="mb-0.5 flex items-center gap-1 text-xs text-neutral">
{{ $t("pages.company.info.labels.address") }}
</div>

<div class="h-4.5 animate-pulse bg-neutral-200"></div>
</div>

<div class="flex">
<div class="w-1/2 pe-2">
<div class="mb-0.5 text-xs text-neutral">
{{ $t("pages.company.info.labels.zip") }}
</div>

<div class="h-4.5 animate-pulse bg-neutral-200"></div>
</div>

<div class="w-1/2 ps-2">
<div class="mb-0.5 text-xs text-neutral">
{{ $t("pages.company.info.labels.country") }}
</div>

<div class="h-4.5 animate-pulse bg-neutral-200"></div>
</div>
</div>
</div>
</div>
</template>

<template #desktop-body>
<tr v-for="address in paginatedAddresses" :key="address.id" class="even:bg-neutral-50">
<td class="px-4 py-3 text-center">
Expand Down Expand Up @@ -316,14 +280,6 @@
</td>
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="i in paginatedAddresses.length" :key="i" class="even:bg-neutral-50">
<td v-for="column in columns.length" :key="column" class="px-5 py-4">
<div class="h-4.5 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>
</VcTable>
</div>
</VcWidget>
Expand Down
29 changes: 0 additions & 29 deletions client-app/pages/company/members.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,18 +275,6 @@
</tr>
</template>

<template #desktop-skeleton>
<tr v-for="row in itemsPerPage" :key="row" class="even:bg-neutral-50">
<td class="py-2.5 pl-4 pr-0">
<div class="size-9 animate-pulse rounded-full bg-neutral-200"></div>
</td>

<td v-for="column in columns.length - 1" :key="column" class="px-4 py-3">
<div class="h-5 animate-pulse bg-neutral-200"></div>
</td>
</tr>
</template>

<template #mobile-item="{ item }">
<div class="flex items-center border-b px-5">
<div class="py-4.5">
Expand Down Expand Up @@ -320,22 +308,6 @@
</div>
</template>

<template #mobile-skeleton>
<div
v-for="row in itemsPerPage"
:key="row"
class="grid grid-cols-2 gap-y-4 border-b border-neutral-200 p-6"
>
<div class="flex flex-col">
<div class="animate-pulse bg-neutral-200 py-6 pl-6"></div>
</div>

<div class="flex flex-col">
<div class="animate-pulse bg-neutral-200 py-6 pl-4"></div>
</div>
</div>
</template>

<template #page-limit-message>
{{ $t("ui_kit.reach_limit.page_limit_filters") }}
</template>
Expand Down Expand Up @@ -387,7 +359,6 @@ const {
loading: contactsLoading,
page,
pages,
itemsPerPage,
sort,
keyword,
filter,
Expand Down
Loading
Loading