Skip to content

Commit

Permalink
feat(data-table): create new evaluate data-table
Browse files Browse the repository at this point in the history 
Signed-off-by: samuel.park <[email protected]>
  • Loading branch information
@piggggggggy
piggggggggy committed Aug 29, 2024
1 parent 2e396f1 commit 3cbdca7
Show file tree
Hide file tree
Showing 3 changed files with 253 additions and 66 deletions.
30 changes: 17 additions & 13 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ import WidgetFormDataTableCardHeaderTitle
import WidgetFormDataTableCardTransformForm
from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue';
import {
DATA_TABLE_TYPE,
DATA_TABLE_TYPE, EVAL_EXPRESSION_TYPE,
} from '@/common/modules/widgets/_constants/data-table-constant';
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
import type {
DataTableAlertModalMode, QueryCondition, EvalFormula, TransformDataTableInfo,
DataTableAlertModalMode, QueryCondition, EvalExpressions, TransformDataTableInfo,
} from '@/common/modules/widgets/types/widget-data-table-type';
import type {
DataTableOperator, JoinType, ConcatOptions, JoinOptions, QueryOptions, EvalOptions,
Expand Down Expand Up @@ -61,7 +61,7 @@ const state = reactive({
const haveRequiredConcatOptions = haveSavedName && state.dataTableInfo.dataTables.length === 2 && !state.dataTableInfo.dataTables.includes(undefined);
const haveRequiredJoinOptions = haveSavedName && state.dataTableInfo.dataTables.length === 2 && !state.dataTableInfo.dataTables.includes(undefined) && joinState.joinType;
const haveRequiredQueryOptions = haveSavedName && !!state.dataTableInfo.dataTableId && queryState.conditions.filter((cond) => !!cond.value.trim()).length > 0;
const haveRequiredEvalOptions = haveSavedName && !!state.dataTableInfo.dataTableId && evalState.functions.filter((func) => !!func.value.trim()).length > 0;
const haveRequiredEvalOptions = haveSavedName && !!state.dataTableInfo.dataTableId && evalState.expressions.filter((expression) => !!expression.name && !!expression.expression).length > 0;
if (state.operator === 'CONCAT') return !haveRequiredConcatOptions;
if (state.operator === 'JOIN') return !haveRequiredJoinOptions;
if (state.operator === 'QUERY') return !haveRequiredQueryOptions;
Expand All @@ -73,12 +73,12 @@ const state = reactive({
const dataTableIdChanged = state.dataTableInfo.dataTableId !== originState.dataTableInfo.dataTableId;
const joinTypeChanged = joinState.joinType !== originState.joinType;
const conditionsChanged = !isEqual(queryState.conditions.map((cond) => ({ value: cond.value })).filter((cond) => !!cond.value.trim().length), originState.conditions);
const functionsChanged = !isEqual(evalState.functions.map((func) => ({ value: func.value }))
.filter((func) => !!func.value.trim().length), originState.functions);
const expressionsChanged = !isEqual(evalState.expressions.map((expression) => ({ name: expression.name, field_type: expression.fieldType, expression: expression.expression }))
.filter((expression) => !!expression.name && !!expression.expression), originState.expressions);
if (state.operator === 'CONCAT') return dataTablesChanged;
if (state.operator === 'JOIN') return dataTablesChanged || joinTypeChanged;
if (state.operator === 'QUERY') return dataTableIdChanged || conditionsChanged;
if (state.operator === 'EVAL') return dataTableIdChanged || functionsChanged;
if (state.operator === 'EVAL') return dataTableIdChanged || expressionsChanged;
return false;
}),
isUnsaved: computed(() => state.dataTableId.startsWith('UNSAVED-')),
Expand All @@ -104,7 +104,9 @@ const queryState = reactive({
});
const evalState = reactive({
functions: [{ key: getRandomId(), value: '' }] as EvalFormula[],
expressions: [{
key: getRandomId(), fieldType: EVAL_EXPRESSION_TYPE.DATA, name: '', expression: '', isCollapsed: false,
}] as EvalExpressions[],
});
const originState = reactive({
Expand All @@ -117,9 +119,7 @@ const originState = reactive({
conditions: computed(() => ((props.item.options as DataTableTransformOptions).QUERY?.conditions ?? []).map((condition) => ({
value: condition,
}))),
functions: computed(() => ((props.item.options as DataTableTransformOptions).EVAL?.expressions ?? []).map((func) => ({
value: func,
}))),
expressions: computed(() => ((props.item.options as DataTableTransformOptions).EVAL?.expressions ?? [])),
});
const setFailStatus = (status: boolean) => {
Expand Down Expand Up @@ -168,7 +168,9 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
};
const evalOptions: EvalOptions = {
data_table_id: state.dataTableInfo.dataTableId,
expressions: evalState.functions.map((functionInfo) => functionInfo.value),
expressions: evalState.expressions.map((expressionInfo) => ({
name: expressionInfo.name, field_type: expressionInfo.fieldType, expression: expressionInfo.expression,
})).filter((expresionInfo) => !!expresionInfo.name && !!expresionInfo.expression),
};
const options = () => {
switch (state.operator) {
Expand Down Expand Up @@ -262,7 +264,9 @@ const setInitialDataTableForm = () => {
state.dataTableInfo = originState.dataTableInfo;
joinState.joinType = originState.joinType;
queryState.conditions = originState.conditions.length ? originState.conditions.map((cond) => ({ ...cond, key: getRandomId() })) : [{ key: getRandomId(), value: '' }];
evalState.functions = originState.functions.length ? originState.functions.map((func) => ({ ...func, key: getRandomId() })) : [{ key: getRandomId(), value: '' }];
evalState.expressions = originState.expressions.length ? originState.expressions.map((expression) => ({ ...expression, key: getRandomId() })) : [{
key: getRandomId(), name: '', fieldType: EVAL_EXPRESSION_TYPE.DATA, expression: '', isCollapsed: false,
}];
};
onMounted(() => {
Expand Down Expand Up @@ -301,7 +305,7 @@ defineExpose({
:data-table-info.sync="state.dataTableInfo"
:join-type.sync="joinState.joinType"
:conditions.sync="queryState.conditions"
:functions.sync="evalState.functions"
:expressions.sync="evalState.expressions"
/>
<widget-form-data-table-card-footer :disabled="state.applyDisabled"
:changed="state.optionsChanged"
Expand Down
83 changes: 30 additions & 53 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ import getRandomId from '@/lib/random-id-generator';
import { useProxyValue } from '@/common/composables/proxy-state';
import WidgetFormDataTableCardTransformDataTableDropdown
from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue';
import WidgetFormDataTableCardTransformFormEvaluate
from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormEvaluate.vue';
import { DATA_TABLE_OPERATOR, JOIN_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
import type { QueryCondition, EvalFormula, TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
import type { QueryCondition, TransformDataTableInfo, EvalExpressions } from '@/common/modules/widgets/types/widget-data-table-type';
import type {
DataTableOperator, JoinType,
} from '@/common/modules/widgets/types/widget-model';
Expand All @@ -23,15 +25,15 @@ interface Props {
dataTableInfo: TransformDataTableInfo;
joinType: JoinType|undefined;
conditions: QueryCondition[];
functions: EvalFormula[];
expressions: EvalExpressions[];
}
const props = defineProps<Props>();
const emit = defineEmits<{(e: 'update:data-table-info', value: TransformDataTableInfo): void;
(e: 'update:join-type', value: JoinType): void;
(e: 'update:conditions', value: QueryCondition[]): void;
(e: 'update:functions', value: EvalFormula[]): void;
(e: 'update:expressions', value: EvalExpressions[]): void;
}>();
const state = reactive({
Expand Down Expand Up @@ -60,7 +62,7 @@ const queryState = reactive({
});
const evalState = reactive({
proxyFunctions: useProxyValue('functions', props, emit),
proxyExpressions: useProxyValue('expressions', props, emit),
});
/* Events */
Expand All @@ -80,27 +82,27 @@ const handleClickAddCondition = () => {
queryState.proxyConditions = [...queryState.proxyConditions, { key: getRandomId(), value: '' }];
};
const handleClickAddFunction = () => {
const newFunction = {
key: getRandomId(),
value: '',
};
evalState.proxyFunctions = [...evalState.proxyFunctions, newFunction];
};
const handleChangeFunction = (key: string, value: string) => {
const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
if (targetIndex !== -1) {
evalState.proxyFunctions[targetIndex].value = value;
}
};
const handleRemoveFunction = (key: string) => {
const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
if (targetIndex !== -1) {
evalState.proxyFunctions.splice(targetIndex, 1);
}
};
// const handleClickAddFunction = () => {
// const newFunction = {
// key: getRandomId(),
// value: '',
// };
// evalState.proxyFunctions = [...evalState.proxyFunctions, newFunction];
// };
//
// const handleChangeFunction = (key: string, value: string) => {
// const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
// if (targetIndex !== -1) {
// evalState.proxyFunctions[targetIndex].value = value;
// }
// };
//
// const handleRemoveFunction = (key: string) => {
// const targetIndex = evalState.proxyFunctions.findIndex((functionInfo) => functionInfo.key === key);
// if (targetIndex !== -1) {
// evalState.proxyFunctions.splice(targetIndex, 1);
// }
// };
</script>
Expand Down Expand Up @@ -169,34 +171,9 @@ const handleRemoveFunction = (key: string) => {
</p-button>
</div>
</p-field-group>
<p-field-group v-if="props.operator === DATA_TABLE_OPERATOR.EVAL"
label="Expression"
required
>
<div class="eval-type-functions-wrapper">
<div v-for="(functionInfo, idx) in evalState.proxyFunctions"
:key="functionInfo.key"
class="functions-wrapper"
>
<p-text-input class="formula-input"
block
:value="functionInfo.value"
@update:value="handleChangeFunction(functionInfo.key, $event)"
/>
<p-icon-button name="ic_delete"
size="sm"
:disabled="idx === 0 && evalState.proxyFunctions.length === 1"
@click="handleRemoveFunction(functionInfo.key)"
/>
</div>
<p-button style-type="tertiary"
icon-left="ic_plus_bold"
@click="handleClickAddFunction"
>
Add Expression
</p-button>
</div>
</p-field-group>
<widget-form-data-table-card-transform-form-evaluate v-if="props.operator === DATA_TABLE_OPERATOR.EVAL"
:expressions.sync="evalState.proxyExpressions"
/>
</div>
</div>
</template>
Expand Down
Loading

0 comments on commit 3cbdca7

Please sign in to comment.