Add select-all button to cards layout (#695)

src/lang/en-US/index.json

@@ -143,6 +143,8 @@
 	"date": "Date",
 	"year": "Year",
 
+	"select_all": "Select All",
+
 	"months": {
 		"january": "January",
 		"february": "February",

src/layouts/cards/cards.vue

@@ -55,7 +55,13 @@
 		</portal>
 
 		<template v-if="loading || itemCount > 0">
-			<cards-header :fields="availableFields" :size.sync="size" :selection.sync="_selection" :sort.sync="sort" />
+			<cards-header
+				@select-all="selectAll"
+				:fields="availableFields"
+				:size.sync="size"
+				:selection.sync="_selection"
+				:sort.sync="sort"
+			/>
 
 			<div class="grid" :class="{ 'single-row': isSingleRow }">
 				<template v-if="loading">
@@ -136,6 +142,7 @@ import CardsHeader from './components/header.vue';
 import i18n from '@/lang';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import useElementSize from '@/composables/use-element-size';
+import { clone } from 'lodash';
 
 type Item = Record<string, any>;
 
@@ -292,6 +299,7 @@ export default defineComponent({
 			layoutElement,
 			activeFilterCount,
 			refresh,
+			selectAll,
 		};
 
 		function refresh() {
@@ -400,6 +408,14 @@ export default defineComponent({
 				primaryKey: item[primaryKeyField.value!.field],
 			});
 		}
+
+		function selectAll() {
+			if (!primaryKeyField.value) return;
+			emit(
+				'update:selection',
+				clone(items.value).map((item: any) => item[primaryKeyField.value.field])
+			);
+		}
 	},
 });
 </script>

src/layouts/cards/components/header.vue

@@ -5,10 +5,9 @@
 				<v-icon name="close" @click="_selection = []" />
 				{{ $tc('n_items_selected', _selection.length) }}
 			</div>
+			<button class="select-all" v-else @click="$emit('select-all')">{{ $t('select_all') }}</button>
 		</div>
 		<div class="end">
-			<!-- <v-slider class="size-selector" v-model="_size" :min="100" :max="200" :step="1" /> -->
-
 			<v-icon
 				class="size-selector"
 				:name="`grid_${7 - size}`"