Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const isRTL = useMapGetter('accounts/isRTL');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
:class="{ 'text-right': isRTL }"
|
||||
>
|
||||
<slot v-if="$slots.default || content">
|
||||
<template v-if="content">{{ content }}</template>
|
||||
</slot>
|
||||
<span v-else class="text-n-slate-10"> --- </span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,180 @@
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
|
||||
|
||||
const props = defineProps({
|
||||
table: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
defaultPageSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
showPageSizeSelector: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['pageSizeChange']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const pageSizeOptions = [
|
||||
{
|
||||
label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 10 })}`,
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 20 })}`,
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 50 })}`,
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 100 })}`,
|
||||
value: 100,
|
||||
},
|
||||
];
|
||||
|
||||
const getFormattedPages = (start, end) => {
|
||||
const formatter = new Intl.NumberFormat(navigator.language);
|
||||
return Array.from({ length: end - start + 1 }, (_, i) =>
|
||||
formatter.format(start + i)
|
||||
);
|
||||
};
|
||||
|
||||
const currentPage = computed(() => {
|
||||
return props.table.getState().pagination.pageIndex + 1;
|
||||
});
|
||||
|
||||
const totalPages = computed(() => {
|
||||
return props.table.getPageCount();
|
||||
});
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
if (totalPages.value <= 3) return getFormattedPages(1, totalPages.value);
|
||||
if (currentPage.value === 1) return getFormattedPages(1, 3);
|
||||
if (currentPage.value === totalPages.value) {
|
||||
return getFormattedPages(totalPages.value - 2, totalPages.value);
|
||||
}
|
||||
|
||||
return getFormattedPages(currentPage.value - 1, currentPage.value + 1);
|
||||
});
|
||||
|
||||
const total = computed(() => {
|
||||
return props.table.getRowCount();
|
||||
});
|
||||
|
||||
const start = computed(() => {
|
||||
const { pagination } = props.table.getState();
|
||||
return pagination.pageIndex * pagination.pageSize + 1;
|
||||
});
|
||||
|
||||
const end = computed(() => {
|
||||
const { pagination } = props.table.getState();
|
||||
return Math.min(
|
||||
(pagination.pageIndex + 1) * pagination.pageSize,
|
||||
total.value
|
||||
);
|
||||
});
|
||||
|
||||
const currentPageSize = computed({
|
||||
get() {
|
||||
return props.table.getState().pagination.pageSize;
|
||||
},
|
||||
set(newValue) {
|
||||
props.table.setPageSize(Number(newValue));
|
||||
emit('pageSizeChange', Number(newValue));
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (
|
||||
props.showPageSizeSelector &&
|
||||
props.defaultPageSize &&
|
||||
props.defaultPageSize !== 10
|
||||
) {
|
||||
props.table.setPageSize(props.defaultPageSize);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-1 items-center gap-2 justify-between">
|
||||
<p class="text-sm truncate text-n-slate-11 mb-0">
|
||||
{{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<FilterSelect
|
||||
v-if="showPageSizeSelector"
|
||||
v-model="currentPageSize"
|
||||
variant="outline"
|
||||
hide-icon
|
||||
class="[&>button]:text-n-slate-11 [&>button]:hover:text-n-slate-12 [&>button]:h-6"
|
||||
:options="pageSizeOptions"
|
||||
/>
|
||||
<nav class="isolate inline-flex items-center gap-1.5">
|
||||
<Button
|
||||
icon="i-lucide-chevrons-left"
|
||||
ghost
|
||||
slate
|
||||
sm
|
||||
class="!size-6"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.setPageIndex(0)"
|
||||
/>
|
||||
<Button
|
||||
icon="i-lucide-chevron-left"
|
||||
ghost
|
||||
slate
|
||||
sm
|
||||
class="!size-6"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()"
|
||||
/>
|
||||
<Button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
xs
|
||||
outline
|
||||
:color="page == currentPage ? 'blue' : 'slate'"
|
||||
class="!h-6 min-w-6"
|
||||
@click="table.setPageIndex(page - 1)"
|
||||
>
|
||||
<span
|
||||
class="text-center"
|
||||
:class="{ 'text-n-brand': page == currentPage }"
|
||||
>
|
||||
{{ page }}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
icon="i-lucide-chevron-right"
|
||||
ghost
|
||||
slate
|
||||
sm
|
||||
class="!size-6"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.nextPage()"
|
||||
/>
|
||||
<Button
|
||||
icon="i-lucide-chevrons-right"
|
||||
ghost
|
||||
slate
|
||||
sm
|
||||
class="!size-6"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.setPageIndex(table.getPageCount() - 1)"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
header: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const sortIconMap = {
|
||||
default: 'i-lucide-chevrons-up-down',
|
||||
asc: 'i-lucide-chevron-up',
|
||||
desc: 'i-lucide-chevron-down',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :class="sortIconMap[header.column.getIsSorted() || 'default']" />
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { FlexRender } from '@tanstack/vue-table';
|
||||
import SortButton from './SortButton.vue';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
table: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'relaxed',
|
||||
},
|
||||
});
|
||||
|
||||
const isRelaxed = computed(() => props.type === 'relaxed');
|
||||
const headerClass = computed(() =>
|
||||
isRelaxed.value
|
||||
? 'ltr:first:rounded-bl-lg ltr:first:rounded-tl-lg ltr:last:rounded-br-lg ltr:last:rounded-tr-lg rtl:first:rounded-br-lg rtl:first:rounded-tr-lg rtl:last:rounded-bl-lg rtl:last:rounded-tl-lg'
|
||||
: ''
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table :class="{ 'table-fixed': fixed }">
|
||||
<thead class="sticky top-0 z-10 bg-n-slate-1">
|
||||
<tr
|
||||
v-for="headerGroup in table.getHeaderGroups()"
|
||||
:key="headerGroup.id"
|
||||
class="rounded-xl"
|
||||
>
|
||||
<th
|
||||
v-for="header in headerGroup.headers"
|
||||
:key="header.id"
|
||||
:style="{
|
||||
width: `${header.getSize()}px`,
|
||||
}"
|
||||
class="text-left py-3 px-5 font-medium text-sm text-n-slate-12"
|
||||
:class="headerClass"
|
||||
@click="header.column.getCanSort() && header.column.toggleSorting()"
|
||||
>
|
||||
<div
|
||||
v-if="!header.isPlaceholder"
|
||||
class="flex place-items-center gap-1"
|
||||
>
|
||||
<FlexRender
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
<SortButton v-if="header.column.getCanSort()" :header="header" />
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-n-slate-2">
|
||||
<tr v-for="row in table.getRowModel().rows" :key="row.id">
|
||||
<td
|
||||
v-for="cell in row.getVisibleCells()"
|
||||
:key="cell.id"
|
||||
:class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
|
||||
>
|
||||
<FlexRender
|
||||
:render="cell.column.columnDef.cell"
|
||||
:props="cell.getContext()"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
Reference in New Issue
Block a user