fix(dashboard-qa): solve some QAs (#4608)

* fix: edit table widget style Signed-off-by: samuel.park <[email protected]> * fix: apply new dashboard label filter planning Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Aug 29, 2024 · 298927d · 298927d
1 parent f8893b6
commit 298927d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
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
@@ -397,7 +397,7 @@ const getFieldWidth = (field: TableWidgetField): string|undefined => {
                             minWidth: getFieldMinWidth(field),
                             width: getFieldWidth(field),
                             maxWidth: getFieldWidth(field),
-                            ...(rowIndex !== props.items?.length - 1 ? getHeatmapColorStyle(item, field) : {}),
+                            ...(rowIndex !== props.items?.length - 1 || !props.totalInfo?.toggleValue ? getHeatmapColorStyle(item, field) : {}),
                         }"
                     >
                         <span ref="labelRef"
@@ -494,8 +494,8 @@ const getFieldWidth = (field: TableWidgetField): string|undefined => {
     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/DashboardCreateStep1.vue b/apps/web/src/services/dashboards/components/DashboardCreateStep1.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive } from 'vue';
 
+import { flatMapDeep, uniq } from 'lodash';
+
 import { PEmpty, PFieldTitle, PSearch } from '@cloudforet/mirinae';
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
@@ -48,6 +50,15 @@ const state = reactive({
             labels: d.labels,
         }));
     }),
+    allExistingLabels: computed(() => {
+        const OOTBTemplates = getFilteredTemplates(dashboardCreatePageState.dashboardTemplates, '', [], []);
+        const dashboards: DashboardModel[] = storeState.isWorkspaceMember ? dashboardGetters.privateItems : dashboardGetters.allItems;
+        const existingTemplates = getFilteredTemplates(dashboards, '', [], []);
+        return uniq([
+            ...flatMapDeep(OOTBTemplates.map((d) => d.labels)),
+            ...flatMapDeep(existingTemplates.map((d) => d.labels)),
+        ]);
+    }),
 });
 
 const filterState = reactive({
@@ -90,7 +101,8 @@ onMounted(() => {
     <div class="dashboard-create-step-1">
         <p-search :value.sync="filterState.inputValue" />
         <div class="contents-container">
-            <dashboard-create-step1-search-filter @select-label="handleSelectLabels"
+            <dashboard-create-step1-search-filter :labels="state.allExistingLabels"
+                                                  @select-label="handleSelectLabels"
                                                   @select-provider="handleSelectProvider"
             />
             <div class="template-contents-area">

diff --git a/apps/web/src/services/dashboards/components/DashboardCreateStep1SearchFilter.vue b/apps/web/src/services/dashboards/components/DashboardCreateStep1SearchFilter.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 
+import { uniq } from 'lodash';
+
 import {
     PFieldTitle, PCheckboxGroup, PCheckbox, PLazyImg, PSelectDropdown,
 } from '@cloudforet/mirinae';
@@ -17,7 +19,11 @@ export interface FilterLabelItem {
     name: string;
     image?: string;
 }
+interface Props {
+    labels: string[];
+}
 
+const props = defineProps<Props>();
 const emit = defineEmits<{(e:'select-label', labels: FilterLabelItem[]):void;
     (e:'select-provider', plugins: FilterLabelItem[]):void;
     (e:'select-plugin', plugins: PluginItem[]):void;
@@ -34,7 +40,7 @@ const state = reactive({
         image: provider.icon,
     }))),
     labels: computed(() => Object.values(DASHBOARD_LABELS)),
-    labelList: computed(() => state.labels.map((label) => ({
+    labelList: computed(() => uniq([...state.labels, ...props.labels]).map((label) => ({
         label,
         name: label,
         image: null,