Block filters while loading (#478)

* Register filter drawer detail globally

* Add loading state mode to filter drawer detail

* Fix cursor clicking in search-filter

* Move filter drawer detail to layouts

* Fix typing of badge in drawer detail

* Close filter dropdown on content click

* Close project chooser on click outside

src/components/register.ts

@@ -101,6 +101,8 @@ Vue.component('transition-expand', TransitionExpand);
 
 import RenderDisplay from '@/views/private/components/render-display';
 import RenderTemplate from '@/views/private/components/render-template';
+import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 
 Vue.component('render-display', RenderDisplay);
 Vue.component('render-template', RenderTemplate);
+Vue.component('filter-drawer-detail', FilterDrawerDetail);

src/layouts/cards/cards.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="layout-cards" :style="{ '--size': size + 'px' }">
 		<portal to="drawer">
+			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+
 			<drawer-detail icon="settings" :title="$t('setup')">
 				<div class="setting">
 					<div class="label type-text">{{ $t('layouts.cards.image_source') }}</div>
@@ -235,6 +237,7 @@ export default defineComponent({
 			imageFit,
 			sort,
 			fieldsInCollection,
+			_filters,
 		};
 
 		function toPage(newPage: number) {

src/layouts/tabular/tabular.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="layout-tabular">
 		<portal to="drawer">
+			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+
 			<drawer-detail icon="menu_open" :title="$t('layouts.tabular.fields')">
 				<draggable v-model="activeFields" handle=".drag-handle">
 					<v-checkbox
@@ -235,6 +237,7 @@ export default defineComponent({
 			activeFields,
 			tableSpacing,
 			primaryKeyField,
+			_filters,
 		};
 
 		function toPage(newPage: number) {

src/modules/collections/routes/browse/browse.vue

@@ -9,22 +9,15 @@
 
 		<template #drawer>
 			<layout-drawer-detail v-model="viewType" />
-			<filter-drawer-detail v-model="filters" :collection="collection" />
 			<portal-target name="drawer" />
 		</template>
 
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -82,7 +75,6 @@ import { LayoutComponent } from '@/layouts/types';
 import CollectionsNotFound from '../not-found/';
 import useCollection from '@/compositions/use-collection';
 import useCollectionPreset from '@/compositions/use-collection-preset';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import SearchInput from '@/views/private/components/search-input';
 
@@ -125,7 +117,6 @@ export default defineComponent({
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
-		FilterDrawerDetail,
 		LayoutDrawerDetail,
 		SearchInput,
 	},

src/modules/files/routes/browse/browse.vue

@@ -8,22 +8,15 @@
 
 		<template #drawer>
 			<layout-drawer-detail v-model="viewType" />
-			<filter-drawer-detail v-model="filters" collection="directus_files" />
 			<portal-target name="drawer" />
 		</template>
 
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>

src/modules/users/routes/browse/browse.vue

@@ -8,22 +8,15 @@
 
 		<template #drawer>
 			<layout-drawer-detail v-model="viewType" />
-			<filter-drawer-detail v-model="filters" collection="directus_users" />
 			<portal-target name="drawer" />
 		</template>
 
 		<template #actions>
 			<search-input v-model="searchQuery" />
 
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>

src/views/private/components/drawer-detail/drawer-detail.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 			required: true,
 		},
 		badge: {
-			type: String,
+			type: [String, Number],
 			default: null,
 		},
 	},

src/views/private/components/filter-drawer-detail/field-filter.vue

@@ -5,7 +5,7 @@
 				<span v-if="filter.field.includes('.')" class="relational-indicator">•</span>
 				{{ name }}
 			</div>
-			<v-menu show-arrow>
+			<v-menu show-arrow :disabled="disabled" close-on-content-click>
 				<template #activator="{ toggle }">
 					<div class="operator" @click="toggle">
 						<span>{{ $t(`operators.${activeOperator}`) }}</span>
@@ -28,7 +28,12 @@
 			<v-icon class="remove" name="close" @click="$emit('remove')" />
 		</div>
 		<div class="field">
-			<filter-input v-model="value" :type="parsedField.type" :operator="activeOperator" />
+			<filter-input
+				v-model="value"
+				:type="parsedField.type"
+				:operator="activeOperator"
+				:disabled="disabled"
+			/>
 		</div>
 	</div>
 </template>
@@ -51,6 +56,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();

src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue

@@ -9,15 +9,22 @@
 			:key="filter.key"
 			:filter="filter"
 			:collection="collection"
+			:disabled="loading"
 			@update="updateFilter(filter.key, $event)"
 			@remove="removeFilter(filter.key)"
 		/>
 
 		<v-divider v-if="filters.length" />
 
-		<v-menu attached close-on-content-click>
+		<v-menu attached close-on-content-click :disabled="loading">
 			<template #activator="{ toggle, active }">
-				<v-input @click="toggle" :class="{ active }" readonly :value="$t('add_filter')">
+				<v-input
+					@click="toggle"
+					:class="{ active }"
+					readonly
+					:value="$t('add_filter')"
+					:disabled="loading"
+				>
 					<template #prepend><v-icon name="add" /></template>
 					<template #append><v-icon name="expand_more" /></template>
 				</v-input>
@@ -59,6 +66,10 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();
@@ -129,7 +140,7 @@ export default defineComponent({
 
 		const syncWithProp = debounce(() => {
 			emit('input', localFilters.value);
-		}, 500);
+		}, 850);
 
 		const filters = computed<Filter[]>({
 			get() {

src/views/private/components/filter-drawer-detail/filter-input.vue

@@ -1,12 +1,22 @@
 <template>
 	<div class="filter-input">
 		<template v-if="['between', 'nbetween'].includes(operator)">
-			<v-input :type="type" :value="csvValue[0]" @input="setCSV(0, $event)">
+			<v-input
+				:type="type"
+				:value="csvValue[0]"
+				@input="setCSV(0, $event)"
+				:disabled="disabled"
+			>
 				<template #append>
 					<v-icon name="vertical_align_top" />
 				</template>
 			</v-input>
-			<v-input :type="type" :value="csvValue[1]" @input="setCSV(1, $event)">
+			<v-input
+				:type="type"
+				:value="csvValue[1]"
+				@input="setCSV(1, $event)"
+				:disabled="disabled"
+			>
 				<template #append>
 					<v-icon name="vertical_align_bottom" />
 				</template>
@@ -19,19 +29,20 @@
 				:value="val"
 				:type="type"
 				@input="setCSV(index, $event)"
+				:disabled="disabled"
 			>
 				<template #append>
 					<v-icon v-if="csvValue.length > 1" name="close" @click="removeCSV(val)" />
 				</template>
 			</v-input>
-			<v-button outlined dashed @click="addCSV">
+			<v-button outlined dashed @click="addCSV" :disabled="disabled">
 				<v-icon name="add" />
 				{{ $t('add_new') }}
 			</v-button>
 		</template>
 		<template v-else-if="['empty', 'nempty'].includes(operator) === false">
-			<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" />
-			<v-input v-else v-model="_value" :type="type" />
+			<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" :disabled="disabled" />
+			<v-input :disabled="disabled" v-else v-model="_value" :type="type" />
 		</template>
 	</div>
 </template>
@@ -54,6 +65,10 @@ export default defineComponent({
 			type: String as PropType<FilterOperator>,
 			required: true,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const _value = computed<string | string[]>({

src/views/private/components/project-chooser/project-chooser.vue

@@ -6,7 +6,7 @@
 			<v-icon class="icon" name="expand_more" />
 		</button>
 		<transition-expand>
-			<div v-if="active" class="options-wrapper">
+			<div v-if="active" class="options-wrapper" v-click-outside="() => (active = false)">
 				<div class="options">
 					<v-divider />
 

src/views/private/components/search-input/search-input.vue

@@ -7,7 +7,7 @@
 	>
 		<v-icon name="search" />
 		<input ref="input" :value="value" @input="emitValue" />
-		<v-icon class="empty" name="close" @click="$emit('input', null)" />
+		<v-icon v-show="value" class="empty" name="close" @click="$emit('input', null)" />
 	</div>
 </template>
 
@@ -53,8 +53,10 @@ export default defineComponent({
 	align-items: center;
 	width: 44px;
 	height: 44px;
+	overflow: hidden;
 	border: 2px solid var(--border-normal);
 	border-radius: calc(44px / 2);
+	cursor: pointer;
 	transition: width var(--slow) var(--transition);
 
 	&:hover {