Move export to layouts (#5557)

* Export Fix

* Remove unused fields

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/layouts/calendar/calendar.vue

@@ -4,6 +4,7 @@
 
 		<portal to="sidebar">
 			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
+			<export-sidebar-detail :filters="filtersWithCalendarView" :search-query="searchQuery" :collection="collection" />
 		</portal>
 
 		<portal to="actions:prepend">
@@ -56,6 +57,7 @@ import { Item, Filter, Field } from '@/types';
 import useItems from '@/composables/use-items';
 import useSync from '@/composables/use-sync';
 import useCollection from '@/composables/use-collection';
+import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import { formatISO } from 'date-fns';
 import router from '@/router';
 import { renderPlainStringTemplate } from '@/utils/render-string-template';
@@ -75,6 +77,7 @@ type layoutOptions = {
 };
 
 export default defineComponent({
+	components: { ExportSidebarDetail },
 	props: {
 		collection: {
 			type: String,

app/src/layouts/cards/cards.vue

@@ -48,6 +48,12 @@
 
 		<portal to="sidebar">
 			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
+			<export-sidebar-detail
+				:layout-query="layoutQuery"
+				:filters="_filters"
+				:search-query="searchQuery"
+				:collection="collection"
+			/>
 		</portal>
 
 		<portal to="actions:prepend">
@@ -140,6 +146,7 @@ import { FieldMeta, Filter } from '@/types';
 import useSync from '@/composables/use-sync/';
 import useCollection from '@/composables/use-collection/';
 import useItems from '@/composables/use-items';
+import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import Card from './components/card.vue';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import { useRelationsStore } from '@/stores/';
@@ -169,7 +176,7 @@ type layoutQuery = {
 };
 
 export default defineComponent({
-	components: { Card, CardsHeader },
+	components: { Card, CardsHeader, ExportSidebarDetail },
 	props: {
 		collection: {
 			type: String,

app/src/layouts/tabular/tabular.vue

@@ -51,6 +51,12 @@
 
 		<portal to="sidebar">
 			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
+			<export-sidebar-detail
+				:layout-query="layoutQuery"
+				:filters="_filters"
+				:search-query="searchQuery"
+				:collection="collection"
+			/>
 		</portal>
 
 		<portal to="actions:prepend">
@@ -151,6 +157,7 @@ import router from '@/router';
 import useSync from '@/composables/use-sync';
 import { debounce, clone } from 'lodash';
 import Draggable from 'vuedraggable';
+import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import useCollection from '@/composables/use-collection';
 import useItems from '@/composables/use-items';
 import i18n from '@/lang';
@@ -173,7 +180,7 @@ type layoutQuery = {
 };
 
 export default defineComponent({
-	components: { Draggable },
+	components: { Draggable, ExportSidebarDetail },
 	props: {
 		collection: {
 			type: String,

app/src/modules/collections/routes/collection.vue

@@ -221,12 +221,6 @@
 			</sidebar-detail>
 			<layout-sidebar-detail @input="layout = $event" :value="layout" />
 			<portal-target name="sidebar" />
-			<export-sidebar-detail
-				:filters="filters"
-				:layout-query="layoutQuery"
-				:search-query="searchQuery"
-				:collection="currentCollection"
-			/>
 			<refresh-sidebar-detail @refresh="refresh" v-model="refreshInterval" />
 		</template>
 
@@ -254,7 +248,6 @@ import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
 import usePreset from '@/composables/use-preset';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
-import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import BookmarkAdd from '@/views/private/components/bookmark-add';
@@ -276,7 +269,6 @@ export default defineComponent({
 		CollectionsNavigationSearch,
 		CollectionsNotFound,
 		LayoutSidebarDetail,
-		ExportSidebarDetail,
 		SearchInput,
 		BookmarkAdd,
 		BookmarkEdit,

app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue

@@ -34,27 +34,32 @@
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from '@vue/composition-api';
-import { Collection, Filter } from '@/types';
+import { Filter } from '@/types';
 import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import filtersToQuery from '@/utils/filters-to-query';
 
+type LayoutQuery = {
+	fields?: string[];
+	sort?: string;
+};
+
 export default defineComponent({
 	props: {
+		layoutQuery: {
+			type: Object as PropType<LayoutQuery>,
+			default: (): LayoutQuery => ({}),
+		},
 		filters: {
 			type: Array as PropType<Filter[]>,
 			default: () => [],
 		},
-		layoutQuery: {
-			type: Object,
-			default: () => ({}),
-		},
 		searchQuery: {
-			type: String,
+			type: String as PropType<string | null>,
 			default: null,
 		},
 		collection: {
-			type: Object as PropType<Collection>,
+			type: String,
 			required: true,
 		},
 	},
@@ -65,25 +70,17 @@ export default defineComponent({
 		return { format, useFilters, exportData };
 
 		function exportData() {
-			const url = getRootPath() + `items/${props.collection.collection}`;
+			const url = getRootPath() + `items/${props.collection}`;
 
-			let params: Record<string, any> = {
+			let params: Record<string, unknown> = {
 				access_token: api.defaults.headers.Authorization.substring(7),
+				export: format.value || 'json',
 			};
 
-			if (format.value === 'csv') {
-				params.export = 'csv';
-			} else if (format.value === 'xml') {
-				params.export = 'xml';
-			} else {
-				params.export = 'json';
-			}
-
 			if (useFilters.value === true) {
-				params = {
-					...params,
-					...props.layoutQuery,
-				};
+				if (props.layoutQuery && props.layoutQuery.sort) params.sort = props.layoutQuery.sort;
+				if (props.layoutQuery && props.layoutQuery.fields) params.fields = props.layoutQuery.fields;
+				if (props.searchQuery) params.search = props.searchQuery;
 
 				if (props.filters?.length) {
 					params = {