Skip to content

Commit

Permalink
refact(709): split into remote and non remote components.
Browse files Browse the repository at this point in the history 
Co-Authored-By: Carol Soliman <[email protected]>
  • Loading branch information
@santiagoballadares @carsoli
santiagoballadares and carsoli committed Apr 24, 2023
1 parent 8c411f3 commit 080d80c
Show file tree
Hide file tree
Showing 28 changed files with 1,059 additions and 524 deletions.
85 changes: 44 additions & 41 deletions packages/documentation/pages/usage/components/form-fields.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@
<component
:is="componentRepresentation.name"
v-bind="componentRepresentation.props"
:actions="componentRepresentation.actions"
:remoteUpload="componentRepresentation.remoteUpload"
:validator="componentRepresentation.validator"
@update:query="updateQuery"
>
Expand Down Expand Up @@ -288,7 +286,7 @@
>
<h4>Additional Props</h4>
<KtFieldToggle
v-if="componentDefinition.additionalProps.includes('actions')"
v-if="componentHasActionsToggle"
formKey="hasActions"
helpText="List of actions that can be triggered from the end of the dropdown"
isOptional
Expand Down Expand Up @@ -563,16 +561,6 @@
:minimum="1"
:step="1"
/>
<KtFieldToggle
v-if="
componentDefinition.additionalProps.includes('remoteUpload')
"
formKey="hasRemoteUpload"
helpText="Defines if the field should trigger a remote upload on file selection. You must provide callback `actions` (onCancel, onDelete, onRetry, onUpload) and `payload` (progress, status)."
isOptional
label="remoteUpload"
type="switch"
/>

