feat: Add row actions to delete or duplicate a row

Signed-off-by: Julius Knorr <jus@bitgrid.net>

Author: juliusknorr

src/modules/modals/EditRow.vue

@@ -178,7 +178,6 @@ export default {
 		},
 		reset() {
 			this.localRow = {}
-			this.dataLoaded = false
 			this.prepareDeleteRow = false
 		},
 		actionDeleteRow() {

src/shared/components/ncTable/partials/TableRow.vue

@@ -14,18 +14,40 @@
 				:value="getCellValue(col)" />
 		</td>
 		<td v-if="config.showActions" :class="{sticky: config.showActions}">
-			<NcButton v-if="config.canEditRows || config.canDeleteRows" type="primary" :aria-label="t('tables', 'Edit row')" data-cy="editRowBtn" @click="$emit('edit-row', row.id)">
+			<NcButton v-if="config.canEditRows || config.canDeleteRows" type="secondary" :aria-label="t('tables', 'Edit row')" data-cy="editRowBtn" @click="$emit('edit-row', row.id)">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 			</NcButton>
+			<NcActions v-if="config.canDeleteRows || config.canCreateRows">
+				<NcActionButton v-if="config.canDeleteRows"
+					:close-after-click="true"
+					@click="handleDeleteRow">
+					<template #icon>
+						<Delete :size="20" />
+					</template>
+					{{ t('tables', 'Delete row') }}
+				</NcActionButton>
+				<NcActionButton v-if="config.canCreateRows"
+					:close-after-click="true"
+					@click="handleCloneRow">
+					<template #icon>
+						<ContentCopy :size="20" />
+					</template>
+					{{ t('tables', 'Duplicate row') }}
+				</NcActionButton>
+			</NcActions>
 		</td>
 	</tr>
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch, NcButton } from '@nextcloud/vue'
+import { mapActions } from 'pinia'
+import { useDataStore } from '../../../../store/data.js'
+import { NcCheckboxRadioSwitch, NcButton, NcActions, NcActionButton } from '@nextcloud/vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 import TableCellHtml from './TableCellHtml.vue'
 import TableCellProgress from './TableCellProgress.vue'
 import TableCellLink from './TableCellLink.vue'
@@ -40,6 +62,7 @@ import TableCellTextRich from './TableCellEditor.vue'
 import TableCellUsergroup from './TableCellUsergroup.vue'
 import { ColumnTypes } from './../mixins/columnHandler.js'
 import { translate as t } from '@nextcloud/l10n'
+import { showError } from '@nextcloud/dialogs'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
 } from '../../../../shared/constants.js'
@@ -55,13 +78,17 @@ export default {
 		TableCellHtml,
 		NcButton,
 		Pencil,
+		ContentCopy,
+		Delete,
 		NcCheckboxRadioSwitch,
 		TableCellDateTime,
 		TableCellTextLine,
 		TableCellSelection,
 		TableCellMultiSelection,
 		TableCellTextRich,
 		TableCellUsergroup,
+		NcActions,
+		NcActionButton,
 	},
 
 	props: {
@@ -85,6 +112,14 @@ export default {
 			type: Object,
 			default: null,
 		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
+		isView: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		getSelection: {
@@ -165,6 +200,31 @@ export default {
 				return text
 			}
 		},
+		...mapActions(useDataStore, ['removeRow', 'insertNewRow']),
+		async handleDeleteRow() {
+			const res = await this.removeRow({
+				rowId: this.row.id,
+				isView: this.isView,
+				elementId: this.elementId,
+			})
+			if (!res) {
+				showError(t('tables', 'Could not delete row.'))
+			}
+		},
+		async handleCloneRow() {
+			const data = this.row.data.reduce((acc, curr) => {
+				acc[curr.columnId] = curr.value
+				return acc
+			}, {})
+			const res = await this.insertNewRow({
+				viewId: this.isView ? this.elementId : null,
+				tableId: this.isView ? null : this.elementId,
+				data,
+			})
+			if (!res) {
+				showError(t('tables', 'Could not clone row.'))
+			}
+		},
 	},
 }
 </script>

src/shared/components/ncTable/sections/CustomTable.vue

@@ -25,6 +25,8 @@
 			<tbody>
 				<TableRow v-for="(row, index) in currentPageRows"
 					:key="index"
+					:element-id="elementId"
+					:is-view="isView"
 					data-cy="customTableRow"
 					:row="row"
 					:columns="columns"