Add search field in settings > presets (#4176)

* add search field in settings > presets

* move search field to the sidebar
This commit is contained in:
Nitwel
2021-02-22 18:43:31 +01:00
committed by GitHub
parent e8d5ded6ee
commit ef33d2edfe
2 changed files with 34 additions and 2 deletions

View File

@@ -63,6 +63,7 @@
:layout-options.sync="layoutOptions"
:layout-query.sync="layoutQuery"
:filters="values.filters || []"
:search-query="searchQuery"
@update:filters="updateFilters"
readonly
>
@@ -90,6 +91,10 @@
<div class="page-description" v-html="marked($t('page_help_settings_presets_item'))" />
</sidebar-detail>
<sidebar-detail icon="search" :title="$t('search')" class="layout-sidebar">
<v-input v-model="searchQuery" :placeholder="$t('preset_search_placeholder')"></v-input>
</sidebar-detail>
<portal-target class="layout-sidebar" name="sidebar" />
<sidebar-detail class="layout-sidebar" icon="layers" :title="$t('layout_options')">
@@ -131,6 +136,7 @@ type FormattedPreset = {
collection: string;
layout: string | null;
name: string | null;
search: string | null;
layout_query: Record<string, any> | null;
@@ -158,7 +164,16 @@ export default defineComponent({
const { loading: rolesLoading, roles } = useRoles();
const { loading: presetLoading, preset } = usePreset();
const { fields } = useForm();
const { edits, hasEdits, initialValues, values, layoutQuery, layoutOptions, updateFilters } = useValues();
const {
edits,
hasEdits,
initialValues,
values,
layoutQuery,
layoutOptions,
updateFilters,
searchQuery,
} = useValues();
const { save, saving } = useSave();
const { deleting, deleteAndQuit, confirmDelete } = useDelete();
@@ -182,6 +197,7 @@ export default defineComponent({
confirmDelete,
marked,
updateFilters,
searchQuery,
};
function useSave() {
@@ -201,6 +217,7 @@ export default defineComponent({
if (edits.value.layout_query) editsParsed.layout_query = edits.value.layout_query;
if (edits.value.layout_options) editsParsed.layout_options = edits.value.layout_options;
if (edits.value.filters) editsParsed.filters = edits.value.filters;
editsParsed.search = edits.value.search;
if (edits.value.scope) {
if (edits.value.scope.startsWith('role_')) {
@@ -275,6 +292,7 @@ export default defineComponent({
collection: preset.value.collection,
layout: preset.value.layout,
name: preset.value.bookmark,
search: preset.value.search,
scope: scope,
layout_query: preset.value.layout_query,
layout_options: preset.value.layout_options,
@@ -327,7 +345,19 @@ export default defineComponent({
},
});
return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits, updateFilters };
const searchQuery = computed({
get() {
return values.value.search;
},
set(newSearch) {
edits.value = {
...edits.value,
search: newSearch,
};
},
});
return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits, updateFilters, searchQuery };
function updateFilters(newFilters: Filter) {
edits.value = {
@@ -559,6 +589,7 @@ export default defineComponent({
--content-padding: 0px;
--content-padding-bottom: 32px;
position: relative;
width: 100%;
margin-top: 48px;
overflow: auto;