feat(pivot-data-table): create pivot form (transform data-table) #5215
Conversation
…value Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 4 Skipped Deployments
|
piggggggggy
changed the base branch from
master
to
feature-dashboard-november
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
… dynamic-fields) Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
| export const DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP = { | ||
| PIVOT: { | ||
| fields: { | ||
| labels: [], | ||
| data: undefined, | ||
| column: undefined, | ||
| }, | ||
| limit: 5, | ||
| functions: 'sum', | ||
| order_by: { | ||
| type: 'key', | ||
| desc: false, | ||
| }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
question: why those types are not under the schema directory?? 😮
| .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; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
suggestion: We decided to use tailwindcss class utility directly at the template.
And using @apply generates each style block. like:
.data-tab-elselect-form.operator { display: inline-block; }
.data-tab-elselect-form.operator { gap: 0.25rem }
...
It makes hard to find css issue on the browser 😭
| columnFieldInvalid: computed<boolean>(() => { | ||
| if (state.labelFieldItems.length === 1) return true; | ||
| return false; | ||
| }), |
There was a problem hiding this comment.
question: Why didn't u use fieldValidator or formValidator? It has different behavior?
| const dataTableId = dataTableInfo.dataTableId; | ||
| if (dataTableId) { | ||
| state.selectedValueType = 'auto'; | ||
| state.proxyFormData = DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT; |
There was a problem hiding this comment.
issue: constant object must be assign with new object to prevent not intended mutation.
| const handleChangeValueType = (value: string) => { | ||
| state.selectedValueType = value; | ||
| if (value === 'auto') { | ||
| state.proxyFormData = { | ||
| ...state.proxyFormData, | ||
| select: undefined, | ||
| limit: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT.limit, | ||
| }; | ||
| } else { | ||
| state.proxyFormData = { | ||
| ...state.proxyFormData, | ||
| select: [], | ||
| limit: undefined, | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| const handleSelectDynamicFields = (value: MenuItem[]) => { | ||
| state.proxyFormData = { | ||
| ...state.proxyFormData, | ||
| select: value.map((item) => item.name), | ||
| }; | ||
| }; | ||
| const handleUpdateLimit = (value: string) => { | ||
| state.proxyFormData = { | ||
| ...state.proxyFormData, | ||
| limit: value, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
nitpick: updating the merged object(formData) everytime when each property has changed is.. I think, a little dangerous 🤔.
it's hard to track which handler changes that object. That means, it's hard to maintain.
But it's just a nitpick comment and another solution also can have other problems... 😂
| <widget-form-data-table-card-transform-pivot-form v-if="state.operator === DATA_TABLE_OPERATOR.PIVOT" | ||
| :data-table-id="state.dataTableId" | ||
| :data-table-info.sync="state.dataTableInfo" | ||
| :form-data.sync="valueState.pivot" |
There was a problem hiding this comment.
question: what is this formData prop means?
Signed-off-by: samuel.park <[email protected]>
Signed-off-by: samuel.park <[email protected]>
piggggggggy
merged commit e657b17
into
cloudforet-io:feature-dashboard-november
To Reviewers
style,chore,ci, straightforward changes, etc.)Description (optional)
WidgetFormDataTableCardTransformFormWrapper.vue) fromWidgetFormDataTableCardTransformForm.vue.Things to Talk About (optional)