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

Add search to field creation drawer (#15981)

Browse Source 
* add search to field creation drawer

* lowercase id just in case for custom interfaces
This commit is contained in:
Azri Kahar
2022-10-15 09:44:14 +08:00
committed by GitHub
parent 37b1e99ed8
commit 67c3834783
3 changed files with 87 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -281,6 +281,7 @@ fields_group: Fields Group
no_collections_found: No collections found.
new_data_alert: 'The following will be created within your Data Model:'
search_collection: Search Collection...
search_field: Search Field...
new_field: 'New Field'
new_collection: 'New Collection'
add_m2o_to_collection: 'Add M2O to "{collection}"'

85
app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue
View File

@@ -55,10 +55,14 @@ export default defineComponent({
type: Object as PropType<Collection>,
required: true,
},
search: {
type: String,
required: true,
},
},
emits: ['save', 'toggleAdvanced'],
setup(props) {
const { collection } = toRefs(props);
const { collection, search } = toRefs(props);
const { t } = useI18n();
@@ -74,38 +78,53 @@ export default defineComponent({
);
});
const groups = computed(() => [
{
key: 'standard',
name: t('interface_group_text_and_numbers'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'standard'),
},
{
key: 'selection',
name: t('interface_group_selection'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'selection'),
},
{
key: 'relational',
name: t('interface_group_relational'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'relational'),
},
{
key: 'presentation',
name: t('interface_group_presentation'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'presentation'),
},
{
key: 'group',
name: t('interface_group_groups'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'group'),
},
{
key: 'other',
name: t('interface_group_other'),
interfaces: interfacesSorted.value.filter((inter) => inter.group === 'other'),
},
]);
const groups = computed(() => {
const groupsWithInterfaces = [
{
key: 'standard',
name: t('interface_group_text_and_numbers'),
interfaces: filterInterfacesByGroup('standard'),
},
{
key: 'selection',
name: t('interface_group_selection'),
interfaces: filterInterfacesByGroup('selection'),
},
{
key: 'relational',
name: t('interface_group_relational'),
interfaces: filterInterfacesByGroup('relational'),
},
{
key: 'presentation',
name: t('interface_group_presentation'),
interfaces: filterInterfacesByGroup('presentation'),
},
{
key: 'group',
name: t('interface_group_groups'),
interfaces: filterInterfacesByGroup('group'),
},
{
key: 'other',
name: t('interface_group_other'),
interfaces: filterInterfacesByGroup('other'),
},
];
if (!search.value) return groupsWithInterfaces;
return groupsWithInterfaces.filter((group) => group.interfaces.length > 0);
function filterInterfacesByGroup(group: string) {
const filteredInterfaces = interfacesSorted.value.filter((inter) => inter.group === group);
if (!search.value) return filteredInterfaces;
const searchValue = search.value!.toLowerCase();
return filteredInterfaces.filter(
(inter) => inter.id.toLowerCase().includes(searchValue) || inter.name.toLowerCase().includes(searchValue)
);
}
});
const chosenInterface = syncFieldDetailStoreProperty('field.meta.interface');

36
app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
View File

@@ -3,6 +3,7 @@
<field-detail-simple
v-if="!showAdvanced"
:collection="collectionInfo"
:search="search"
@save="save"
@toggle-advanced="simple = false"
/>
@@ -14,6 +15,24 @@
<template v-if="showAdvanced" #actions>
<field-detail-advanced-actions @save="save" />
</template>
<template v-else #actions>
<v-input
v-model="search"
class="search"
small
autofocus
type="search"
:placeholder="t('search_field')"
:full-width="false"
>
<template #prepend>
<v-icon name="search" outline />
</template>
<template #append>
<v-icon v-if="search" clickable class="clear" name="close" @click.stop="search = null" />
</template>
</v-input>
</template>
<field-detail-advanced v-if="showAdvanced" :collection="collectionInfo" :current-tab="currentTab[0]" @save="save" />
</v-drawer>
@@ -55,6 +74,8 @@ export default defineComponent({
setup(props) {
const { collection } = toRefs(props);
const search = ref<string | null>(null);
const isOpen = useDialogRoute();
const fieldDetail = useFieldDetailStore();
@@ -95,7 +116,7 @@ export default defineComponent({
return editing.value !== '+' || !simple.value;
});
return { simple, cancel, collectionInfo, t, title, save, isOpen, currentTab, showAdvanced };
return { search, simple, cancel, collectionInfo, t, title, save, isOpen, currentTab, showAdvanced };
async function cancel() {
await router.push(`/settings/data-model/${props.collection}`);
@@ -111,8 +132,19 @@ export default defineComponent({
});
</script>
<style scoped>
<style lang="scss" scoped>
:deep(.required-mark) {
--v-icon-color: var(--primary);
}
.v-input.search {
--border-radius: calc(44px / 2);
width: 200px;
margin-left: auto;
@media (min-width: 600px) {
width: 300px;
margin-top: 0px;
}
}
</style>