github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add fallback message when no fields are visible in a form (#14778)

Browse Source 
* Add fallback page when no fields are visible in a form

* fixed spacing for the linter

* properly show empty form message for relational drawer items

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Brainslug
2022-09-24 20:53:34 +02:00
committed by GitHub
parent 324b549d9d
commit 69797776f1
3 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/components/v-form/v-form.vue
View File

@@ -6,6 +6,9 @@
:fields="fields ? fields : []"
@scroll-to-field="scrollToField"
/>
<v-info v-if="noVisibleFields && !nested && !loading" :title="t('no_visible_fields')" icon="search" center>
{{ t('no_visible_fields_copy') }}
</v-info>
<template v-for="(fieldName, index) in fieldNames">
<component
:is="`interface-${fieldsMap[fieldName]?.meta?.interface || 'group-standard'}`"
@@ -90,6 +93,7 @@ import { assign, cloneDeep, isEqual, isNil, omit, pick } from 'lodash';
import { computed, ComputedRef, onBeforeUpdate, provide, ref, watch } from 'vue';
import FormField from './form-field.vue';
import ValidationErrors from './validation-errors.vue';
import { useI18n } from 'vue-i18n';
type FieldValues = {
[field: string]: any;
@@ -133,6 +137,8 @@ const props = withDefaults(defineProps<Props>(), {
showDivider: false,
});
const { t } = useI18n();
const emit = defineEmits(['update:modelValue']);
const values = computed(() => {
@@ -185,8 +191,7 @@ const firstVisibleFieldIndex = computed(() => {
const noVisibleFields = computed(() => {
return Object.keys(fieldsMap.value).every((fieldKey) => {
let field: Field = fieldsMap.value[fieldKey];
return field.meta?.hidden === true;
return fieldsMap.value[fieldKey]?.meta?.hidden === true;
});
});

2
app/src/lang/translations/en-US.yaml
View File

@@ -761,6 +761,8 @@ add_file: Add File
replace_file: Replace File
no_results: No Results
no_results_copy: Adjust or clear search filters to see results.
no_visible_fields: Empty Form
no_visible_fields_copy: This form has no visible fields.
clear_filters: Clear Filters
saves_automatically: Saves Automatically
role: Role

14
app/src/views/private/components/drawer-item.vue
View File

@@ -29,11 +29,15 @@
:title="file.title"
:in-modal="true"
/>
<div class="drawer-item-order" :class="{ swap: swapFormOrder }">
<v-info v-if="emptyForm" :title="t('no_visible_fields')" icon="search" center>
{{ t('no_visible_fields_copy') }}
</v-info>
<div v-else class="drawer-item-order" :class="{ swap: swapFormOrder }">
<v-form
v-if="junctionField"
:disabled="disabled"
:loading="loading"
:nested="true"
:initial-values="initialValues?.[junctionField]"
:primary-key="relatedPrimaryKey"
:model-value="internalEdits?.[junctionField]"
@@ -43,10 +47,12 @@
:show-divider="!swapFormOrder"
@update:model-value="setRelationEdits"
/>
<v-form
v-model="internalEdits"
:disabled="disabled"
:loading="loading"
:nested="true"
:initial-values="initialValues"
:autofocus="swapFormOrder"
:show-divider="swapFormOrder"
@@ -182,6 +188,12 @@ const fieldsWithoutCircular = computed(() => {
}
});
const emptyForm = computed(() => {
const visibleFieldsRelated = relatedCollectionFields.value.filter((field: Field) => !field.meta?.hidden);
const visibleFieldsJunction = fields.value.filter((field: Field) => !field.meta?.hidden);
return visibleFieldsRelated.length + visibleFieldsJunction.length === 0;
});
const templatePrimaryKey = computed(() =>
junctionFieldInfo.value ? String(props.relatedPrimaryKey) : String(props.primaryKey)
);