mirror of
https://github.com/strapi/strapi.git
synced 2025-09-26 08:52:26 +00:00
Migrate some of the advanced and the base form
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette
parent
d5359724d6
commit
7666e7c77f
@ -461,7 +461,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
|
||||
</div>
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="sc-fTACoA"
|
||||
class="sc-jVKKMF"
|
||||
>
|
||||
<ul
|
||||
class="c16 c17"
|
||||
|
||||
@ -1561,7 +1561,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
|
||||
</div>
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="sc-hJxDiT"
|
||||
class="sc-bAffKu"
|
||||
>
|
||||
<ul
|
||||
class="c63 c64"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
// import React from 'react';
|
||||
// import { FormattedMessage } from 'react-intl';
|
||||
// import isEmpty from 'lodash/isEmpty';
|
||||
import getTrad from '../../../utils/getTrad';
|
||||
import { componentForm } from '../component';
|
||||
import options from './attributeOptions';
|
||||
@ -15,20 +15,28 @@ const advancedForm = {
|
||||
{
|
||||
autoFocus: true,
|
||||
type: 'enum',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.settings.default'),
|
||||
defaultMessage: 'Default value',
|
||||
},
|
||||
name: 'default',
|
||||
options: [
|
||||
{ value: 'true', label: 'TRUE' },
|
||||
{ value: '', label: 'NULL' },
|
||||
{ value: 'false', label: 'FALSE' },
|
||||
],
|
||||
options: [],
|
||||
// options: [
|
||||
// { value: 'true', label: 'TRUE' },
|
||||
// { value: '', label: 'NULL' },
|
||||
// { value: 'false', label: 'FALSE' },
|
||||
// ],
|
||||
// validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
{ sectionTitle: null, items: [options.required, options.unique, options.private] },
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.unique, options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -41,7 +49,10 @@ const advancedForm = {
|
||||
return {
|
||||
sections: [
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.private, options.max, options.min],
|
||||
},
|
||||
],
|
||||
@ -49,7 +60,15 @@ const advancedForm = {
|
||||
}
|
||||
|
||||
return {
|
||||
sections: [{ sectionTitle: null, items: [options.required, options.private] }],
|
||||
sections: [
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
date: ({ type }) => {
|
||||
@ -68,13 +87,27 @@ const advancedForm = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{ sectionTitle: null, items: [options.required, options.unique, options.private] },
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.unique, options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
dynamiczone: () => {
|
||||
return {
|
||||
sections: [{ sectionTitle: null, items: [options.required, options.max, options.min] }],
|
||||
sections: [
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.max, options.min],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
email: () => {
|
||||
@ -91,7 +124,10 @@ const advancedForm = {
|
||||
},
|
||||
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [
|
||||
options.required,
|
||||
options.unique,
|
||||
@ -112,51 +148,71 @@ const advancedForm = {
|
||||
{
|
||||
name: 'default',
|
||||
type: 'select',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.settings.default'),
|
||||
defaultMessage: 'Default value',
|
||||
},
|
||||
validations: {},
|
||||
options: [
|
||||
<FormattedMessage
|
||||
key="hidden___value__placeholder"
|
||||
id="components.InputSelect.option.placeholder"
|
||||
>
|
||||
{msg => <option value="">{msg}</option>}
|
||||
</FormattedMessage>,
|
||||
].concat(
|
||||
data.enum
|
||||
? data.enum
|
||||
.filter((val, index) => data.enum.indexOf(val) === index && !isEmpty(val))
|
||||
.map(val => (
|
||||
<option key={val} value={val}>
|
||||
{val}
|
||||
</option>
|
||||
))
|
||||
: []
|
||||
),
|
||||
{
|
||||
key: '__null_reset_value__',
|
||||
value: '',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: 'components.InputSelect.option.placeholder',
|
||||
defaultMessage: 'Choose here',
|
||||
},
|
||||
},
|
||||
},
|
||||
...(data.enum || [])
|
||||
.filter((value, index) => data.enum.indexOf(value) === index && value)
|
||||
.map(value => {
|
||||
return {
|
||||
key: value,
|
||||
value,
|
||||
metadatas: {
|
||||
intlLabel: { id: `${value}.no-override`, defaultMessage: value },
|
||||
},
|
||||
};
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.enumeration.graphql'),
|
||||
defaultMessage: 'Name override for GraphQL',
|
||||
},
|
||||
name: 'enumName',
|
||||
type: 'text',
|
||||
validations: {},
|
||||
description: {
|
||||
id: getTrad('form.attribute.item.enumeration.graphql.description'),
|
||||
defaultMessage: 'Allows you to override the default generated name for GraphQL',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{ sectionTitle: null, items: [options.required, options.unique, options.private] },
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.unique, options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
json: () => {
|
||||
return {
|
||||
sections: [
|
||||
{ sectionTitle: null, items: [options.required, options.unique, options.private] },
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.unique, options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -165,11 +221,15 @@ const advancedForm = {
|
||||
sections: [
|
||||
{ sectionTitle: null, items: [options.required, options.unique] },
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.media.allowed-types'),
|
||||
defaultMessage: 'Select allowed types of media',
|
||||
},
|
||||
name: 'allowedTypes',
|
||||
type: 'allowedTypesSelect',
|
||||
@ -183,7 +243,7 @@ const advancedForm = {
|
||||
};
|
||||
},
|
||||
number: data => {
|
||||
const inputStep = data.type === 'decimal' || data.type === 'float' ? 'any' : '1';
|
||||
const inputStep = data.type === 'decimal' || data.type === 'float' ? 'any' : 1;
|
||||
|
||||
return {
|
||||
sections: [
|
||||
@ -195,15 +255,19 @@ const advancedForm = {
|
||||
name: 'default',
|
||||
type: data.type === 'biginteger' ? 'text' : 'number',
|
||||
step: inputStep,
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.settings.default'),
|
||||
defaultMessage: 'Default value',
|
||||
},
|
||||
validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.unique, options.max, options.min, options.private],
|
||||
},
|
||||
],
|
||||
@ -215,7 +279,10 @@ const advancedForm = {
|
||||
{ sectionTitle: null, items: [options.default] },
|
||||
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [
|
||||
options.required,
|
||||
options.unique,
|
||||
@ -229,7 +296,15 @@ const advancedForm = {
|
||||
},
|
||||
relation: () => {
|
||||
return {
|
||||
sections: [{ sectionTitle: null, items: [options.private] }],
|
||||
sections: [
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.private],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
richtext: () => {
|
||||
@ -237,7 +312,10 @@ const advancedForm = {
|
||||
sections: [
|
||||
{ sectionTitle: null, items: [options.default] },
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [
|
||||
options.required,
|
||||
options.unique,
|
||||
@ -255,7 +333,10 @@ const advancedForm = {
|
||||
{ sectionTitle: null, items: [options.default, options.regex] },
|
||||
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [
|
||||
options.required,
|
||||
options.unique,
|
||||
@ -276,7 +357,10 @@ const advancedForm = {
|
||||
},
|
||||
|
||||
{
|
||||
sectionTitle: null,
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: [options.required, options.maxLength, options.minLength, options.private],
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
// import React, { Fragment } from 'react';
|
||||
// import { FormattedMessage } from 'react-intl';
|
||||
import getTrad from '../../../utils/getTrad';
|
||||
import { componentField, componentForm } from '../component';
|
||||
import { nameField } from './nameField';
|
||||
@ -24,8 +24,9 @@ const baseForm = {
|
||||
{
|
||||
name: 'component',
|
||||
type: 'componentSelect',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attributes.select-component'),
|
||||
defaultMessage: 'Select a component',
|
||||
},
|
||||
isMultiple: false,
|
||||
},
|
||||
@ -35,25 +36,27 @@ const baseForm = {
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'repeatable',
|
||||
type: 'booleanBox',
|
||||
size: 12,
|
||||
options: [
|
||||
{
|
||||
headerId: getTrad('form.attribute.component.option.repeatable'),
|
||||
descriptionId: getTrad('form.attribute.component.option.repeatable.description'),
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
headerId: getTrad('form.attribute.component.option.single'),
|
||||
descriptionId: getTrad('form.attribute.component.option.single.description'),
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
validations: {},
|
||||
// FIXME
|
||||
// options: [
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.component.option.repeatable'),
|
||||
// descriptionId: getTrad('form.attribute.component.option.repeatable.description'),
|
||||
// value: true,
|
||||
// },
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.component.option.single'),
|
||||
// descriptionId: getTrad('form.attribute.component.option.single.description'),
|
||||
// value: false,
|
||||
// },
|
||||
// ],
|
||||
// validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -68,44 +71,55 @@ const baseForm = {
|
||||
items: [
|
||||
nameField,
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'type',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ id: 'components.InputSelect.option.placeholder', value: '' },
|
||||
{
|
||||
id: 'form.attribute.item.date.type.date',
|
||||
key: '__null_reset_value__',
|
||||
value: '',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: 'components.InputSelect.option.placeholder',
|
||||
defaultMessage: 'Choose here',
|
||||
},
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'date',
|
||||
value: 'date',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.date.type.date'),
|
||||
defaultMessage: 'date',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'form.attribute.item.date.type.datetime',
|
||||
key: 'datetime',
|
||||
value: 'datetime',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.date.type.datetime'),
|
||||
defaultMessage: 'datetime',
|
||||
},
|
||||
},
|
||||
},
|
||||
// Not sure the ctm supports that one
|
||||
// {
|
||||
// id: 'form.attribute.item.date.type.timestamp',
|
||||
// value: 'timestamp',
|
||||
// },
|
||||
{ id: 'form.attribute.item.date.type.time', value: 'time' },
|
||||
].map(({ id, value }, index) => {
|
||||
const disabled = index === 0;
|
||||
const tradId = index === 0 ? id : getTrad(id);
|
||||
|
||||
return (
|
||||
<FormattedMessage id={tradId} key={id}>
|
||||
{msg => (
|
||||
<option disabled={disabled} hidden={disabled} value={value}>
|
||||
{msg}
|
||||
</option>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
);
|
||||
}),
|
||||
validations: {
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
key: 'time',
|
||||
value: 'time',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.date.type.time'),
|
||||
defaultMessage: 'time',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -123,11 +137,13 @@ const baseForm = {
|
||||
name: 'enum',
|
||||
type: 'textarea',
|
||||
size: 8,
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.enumeration.rules'),
|
||||
defaultMessage: 'Values (one line per value)',
|
||||
},
|
||||
placeholder: {
|
||||
id: getTrad('form.attribute.item.enumeration.placeholder'),
|
||||
defaultMessage: 'Ex:\nmorning\nnoon\nevening',
|
||||
},
|
||||
validations: {
|
||||
required: true,
|
||||
@ -146,23 +162,28 @@ const baseForm = {
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
{
|
||||
label: { id: getTrad('modalForm.attribute.text.type-selection') },
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'multiple',
|
||||
size: 12,
|
||||
type: 'booleanBox',
|
||||
options: [
|
||||
{
|
||||
headerId: getTrad('form.attribute.media.option.multiple'),
|
||||
descriptionId: getTrad('form.attribute.media.option.multiple.description'),
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
headerId: getTrad('form.attribute.media.option.single'),
|
||||
descriptionId: getTrad('form.attribute.media.option.single.description'),
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
validations: {},
|
||||
// FIXME
|
||||
options: [],
|
||||
// options: [
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.media.option.multiple'),
|
||||
// descriptionId: getTrad('form.attribute.media.option.multiple.description'),
|
||||
// value: true,
|
||||
// },
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.media.option.single'),
|
||||
// descriptionId: getTrad('form.attribute.media.option.single.description'),
|
||||
// value: false,
|
||||
// },
|
||||
// ],
|
||||
// validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -177,43 +198,65 @@ const baseForm = {
|
||||
items: [
|
||||
nameField,
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.number.type'),
|
||||
defaultMessage: 'Number format',
|
||||
},
|
||||
name: 'type',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ id: 'components.InputSelect.option.placeholder', value: '' },
|
||||
{
|
||||
id: 'form.attribute.item.number.type.integer',
|
||||
key: '__null_reset_value__',
|
||||
value: '',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: 'components.InputSelect.option.placeholder',
|
||||
defaultMessage: 'Choose here',
|
||||
},
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'integer',
|
||||
value: 'integer',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.number.type.integer'),
|
||||
defaultMessage: 'integer (ex: 10)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'form.attribute.item.number.type.biginteger',
|
||||
key: 'biginteger',
|
||||
value: 'biginteger',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.number.type.biginteger'),
|
||||
defaultMessage: 'biginteger (ex: 123456789)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'form.attribute.item.number.type.decimal',
|
||||
key: 'decimal',
|
||||
value: 'decimal',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.number.type.decimal'),
|
||||
defaultMessage: 'decimal (ex: 2.22)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{ id: 'form.attribute.item.number.type.float', value: 'float' },
|
||||
].map(({ id, value }, index) => {
|
||||
const disabled = index === 0;
|
||||
const tradId = index === 0 ? id : getTrad(id);
|
||||
|
||||
return (
|
||||
<FormattedMessage id={tradId} key={id}>
|
||||
{msg => (
|
||||
<option disabled={disabled} hidden={disabled} value={value}>
|
||||
{msg}
|
||||
</option>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
);
|
||||
}),
|
||||
validations: {
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
key: 'float',
|
||||
value: 'float',
|
||||
metadatas: {
|
||||
intlLabel: {
|
||||
id: getTrad('form.attribute.item.number.type.float'),
|
||||
defaultMessage: 'decimal (ex: 3.3333333)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -227,6 +270,8 @@ const baseForm = {
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
{
|
||||
intlLabel: { id: 'FIXME', defaultMessage: 'FIXME' },
|
||||
name: 'relation',
|
||||
type: 'relation',
|
||||
},
|
||||
],
|
||||
@ -242,23 +287,28 @@ const baseForm = {
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
{
|
||||
label: { id: getTrad('modalForm.attribute.text.type-selection') },
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'type',
|
||||
size: 12,
|
||||
type: 'booleanBox',
|
||||
options: [
|
||||
{
|
||||
headerId: getTrad('form.attribute.text.option.short-text'),
|
||||
descriptionId: getTrad('form.attribute.text.option.short-text.description'),
|
||||
value: 'string',
|
||||
},
|
||||
{
|
||||
headerId: getTrad('form.attribute.text.option.long-text'),
|
||||
descriptionId: getTrad('form.attribute.text.option.long-text.description'),
|
||||
value: 'text',
|
||||
},
|
||||
],
|
||||
validations: {},
|
||||
options: [],
|
||||
// FIXME
|
||||
// options: [
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.text.option.short-text'),
|
||||
// descriptionId: getTrad('form.attribute.text.option.short-text.description'),
|
||||
// value: 'string',
|
||||
// },
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.text.option.long-text'),
|
||||
// descriptionId: getTrad('form.attribute.text.option.long-text.description'),
|
||||
// value: 'text',
|
||||
// },
|
||||
// ],
|
||||
// validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -273,34 +323,44 @@ const baseForm = {
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
{
|
||||
label: { id: getTrad('modalForm.attribute.text.type-selection') },
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'type',
|
||||
size: 12,
|
||||
type: 'booleanBox',
|
||||
options: [
|
||||
{
|
||||
headerId: getTrad('form.attribute.text.option.short-text'),
|
||||
descriptionId: getTrad('form.attribute.text.option.short-text.description'),
|
||||
value: 'string',
|
||||
},
|
||||
{
|
||||
headerId: getTrad('form.attribute.text.option.long-text'),
|
||||
descriptionId: getTrad('form.attribute.text.option.long-text.description'),
|
||||
value: 'text',
|
||||
},
|
||||
],
|
||||
validations: {},
|
||||
options: [],
|
||||
// FIXME
|
||||
// options: [
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.text.option.short-text'),
|
||||
// descriptionId: getTrad('form.attribute.text.option.short-text.description'),
|
||||
// value: 'string',
|
||||
// },
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.text.option.long-text'),
|
||||
// descriptionId: getTrad('form.attribute.text.option.long-text.description'),
|
||||
// value: 'text',
|
||||
// },
|
||||
// ],
|
||||
// validations: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
// [uiHelpers.spacerMedium],
|
||||
],
|
||||
};
|
||||
},
|
||||
uid: (data, step, attributes) => {
|
||||
const options = attributes
|
||||
.filter(({ type }) => ['string', 'text'].includes(type))
|
||||
.map(({ name }) => ({ id: name, value: name }));
|
||||
.map(({ name }) => ({
|
||||
key: name,
|
||||
value: name,
|
||||
metadatas: {
|
||||
intlLabel: { id: `${name}.no-override`, defaultMessage: name },
|
||||
},
|
||||
}));
|
||||
|
||||
return {
|
||||
sections: [
|
||||
@ -311,29 +371,24 @@ const baseForm = {
|
||||
...nameField,
|
||||
placeholder: {
|
||||
id: getTrad('modalForm.attribute.form.base.name.placeholder'),
|
||||
defaultMessage: 'e.g. Slug, SEO URL, Canonical URL',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.target-field'),
|
||||
defaultMessage: 'Attached field',
|
||||
},
|
||||
name: 'targetField',
|
||||
type: 'select',
|
||||
options: [{ id: getTrad('none'), value: '' }, ...options].map((option, index) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<Fragment key={index}>
|
||||
{index === 0 ? (
|
||||
<FormattedMessage id={option.id}>
|
||||
{msg => <option value={option.value}>{msg}</option>}
|
||||
</FormattedMessage>
|
||||
) : (
|
||||
<option value={option.value}>{option.value}</option>
|
||||
)}
|
||||
</Fragment>
|
||||
)),
|
||||
// validations: {
|
||||
// required: true,
|
||||
// },
|
||||
options: [
|
||||
{
|
||||
key: '__null_reset_value__',
|
||||
value: '',
|
||||
metadatas: { intlLabel: { id: getTrad('none'), defaultMessage: 'None' } },
|
||||
},
|
||||
...options,
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -10,15 +10,17 @@ const form = {
|
||||
autoFocus: true,
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.form.base.name'),
|
||||
defaultMessage: 'Name',
|
||||
},
|
||||
|
||||
validations: {
|
||||
required: true,
|
||||
},
|
||||
// validations: {
|
||||
// required: true,
|
||||
// },
|
||||
description: {
|
||||
id: getTrad('modalForm.editCategory.base.name.description'),
|
||||
defaultMessage: 'No space is allowed for the name of the category',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
import getTrad from '../../../utils/getTrad';
|
||||
|
||||
const componentField = {
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.text.type-selection'),
|
||||
defaultMessage: 'Type',
|
||||
},
|
||||
name: 'createComponent',
|
||||
type: 'booleanBox',
|
||||
size: 12,
|
||||
options: [
|
||||
{
|
||||
headerId: getTrad('form.attribute.component.option.create'),
|
||||
descriptionId: getTrad('form.attribute.component.option.create.description'),
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
headerId: getTrad('form.attribute.component.option.reuse-existing'),
|
||||
descriptionId: getTrad('form.attribute.component.option.reuse-existing.description'),
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
validations: {},
|
||||
// FIXME
|
||||
options: [],
|
||||
// options: [
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.component.option.create'),
|
||||
// descriptionId: getTrad('form.attribute.component.option.create.description'),
|
||||
// value: true,
|
||||
// },
|
||||
// {
|
||||
// headerId: getTrad('form.attribute.component.option.reuse-existing'),
|
||||
// descriptionId: getTrad('form.attribute.component.option.reuse-existing.description'),
|
||||
// value: false,
|
||||
// },
|
||||
// ],
|
||||
// validations: {},
|
||||
};
|
||||
|
||||
export default componentField;
|
||||
|
||||
@ -9,22 +9,17 @@ const componentForm = {
|
||||
{
|
||||
name: `${prefix}name`,
|
||||
type: 'text',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attribute.form.base.name'),
|
||||
},
|
||||
|
||||
validations: {
|
||||
required: true,
|
||||
defaultMessage: 'Name',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: `${prefix}category`,
|
||||
type: 'creatableSelect',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.components.create-component.category.label'),
|
||||
},
|
||||
validations: {
|
||||
required: true,
|
||||
defaultMessage: 'Select a category or enter a name to create a new one',
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -36,8 +31,9 @@ const componentForm = {
|
||||
name: `${prefix}icon`,
|
||||
type: 'componentIconPicker',
|
||||
size: 12,
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.components.icon.label'),
|
||||
defaultMessage: 'Icon',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -7,9 +7,6 @@ const nameField = {
|
||||
id: getTrad('contentType.displayName.label'),
|
||||
defaultMessage: 'Display name',
|
||||
},
|
||||
// validations: {
|
||||
// required: true,
|
||||
// },
|
||||
};
|
||||
|
||||
const forms = {
|
||||
@ -17,11 +14,6 @@ const forms = {
|
||||
default: () => {
|
||||
return {
|
||||
sections: [
|
||||
// [
|
||||
// {
|
||||
// type: 'dividerDraftPublish',
|
||||
// },
|
||||
// ],
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.contentType.divider.draft-publish'),
|
||||
|
||||
@ -25,13 +25,14 @@ const form = {
|
||||
{
|
||||
sectionTitle: null,
|
||||
items: [
|
||||
// TODO
|
||||
// FIXME
|
||||
{ type: 'pushRight', size: 6 },
|
||||
{
|
||||
name: 'components',
|
||||
type: 'componentSelect',
|
||||
label: {
|
||||
intlLabel: {
|
||||
id: getTrad('modalForm.attributes.select-components'),
|
||||
defaultMessage: 'Select the components',
|
||||
},
|
||||
isMultiple: true,
|
||||
},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import get from 'lodash/get';
|
||||
import toLower from 'lodash/toLower';
|
||||
import { nameToSlug } from '../utils/createUid';
|
||||
import getTrad from '../../../utils/getTrad';
|
||||
import { attributesForm, attributeTypes, commonBaseForm } from '../attributes';
|
||||
import { categoryForm, createCategorySchema } from '../category';
|
||||
import { contentTypeForm, createContentTypeSchema } from '../contentType';
|
||||
@ -51,13 +52,32 @@ const forms = {
|
||||
advanced({ data, type, step, extensions, ...rest }) {
|
||||
try {
|
||||
const baseForm = attributesForm.advanced[type](data, step).sections;
|
||||
|
||||
return extensions.makeAdvancedForm(['attribute', type], baseForm, {
|
||||
const itemsToAdd = extensions.getAdvancedForm(['attribute', type], {
|
||||
data,
|
||||
type,
|
||||
step,
|
||||
...rest,
|
||||
});
|
||||
|
||||
const sections = baseForm.reduce((acc, current) => {
|
||||
if (current.sectionTitle === null) {
|
||||
acc.push(current);
|
||||
} else {
|
||||
acc.push({ ...current, items: [...current.items, ...itemsToAdd] });
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
// IF we want a dedicated section for the plugins
|
||||
// const sections = [
|
||||
// ...baseForm,
|
||||
// {
|
||||
// sectionTitle: { id: 'Zone pour plugins', defaultMessage: 'Zone pour plugins' },
|
||||
// items: itemsToAdd,
|
||||
// },
|
||||
// ];
|
||||
|
||||
return { sections };
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
||||
@ -100,8 +120,20 @@ const forms = {
|
||||
},
|
||||
advanced({ extensions }) {
|
||||
const baseForm = contentTypeForm.advanced.default().sections;
|
||||
const itemsToAdd = extensions.getAdvancedForm(['contentType']);
|
||||
|
||||
return extensions.makeAdvancedForm(['contentType'], baseForm);
|
||||
return {
|
||||
sections: [
|
||||
...baseForm,
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: itemsToAdd,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -21,9 +21,10 @@ import upperFirst from 'lodash/upperFirst';
|
||||
import toString from 'lodash/toString';
|
||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
||||
import { Box } from '@strapi/parts/Box';
|
||||
import { Button } from '@strapi/parts/Button';
|
||||
import { Divider } from '@strapi/parts/Divider';
|
||||
import { Grid, GridItem } from '@strapi/parts/Grid';
|
||||
import { ModalLayout, ModalBody } from '@strapi/parts/ModalLayout';
|
||||
import { ModalLayout, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
|
||||
import { H2, H3 } from '@strapi/parts/Text';
|
||||
import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/parts/Tabs';
|
||||
import { Row } from '@strapi/parts/Row';
|
||||
@ -592,6 +593,7 @@ const FormModal = () => {
|
||||
'regex',
|
||||
];
|
||||
|
||||
// FIXME
|
||||
// When toggling the draftAndPublish from true to false
|
||||
// We need to display a confirmation box
|
||||
if (name === 'draftAndPublish' && state.actionType === 'edit' && value === false) {
|
||||
@ -626,6 +628,7 @@ const FormModal = () => {
|
||||
}
|
||||
|
||||
// We store an array for the enum
|
||||
// FIXME
|
||||
} else if (name === 'enum') {
|
||||
val = value.split('\n');
|
||||
} else {
|
||||
@ -1184,7 +1187,6 @@ const FormModal = () => {
|
||||
// TODO put aria-disabled
|
||||
disabled={shouldDisableAdvancedTab()}
|
||||
onClick={() => {
|
||||
console.log('click');
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
settingType: 'advanced',
|
||||
@ -1345,9 +1347,11 @@ const FormModal = () => {
|
||||
retrievedValue === ''
|
||||
) {
|
||||
value = null;
|
||||
} else if (input.type === 'checkbox' && !retrievedValue) {
|
||||
value = false;
|
||||
} else {
|
||||
}
|
||||
// else if (input.type === 'checkbox' && !retrievedValue) {
|
||||
// value = false;
|
||||
// }
|
||||
else {
|
||||
value = retrievedValue;
|
||||
}
|
||||
|
||||
@ -1373,6 +1377,13 @@ const FormModal = () => {
|
||||
</Box>
|
||||
</TabGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter
|
||||
startActions={
|
||||
<Button variant="tertiary" onClick={handleClosed}>
|
||||
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
)}
|
||||
</ModalLayout>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import get from 'lodash/get';
|
||||
import * as yup from 'yup';
|
||||
import getTrad from './getTrad';
|
||||
|
||||
const formsAPI = {
|
||||
components: {
|
||||
@ -81,7 +80,7 @@ const formsAPI = {
|
||||
}
|
||||
});
|
||||
},
|
||||
makeAdvancedForm(target, initSections, props) {
|
||||
getAdvancedForm(target, props = null) {
|
||||
const sectionsToAdd = get(this.types, [...target, 'form', 'advanced'], []).reduce(
|
||||
(acc, current) => {
|
||||
const sections = current(props);
|
||||
@ -91,19 +90,9 @@ const formsAPI = {
|
||||
[]
|
||||
);
|
||||
|
||||
return {
|
||||
sections: [
|
||||
...initSections,
|
||||
{
|
||||
sectionTitle: {
|
||||
id: getTrad('form.attribute.item.settings.name'),
|
||||
defaultMessage: 'Settings',
|
||||
},
|
||||
items: sectionsToAdd,
|
||||
},
|
||||
],
|
||||
};
|
||||
return sectionsToAdd;
|
||||
},
|
||||
|
||||
makeValidator(target, initShape, ...args) {
|
||||
const validators = get(this.types, [...target, 'validators'], []);
|
||||
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
<!--- GenericInput.stories.mdx --->
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||||
import { Grid, GridItem } from '@strapi/parts/Grid';
|
||||
import { HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
|
||||
import { Main } from '@strapi/parts/Main';
|
||||
import { Stack } from '@strapi/parts/Stack';
|
||||
import { Box } from '@strapi/parts/Box';
|
||||
import set from 'lodash/set';
|
||||
import GenericInput from './index';
|
||||
import layout from './storyUtils/layout';
|
||||
|
||||
<Meta title="components/GenericInput" component={GenericInput} />
|
||||
|
||||
# GenericInput
|
||||
|
||||
This is the doc of the `GenericInput` component
|
||||
|
||||
## GenericInput
|
||||
|
||||
Description...
|
||||
|
||||
<Canvas>
|
||||
<Story name="base">
|
||||
{() => {
|
||||
const [state, setState] = useState({
|
||||
firstname: 'ee',
|
||||
email: '',
|
||||
private: null,
|
||||
});
|
||||
return (
|
||||
<ContentLayout>
|
||||
<Stack size={4}>
|
||||
{layout.map((row, rowIndex) => {
|
||||
return (
|
||||
<Box key={rowIndex}>
|
||||
<Grid gap={4}>
|
||||
{row.map(input => {
|
||||
return (
|
||||
<GridItem key={input.name} {...input.size}>
|
||||
<GenericInput
|
||||
{...input}
|
||||
value={state[input.name]}
|
||||
onChange={({ target: { name, value } }) => {
|
||||
setState(prev => {
|
||||
return { ...prev, [name]: value };
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</ContentLayout>
|
||||
);
|
||||
}}
|
||||
</Story>
|
||||
</Canvas>
|
||||
@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
|
||||
import { useIntl } from 'react-intl';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { formatISO } from 'date-fns';
|
||||
import { Checkbox } from '@strapi/parts/Checkbox';
|
||||
import { DatePicker } from '@strapi/parts/DatePicker';
|
||||
import { NumberInput } from '@strapi/parts/NumberInput';
|
||||
import { Select, Option } from '@strapi/parts/Select';
|
||||
@ -106,6 +107,23 @@ const GenericInput = ({
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'checkbox': {
|
||||
return (
|
||||
<Checkbox
|
||||
disabled={disabled}
|
||||
error={errorMessage}
|
||||
hint={hint}
|
||||
id={name}
|
||||
name={name}
|
||||
onValueChange={value => {
|
||||
onChange({ target: { name, value } });
|
||||
}}
|
||||
value={Boolean(value)}
|
||||
>
|
||||
{label}
|
||||
</Checkbox>
|
||||
);
|
||||
}
|
||||
case 'date': {
|
||||
return (
|
||||
<DatePicker
|
||||
@ -284,7 +302,11 @@ const GenericInput = ({
|
||||
);
|
||||
}
|
||||
default: {
|
||||
return <div>{type} is not supported</div>;
|
||||
return (
|
||||
<div>
|
||||
{type} is not supported for {name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,130 @@
|
||||
const layout = [
|
||||
[
|
||||
{
|
||||
intlLabel: {
|
||||
id: 'Auth.form.firstname.label',
|
||||
defaultMessage: 'First name',
|
||||
},
|
||||
name: 'firstname',
|
||||
placeholder: {
|
||||
id: 'Auth.form.firstname.placeholder',
|
||||
defaultMessage: 'e.g. Kai',
|
||||
},
|
||||
type: 'text',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
intlLabel: {
|
||||
id: 'Auth.form.email.label',
|
||||
defaultMessage: 'Email',
|
||||
},
|
||||
name: 'email',
|
||||
placeholder: {
|
||||
id: 'Auth.form.email.placeholder',
|
||||
defaultMessage: 'e.g. kai.doe@strapi.io',
|
||||
},
|
||||
type: 'email',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
intlLabel: {
|
||||
id: 'Auth.form.username.label',
|
||||
defaultMessage: 'Username',
|
||||
},
|
||||
name: 'username',
|
||||
placeholder: {
|
||||
id: 'Auth.form.username.placeholder',
|
||||
defaultMessage: 'e.g. Kai_Doe',
|
||||
},
|
||||
type: 'text',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
intlLabel: {
|
||||
id: 'Auth.form.password.label',
|
||||
defaultMessage: 'Password',
|
||||
},
|
||||
name: 'password',
|
||||
type: 'password',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
intlLabel: {
|
||||
id: 'Auth.form.active.label',
|
||||
defaultMessage: 'Active',
|
||||
},
|
||||
name: 'isActive',
|
||||
type: 'bool',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'private',
|
||||
type: 'checkbox',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
intlLabel: {
|
||||
id: 'form.attribute.item.privateField',
|
||||
defaultMessage: 'Private field',
|
||||
},
|
||||
description: {
|
||||
id: 'form.attribute.item.privateField.description',
|
||||
defaultMessage: 'This field will not show up in the API response',
|
||||
},
|
||||
// validations: {},
|
||||
},
|
||||
{
|
||||
intlLabel: { id: 'meal', defaultMessage: 'meal' },
|
||||
name: 'meal',
|
||||
type: 'select',
|
||||
size: {
|
||||
col: 6,
|
||||
xs: 12,
|
||||
},
|
||||
options: [
|
||||
{
|
||||
key: 'pizza',
|
||||
value: 'pizza',
|
||||
metadatas: {
|
||||
intlLabel: { id: 'pizza-label', defaultMessage: 'Pizzza' },
|
||||
disabled: false,
|
||||
hidden: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'sandwich',
|
||||
value: 'sandwich',
|
||||
metadatas: {
|
||||
intlLabel: { id: 'sandwich-label', defaultMessage: 'Sandwich' },
|
||||
disabled: false,
|
||||
hidden: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
export default layout;
|
||||
@ -922,7 +922,7 @@ describe('MediaLibrary / ListView', () => {
|
||||
</div>
|
||||
<nav
|
||||
aria-label="pagination"
|
||||
class="sc-jLfekY"
|
||||
class="sc-LwQPJ"
|
||||
>
|
||||
<ul
|
||||
class="c43 c44"
|
||||
|
||||
@ -170,9 +170,13 @@ export default {
|
||||
name: 'pluginOptions.i18n.localized',
|
||||
description: {
|
||||
id: getTrad('plugin.schema.i18n.localized.description-field'),
|
||||
defaultMessage: 'The field can have different values in each locale',
|
||||
},
|
||||
type: 'checkbox',
|
||||
label: { id: getTrad('plugin.schema.i18n.localized.label-field') },
|
||||
intlLabel: {
|
||||
id: getTrad('plugin.schema.i18n.localized.label-field'),
|
||||
defaultMessage: 'Enable localization for this field',
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user