generated from flotiq/flotiq-ui-plugin-templates-react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from flotiq/feature/25125-kaban-view-ui-plugin
#25125 kaban view UI plugin
- Loading branch information
Showing
26 changed files
with
3,121 additions
and
1,483 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,7 @@ | ||
{ | ||
"endOfLine": "lf", | ||
"semi": true, | ||
"singleQuote": true, | ||
"tabWidth": 2, | ||
"trailingComma": "all" | ||
} |
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
This file was deleted.
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
import pluginInfo from '../plugin-manifest.json'; | ||
|
||
export const validSourceFields = ['select', 'radio']; | ||
|
||
export const validCardTitleFields = ['text']; | ||
|
||
export const validCardImageFields = ['datasource']; | ||
|
||
export const validCardAdditionalFields = [ | ||
'text', | ||
'number', | ||
'select', | ||
'date', | ||
'checkbox', | ||
'radio', | ||
]; | ||
|
||
export const getValidFields = (contentTypes) => { | ||
const sourceFields = {}; | ||
const sourceFieldsKeys = {}; | ||
|
||
const cardTitleFields = {}; | ||
const cardTitleFieldsKeys = {}; | ||
|
||
const cardImageFields = {}; | ||
const cardImageFieldsKeys = {}; | ||
|
||
const cardAdditionalFields = {}; | ||
const cardAdditionalFieldsKeys = {}; | ||
|
||
contentTypes | ||
?.filter(({ internal }) => !internal) | ||
?.map(({ name, label }) => ({ value: name, label })); | ||
|
||
(contentTypes || []).forEach(({ name, metaDefinition }) => { | ||
sourceFields[name] = []; | ||
sourceFieldsKeys[name] = []; | ||
|
||
cardTitleFields[name] = []; | ||
cardTitleFieldsKeys[name] = []; | ||
|
||
cardImageFields[name] = []; | ||
cardImageFieldsKeys[name] = []; | ||
|
||
cardAdditionalFields[name] = []; | ||
cardAdditionalFieldsKeys[name] = []; | ||
|
||
Object.entries(metaDefinition?.propertiesConfig || {}).forEach( | ||
([key, fieldConfig]) => { | ||
const inputType = fieldConfig?.inputType; | ||
|
||
if (validSourceFields?.includes(inputType)) { | ||
sourceFields[name].push({ value: key, label: fieldConfig.label }); | ||
sourceFieldsKeys[name].push(key); | ||
} | ||
|
||
if (validCardTitleFields?.includes(inputType)) { | ||
cardTitleFields[name].push({ | ||
value: key, | ||
label: fieldConfig.label, | ||
}); | ||
cardTitleFieldsKeys[name].push(key); | ||
} | ||
|
||
if ( | ||
validCardImageFields?.includes(inputType) && | ||
fieldConfig?.validation?.relationContenttype === '_media' | ||
) { | ||
cardImageFields[name].push({ | ||
value: key, | ||
label: fieldConfig.label, | ||
}); | ||
cardImageFieldsKeys[name].push(key); | ||
} | ||
|
||
if (validCardAdditionalFields?.includes(inputType)) { | ||
cardAdditionalFields[name].push({ | ||
value: key, | ||
label: fieldConfig.label, | ||
}); | ||
cardAdditionalFieldsKeys[name].push(key); | ||
} | ||
}, | ||
); | ||
}); | ||
|
||
return { | ||
sourceFields, | ||
sourceFieldsKeys, | ||
cardTitleFields, | ||
cardTitleFieldsKeys, | ||
cardImageFields, | ||
cardImageFieldsKeys, | ||
cardAdditionalFields, | ||
cardAdditionalFieldsKeys, | ||
}; | ||
}; | ||
|
||
export const validFieldsCacheKey = `${pluginInfo.id}-form-valid-fields`; |
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,92 @@ | ||
import { getCachedElement } from '../../common/plugin-helpers'; | ||
import { | ||
validCardAdditionalFields, | ||
validCardTitleFields, | ||
validFieldsCacheKey, | ||
validSourceFields, | ||
} from '../../common/valid-fields'; | ||
import i18n from '../../i18n'; | ||
|
||
const insertSelectOptions = (config, options = [], emptyOptionMessage) => { | ||
config.additionalHelpTextClasses = 'break-normal'; | ||
|
||
if (options.length === 0) { | ||
config.options = [ | ||
{ value: 'empty', label: emptyOptionMessage, disabled: true }, | ||
]; | ||
return; | ||
} | ||
config.options = options; | ||
}; | ||
|
||
export const handlePluginFormConfig = ({ name, config, formik }) => { | ||
const { index, type } = | ||
name.match(/kanbanBoard\[(?<index>\d+)\].(?<type>\w+)/)?.groups || {}; | ||
|
||
if (index == null || !type) return; | ||
const ctd = formik.values.kanbanBoard[index].content_type; | ||
const { | ||
sourceFields, | ||
cardTitleFields, | ||
cardImageFields, | ||
cardAdditionalFields, | ||
} = getCachedElement(validFieldsCacheKey); | ||
|
||
const keysToClearOnCtdChange = [ | ||
'source', | ||
'title', | ||
'image', | ||
'additional_fields', | ||
]; | ||
|
||
switch (type) { | ||
case 'content_type': | ||
config.onChange = (_, value) => { | ||
if (value == null) formik.setFieldValue(name, ''); | ||
else formik.setFieldValue(name, value); | ||
|
||
keysToClearOnCtdChange.forEach((key) => { | ||
formik.setFieldValue(`kanbanBoard[${index}].${key}`, ''); | ||
}); | ||
}; | ||
break; | ||
case 'source': | ||
insertSelectOptions( | ||
config, | ||
sourceFields?.[ctd], | ||
i18n.t('NonRequiredFieldsInCTD', { | ||
types: validSourceFields.join(', '), | ||
}), | ||
); | ||
break; | ||
case 'title': | ||
insertSelectOptions( | ||
config, | ||
cardTitleFields?.[ctd], | ||
i18n.t('NonRequiredFieldsInCTD', { | ||
types: validCardTitleFields.join(', '), | ||
}), | ||
); | ||
break; | ||
case 'image': | ||
insertSelectOptions( | ||
config, | ||
cardImageFields?.[ctd], | ||
i18n.t('NonRequiredFieldsInCTD', { | ||
types: ['Relation to media, media'], | ||
}), | ||
); | ||
break; | ||
case 'additional_fields': | ||
insertSelectOptions( | ||
config, | ||
cardAdditionalFields?.[ctd], | ||
i18n.t('NonRequiredFieldsInCTD', { | ||
types: validCardAdditionalFields.join(', '), | ||
}), | ||
); | ||
break; | ||
default: | ||
break; | ||
} | ||
}; |
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,60 @@ | ||
import i18n from 'i18next'; | ||
|
||
i18n.init({ | ||
fallbackLng: 'en', | ||
supportedLngs: ['en', 'pl'], | ||
resources: { | ||
en: { | ||
translation: { | ||
Source: 'Column field name', | ||
SourceHelpText: | ||
'Pick the field which will be used to organize cards in columns, each possible value -> new column. Allowed types: {{types}}', | ||
ContentType: 'Content Type', | ||
ContentTypeHelpText: '', | ||
Title: 'Title', | ||
TitleHelpText: | ||
'Pick the field which will be used to display title in card preview. Allowed types: {{types}}', | ||
Image: 'Image', | ||
ImageHelpText: | ||
'Pick the field which will be used to display image in card preview (optional). Allowed types: {{types}}', | ||
AdditionalFields: 'Additional Fields', | ||
AdditionalFieldsHelpText: | ||
'Pick the fields which will be used to display additional fields in card preview (optional). Allowed types: {{types}}', | ||
FieldRequired: 'Field is required', | ||
WrongFieldType: 'This field type is not supported', | ||
CardDelete: 'Content objects deleted (1)', | ||
FetchError: | ||
'Error occurred while connecting to the server, please try again later.', | ||
NonRequiredFieldsInCTD: | ||
'Make sure the selected content type contains fields that can be used in the plugin. Allowed types: {{types}}', | ||
}, | ||
}, | ||
pl: { | ||
translation: { | ||
Source: 'Pole kolumny', | ||
SourceHelpText: | ||
'Wybierz pole, które będzie użyte do organizowania kart w kolumnach, każda możliwa wartość -> nowa kolumna. Dozwolone typy: {{types}}', | ||
ContentType: 'Typ zawartości', | ||
ContentTypeHelpText: '', | ||
Title: 'Tytuł', | ||
TitleHelpText: | ||
'Wybierz pole, które będzie użyte do wyświetlania tytułu w podglądzie karty. Dozwolone typy: {{types}}', | ||
Image: 'Obraz', | ||
ImageHelpText: | ||
'Wybierz pole, które będzie użyte do wyświetlania obrazu w podglądzie karty (opcjonalne). Dozwolone typy: {{types}}', | ||
AdditionalFields: 'Dodatkowe Pole 1', | ||
AdditionalFieldsHelpText: | ||
'Wybierz pola, które będą użyte do wyświetlania dodatkowych pól w podglądzie karty (opcjonalne). Dozwolone typy: {{types}}', | ||
FieldRequired: 'Pole jest wymagane', | ||
WrongFieldType: 'Ten typ pola nie jest wspierany', | ||
CardDelete: 'Usunięto obiekty (1)', | ||
FetchError: | ||
'Wystąpił błąd połączenia z serwerem, spróbuj ponownie później.', | ||
NonRequiredFieldsInCTD: | ||
'pewnij się, że wybrany typ definicji zawiera pola, które mogą być wykorzystane we wtyczce. Dozwolone typy: {{types}}', | ||
}, | ||
}, | ||
}, | ||
}); | ||
|
||
export default i18n; |
Oops, something went wrong.