Skip to content

Commit

Permalink
Merge pull request #5414 from cloudforet-io/feature-dashboard-november
Browse files Browse the repository at this point in the history 
feat(dashboard): merge to master
  • Loading branch information
@piggggggggy
piggggggggy authored Jan 3, 2025
2 parents 9ad2ea9 + a170d40 commit c731532
Show file tree
Hide file tree
Showing 203 changed files with 9,356 additions and 8,616 deletions.
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@cloudforet/utils": "*",
"@gtm-support/vue2-gtm": "^1.3.0",
"@lottiefiles/vue-lottie-player": "^1.1.0",
"@tanstack/vue-query": "^5.62.7",
"@tiptap/core": "^2.0.3",
"@tiptap/extension-color": "^2.0.3",
"@tiptap/extension-link": "^2.0.3",
Expand Down
0 ...idgets/_components/WidgetCustomLagend.vue → ...idgets/_components/WidgetCustomLegend.vue
View file
File renamed without changes.
65 changes: 16 additions & 49 deletions apps/web/src/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import {
computed, reactive, watch,
computed, reactive,
} from 'vue';
import type { TranslateResult } from 'vue-i18n';
Expand All @@ -11,19 +11,16 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
import { i18n } from '@/translations';
import { useProxyValue } from '@/common/composables/proxy-state';
import {
getDefaultMenuItemIndex,
getInitialSelectedMenuItem,
} from '@/common/modules/widgets/_helpers/widget-field-helper';
import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
import type { WidgetFieldTypeMap } from '@/common/modules/widgets/_widget-field-value-manager/type';
const props = withDefaults(defineProps<{
fieldKey: keyof WidgetFieldTypeMap;
fieldManager: WidgetFieldValueManager;
defaultCount?: number;
max?: number;
menuItems: MenuItem[];
fieldName?:string|TranslateResult;
defaultIndex?: number;
excludeDateField?: boolean;
value?: {value?: string; count?: number};
commonInvalidState?: boolean;
Expand All @@ -36,59 +33,29 @@ const props = withDefaults(defineProps<{
excludeDateField: false,
value: () => ({}),
});
const emit = defineEmits<{(e: 'update:is-valid', isValid:boolean): void;
(e: 'update:value', value: {value: string; count: number}): void;
}>();
const state = reactive({
isInitiated: false,
proxyValue: useProxyValue('value', props, emit),
isMaxValid: computed<boolean>(() => (props.max ? ((state.proxyValue?.count <= props.max) && !!state.proxyValue?.count) : true)),
fieldValue: computed<WidgetFieldTypeMap[typeof props.fieldKey]['value']>(() => props.fieldManager.data[props.fieldKey].value),
isMaxValid: computed<boolean>(() => (props.max ? ((state.fieldValue.count <= props.max) && !!state.fieldValue.count) : true)),
dataInvalid: computed<boolean>(() => !props.menuItems?.length || !state.fieldValue.data),
tooltipDesc: computed(() => i18n.t('COMMON.WIDGETS.MAX_ITEMS_DESC', {
fieldName: props.fieldName,
max: props.max,
})),
isAllValid: computed<boolean>(() => ((props.menuItems.length) ? state.isMaxValid : false)),
selectedItem: undefined as undefined | MenuItem[],
});
/* Event */
const handleUpdateSelect = (val: string) => {
if (val === state.proxyValue.value) return;
state.proxyValue = { ...state.proxyValue, value: val };
if (val === state.fieldValue.data) return;
props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, data: val });
};
const handleUpdateCount = (val: number) => {
if (val === state.proxyValue.count) return;
state.proxyValue = { ...state.proxyValue, count: val ?? 1 };
};
/* Watcher */
watch(() => state.isAllValid, (isValid) => {
emit('update:is-valid', isValid);
}, { immediate: true });
/* Init */
const initValue = () => {
state.proxyValue = {
...state.proxyValue,
value: props.value?.value,
count: props.value?.count,
};
if (val === state.fieldValue.count) return;
props.fieldManager.setFieldValue(props.fieldKey, { ...state.fieldValue, count: val ?? 1 });
};
watch(() => props.menuItems, (menuItems) => {
if (!state.isInitiated) {
initValue();
state.isInitiated = true;
}
if (!menuItems?.length) return;
const _defaultIndex = getDefaultMenuItemIndex(props.menuItems, props.defaultIndex, props.excludeDateField);
const _value = getInitialSelectedMenuItem(menuItems, state.proxyValue?.value, _defaultIndex);
state.proxyValue = {
value: _value,
count: props.value?.count ?? props.defaultCount ?? 5,
};
}, { immediate: true });
</script>

<template>
Expand All @@ -99,8 +66,8 @@ watch(() => props.menuItems, (menuItems) => {
class="w-full"
>
<p-select-dropdown :menu="props.menuItems"
:selected="state.proxyValue?.value"
:invalid="props.commonInvalidState"
:selected="state.fieldValue?.data"
:invalid="state.dataInvalid"
use-fixed-menu-style
block
@update:selected="handleUpdateSelect"
Expand All @@ -117,7 +84,7 @@ watch(() => props.menuItems, (menuItems) => {
:min="1"
:max="props.max"
:invalid="!state.isMaxValid"
:value="state.proxyValue?.count"
:value="state.fieldValue?.count"
@update:value="handleUpdateCount"
/>
<template #label-extra>
Expand Down
112 changes: 87 additions & 25 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,24 @@ const state = reactive({
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.QUERY_DESC'),
icon: 'ic_db-where',
},
{
key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
name: 'Value Mapping',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE_MAPPING_DESC'),
icon: 'ic_db-value-mapping',
},
{
key: DATA_TABLE_OPERATOR.ADD_LABELS,
name: 'Additional Labels',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS_DESC'),
icon: 'ic_db-additional-labels',
},
{
key: DATA_TABLE_OPERATOR.PIVOT,
name: 'Pivot',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.PIVOT_DESC'),
icon: 'ic_db-pivot-table',
},
]),
});
Expand Down Expand Up @@ -371,29 +388,62 @@ watch(() => state.showPopover, (val) => {
<div v-else
class="data-source-popper-operator-wrapper"
>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
<div class="left-part">
<div class="part-title">
{{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.MERGE') }}
</div>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(0, 2)"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
</div>
</div>
</p-select-card>
</div>
<div class="right-part">
<div class="part-title">
{{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TRANSFORMATIONS') }}
</div>
</p-select-card>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(2)"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
</div>
</div>
</p-select-card>
</div>
</div>
</template>
</p-popover>
Expand Down Expand Up @@ -439,12 +489,24 @@ watch(() => state.showPopover, (val) => {
padding: 1rem;
}
.data-source-popper-operator-wrapper {
display: flex;
flex-direction: column;
@apply grid grid-cols-12;
//display: flex;
//flex-direction: column;
gap: 0.5rem;
width: 21.5rem;
width: 43rem;
padding: 1rem;
.left-part, .right-part {
@apply col-span-6;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.part-title {
@apply text-label-sm text-gray-700;
font-weight: bold;
}
.operator-card-contents {
@apply flex gap-1;
.contents-wrapper {
Expand Down
Loading

0 comments on commit c731532

Please sign in to comment.