Skip to content

Commit

Permalink
feat(data-table-timediff): add timediff data_name field (#5236)
Browse files Browse the repository at this point in the history 
* feat(data-table-timediff): add timediff data_name field

Signed-off-by: samuel.park <[email protected]>

* chore(widget-form): fix preview data-table bug

Signed-off-by: samuel.park <[email protected]>

---------

Signed-off-by: samuel.park <[email protected]>
  • Loading branch information
@piggggggggy
piggggggggy authored Dec 17, 2024
1 parent 72bc55a commit 08d52c5
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 15 deletions.
11 changes: 10 additions & 1 deletion apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ const dataTableNameState = reactive({
const advancedOptionsState = reactive({
selectedTimeDiff: 'none',
selectedTimeDiffDate: undefined as string|undefined,
timeDiffDataName: '' as string,
});
const validationState = reactive({
Expand Down Expand Up @@ -158,6 +159,10 @@ const originDataState = reactive({
const timeDiffKeys = Object.keys(timeDiff || {});
return timeDiffKeys.length ? `${-timeDiff[timeDiffKeys[0]]}` : undefined;
}),
timeDiffDataName: computed<string>(() => {
const timeDiff = (props.item.options as DataTableAddOptions).timediff;
return timeDiff?.data_name || '';
}),
});
const modalState = reactive({
Expand All @@ -179,7 +184,7 @@ const getTimeDiffValue = (): TimeDiff|undefined => {
};
return {
[advancedOptionsState.selectedTimeDiff]: -Number(advancedOptionsState.selectedTimeDiffDate),
data_name: `${defaultFieldName} (- ${advancedOptionsState.selectedTimeDiffDate} ${timeDiffOptions[advancedOptionsState.selectedTimeDiff]})`,
data_name: advancedOptionsState.timeDiffDataName || `${defaultFieldName} (- ${advancedOptionsState.selectedTimeDiffDate} ${timeDiffOptions[advancedOptionsState.selectedTimeDiff]})`,
};
};
const updateDataTable = async (): Promise<DataTableModel|undefined> => {
Expand Down Expand Up @@ -315,6 +320,7 @@ const setInitialDataTableForm = () => {
// Advanced Options
advancedOptionsState.selectedTimeDiff = originDataState.timeDiff;
advancedOptionsState.selectedTimeDiffDate = originDataState.timeDiffDate;
advancedOptionsState.timeDiffDataName = '';
};
onMounted(() => {
Expand All @@ -332,6 +338,8 @@ watch(() => state.selectedSourceEndItem, (_selectedSourceItem) => {
// Advanced Options
advancedOptionsState.selectedTimeDiff = 'none';
advancedOptionsState.selectedTimeDiffDate = undefined;
advancedOptionsState.timeDiffDataName = '';
});
// Validation
Expand Down Expand Up @@ -378,6 +386,7 @@ defineExpose({
:data-unit.sync="state.dataUnit"
:selected-time-diff.sync="advancedOptionsState.selectedTimeDiff"
:selected-time-diff-date.sync="advancedOptionsState.selectedTimeDiffDate"
:time-diff-data-name.sync="advancedOptionsState.timeDiffDataName"
:form-invalid.sync="validationState.dataTableApplyInvalid"
/>
<widget-form-data-table-card-footer :disabled="validationState.dataTableApplyInvalid"
Expand Down
27 changes: 20 additions & 7 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ interface Props {
/* Advanced Options */
selectedTimeDiff: string;
selectedTimeDiffDate?: string;
timeDiffDataName: string;
/* Validation */
formInvalid: boolean;
Expand All @@ -56,6 +57,7 @@ const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>):
(e: 'update:data-unit', value: string): void;
(e: 'update:selected-time-diff', value: string): void;
(e: 'update:selected-time-diff-date', value: string): void;
(e: 'update:time-diff-data-name', value: string): void;
(e: 'update:form-invalid', value: boolean): void;
}>();
Expand Down Expand Up @@ -83,6 +85,7 @@ const advancedOptionsState = reactive({
advancedOptionsCollapsed: false,
proxySelectedTimeDiff: useProxyValue('selectedTimeDiff', props, emit),
proxySelectedTimeDiffDate: useProxyValue('selectedTimeDiffDate', props, emit),
proxyTimeDiffDataName: useProxyValue('timeDiffDataName', props, emit),
timeDiffList: computed<SelectDropdownMenuItem[]>(() => [
{ label: 'None', name: 'none' },
{ label: 'Year', name: 'years' },
Expand Down Expand Up @@ -148,18 +151,19 @@ const assetFilterState = reactive({
const handleClickTimeDiff = (timeDiff: string) => {
advancedOptionsState.proxySelectedTimeDiff = timeDiff;
advancedOptionsState.proxySelectedTimeDiffDate = undefined;
if (timeDiff === 'none') advancedOptionsState.proxyTimeDiffDataName = '';
};
const handleClickTimeDiffDate = (timeDiffDate: string) => {
advancedOptionsState.proxySelectedTimeDiffDate = timeDiffDate;
// const defaultFieldName = props.sourceItems.find((source) => source.name === props.sourceKey)?.label || '';
// const timeDiffOptions = {
// none: '',
// months: 'month',
// years: 'year',
// };
// state.proxyDataFieldName = `${defaultFieldName} (- ${timeDiffDate} ${timeDiffOptions[advancedOptionsState.proxySelectedTimeDiff]})`;
const defaultFieldName = props.sourceItems.find((source) => source.name === props.sourceKey)?.label || '';
const timeDiffOptions = {
none: '',
months: 'month',
years: 'year',
};
advancedOptionsState.proxyTimeDiffDataName = `${defaultFieldName} (- ${timeDiffDate} ${timeDiffOptions[advancedOptionsState.proxySelectedTimeDiff]})`;
};
const handleUpdateSelectedGroupBy = (selectedItem: SelectDropdownMenuItem, isSelected: boolean) => {
if (isSelected && (state.proxySelectedGroupByItems.length > MAX_GROUP_BY_COUNT)) {
Expand Down Expand Up @@ -240,6 +244,11 @@ watch([
@update:selected="handleClickTimeDiffDate"
/>
</div>
<p-text-input v-if="advancedOptionsState.proxySelectedTimeDiff !== 'none'"
v-model="advancedOptionsState.proxyTimeDiffDataName"
class="timediff-name-text-input"
placeholder="Field Name"
/>
</p-field-group>
</div>
</template>
Expand All @@ -261,6 +270,10 @@ watch([
width: 75%;
}
}
.timediff-name-text-input {
width: 100%;
margin-top: 0.5rem;
}
}
</style>
23 changes: 16 additions & 7 deletions apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/src/controls/toolbox/ty
import { byteFormatter, numberFormatter } from '@cloudforet/utils';
import type { Page } from '@/schema/_common/type';
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
import { i18n } from '@/translations';
import { useAllReferenceStore } from '@/store/reference/all-reference-store';
import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
import { REFERENCE_FIELD_MAP } from '@/common/modules/widgets/_constants/widget-constant';
import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
Expand All @@ -30,24 +33,27 @@ import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-
import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
interface PreviewTableField {
type: 'LABEL' | 'DATA' | 'DIVIDER';
name: string;
sortKey?: string;
}
type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
const widgetGenerateStore = useWidgetGenerateStore();
const widgetGenerateState = widgetGenerateStore.state;
const widgetGenerateGetters = widgetGenerateStore.getters;
const allReferenceStore = useAllReferenceStore();
const storeState = reactive({
previewData: computed(() => widgetGenerateState.previewData),
selectedDataTableId: computed(() => widgetGenerateState.selectedDataTableId),
selectedDataTable: computed(() => widgetGenerateGetters.selectedDataTable),
loading: computed(() => widgetGenerateState.dataTableLoadLoading),
selectedDataTableId: computed<string|undefined>(() => widgetGenerateState.selectedDataTableId),
selectedDataTable: computed<DataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
loading: computed<boolean>(() => widgetGenerateState.dataTableLoadLoading),
dataTableUpdating: computed(() => widgetGenerateState.dataTableUpdating),
selectedGranularity: computed(() => widgetGenerateState.selectedPreviewGranularity),
selectedGranularity: computed<string>(() => widgetGenerateState.selectedPreviewGranularity),
dataTableLoadFailed: computed(() => widgetGenerateState.dataTableLoadFailed),
// reference
project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
Expand All @@ -61,6 +67,8 @@ const state = reactive({
labelFields: computed<string[]>(() => (storeState.loading ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.labels_info ?? {})))),
dataFields: computed<string[]>(() => (storeState.loading ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.data_info ?? {})))),
dataInfo: computed<DataInfo|undefined>(() => storeState.selectedDataTable?.data_info),
isPivot: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
isAutoTypeColumnPivot: computed<boolean>(() => state.isPivot && !!storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.limit),
fields: computed<PreviewTableField[]>(() => {
if (!storeState.selectedDataTableId || !storeState.previewData?.results?.length) {
return [{
Expand Down Expand Up @@ -120,6 +128,7 @@ const state = reactive({
backgroundColor: storeState.selectedDataTableId && storeState.previewData?.results?.length && !storeState.loading ? gray[900] : white,
})),
thisPage: 1,
pageSize: 15,
});
const emptyState = reactive({
Expand Down Expand Up @@ -148,8 +157,8 @@ const handleSelectGranularity = async (granularity: Granularity) => {
const handleChangeToolbox = async (options: ToolboxOptions) => {
if (!storeState.selectedDataTableId) return;
let page = undefined as Page|undefined;
if (options.pageStart) page = { start: options.pageStart, limit: state.thisPage * 15 };
if (options.pageLimit) page = { start: 1, limit: options.pageLimit };
if (options.pageStart) page = { start: options.pageStart, limit: state.pageSize };
if (options.pageLimit) page = { start: 1, limit: state.pageSize };
await widgetGenerateStore.loadDataTable({
data_table_id: storeState.selectedDataTableId,
page,
Expand Down Expand Up @@ -241,7 +250,7 @@ onUnmounted(() => {
:searchable="false"
:refreshable="false"
:page-size-options="[15, 30, 45]"
:page-size="15"
:page-size.sync="state.pageSize"
:this-page.sync="state.thisPage"
:total-count="storeState.previewData.total_count"
@change="handleChangeToolbox"
Expand Down

0 comments on commit 08d52c5

Please sign in to comment.