From 92b9c796695f2e86cc7bada9468ef11d3e901226 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 21 Apr 2020 13:20:40 -0400
Subject: [PATCH] File library issue (#446)

* Fix default state for file library, dont allow sorting by fake fields

* Fix duplicate collection presets

* Force type field to be fetched in file library

* Fix wrong assignment
---
 .../use-collection-preset.ts                  |  6 +++-
 src/layouts/cards/cards.vue                   |  4 +--
 src/layouts/cards/components/header.vue       | 16 +++++++--
 src/modules/files/routes/browse/browse.vue    | 36 +++++++++++++++++--
 src/modules/users/routes/browse/browse.vue    |  2 +-
 5 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/compositions/use-collection-preset/use-collection-preset.ts b/src/compositions/use-collection-preset/use-collection-preset.ts
index 443038695b..bf932e95c8 100644
--- a/src/compositions/use-collection-preset/use-collection-preset.ts
+++ b/src/compositions/use-collection-preset/use-collection-preset.ts
@@ -7,11 +7,15 @@ import { Filter } from './types';
 export function useCollectionPreset(collection: Ref<string>) {
 	const collectionPresetsStore = useCollectionPresetStore();
 
-	const savePreset = debounce(collectionPresetsStore.savePreset, 450);
 	const localPreset = ref({
 		...collectionPresetsStore.getPresetForCollection(collection.value),
 	});
 
+	const savePreset = debounce(async (preset) => {
+		await collectionPresetsStore.savePreset(preset);
+		localPreset.value = collectionPresetsStore.getPresetForCollection(collection.value);
+	}, 450);
+
 	watch(collection, () => {
 		localPreset.value = {
 			...collectionPresetsStore.getPresetForCollection(collection.value),
diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue
index a11ed27234..ec939cd30e 100644
--- a/src/layouts/cards/cards.vue
+++ b/src/layouts/cards/cards.vue
@@ -61,7 +61,7 @@
 			</drawer-detail>
 		</portal>
 
-		<cards-header :fields="fieldsInCollection" :selection.sync="_selection" :sort.sync="sort" />
+		<cards-header :fields="availableFields" :selection.sync="_selection" :sort.sync="sort" />
 
 		<div class="grid">
 			<template v-if="loading">
@@ -186,7 +186,7 @@ export default defineComponent({
 		const { primaryKeyField, fields: fieldsInCollection } = useCollection(collection);
 
 		const availableFields = computed(() =>
-			fieldsInCollection.value.filter(({ hidden_browse }) => hidden_browse === false)
+			fieldsInCollection.value.filter((field) => field.hidden_browse === false)
 		);
 
 		const fileFields = computed(() => {
diff --git a/src/layouts/cards/components/header.vue b/src/layouts/cards/components/header.vue
index 7bd640fd26..eeba4c4c8e 100644
--- a/src/layouts/cards/components/header.vue
+++ b/src/layouts/cards/components/header.vue
@@ -16,7 +16,7 @@
 
 				<v-list dense>
 					<v-list-item
-						v-for="field in fields"
+						v-for="field in fieldsWithoutFake"
 						:key="field.field"
 						:active="field.field === sortKey"
 						@click="_sort = field.field"
@@ -69,7 +69,19 @@ export default defineComponent({
 			return props.fields.find((field) => field.field === sortKey.value);
 		});
 
-		return { descending, toggleDescending, sortField, _sort, _selection, sortKey };
+		const fieldsWithoutFake = computed(() =>
+			props.fields.filter((field) => field.field.startsWith('$') === false)
+		);
+
+		return {
+			descending,
+			toggleDescending,
+			sortField,
+			_sort,
+			_selection,
+			sortKey,
+			fieldsWithoutFake,
+		};
 
 		function toggleDescending() {
 			if (descending.value === true) {
diff --git a/src/modules/files/routes/browse/browse.vue b/src/modules/files/routes/browse/browse.vue
index f8469ae4b0..35de939015 100644
--- a/src/modules/files/routes/browse/browse.vue
+++ b/src/modules/files/routes/browse/browse.vue
@@ -63,7 +63,7 @@
 			:selection.sync="selection"
 			:view-options.sync="viewOptions"
 			:view-query.sync="viewQuery"
-			:filters="filtersWithFolder"
+			:filters="filtersWithFolderAndType"
 			@update:filters="filters = $event"
 			:detail-route="'/{{project}}/files/{{primaryKey}}'"
 		/>
@@ -106,7 +106,7 @@ export default defineComponent({
 
 		const currentFolder = ref(null);
 
-		const filtersWithFolder = computed(() => {
+		const filtersWithFolderAndType = computed(() => {
 			if (currentFolder.value !== null) {
 				return [
 					...filters.value,
@@ -115,10 +115,40 @@ export default defineComponent({
 						operator: 'eq',
 						value: currentFolder.value,
 					},
+					{
+						locked: 1,
+						field: 'type',
+						operator: 'nnull',
+						value: 1,
+					},
 				];
 			}
+
+			return [
+				...filters.value,
+				{
+					locked: 1,
+					field: 'type',
+					operator: 'nnull',
+					value: 1,
+				},
+			];
 		});
 
+		if (viewType.value === null) {
+			viewType.value = 'cards';
+		}
+
+		if (viewOptions.value === null) {
+			if (viewType.value === 'cards') {
+				viewOptions.value = {
+					icon: 'insert_drive_file',
+					title: '{{title}}',
+					subtitle: '{{type}} • {{filesize}}',
+				};
+			}
+		}
+
 		return {
 			addNewLink,
 			batchDelete,
@@ -133,7 +163,7 @@ export default defineComponent({
 			viewQuery,
 			viewType,
 			currentFolder,
-			filtersWithFolder,
+			filtersWithFolderAndType,
 		};
 
 		function useBatchDelete() {
diff --git a/src/modules/users/routes/browse/browse.vue b/src/modules/users/routes/browse/browse.vue
index 58afe6210c..b18a5f2686 100644
--- a/src/modules/users/routes/browse/browse.vue
+++ b/src/modules/users/routes/browse/browse.vue
@@ -138,7 +138,7 @@ export default defineComponent({
 		}
 
 		if (viewOptions.value === null) {
-			if ((viewType.value = 'cards')) {
+			if (viewType.value === 'cards') {
 				viewOptions.value = {
 					icon: 'person',
 					title: '{{first_name}} {{last_name}}',