-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(pivot-data-table): create pivot form (transform data-table) (#5215)
* fix(pivot-data-table): edit pivot option type & create pivot default value Signed-off-by: samuel.park <[email protected]> * feat(data-table): create data table transform form wrapper Signed-off-by: samuel.park <[email protected]> * feat(pivot): create pivot data-table form Signed-off-by: samuel.park <[email protected]> * fix(transform-contents): apply pivot form Signed-off-by: samuel.park <[email protected]> * chore: remove console.debug Signed-off-by: samuel.park <[email protected]> * fix(form-wrapper): edit wrapper component structure Signed-off-by: samuel.park <[email protected]> * fix(pivot-data-table): create other pivot fields (operator, order-by, dynamic-fields) Signed-off-by: samuel.park <[email protected]> * chore: edit typo Signed-off-by: samuel.park <[email protected]> * chore: add annotation Signed-off-by: samuel.park <[email protected]> * chore: edit missing code Signed-off-by: samuel.park <[email protected]> * feat: add icons (ic_sort-ascending, ic_sort-descending) Signed-off-by: samuel.park <[email protected]> * chore: fix style Signed-off-by: samuel.park <[email protected]> * chore: apply review Signed-off-by: samuel.park <[email protected]> * chore: fix typo Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
- Loading branch information
1 parent
a841bb0
commit e657b17
Showing
11 changed files
with
560 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
...eb/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <script setup lang="ts"> | ||
| import { computed, reactive } from 'vue'; | ||
| import { PI } from '@cloudforet/mirinae'; | ||
| import { useProxyValue } from '@/common/composables/proxy-state'; | ||
| import WidgetFormDataTableCardTransformDataTableDropdown | ||
| from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue'; | ||
| import type { TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type'; | ||
| import type { | ||
| DataTableOperator, | ||
| } from '@/common/modules/widgets/types/widget-model'; | ||
| interface Props { | ||
| dataTableId: string; | ||
| dataTableInfo: TransformDataTableInfo; | ||
| operator: DataTableOperator; | ||
| } | ||
| const props = defineProps<Props>(); | ||
| const emit = defineEmits<{(e: 'update:data-table-info', value: TransformDataTableInfo): void; }>(); | ||
| const state = reactive({ | ||
| proxyDataTableInfo: useProxyValue<TransformDataTableInfo>('dataTableInfo', props, emit), | ||
| operatorMap: computed(() => { | ||
| if (props.operator === 'CONCAT') return { name: 'Concatenate', icon: 'ic_db-concat' }; | ||
| if (props.operator === 'JOIN') return { name: 'Join', icon: 'ic_join' }; | ||
| if (props.operator === 'QUERY') return { name: 'Query', icon: 'ic_db-where' }; | ||
| if (props.operator === 'EVAL') return { name: 'Evaluate', icon: 'ic_db-evaluation' }; | ||
| if (props.operator === 'PIVOT') return { name: 'Pivot', icon: '' }; // TODO: Add icon | ||
| if (props.operator === 'VALUE_MAPPING') return { name: 'Value Mapping', icon: '' }; // TODO: Add icon | ||
| if (props.operator === 'ADD_LABELS') return { name: 'Add Labels', icon: '' }; // TODO: Add icon | ||
| return { name: '', icon: '' }; | ||
| }), | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="widget-form-data-table-card-transform-form"> | ||
| <div class="data-table-select-form"> | ||
| <div class="operator"> | ||
| <p-i :name="state.operatorMap.icon" | ||
| width="1rem" | ||
| height="1rem" | ||
| /> | ||
| <span>{{ state.operatorMap.name }}</span> | ||
| </div> | ||
| <div class="data-table-dropdown-wrapper"> | ||
| <widget-form-data-table-card-transform-data-table-dropdown :data-table-id="props.dataTableId" | ||
| :operator="props.operator" | ||
| :data-table-info.sync="state.proxyDataTableInfo" | ||
| /> | ||
| </div> | ||
| <slot name="default" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="postcss" scoped> | ||
| .widget-form-data-table-card-transform-form { | ||
| padding: 0.75rem 1rem; | ||
| .data-table-select-form { | ||
| .operator { | ||
| @apply inline-flex items-center gap-1 rounded-md border border-gray-150 bg-gray-100 text-label-sm font-bold text-gray-700; | ||
| padding: 0.25rem 0.5rem; | ||
| margin-bottom: 0.5rem; | ||
| } | ||
| .data-table-dropdown-wrapper { | ||
| margin-bottom: 1rem; | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.