Merge remote-tracking branch 'cloudforet-io/feature-dashboard-v2'

Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Aug 13, 2024 · abfc663 · abfc663
2 parents 22343b1 + e3d883a
commit abfc663
Show file tree

Hide file tree

Showing 22 changed files with 646 additions and 566 deletions.
diff --git a/apps/web/src/common/components/inputs/ColorInput.vue b/apps/web/src/common/components/inputs/ColorInput.vue
@@ -29,6 +29,7 @@ const handleChangeInput = (event: InputEvent) => {
 .color-input {
     @apply rounded-sm border border-gray-200 bg-white;
     width: 2rem;
+    min-width: 2rem;
     height: 2rem;
     padding: 0 0.125rem;
 }

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -415,7 +415,7 @@ watch(() => storeState.dataTableUpdating, () => {
         .td-contents {
             @apply inline-flex gap-2 items-center;
             width: 100%;
-            height: 2.25rem;
+            min-height: 2.25rem;
 
             &.data-field {
                 @apply justify-end;

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -199,11 +199,14 @@ onUnmounted(() => {
         <div class="left-part">
             <div class="dashboard-settings-wrapper">
                 <div class="toolbox-wrapper">
-                    <dashboard-toolset-date-dropdown :date-range="state.dashboardOptionsSnapshot.date_range" />
+                    <dashboard-toolset-date-dropdown widget-mode
+                                                     :date-range="state.dashboardOptionsSnapshot.date_range"
+                    />
                     <p-divider vertical
                                class="divider"
                     />
                     <dashboard-variables-v2 disable-save-button
+                                            widget-mode
                                             :is-project-dashboard="!!dashboardDetailState.projectId"
                     />
                     <p-button v-if="!dashboardDetailState.projectId && widgetGenerateState.overlayType === 'EXPAND'"
@@ -309,6 +312,8 @@ onUnmounted(() => {
                 display: flex;
                 gap: 0.5rem;
                 align-items: center;
+                justify-content: end;
+                min-width: 14rem;
                 .divider {
                     height: 1.5rem;
                 }

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue b/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue
@@ -352,7 +352,7 @@ watch(() => state.etcMenuVisible, (_etcMenuVisible) => {
         top: 0.25rem;
         display: none;
         gap: 0.25rem;
-        z-index: 100;
+        z-index: 10;
         padding: 0.25rem;
         &.selected {
             display: flex;

diff --git a/apps/web/src/common/modules/widgets/_constants/widget-field-constant.ts b/apps/web/src/common/modules/widgets/_constants/widget-field-constant.ts
@@ -53,7 +53,8 @@ export const DATE_FORMAT = {
 
 export const NUMBER_FORMAT = {
     AUTO: 'AUTO',
-    SHORT_NUMBER: 'SHORT_NUMBER',
+    // NOTE: temporary remove short number
+    // SHORT_NUMBER: 'SHORT_NUMBER',
     FULL_NUMBER: 'FULL_NUMBER',
     CUSTOM: 'CUSTOM',
 } as const;

diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts
@@ -52,8 +52,9 @@ export const getFormattedNumber = (val: number, dataField: string, numberFormatV
             return byteFormatter(_originalVal);
         }
         return numberFormatter(val, { notation: 'compact' }) || '--';
-    case NUMBER_FORMAT.SHORT_NUMBER:
-        return numberFormatter(val, { notation: 'compact' }) || '--';
+    // NOTE: temporary remove short number
+    // case NUMBER_FORMAT.SHORT_NUMBER:
+    //     return numberFormatter(val, { notation: 'compact' }) || '--';
     case NUMBER_FORMAT.FULL_NUMBER:
         return val.toString();
     case NUMBER_FORMAT.CUSTOM:

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldNumberFormat.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldNumberFormat.vue
@@ -23,12 +23,12 @@ import type { NumberFormatValue, NumberFormat } from '@/common/modules/widgets/t
 
 const SAMPLE_NUMBER = 123456789;
 const SAMPLE_FORMAT_LIST = [
-    '#,##0',
-    '#,##0.00',
-    '#,##0%',
-    '#,##0.00%',
-    '#,##0,"천"',
-    '#,##0,,"백만"',
+    { format: '#,##0', sample: 1234 },
+    { format: '#,##0.00', sample: 1234.56 },
+    { format: '#,##0%', sample: 1.23 },
+    { format: '#,##0.00%', sample: 1.2345 },
+    { format: '#,##0,"천"', sample: 1234000 },
+    { format: '#,##0,,"백만"', sample: 1234000000 },
 ];
 const emit = defineEmits<WidgetFieldComponentEmit<NumberFormatValue>>();
 const props = defineProps<WidgetFieldComponentProps<NumberFormatOptions, NumberFormatValue>>();
@@ -41,10 +41,11 @@ const state = reactive({
             name: NUMBER_FORMAT.AUTO,
             label: i18n.t('COMMON.WIDGETS.NUMBER_FORMAT.AUTO'),
         },
-        {
-            name: NUMBER_FORMAT.SHORT_NUMBER,
-            label: i18n.t('COMMON.WIDGETS.NUMBER_FORMAT.SHORT_NUMBER'),
-        },
+        // NOTE: temporary remove short number
+        // {
+        //     name: NUMBER_FORMAT.SHORT_NUMBER,
+        //     label: i18n.t('COMMON.WIDGETS.NUMBER_FORMAT.SHORT_NUMBER'),
+        // },
         {
             name: NUMBER_FORMAT.FULL_NUMBER,
             label: i18n.t('COMMON.WIDGETS.NUMBER_FORMAT.FULL_NUMBER'),
@@ -117,6 +118,9 @@ const handleConfirmCustomModal = () => {
     };
     state.customModalVisible = false;
 };
+const handleClickSampleFormat = (format: string) => {
+    state.customNumberFormat = format;
+};
 
 /* Watcher */
 watch(() => state.proxyValue, () => {
@@ -221,11 +225,12 @@ watch(() => state.customModalVisible, (modalVisible) => {
                 </div>
                 <div class="bottom-part">
                     <div v-for="sampleFormat in SAMPLE_FORMAT_LIST"
-                         :key="`sample-format-${sampleFormat}`"
+                         :key="`sample-format-${sampleFormat.format}`"
                          class="sample-row"
+                         @click="handleClickSampleFormat(sampleFormat.format)"
                     >
-                        <span class="format-text">{{ sampleFormat }}</span>
-                        <span class="formatted-value">{{ customNumberFormatter(sampleFormat, SAMPLE_NUMBER) }}</span>
+                        <span class="format-text">{{ sampleFormat.format }}</span>
+                        <span class="formatted-value">{{ customNumberFormatter(sampleFormat.format, sampleFormat.sample) }}</span>
                     </div>
                 </div>
             </template>
@@ -255,7 +260,9 @@ watch(() => state.customModalVisible, (modalVisible) => {
     .bottom-part {
         @apply border border-gray-150 rounded;
         padding: 0.5rem;
+        margin-top: 0.75rem;
         .sample-row {
+            @apply cursor-pointer;
             display: flex;
             justify-content: space-between;
             padding: 0.5rem;

diff --git a/apps/web/src/services/dashboards/components/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/DashboardDetailHeader.vue
@@ -247,8 +247,10 @@ const handleSelectSharedDashboardScope = (scope: DashboardScope) => {
                     />
                     {{ state.badgeText }}
                 </p-badge>
-                <p-select-dropdown style-type="icon-button"
+                <p-select-dropdown class="dashboard-setting-dropdown"
+                                   style-type="tertiary-icon-button"
                                    button-icon="ic_ellipsis-horizontal"
+                                   size="sm"
                                    :menu="state.menuItems"
                                    :selected="[]"
                                    use-fixed-menu-style
@@ -335,6 +337,9 @@ const handleSelectSharedDashboardScope = (scope: DashboardScope) => {
 <style lang="postcss" scoped>
 .dashboard-detail-header {
     margin-bottom: 0.75rem;
+    .dashboard-setting-dropdown {
+        margin-right: 0.5rem;
+    }
     .p-heading {
         align-items: center;
         margin-bottom: 0;

diff --git a/apps/web/src/services/dashboards/components/DashboardLabelsButton.vue b/apps/web/src/services/dashboards/components/DashboardLabelsButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { computed, reactive, ref } from 'vue';
 
 import { PButton, PBadge, PPopover } from '@cloudforet/mirinae';
 
@@ -19,6 +20,7 @@ const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
+const labelPopoverRef = ref<HTMLElement|null>(null);
 
 const storeState = reactive({
     labelList: computed(() => dashboardDetailState.labels),
@@ -37,11 +39,14 @@ const handleUpdateLabels = async (labels: string[]) => {
         ErrorHandler.handleError(e);
     }
 };
+
+onClickOutside(labelPopoverRef, () => { state.visible = false; });
 </script>
 
 <template>
     <div class="dashboard-labels-button">
-        <p-popover :is-visible.sync="state.visible"
+        <p-popover ref="labelPopoverRef"
+                   :is-visible.sync="state.visible"
                    tag="div"
                    position="bottom"
         >

diff --git a/apps/web/src/services/dashboards/components/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/DashboardToolsetDateDropdown.vue
@@ -22,6 +22,7 @@ import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashbo
 
 interface Props {
     dateRange?: DateRange;
+    widgetMode?: boolean; // NOTE: this for widget mode (temporary)
 }
 const props = withDefaults(defineProps<Props>(), {
     dateRange: undefined,
@@ -148,12 +149,16 @@ watch(() => props.dateRange, () => {
 </script>
 
 <template>
-    <div class="dashboard-date-dropdown">
-        <span class="label-text">
+    <div :class="{'dashboard-date-dropdown': true, 'detail-page': !props.widgetMode}">
+        <span v-if="!props.widgetMode"
+              class="label-text"
+        >
             {{ $t('DASHBOARDS.DETAIL.BASED_ON') }}:
         </span>
         <p-select-dropdown class="date-dropdown"
-                           size="sm"
+                           :size="props.widgetMode ? 'md' : 'sm'"
+                           :style-type="props.widgetMode ? 'rounded': 'default'"
+                           :selection-label="props.widgetMode ? $t('DASHBOARDS.DETAIL.BASED_ON') : undefined"
                            :menu="state.monthMenuItems"
                            :selected="state.selectedMonthMenuItem.name"
                            menu-position="right"
@@ -176,13 +181,12 @@ watch(() => props.dateRange, () => {
 .dashboard-date-dropdown {
     @apply flex items-center justify-center;
     min-height: 2rem;
-    gap: 0.125rem;
-    .label-text {
-        @apply text-label-md font-bold text-gray-800;
-        width: 4.5rem;
-    }
-    .date-dropdown {
-        width: 8.5rem;
+
+    &.detail-page {
+        gap: 0.125rem;
+        .label-text {
+            @apply text-label-md font-bold text-gray-800;
+        }
     }
 }
 </style>
diff --git a/apps/web/src/services/dashboards/components/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/components/DashboardVariablesV2.vue
@@ -23,6 +23,7 @@ interface Props {
     loading?: boolean;
     disableSaveButton?: boolean;
     originVars?: DashboardVars;
+    widgetMode?: boolean; // NOTE: this for widget mode (temporary)
 }
 
 const props = defineProps<Props>();
@@ -76,7 +77,7 @@ const handleResetVariables = () => {
 </script>
 
 <template>
-    <div class="dashboard-variables-select-dropdown">
+    <div :class="{'dashboard-variables-select-dropdown': true, 'detail-page': !props.widgetMode}">
         <template v-for="([propertyName, property], idx) in Object.entries(state.variableProperties)">
             <div :key="`${propertyName}-${idx}`"
                  class="variable-selector-box"
@@ -121,8 +122,10 @@ const handleResetVariables = () => {
 
 <style lang="postcss" scoped>
 .dashboard-variables-select-dropdown {
-    @apply w-full rounded-xl border border-gray-200 bg-white;
-    padding: 1rem;
+    &.detail-page {
+        @apply w-full rounded-xl border border-gray-200 bg-white;
+        padding: 1rem;
+    }
     .variable-selector-box {
         position: relative;
         .circle-mark {

diff --git a/apps/web/src/services/dashboards/components/WidgetFullModeModal.vue b/apps/web/src/services/dashboards/components/WidgetFullModeModal.vue
@@ -137,6 +137,7 @@ onBeforeUnmount(() => {
                     </div>
                     <div class="right-part">
                         <dashboard-toolset-date-dropdown v-if="!state.hideDateDropdown"
+                                                         widget-mode
                                                          :date-range="dashboardDetailState.options.date_range"
                         />
                     </div>

diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -193,7 +193,7 @@ onUnmounted(() => {
     @apply relative;
     .fixed-header {
         @apply sticky bg-gray-100;
-        z-index: 1000;
+        z-index: 20;
         top: 0;
         padding-top: 1.75rem;
         margin-top: -1.75rem;