From 18503e5798c21b49dcec05915faea54d5f1f997c Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Mon, 2 Sep 2024 19:33:34 +0900 Subject: [PATCH 1/3] fix: create legacy evaluate expression & add legacy-warning UI Signed-off-by: samuel.park --- .../WidgetFormDataTableCardFooter.vue | 6 +- .../WidgetFormDataTableCardHeaderTitle.vue | 2 + ...dgetFormDataTableCardTransformContents.vue | 27 ++-- ...ataTableCardTransformDataTableDropdown.vue | 7 + .../WidgetFormDataTableCardTransformForm.vue | 42 +++++ ...FormDataTableCardTransformFormEvaluate.vue | 145 +++++++++++------- 6 files changed, 159 insertions(+), 70 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue index 6127ecfb0e..0938b6c461 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue @@ -3,6 +3,7 @@ import { PButton, PSpinner } from '@cloudforet/mirinae'; interface Props { disabled: boolean; + isLegacyDataTable?: boolean; changed: boolean; loading: boolean; } @@ -34,7 +35,8 @@ const handleUpdateDataTable = () => { {{ $t('COMMON.WIDGETS.DELETE') }}
- @@ -42,7 +44,7 @@ const handleUpdateDataTable = () => {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue index 1abb64d641..9408c5e0ee 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue @@ -25,6 +25,7 @@ interface Props { dataType: DataTableDataType; dataTableName: string; selected: boolean; + isLegacyDataTable?: boolean; } const props = defineProps(); const emit = defineEmits<{(e: 'update:dataTableName', value: string): void;}>(); @@ -129,6 +130,7 @@ const handleClickNameConfirm = async () => { { + if (state.operator === 'EVAL') return false; + const evalExpressions = (props.item.options as DataTableTransformOptions).EVAL?.expressions; + if (!evalExpressions?.length) return false; + const isLegacyEval = typeof evalExpressions[0] === 'string'; + if (isLegacyEval) return true; + return false; + }), }); const modalState = reactive({ @@ -118,19 +127,7 @@ const originState = reactive({ conditions: computed(() => ((props.item.options as DataTableTransformOptions).QUERY?.conditions ?? []).map((condition) => ({ value: condition, }))), - expressions: computed(() => convertLegacyEvaluateDataTable((props.item.options as DataTableTransformOptions).EVAL?.expressions ?? [])), -}); - -const convertLegacyEvaluateDataTable = (expressions: any[]) => expressions.map((expression) => { - if (typeof expression === 'string') { - const _name = (expression.split('=')[0] ?? '').trim(); - const _expression = (expression.split('=')[1] ?? '').trim(); - return { - name: _name, - fieldType: EVAL_EXPRESSION_TYPE.DATA, - expression: _expression, - }; - } return expression; + expressions: computed(() => (props.item.options as DataTableTransformOptions).EVAL?.expressions ?? []), }); const setFailStatus = (status: boolean) => { @@ -309,16 +306,20 @@ defineExpose({ :data-type="DATA_TABLE_TYPE.TRANSFORMED" :selected="props.selected" :data-table-name.sync="state.dataTableName" + :is-legacy-data-table="state.isLegacyDataTable" />
+ (); @@ -74,6 +75,7 @@ const secondContainerRef = ref(null); /* Events */ const handleClickSelectButton = (isSecondary?: boolean) => { + if (props.isLegacyDataTable) return; if (isSecondary) { state.secondaryVisibleMenu = !state.secondaryVisibleMenu; return; @@ -152,6 +154,7 @@ watch(() => props.dataTableInfo, (newVal) => {
props.dataTableInfo, (newVal) => { } } + &.disabled { + @apply cursor-not-allowed; + } + &.selected { @apply bg-indigo-100 border-indigo-400; .text { diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue index 0ca4ac94e6..6319cf4ee8 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue @@ -19,6 +19,8 @@ import type { DataTableOperator, JoinType, } from '@/common/modules/widgets/types/widget-model'; +import { yellow } from '@/styles/colors'; + interface Props { dataTableId: string; operator: DataTableOperator; @@ -26,6 +28,7 @@ interface Props { joinType: JoinType|undefined; conditions: QueryCondition[]; expressions: EvalExpressions[]; + isLegacyDataTable?: boolean; } const props = defineProps(); @@ -117,10 +120,34 @@ const handleClickAddCondition = () => { /> {{ state.operatorMap.name }}
+
+
+ + + + + + +
+

+ + + +

+
{
@@ -216,5 +244,19 @@ const handleClickAddCondition = () => { margin-bottom: 0.5rem; } } + + .legacy-data-table-warning { + @apply w-full bg-yellow-100 rounded; + padding: 0.5rem 1rem; + margin-bottom: 0.5rem; + .warning-title { + @apply flex items-center gap-1 text-label-lg font-bold text-yellow-700; + margin-bottom: 0.25rem; + } + .warning-description { + @apply text-paragraph-md text-gray-900; + padding-left: 1.5rem; + } + } } diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue index 59bf5a8852..88e27bcf7e 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue @@ -18,7 +18,8 @@ import type { EvalExpressions } from '@/common/modules/widgets/types/widget-data import type { EvaluateExpressionType } from '@/common/modules/widgets/types/widget-model'; interface Props { - expressions: EvalExpressions[]; + expressions: (EvalExpressions[]|string[]); + isLegacyDataTable?: boolean; } const props = defineProps(); @@ -104,70 +105,95 @@ const handleClickAddLabel = () => {