LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Update design for report pages (#10506)

Browse Source 
<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM"
src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6">
<img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM"
src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d">

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Pranav
2024-11-27 02:10:15 -08:00
committed by GitHub
parent d569713b66
commit 35702457ed
43 changed files with 361 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/dashboard/components/table/Pagination.vue
View File

@@ -54,7 +54,7 @@ const end = computed(() => {
<div class="flex items-center justify-between">
<div class="flex flex-1 items-center justify-between">
<div>
<p class="text-sm text-gray-700">
<p class="text-sm text-n-slate-11 mb-0">
{{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
</p>
</div>
@@ -62,7 +62,7 @@ const end = computed(() => {
<woot-button
:disabled="!table.getCanPreviousPage()"
variant="clear"
class="size-8 flex items-center border border-slate-50"
class="h-8 border-0 flex items-center"
color-scheme="secondary"
@click="table.setPageIndex(0)"
>
@@ -70,7 +70,7 @@ const end = computed(() => {
</woot-button>
<woot-button
variant="clear"
class="size-8 flex items-center border border-slate-50"
class="h-8 border-0 flex items-center"
color-scheme="secondary"
:disabled="!table.getCanPreviousPage()"
@click="table.previousPage()"
@@ -81,22 +81,22 @@ const end = computed(() => {
v-for="page in visiblePages"
:key="page"
variant="clear"
class="size-8 flex items-center justify-center border text-xs leading-none text-center"
:class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
class="h-8 flex items-center justify-center text-xs leading-none text-center"
:class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
color-scheme="secondary"
@click="table.setPageIndex(page - 1)"
>
<div
<span
class="text-center"
:class="{ 'text-woot-500': page == currentPage }"
:class="{ 'text-n-brand': page == currentPage }"
>
{{ page }}
</div>
</span>
</woot-button>
<woot-button
:disabled="!table.getCanNextPage()"
variant="clear"
class="size-8 flex items-center border border-slate-50"
class="h-8 border-0 flex items-center"
color-scheme="secondary"
@click="table.nextPage()"
>
@@ -105,7 +105,7 @@ const end = computed(() => {
<woot-button
:disabled="!table.getCanNextPage()"
variant="clear"
class="size-8 flex items-center border border-slate-50"
class="h-8 border-0 flex items-center"
color-scheme="secondary"
@click="table.setPageIndex(table.getPageCount() - 1)"
>

37
app/javascript/dashboard/components/table/Table.vue
View File

@@ -1,8 +1,9 @@
<script setup>
import { FlexRender } from '@tanstack/vue-table';
import SortButton from './SortButton.vue';
import { computed } from 'vue';
defineProps({
const props = defineProps({
table: {
type: Object,
required: true,
@@ -11,22 +12,36 @@ defineProps({
type: Boolean,
default: false,
},
type: {
type: String,
default: 'relaxed',
},
});
const isRelaxed = computed(() => props.type === 'relaxed');
const headerClass = computed(() =>
isRelaxed.value
? 'first:rounded-bl-lg first:rounded-tl-lg last:rounded-br-lg last:rounded-tr-lg'
: ''
);
</script>
<template>
<table :class="{ 'table-fixed': fixed }">
<thead
class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
>
<tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<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 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
class="text-left py-3 px-5 font-normal text-sm"
:class="headerClass"
@click="header.column.getCanSort() && header.column.toggleSorting()"
>
<div
@@ -43,16 +58,12 @@ defineProps({
</tr>
</thead>
<tbody class="divide-y divide-slate-25 dark:divide-slate-900">
<tr
v-for="row in table.getRowModel().rows"
:key="row.id"
class="hover:bg-slate-25 dark:hover:bg-slate-800"
>
<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="py-2 px-5"
:class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
>
<FlexRender
:render="cell.column.columnDef.cell"