erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: install prettier

Browse Source
This commit is contained in:
Viet An
2026-05-04 15:22:27 +07:00
parent 93d29ca7d8
commit bd58e2b847
267 changed files with 22950 additions and 13581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
app/components/viewer/Legends.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { countBy, difference, isEqual, pick } from 'es-toolkit';
import Search from '@/components/viewer/Search.vue';
import { countBy, difference, isEqual, pick } from "es-toolkit";
import Search from "@/components/viewer/Search.vue";
const props = defineProps({
products: Object,
@@ -15,46 +15,36 @@ const props = defineProps({
statusMode: Object,
});
const {
products,
carts,
dealers,
defaultCartIds,
defaultDealerIds,
filters,
statuses,
statusModes,
statusMode,
} = toRefs(props)
const { products, carts, dealers, defaultCartIds, defaultDealerIds, filters, statuses, statusModes, statusMode } =
toRefs(props);
const emit = defineEmits(['switchStatusMode', 'updateFilters', 'resetCartDealerFilters', 'resetFilters']);
const emit = defineEmits(["switchStatusMode", "updateFilters", "resetCartDealerFilters", "resetFilters"]);
const store = useStore();
const showFilterModal = ref(null);
const { dealer } = store;
const filterTabs = dealer ? { CARTS: 'Giỏ hàng' } : { CARTS: 'Giỏ hàng', DEALERS: 'Đại lý' };
const filterTabs = dealer ? { CARTS: "Giỏ hàng" } : { CARTS: "Giỏ hàng", DEALERS: "Đại lý" };
function openFiltersModal() {
showFilterModal.value = {
component: 'viewer/Filters',
title: 'Tuỳ chọn',
width: '40%',
height: '20%',
vbind: {
component: "viewer/Filters",
title: "Tuỳ chọn",
width: "40%",
height: "20%",
vbind: {
carts,
dealers,
filters,
filterTabs,
productCount: products.value.length
productCount: products.value.length,
},
};
}
function updateFilters(updatedFilters) {
if (isEqual(pick(filters.value, ['cartIds', 'dealerIds']), updatedFilters.value))
return;
let payload;
if (isEqual(pick(filters.value, ["cartIds", "dealerIds"]), updatedFilters.value)) return;
let payload;
const { lastlegendfiltertab } = store;
if (lastlegendfiltertab === filterTabs.CARTS) {
@@ -68,30 +58,32 @@ function updateFilters(updatedFilters) {
dealerIds: toRaw(updatedFilters.value.dealerIds),
};
}
emit('updateFilters', payload);
emit("updateFilters", payload);
}
const cartOrDealerFilterInfo = computed(() => {
// dealer or cart filter is modified
if (filters.value.cartIds.length < carts.value.length) {
const filteredCarts = carts.value.filter(c => filters.value.cartIds.includes(c.id)).map(c => c.name.replace('Giỏ hàng ', ''));
if (filters.value.cartIds.length < carts.value.length) {
const filteredCarts = carts.value
.filter((c) => filters.value.cartIds.includes(c.id))
.map((c) => c.name.replace("Giỏ hàng ", ""));
return {
name: filterTabs.CARTS,
values: filteredCarts.join(', '),
}
values: filteredCarts.join(", "),
};
}
if (filters.value.dealerIds.length < dealers.value.length) {
const filteredDealers = dealers.value.filter(d => filters.value.dealerIds.includes(d.id)).map(c => c.code);
if (filters.value.dealerIds.length < dealers.value.length) {
const filteredDealers = dealers.value.filter((d) => filters.value.dealerIds.includes(d.id)).map((c) => c.code);
return {
name: filterTabs.DEALERS,
values: filteredDealers.join(', '),
}
values: filteredDealers.join(", "),
};
}
return false;
})
});
const productCountByStatus = computed(() => {
const productsFilteredBeforeStatus = products.value.filter(product => {
const productCountByStatus = computed(() => {
const productsFilteredBeforeStatus = products.value.filter((product) => {
/*
cart__dealer: null means cart doesnt belong to any dealer
- when no filter: count null
@@ -103,15 +95,17 @@ const productCountByStatus = computed(() => {
const diffCartFilter = difference(defaultCartIds.value, cartIds);
const diffDealerFilter = difference(defaultDealerIds.value, dealerIds);
const noCartFilter = diffCartFilter.length === 0;
const noDealerFilter = diffDealerFilter.length === 0;
const noDealerFilter = diffDealerFilter.length === 0;
const cartCondition = noCartFilter ? cartIds.includes(cart) || cart === null : cartIds.includes(cart);
const dealerCondition = noDealerFilter ? dealerIds.includes(cart__dealer) || cart__dealer === null : dealerIds.includes(cart__dealer);
const dealerCondition = noDealerFilter
? dealerIds.includes(cart__dealer) || cart__dealer === null
: dealerIds.includes(cart__dealer);
return cartCondition && dealerCondition;
});
const result = countBy(productsFilteredBeforeStatus, (product) =>
statusMode.value === statusModes.value.SIMPLE ? product.status__sale_status : product.status
const result = countBy(productsFilteredBeforeStatus, (product) =>
statusMode.value === statusModes.value.SIMPLE ? product.status__sale_status : product.status,
);
return result;
@@ -119,63 +113,73 @@ const productCountByStatus = computed(() => {
const visibilityAll = computed(() => {
return filters.value.statusIds.length > 0;
})
});
</script>
<template>
<Teleport to="#legend.docking-panel.docking-panel-container-solid-color-a">
<div id="customBtns">
<div class="is-sr-only">
<!-- hack to speed up first eye-off icon appearance -->
<SvgIcon v-bind="{
name: 'eye-autodesk-off.svg',
type: 'black',
size: 15
}" />
<SvgIcon
v-bind="{
name: 'eye-autodesk-off.svg',
type: 'black',
size: 15,
}"
/>
</div>
<button
<button
title="Show/hide all legends"
@click="() => emit('updateFilters', {
statusIds: visibilityAll ? [] : statuses.map(s => s.id)
})"
@click="
() =>
emit('updateFilters', {
statusIds: visibilityAll ? [] : statuses.map((s) => s.id),
})
"
>
<SvgIcon v-bind="{
name: `eye-autodesk-${visibilityAll ? 'on' : 'off'}.svg`,
type: 'black',
size: 17
}" />
<SvgIcon
v-bind="{
name: `eye-autodesk-${visibilityAll ? 'on' : 'off'}.svg`,
type: 'black',
size: 17,
}"
/>
</button>
</div>
</Teleport>
<Search :products="products" />
<div
<div
class="tabs mb-0 has-background-white is-fullwidth is-flex-shrink-0"
style="position: sticky; top: 32.5px; z-index: -1"
>
>
<ul class="mx-0">
<li v-for="mode in Object.values(statusModes)"
:class="{ 'is-active' : statusMode === mode }"
@click="() => {
if (statusMode !== mode) emit('switchStatusMode', mode);
}"
<li
v-for="mode in Object.values(statusModes)"
:class="{ 'is-active': statusMode === mode }"
@click="
() => {
if (statusMode !== mode) emit('switchStatusMode', mode);
}
"
>
<a :class="[
'is-size-7',
statusMode === mode && 'has-text-weight-bold has-text-secondary'
]">{{ mode }}</a>
<a :class="['is-size-7', statusMode === mode && 'has-text-weight-bold has-text-secondary']">{{ mode }}</a>
</li>
</ul>
</div>
<div class="fs-13 has-background-white" style="z-index: -2">
<div
v-for="{ id, name, color } in statuses.filter(x => {
<div
class="fs-13 has-background-white"
style="z-index: -2"
>
<div
v-for="{ id, name, color } in statuses.filter((x) => {
// hide Chưa bán in dealer
return dealer ? x.code !== 'not-sold' : true
return dealer ? x.code !== 'not-sold' : true;
})"
class="status is-flex is-gap-1 is-justify-content-space-between is-clickable"
@click="() => emit('updateFilters', { statusIds: [id] })"
>
<div class="statusInfo">
<div
<div
class="swatch"
:style="{ backgroundColor: color }"
></div>
@@ -184,37 +188,43 @@ const visibilityAll = computed(() => {
</p>
</div>
<div>
<span class="mr-2 has-text-right is-inline-block" style="line-height: 1">
{{ productCountByStatus[id] || 0 }}
<span
class="mr-2 has-text-right is-inline-block"
style="line-height: 1"
>
{{ productCountByStatus[id] || 0 }}
</span>
<button class="eyeBtn" @click.stop="() => {
const selected = filters.statusIds.includes(id);
const payload = {
statusIds: selected ? filters.statusIds.filter(statusId => statusId !== id) : [...filters.statusIds, id]
}
emit('updateFilters', payload);
}">
<SvgIcon v-bind="{
name: `eye-autodesk-${filters.statusIds.includes(id) ? 'on' : 'off'}.svg`,
type: 'black',
size: 17
}" />
<button
class="eyeBtn"
@click.stop="
() => {
const selected = filters.statusIds.includes(id);
const payload = {
statusIds: selected
? filters.statusIds.filter((statusId) => statusId !== id)
: [...filters.statusIds, id],
};
emit('updateFilters', payload);
}
"
>
<SvgIcon
v-bind="{
name: `eye-autodesk-${filters.statusIds.includes(id) ? 'on' : 'off'}.svg`,
type: 'black',
size: 17,
}"
/>
</button>
</div>
</div>
</div>
<button
<button
:class="[
'button is-fullwidth is-radiusless is-gap-0.5 is-small is-flex-direction-column is-align-items-stretch fs-13',
cartOrDealerFilterInfo && 'is-light'
]"
style="
position: sticky;
bottom: 0;
box-sizing: border-box;
border-inline-width: 0;
border-bottom-width: 0;
"
'button is-fullwidth is-radiusless is-gap-0.5 is-small is-flex-direction-column is-align-items-stretch fs-13',
cartOrDealerFilterInfo && 'is-light',
]"
style="position: sticky; bottom: 0; box-sizing: border-box; border-inline-width: 0; border-bottom-width: 0"
@click="openFiltersModal"
>
<div class="is-flex is-justify-content-space-between">
@@ -227,21 +237,24 @@ const visibilityAll = computed(() => {
<span style="margin-left: 9px">SP</span>
</div>
</div>
<div
v-if="cartOrDealerFilterInfo"
<div
v-if="cartOrDealerFilterInfo"
class="is-fullwidth is-flex is-flex-direction-column is-align-items-flex-start has-text-left"
>
<p class="is-fullwidth" style="text-wrap: wrap;">
{{ cartOrDealerFilterInfo.name }}:
<p
class="is-fullwidth"
style="text-wrap: wrap"
>
{{ cartOrDealerFilterInfo.name }}:
{{ cartOrDealerFilterInfo.values }}
</p>
</div>
</button>
<Teleport to="#legend.docking-panel.docking-panel-container-solid-color-a">
<Modal
v-if="showFilterModal"
<Modal
v-if="showFilterModal"
v-bind="showFilterModal"
@close="showFilterModal = null"
@close="showFilterModal = null"
@updateFilters="updateFilters"
@resetCartDealerFilters="emit('resetCartDealerFilters')"
/>
@@ -254,13 +267,13 @@ const visibilityAll = computed(() => {
min-width: 150px;
width: 275px;
height: fit-content;
--hover-bg: rgba(0, 0, 0, 0.1);
&.top-initial-important {
top: initial !important; /* fixed top until meshes & colors are added */
}
.docking-panel-title {
font-size: 16px;
font-weight: 600;
@@ -284,7 +297,7 @@ const visibilityAll = computed(() => {
.docking-panel-footer {
border-radius: 0 0 5px 5px;
}
.content.docking-panel-scroll {
display: flex;
flex-direction: column;
@@ -298,9 +311,9 @@ const visibilityAll = computed(() => {
&:nth-child(even) {
background-color: #f2f2f280;
}
&:hover {
background-color: rgba(0,191,255,.2);
background-color: rgba(0, 191, 255, 0.2);
}
.statusInfo {
@@ -323,9 +336,9 @@ const visibilityAll = computed(() => {
width: 40px;
height: 50px;
z-index: 1;
display: flex;
& > * {
flex-grow: 1;
display: flex;
@@ -352,4 +365,4 @@ const visibilityAll = computed(() => {
height: 20px;
}
}
</style>
</style>