feat: Add copy action to row

...changing the action button to a 3-dot menu

AI-assistant: Claude Code v2.1.101 (Claude Sonnet 4.6)

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

Author: AndyScherzinger

src/modules/main/partials/TableView.vue

@@ -24,6 +24,7 @@
 		@delete-column="deleteColumn"
 		@create-row="createRow"
 		@edit-row="editRow"
+		@copy-row="copyRow"
 		@delete-selected-rows="deleteSelectedRows">
 		<template #actions>
 			<slot name="actions" />
@@ -130,6 +131,9 @@ export default {
 		editRow(rowId) {
 			emit('tables:row:edit', { row: this.rows.find(r => r.id === rowId), columns: this.columns, isView: this.isView, element: this.element })
 		},
+		copyRow(rowId) {
+			emit('tables:row:copy', { row: this.rows.find(r => r.id === rowId), columns: this.columns, isView: this.isView, elementId: this.element.id })
+		},
 		deleteSelectedRows(rows) {
 			emit('tables:row:delete', { rows, isView: this.isView, elementId: this.element.id })
 		},

src/modules/modals/CreateRow.vue

@@ -76,6 +76,10 @@ export default {
 			type: Number,
 			default: null,
 		},
+		prefillData: {
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -99,6 +103,13 @@ export default {
 	watch: {
 		showModal() {
 			if (this.showModal) {
+				if (this.prefillData) {
+					const prefilled = {}
+					this.prefillData.forEach(item => {
+						prefilled[item.columnId] = item.value
+					})
+					this.row = prefilled
+				}
 				this.$nextTick(() => {
 					this.$el.querySelector('input')?.focus()
 				})

src/modules/modals/Modals.vue

@@ -16,6 +16,7 @@
 		<CreateRow :columns="columnsForRow?.columns"
 			:is-view="columnsForRow?.isView"
 			:element-id="columnsForRow?.elementId"
+			:prefill-data="columnsForRow?.prefillData ?? null"
 			:show-modal="columnsForRow !== null"
 			@close="columnsForRow = null" />
 		<EditRow :columns="editRow?.columns"
@@ -147,6 +148,7 @@ export default {
 
 		// rows
 		subscribe('tables:row:create', columnsInfo => { this.columnsForRow = columnsInfo })
+		subscribe('tables:row:copy', rowInfo => { this.columnsForRow = { columns: rowInfo.columns, isView: rowInfo.isView, elementId: rowInfo.elementId, prefillData: rowInfo.row?.data } })
 		subscribe('tables:row:edit', rowInfo => { this.editRow = rowInfo })
 		subscribe('tables:row:delete', tableInfo => {
 			this.rowsToDelete = tableInfo
@@ -169,6 +171,7 @@ export default {
 		unsubscribe('tables:column:edit', columnInfo => { this.columnToEdit = columnInfo })
 		unsubscribe('tables:column:delete', columnInfo => { this.columnToDelete = columnInfo })
 		unsubscribe('tables:row:create', columnsInfo => { this.columnsForRow = columnsInfo })
+		unsubscribe('tables:row:copy', rowInfo => { this.columnsForRow = { columns: rowInfo.columns, isView: rowInfo.isView, elementId: rowInfo.elementId, prefillData: rowInfo.row?.data } })
 		unsubscribe('tables:row:edit', rowInfo => { this.editRow = rowInfo })
 		unsubscribe('tables:row:delete', tableInfo => {
 			this.rowsToDelete = tableInfo

src/shared/components/ncTable/NcTable.vue

@@ -55,6 +55,7 @@ deselect-all-rows        -> unselect all rows, e.g. after deleting selected rows
 				:rows="rows" :is-view="isView" :element-id="elementId" :view-setting.sync="localViewSetting"
 				:config="config" @create-row="$emit('create-row')"
 				@edit-row="rowId => $emit('edit-row', rowId)"
+				@copy-row="rowId => $emit('copy-row', rowId)"
 				@create-column="$emit('create-column')"
 				@edit-column="col => $emit('edit-column', col)"
 				@delete-column="col => $emit('delete-column', col)"

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

@@ -23,19 +23,36 @@
 				:is-view="isView"
 				:can-edit="config.canEditRows" />
 		</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)">
-				<template #icon>
-					<Fullscreen :size="20" />
-				</template>
-			</NcButton>
+		<td v-if="config.showActions && (config.canEditRows || config.canDeleteRows || config.canCreateRows)"
+			:class="{sticky: config.showActions}">
+			<NcActions data-cy="rowActionMenu">
+				<NcActionButton v-if="config.canEditRows || config.canDeleteRows"
+					data-cy="editRowBtn"
+					:close-after-click="true"
+					@click="$emit('edit-row', row.id)">
+					<template #icon>
+						<Pencil :size="20" />
+					</template>
+					{{ t('tables', 'Edit row') }}
+				</NcActionButton>
+				<NcActionButton v-if="config.canCreateRows"
+					data-cy="copyRowBtn"
+					:close-after-click="true"
+					@click="$emit('copy-row', row.id)">
+					<template #icon>
+						<ContentCopy :size="20" />
+					</template>
+					{{ t('tables', 'Copy row') }}
+				</NcActionButton>
+			</NcActions>
 		</td>
 	</tr>
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch, NcButton } from '@nextcloud/vue'
-import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
+import { NcCheckboxRadioSwitch, NcActions, NcActionButton } from '@nextcloud/vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 import TableCellHtml from './TableCellHtml.vue'
 import TableCellProgress from './TableCellProgress.vue'
 import TableCellLink from './TableCellLink.vue'
@@ -64,8 +81,10 @@ export default {
 		TableCellLink,
 		TableCellProgress,
 		TableCellHtml,
-		NcButton,
-		Fullscreen,
+		NcActions,
+		NcActionButton,
+		ContentCopy,
+		Pencil,
 		NcCheckboxRadioSwitch,
 		TableCellDateTime,
 		TableCellTextLine,

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

@@ -38,7 +38,8 @@
 					:element-id="elementId"
 					:is-view="isView"
 					@update-row-selection="updateRowSelection"
-					@edit-row="rowId => $emit('edit-row', rowId)" />
+					@edit-row="rowId => $emit('edit-row', rowId)"
+					@copy-row="rowId => $emit('copy-row', rowId)" />
 			</transition-group>
 		</table>
 		<div v-if="totalPages > 1" class="pagination-footer" :class="{'large-width': !appNavCollapsed || isMobile}">