Fix width detection when using mixed hidden fields (#12834)

* Use correct previous visible field when calculating width

Fixes #12815

* Fix order of system filter
This commit is contained in:
Rijk van Zanten
2022-04-18 14:31:19 -04:00
committed by GitHub
parent 982a7836f2
commit 3410771bce

View File

@@ -2,13 +2,20 @@ import { FormField } from '@/components/v-form/types';
import { getInterface } from '@/interfaces';
import { Field } from '@directus/shared/types';
import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
import { clone, orderBy } from 'lodash';
import { cloneDeep, orderBy } from 'lodash';
import { computed, ComputedRef, Ref } from 'vue';
import { translate } from '@/utils/translate-object-values';
export default function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<Field[]> } {
const formFields = computed(() => {
let formFields = clone(fields.value);
let formFields = cloneDeep(fields.value);
formFields = formFields.filter((field) => {
const systemFake = field.field?.startsWith('$') || false;
return systemFake === false;
});
formFields = orderBy(formFields, [(field) => !!field.meta?.system, 'meta.sort', 'meta.id'], ['desc', 'asc', 'asc']);
formFields = formFields.map((field, index) => {
if (!field.meta) return field;
@@ -27,10 +34,11 @@ export default function useFormFields(fields: Ref<Field[]>): { formFields: Compu
(field as FormField).hideLoader = true;
}
if (index !== 0 && field.meta!.width === 'half') {
const prevField = formFields[index - 1];
if (index !== 0 && field.meta!.width === 'half' && field.meta!.hidden !== true) {
const previousFields = [...formFields].slice(0, index).reverse();
const prevNonHiddenField = previousFields.find((field) => field.meta?.hidden !== true);
if (prevField.meta?.width === 'half') {
if (prevNonHiddenField && prevNonHiddenField.meta?.width === 'half') {
field.meta.width = 'half-right';
}
}
@@ -38,13 +46,6 @@ export default function useFormFields(fields: Ref<Field[]>): { formFields: Compu
return field;
});
formFields = formFields.filter((field) => {
const systemFake = field.field?.startsWith('$') || false;
return systemFake === false;
});
formFields = orderBy(formFields, [(field) => !!field.meta?.system, 'meta.sort', 'meta.id'], ['desc', 'asc', 'asc']);
formFields = translate(formFields);
return formFields;