Add support for batch editing on o2m & m2m tables

app/src/interfaces/list-m2m/list-m2m.vue

@@ -10,6 +10,7 @@ import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { formatCollectionItemsCount } from '@/utils/format-collection-items-count';
 import { getItemRoute } from '@/utils/get-route';
 import { parseFilter } from '@/utils/parse-filter';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import SearchInput from '@/views/private/components/search-input.vue';
@@ -168,6 +169,8 @@ const {
 	getItemEdits,
 } = useRelationMultiple(value, query, relationInfo, primaryKey);
 
+const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelationPermissionsM2M(relationInfo);
+
 const pageCount = computed(() => Math.ceil(totalItemCount.value / limit.value));
 
 const showingCount = computed(() => {
@@ -348,6 +351,47 @@ function deleteItem(item: DisplayItem) {
 	remove(item);
 }
 
+const batchEditActive = ref(false);
+const selection = ref<DisplayItem[]>([]);
+
+const relatedPrimaryKeys = computed(() => {
+	if (!relationInfo.value) return [];
+
+	const relatedPkField = relationInfo.value.relatedPrimaryKeyField.field;
+	const junctionField = relationInfo.value.junctionField.field;
+
+	return selection.value.map((item) => get(item, [junctionField, relatedPkField], null)).filter(Boolean);
+});
+
+function stageBatchEdits(edits: Record<string, any>) {
+	if (!relationInfo.value) return;
+
+	const relatedPkField = relationInfo.value.relatedPrimaryKeyField.field;
+	const junctionField = relationInfo.value.junctionField.field;
+	const junctionPkField = relationInfo.value.junctionPrimaryKeyField.field;
+
+	selection.value.forEach((item) => {
+		const junctionId = get(item, [junctionPkField], null);
+		const relatedId = get(item, [junctionField, relatedPkField], null);
+
+		const changes: Record<string, any> = {
+			$index: item.$index,
+			$type: item.$type,
+			$edits: item.$edits,
+			...getItemEdits(item),
+			[junctionPkField]: junctionId,
+			[junctionField]: {
+				[relatedPkField]: relatedId,
+				...edits,
+			},
+		};
+
+		update(changes);
+	});
+
+	selection.value = [];
+}
+
 const values = inject('values', ref<Record<string, any>>({}));
 
 const customFilter = computed(() => {
@@ -406,8 +450,6 @@ function getLinkForItem(item: DisplayItem) {
 
 	return null;
 }
-
-const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelationPermissionsM2M(relationInfo);
 </script>
 
 <template>
@@ -434,6 +476,17 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 					/>
 				</div>
 
+				<v-button
+					v-if="updateAllowed && relatedPrimaryKeys.length > 0"
+					v-tooltip.bottom="t('edit')"
+					rounded
+					icon
+					secondary
+					@click="batchEditActive = true"
+				>
+					<v-icon name="edit" outline />
+				</v-button>
+
 				<v-button
 					v-if="!disabled && enableSelect && selectAllowed"
 					v-tooltip.bottom="selectAllowed ? t('add_existing') : t('not_allowed')"
@@ -460,13 +513,15 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 				v-if="layout === LAYOUTS.TABLE"
 				v-model:sort="sort"
 				v-model:headers="headers"
+				v-model="selection"
 				:class="{ 'no-last-border': totalItemCount <= 10 }"
 				:loading="loading"
 				:items="displayItems"
 				:row-height="tableRowHeight"
 				:disabled="!updateAllowed"
 				:show-manual-sort="allowDrag"
 				:manual-sort-key="relationInfo?.sortField"
+				:show-select="updateAllowed ? 'multiple' : 'none'"
 				show-resize
 				@click:row="editRow"
 				@update:items="sortItems"
@@ -609,6 +664,14 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 			multiple
 			@input="select"
 		/>
+
+		<drawer-batch
+			v-model:active="batchEditActive"
+			:primary-keys="relatedPrimaryKeys"
+			:collection="relationInfo.relatedCollection.collection"
+			stage-on-save
+			@input="stageBatchEdits"
+		/>
 	</div>
 </template>
 

app/src/interfaces/list-o2m/list-o2m.vue

@@ -10,6 +10,7 @@ import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { formatCollectionItemsCount } from '@/utils/format-collection-items-count';
 import { getItemRoute } from '@/utils/get-route';
 import { parseFilter } from '@/utils/parse-filter';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import SearchInput from '@/views/private/components/search-input.vue';
@@ -313,6 +314,39 @@ function deleteItem(item: DisplayItem) {
 	remove(item);
 }
 
+const batchEditActive = ref(false);
+const selection = ref<DisplayItem[]>([]);
+
+const relatedPrimaryKeys = computed(() => {
+	if (!relationInfo.value) return [];
+
+	const relatedPkField = relationInfo.value.relatedPrimaryKeyField.field;
+	return selection.value.map((item) => get(item, relatedPkField, null)).filter(Boolean);
+});
+
+function stageBatchEdits(edits: Record<string, any>) {
+	if (!relationInfo.value) return;
+
+	const relatedPkField = relationInfo.value.relatedPrimaryKeyField.field;
+
+	selection.value.forEach((item) => {
+		const relatedId = get(item, [relatedPkField], null);
+
+		const changes: Record<string, any> = {
+			$index: item.$index,
+			$type: item.$type,
+			$edits: item.$edits,
+			...getItemEdits(item),
+			[relatedPkField]: relatedId,
+			...edits,
+		};
+
+		update(changes);
+	});
+
+	selection.value = [];
+}
+
 const values = inject('values', ref<Record<string, any>>({}));
 
 const customFilter = computed(() => {
@@ -397,9 +431,20 @@ function getLinkForItem(item: DisplayItem) {
 					/>
 				</div>
 
+				<v-button
+					v-if="updateAllowed && relatedPrimaryKeys.length > 0"
+					v-tooltip.bottom="t('edit')"
+					rounded
+					icon
+					secondary
+					@click="batchEditActive = true"
+				>
+					<v-icon name="edit" outline />
+				</v-button>
+
 				<v-button
 					v-if="!disabled && enableSelect && updateAllowed"
-					v-tooltip.bottom="updateAllowed ? t('add_existing') : t('not_allowed')"
+					v-tooltip.bottom="t('add_existing')"
 					rounded
 					icon
 					:secondary="enableCreate"
@@ -410,7 +455,7 @@ function getLinkForItem(item: DisplayItem) {
 
 				<v-button
 					v-if="!disabled && enableCreate && createAllowed"
-					v-tooltip.bottom="createAllowed ? t('create_item') : t('not_allowed')"
+					v-tooltip.bottom="t('create_item')"
 					rounded
 					icon
 					@click="createItem"
@@ -423,12 +468,15 @@ function getLinkForItem(item: DisplayItem) {
 				v-if="layout === LAYOUTS.TABLE"
 				v-model:sort="sort"
 				v-model:headers="headers"
+				v-model="selection"
 				:class="{ 'no-last-border': totalItemCount <= 10 }"
 				:loading="loading"
-				:show-manual-sort="allowDrag"
-				:manual-sort-key="relationInfo?.sortField"
 				:items="displayItems"
 				:row-height="tableRowHeight"
+				:disabled="!updateAllowed"
+				:show-manual-sort="allowDrag"
+				:manual-sort-key="relationInfo?.sortField"
+				:show-select="updateAllowed ? 'multiple' : 'none'"
 				show-resize
 				@click:row="editRow"
 				@update:items="sortItems"
@@ -568,6 +616,14 @@ function getLinkForItem(item: DisplayItem) {
 			multiple
 			@input="select"
 		/>
+
+		<drawer-batch
+			v-model:active="batchEditActive"
+			:primary-keys="relatedPrimaryKeys"
+			:collection="relationInfo.relatedCollection.collection"
+			stage-on-save
+			@input="stageBatchEdits"
+		/>
 	</div>
 </template>
 

app/src/modules/content/routes/item.vue

@@ -475,7 +475,7 @@ function revert(values: Record<string, any>) {
 		</template>
 
 		<template v-else-if="isNew === false && collectionInfo.meta && collectionInfo.meta.display_template" #title>
-			<v-skeleton-loader v-if="loading || templateDataLoading" class="title-loader" type="text" />
+			<v-skeleton-loader v-if="loading" class="title-loader" type="text" />
 
 			<h1 v-else class="type-title">
 				<render-template

app/src/views/private/components/drawer-batch.vue

@@ -12,11 +12,13 @@ const props = defineProps<{
 	primaryKeys: (number | string)[];
 	active?: boolean;
 	edits?: Record<string, any>;
+	stageOnSave?: boolean;
 }>();
 
 const emit = defineEmits<{
 	(e: 'update:active', value: boolean): void;
 	(e: 'refresh'): void;
+	(e: 'input', value: Record<string, any>): void;
 }>();
 
 const { t } = useI18n();
@@ -72,6 +74,13 @@ function useActions() {
 	return { save, cancel, saving, validationErrors };
 
 	async function save() {
+		if (props.stageOnSave) {
+			emit('input', internalEdits.value);
+			internalActive.value = false;
+			internalEdits.value = {};
+			return;
+		}
+
 		saving.value = true;
 
 		try {