<h4>Additional Slots</h4>
<KtFieldText
Expand Down Expand Up @@ -690,6 +678,7 @@ import {
KtFieldDateTime,
KtFieldDateTimeRange,
KtFieldFileUpload,
KtFieldFileUploadRemote,
KtFieldMultiSelect,
KtFieldMultiSelectRemote,
KtFieldNumber,
Expand Down Expand Up @@ -736,6 +725,15 @@ const saveSavedFieldsToLocalStorage = (savedFields: Array<unknown>) => {
}
const DATE_ADDITIONAL_PROPS = ['maximumDate', 'minimumDate']
const FILE_UPLOAD_SHARED_PROPS = [
'allowMultiple',
'allowPhotos',
'collapseExtensionsAfter',
'extensions',
'externalUrl',
'icon',
'maxFileSize',
]
const components: Array<{
additionalProps: Array<string>
Expand Down Expand Up @@ -774,20 +772,17 @@ const components: Array<{
supports: KtFieldDateTimeRange.meta.supports,
},
{
additionalProps: [
'allowMultiple',
'allowPhotos',
'collapseExtensionsAfter',
'extensions',
'externalUrl',
'icon',
'maxFileSize',
'remoteUpload',
],
additionalProps: [...FILE_UPLOAD_SHARED_PROPS],
formKey: 'fileUploadValue',
name: 'KtFieldFileUpload',
supports: KtFieldFileUpload.meta.supports,
},
{
additionalProps: [...FILE_UPLOAD_SHARED_PROPS, 'actions', 'payload'],
formKey: 'fileUploadRemoteValue',
name: 'KtFieldFileUploadRemote',
supports: KtFieldFileUploadRemote.meta.supports,
},
{
additionalProps: [
'actions',
Expand Down Expand Up @@ -903,6 +898,7 @@ const INITIAL_VALUES: {
dateTimeValue: Kotti.FieldDateTime.Value
dateValue: Kotti.FieldDate.Value
fileUploadValue: Kotti.FieldFileUpload.Value
fileUploadRemoteValue: Kotti.FieldFileUploadRemote.Value
multiSelectValue: Kotti.FieldMultiSelect.Value
numberValue: Kotti.FieldNumber.Value
singleSelectValue: Kotti.FieldSingleSelect.Value
Expand All @@ -916,6 +912,7 @@ const INITIAL_VALUES: {
dateTimeValue: null,
dateValue: null,
fileUploadValue: [],
fileUploadRemoteValue: [],
multiSelectValue: [],
numberValue: null,
singleSelectValue: null,
Expand All @@ -929,8 +926,6 @@ const INITIAL_VALUES: {
}
type componentRepresentation = ComponentValue & {
actions?: Array<Record<string, unknown>>
remoteUpload?: Record<string, unknown>
code: string
validator: Kotti.Field.Validation.Function
}
Expand Down Expand Up @@ -1039,7 +1034,6 @@ export default defineComponent({
externalUrl: Kotti.FieldText.Value
hasActions: boolean
hasOptionSlot: boolean
hasRemoteUpload: boolean
headerSlot: ComponentValue['headerSlot']
hideChangeButtons: boolean
icon: Yoco.Icon | null
Expand All @@ -1056,7 +1050,6 @@ export default defineComponent({
numberMaximum: Kotti.FieldNumber.Value
numberMinimum: Kotti.FieldNumber.Value
numberStep: Kotti.FieldNumber.Value
remoteUploadActions: Kotti.FieldToggleGroup.Value
showHeaderSideSlot: ComponentValue['showHeaderSideSlot']
toggleType: 'checkbox' | 'switch'
}
Expand Down Expand Up @@ -1100,7 +1093,6 @@ export default defineComponent({
externalUrl: null,
hasActions: false,
hasOptionSlot: false,
hasRemoteUpload: false,
headerSlot: null,
hideChangeButtons: false,
icon: null,
Expand All @@ -1117,12 +1109,6 @@ export default defineComponent({
numberMaximum: null,
numberMinimum: null,
numberStep: null,
remoteUploadActions: {
onCancel: false,
onDelete: false,
onRetry: false,
onUpload: true,
},
showHeaderSideSlot: false,
toggleType: 'checkbox',
},
Expand Down Expand Up @@ -1378,6 +1364,9 @@ export default defineComponent({
maxFileSize: settings.value.additionalProps.maxFileSize,
})
if (['KtFieldFileUploadRemote'].includes(component))
Object.assign(additionalProps, createRemoteUpload(true))
if (
[
'KtFieldMultiSelect',
Expand Down Expand Up @@ -1408,6 +1397,9 @@ export default defineComponent({
})
}
if (hasActions.value)
Object.assign(additionalProps, { actions: createActions(true) })
if (
['KtFieldMultiSelectRemote', 'KtFieldSingleSelectRemote'].includes(
component,
Expand Down Expand Up @@ -1457,15 +1449,27 @@ export default defineComponent({
})(),
)
const componentHasActionsToggle = computed(() =>
[
'KtFieldMultiSelect',
'KtFieldMultiSelectRemote',
'KtFieldSingleSelect',
'KtFieldSingleSelectRemote',
].includes(settings.value.component),
)
const hasActions = computed(
() =>
componentHasActionsToggle.value &&
settings.value.additionalProps.hasActions,
)
const componentValue = computed(
(): ComponentValue => ({
contentSlot: settings.value.additionalProps.contentSlot,
defaultSlot: settings.value.additionalProps.defaultSlot,
hasActions: settings.value.additionalProps.hasActions,
hasActions: hasActions.value,
hasHelpTextSlot: settings.value.hasHelpTextSlot,
hasRemoteUpload:
settings.value.additionalProps.hasRemoteUpload &&
componentDefinition.value.additionalProps.includes('remoteUpload'),
hasRemoteUpload: settings.value.component === 'KtFieldFileUploadRemote',
hasOptionSlot: settings.value.additionalProps.hasOptionSlot,
headerSlot: settings.value.additionalProps.headerSlot,
name: settings.value.component,
Expand All @@ -1477,9 +1481,7 @@ export default defineComponent({
const componentRepresentation = computed(
(): componentRepresentation => ({
...componentValue.value,
actions: createActions(componentValue.value.hasActions),
code: generateComponentCode(componentValue.value),
remoteUpload: createRemoteUpload(componentValue.value.hasRemoteUpload),
validator: createValidator(componentValue.value.validation),
}),
)
Expand All @@ -1494,6 +1496,7 @@ export default defineComponent({
KtFieldDateTime,
KtFieldDateTimeRange,
KtFieldFileUpload,
KtFieldFileUploadRemote,
KtFieldNumber,
KtFieldMultiSelect,
KtFieldMultiSelectRemote,
Expand All @@ -1508,6 +1511,7 @@ export default defineComponent({
}[componentValue.value.name as Exclude<ComponentNames, 'KtFilters'>]),
),
componentDefinition,
componentHasActionsToggle,
componentOptions: components.map((component) => ({
label: component.name,
value: component.name,
Expand All @@ -1530,7 +1534,6 @@ export default defineComponent({
savedFields.value.map(
(component): componentRepresentation => ({
...component,
actions: createActions(component.hasActions),
code: generateComponentCode(component),
validator: createValidator(component.validation),
}),
Expand Down
27 changes: 14 additions & 13 deletions packages/documentation/pages/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type ComponentNames =
| 'KtFieldDateTime'
| 'KtFieldDateTimeRange'
| 'KtFieldFileUpload'
| 'KtFieldFileUploadRemote'
| 'KtFieldMultiSelect'
| 'KtFieldMultiSelectRemote'
| 'KtFieldNumber'
Expand All @@ -25,6 +26,7 @@ const COMPONENT_NAMES: ComponentNames[] = [
'KtFieldDateTime',
'KtFieldDateTimeRange',
'KtFieldFileUpload',
'KtFieldFileUploadRemote',
'KtFieldMultiSelect',
'KtFieldMultiSelectRemote',
'KtFieldNumber',
Expand Down Expand Up @@ -79,10 +81,10 @@ export const createRemoteUpload = (
? {
actions: {
/* eslint-disable no-console */
onCancel: (id: string) => console.log(`onUpload: ${id}`),
onDelete: (id: string) => console.log(`onDelete: ${id}`),
onRetry: (id: string) => console.log(`onRetry: ${id}`),
onUpload: (id: string) => console.log(`onUpload: ${id}`),
onCancel: (id: number | string) => console.log(`onCancel: ${id}`),
onDelete: (id: number | string) => console.log(`onDelete: ${id}`),
onRetry: (id: number | string) => console.log(`onRetry: ${id}`),
onUpload: (id: number | string) => console.log(`onUpload: ${id}`),
/* eslint-enable no-console */
},
payload: {},
Expand All @@ -93,25 +95,23 @@ const createRemoteUploadCode = (component: ComponentValue): string | null => {
const remoteUpload = createRemoteUpload(component.hasRemoteUpload)

return remoteUpload
? `\t:remoteUpload="${[
'{',
? `${[
...Object.entries(remoteUpload)
.map(([key, value]) => {
if (key === 'actions')
return [
`\t\t${key}: {`,
`\t:${key}: {`,
...Object.keys(value as Record<string, unknown>).map(
(k) => `\t\t\t${k}: (id: string) => {},`,
(k) => `\t\t${k}: (id: number | string) => {},`,
),
'\t\t},',
'\t},',
].join('\n')
if (key === 'payload')
return `\t\t${key}: ${JSON.stringify(value).replace(/"/g, "'")},`
return `\t:${key}: ${JSON.stringify(value).replace(/"/g, "'")},`
})
.filter((value) => value),
'\t}',
].join('\n')}"`
].join('\n')}`
: null
}

Expand Down Expand Up @@ -172,7 +172,8 @@ export const generateComponentCode = (component: ComponentValue) =>
Array.isArray(value) &&
value.length === 0
) &&
key !== 'remoteUpload',
key !== 'actions' &&
key !== 'payload',
)
.map(([key, value]) => {
switch (typeof value) {
Expand Down
5 changes: 5 additions & 0 deletions packages/kotti-ui/source/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
export const ISO8601_SECONDS = 'YYYY-MM-DD HH:mm:ss' as const

// eslint-disable-next-line no-magic-numbers
export const ONE_HUNDRED_PERCENT = 100 as const

export const TIPPY_LIGHT_BORDER_ARROW_HEIGHT = 7
6 changes: 5 additions & 1 deletion packages/kotti-ui/source/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@ import {
KtFieldDateTimeRange,
} from './kotti-field-date'
export * from './kotti-field-date'
import { KtFieldFileUpload } from './kotti-field-file-upload'
import {
KtFieldFileUpload,
KtFieldFileUploadRemote,
} from './kotti-field-file-upload'
export * from './kotti-field-file-upload'
import { KtFieldNumber } from './kotti-field-number'
export * from './kotti-field-number'
Expand Down Expand Up @@ -127,6 +130,7 @@ export default {
KtFieldDateTime,
KtFieldDateTimeRange,
KtFieldFileUpload,
KtFieldFileUploadRemote,
KtFieldMultiSelect,
KtFieldMultiSelectRemote,
KtFieldNumber,
Expand Down
Loading

0 comments on commit 080d80c

Please sign in to comment.