diff --git a/.changeset/fuzzy-rice-refuse.md b/.changeset/fuzzy-rice-refuse.md new file mode 100644 index 0000000000..676d7011f1 --- /dev/null +++ b/.changeset/fuzzy-rice-refuse.md @@ -0,0 +1,5 @@ +--- +'@directus/app': patch +--- + +Ensured the "Readonly" and "Required" options work on groups diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue index dcace6f207..03a1146de0 100644 --- a/app/src/components/v-form/v-form.vue +++ b/app/src/components/v-form/v-form.vue @@ -12,6 +12,7 @@ import { useI18n } from 'vue-i18n'; import FormField from './form-field.vue'; import type { FormField as TFormField } from './types'; import ValidationErrors from './validation-errors.vue'; +import { pushGroupOptionsDown } from '@/utils/push-group-options-down'; type FieldValues = { [field: string]: any; @@ -151,13 +152,23 @@ function useForm() { const { formFields } = useFormFields(fields); - const fieldsMap: ComputedRef> = computed(() => { + const fieldsWithConditions = computed(() => { const valuesWithDefaults = Object.assign({}, defaultValues.value, values.value); - return formFields.value.reduce((result: Record, field: Field) => { + + let fields = formFields.value.reduce((result, field) => { const newField = applyConditions(valuesWithDefaults, setPrimaryKeyReadonly(field)); - if (newField.field) result[newField.field] = newField; + + if (newField.field) result.push(newField); return result; - }, {} as Record); + }, [] as Field[]); + + fields = pushGroupOptionsDown(fields); + + return fields; + }); + + const fieldsMap: ComputedRef> = computed(() => { + return Object.fromEntries(fieldsWithConditions.value.map((field) => [field.field, field])); }); const fieldsInGroup = computed(() => @@ -171,17 +182,7 @@ function useForm() { }); const fieldsForGroup = computed(() => { - const valuesWithDefaults = Object.assign({}, defaultValues.value, values.value); - - return fieldNames.value.map((name: string) => { - const fields = getFieldsForGroup(fieldsMap.value[name]?.meta?.field || null); - - return fields.reduce((result: Field[], field: Field) => { - const newField = applyConditions(valuesWithDefaults, setPrimaryKeyReadonly(field)); - if (newField.field) result.push(newField); - return result; - }, [] as Field[]); - }); + return fieldNames.value.map((name: string) => getFieldsForGroup(fieldsMap.value[name]?.meta?.field || null)); }); return { fieldNames, fieldsMap, isDisabled, getFieldsForGroup, fieldsForGroup }; @@ -199,7 +200,7 @@ function useForm() { } function getFieldsForGroup(group: null | string, passed: string[] = []): Field[] { - const fieldsInGroup: Field[] = fields.value.filter((field) => { + const fieldsInGroup = fieldsWithConditions.value.filter((field) => { const meta = fieldsMap.value?.[field.field]?.meta; return meta?.group === group || (group === null && isNil(meta)); }); diff --git a/app/src/composables/use-item.ts b/app/src/composables/use-item.ts index 5cd179ddd8..4ee22a87f3 100644 --- a/app/src/composables/use-item.ts +++ b/app/src/composables/use-item.ts @@ -16,6 +16,7 @@ import { AxiosResponse } from 'axios'; import { mergeWith } from 'lodash'; import { ComputedRef, Ref, computed, isRef, ref, unref, watch } from 'vue'; import { usePermissions } from './use-permissions'; +import { pushGroupOptionsDown } from '@/utils/push-group-options-down'; type UsableItem> = { edits: Ref>; @@ -129,7 +130,9 @@ export function useItem>( } ); - const errors = validateItem(payloadToValidate, fieldsWithPermissions.value, isNew.value); + const fields = pushGroupOptionsDown(fieldsWithPermissions.value); + + const errors = validateItem(payloadToValidate, fields, isNew.value); if (errors.length > 0) { validationErrors.value = errors; diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue index cbd1be4ec6..180c8e7720 100644 --- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue +++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue @@ -199,7 +199,10 @@ async function onGroupSortChange(fields: Field[]) {