feat(p-pagination): add pagination component size spec & apply new pa…

…gination to table widget (cloudforet-io#4516) * feat(p-pagination): add pagination component size spec Signed-off-by: samuel.park <[email protected]> * feat: apply pagination with new size spec to table widget Signed-off-by: samuel.park <[email protected]> * chore: small fix Signed-off-by: samuel.park <[email protected]> * chore: translation Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
jbokyung2 · Aug 12, 2024 · 24e6299 · 24e6299
1 parent 8de3d6d
commit 24e6299
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 229 deletions.
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -294,8 +294,7 @@ onUnmounted(() => {
                 height: 1rem;
             }
             .toolbox-wrapper {
-                display: flex;
-                align-items: center;
+                @apply flex items-center;
                 gap: 0.5rem;
                 .dashboard-variables-select-dropdown {
                     @apply relative flex items-center flex-wrap;

diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts
@@ -29,7 +29,7 @@ export const getWidgetDataTable = async (dataTableId: string): Promise<PrivateDa
     }
 };
 
-export const sortWidgetTableFields = (fields: string[]) => {
+export const sortWidgetTableFields = (fields: string[]): string[] => {
     const priorityFields = Object.values(DATE_FIELD) as string[];
     const prioritySet = new Set(priorityFields);
 

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldDataFieldHeatmapColor.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldDataFieldHeatmapColor.vue
@@ -84,15 +84,15 @@ watch(() => state.dataFieldList, (dataFieldList) => {
                         <template #dropdown-button="item">
                             <div class="menu-item">
                                 <div v-if="item.name !== DATA_FIELD_HEATMAP_COLOR.NONE.key"
-                                     :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: !!getDataFieldHeatmapColor(item.name)}"
+                                     :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: true}"
                                 />
                                 <span>{{ item.label }}</span>
                             </div>
                         </template>
                         <template #menu-item--format="{item}">
                             <div class="menu-item">
                                 <div v-if="item.name !== DATA_FIELD_HEATMAP_COLOR.NONE.key"
-                                     :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: !!getDataFieldHeatmapColor(item.name)}"
+                                     :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: true}"
                                 />
                                 <span>{{ item.label }}</span>
                             </div>
@@ -113,15 +113,15 @@ watch(() => state.dataFieldList, (dataFieldList) => {
                     <template #dropdown-button="item">
                         <div class="menu-item">
                             <div v-if="item.name !== DATA_FIELD_HEATMAP_COLOR.NONE.key"
-                                 :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}`]: !!getDataFieldHeatmapColor(item.name)}"
+                                 :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: true}"
                             />
                             <span>{{ item.label }}</span>
                         </div>
                     </template>
                     <template #menu-item--format="{item}">
                         <div class="menu-item">
                             <div v-if="item.name !== DATA_FIELD_HEATMAP_COLOR.NONE.key"
-                                 :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}`]: !!getDataFieldHeatmapColor(item.name)}"
+                                 :class="{'color-circle': true, [`bg-${getDataFieldHeatmapColor(item.name)}-300`]: true}"
                             />
                             <span>{{ item.label }}</span>
                         </div>

diff --git a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -9,7 +9,7 @@ import { orderBy, sortBy } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
-import { PTextPagination } from '@cloudforet/mirinae';
+import { PPagination } from '@cloudforet/mirinae';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
@@ -231,7 +231,7 @@ const getTotalDataItem = (data: TableDataItem[], type: 'static'|'time_series'|'d
 
     const totalDataItem: TableDataItem = {};
     const _sortedGroupByFields = sortWidgetTableFields(state.groupByField ?? []);
-    if (_sortedGroupByFields) totalDataItem[_sortedGroupByFields[0]] = 'Total';
+    if (_sortedGroupByFields.length) totalDataItem[_sortedGroupByFields[0]] = 'Total';
     if (type === 'static') {
         [...state.tableDataField, 'sub_total'].forEach((field) => {
             totalDataItem[field] = data.reduce((acc, cur) => acc + cur[field], 0);
@@ -582,9 +582,11 @@ defineExpose<WidgetExpose<Data>>({
                 />
             </div>
             <div class="table-pagination-wrapper">
-                <p-text-pagination :this-page="state.thisPage"
-                                   :all-page="state.allPage"
-                                   @pageChange="handleUpdateThisPage"
+                <p-pagination :this-page="state.thisPage"
+                              :page-size="state.pageSize"
+                              :total-count="state.data?.total_count ?? 0"
+                              size="sm"
+                              @change="handleUpdateThisPage"
                 />
             </div>
         </div>
@@ -594,8 +596,8 @@ defineExpose<WidgetExpose<Data>>({
 <style lang="postcss" scoped>
 .table-wrapper {
     @apply flex justify-center w-full;
-    max-height: calc(100% - 1.5rem);
-    height: calc(100% - 1.5rem);
+    max-height: calc(100% - 2.5rem);
+    height: calc(100% - 2.5rem);
 
     overflow: hidden;
     .data-table {
@@ -604,6 +606,7 @@ defineExpose<WidgetExpose<Data>>({
 }
 .table-pagination-wrapper {
     @apply flex justify-center items-center;
-    height: 1.5rem;
+    height: 2.5rem;
+    padding: 0.5rem 0;
 }
 </style>
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
@@ -405,8 +405,8 @@ const getHeatmapColorStyle = (item: TableDataItem, field: TableWidgetField) => {
     tbody {
         tr {
             &:nth-child(odd) {
-                @apply bg-gray-100;
                 td {
+                    @apply bg-gray-100;
                     &.sub-total {
                         @apply bg-violet-150;
                     }

diff --git a/apps/web/src/services/dashboards/components/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/DashboardToolsetDateDropdown.vue
@@ -152,13 +152,13 @@ watch(() => props.dateRange, () => {
         <span class="label-text">
             {{ $t('DASHBOARDS.DETAIL.BASED_ON') }}:
         </span>
-        <p-select-dropdown
-            size="sm"
-            :menu="state.monthMenuItems"
-            :selected="state.selectedMonthMenuItem.name"
-            menu-position="right"
-            reset-selection-on-menu-close
-            @select="handleSelectMonthMenuItem"
+        <p-select-dropdown class="date-dropdown"
+                           size="sm"
+                           :menu="state.monthMenuItems"
+                           :selected="state.selectedMonthMenuItem.name"
+                           menu-position="right"
+                           reset-selection-on-menu-close
+                           @select="handleSelectMonthMenuItem"
         >
             <template #menu-item--format="{ item }">
                 <span>{{ item.label }}</span>
@@ -179,6 +179,10 @@ watch(() => props.dateRange, () => {
     gap: 0.125rem;
     .label-text {
         @apply text-label-md font-bold text-gray-800;
+        width: 4.5rem;
+    }
+    .date-dropdown {
+        width: 8.5rem;
     }
 }
 </style>