From d9203ba0e1a7f044b827cf0af949107743b76298 Mon Sep 17 00:00:00 2001
From: Florian Steffens <florian.steffens@nextcloud.com>
Date: Thu, 10 Aug 2023 11:02:51 +0200
Subject: [PATCH] add editTable options

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
---
 src/modules/main/sections/DataTable.vue       |  17 +++
 src/modules/modals/EditTable.vue              | 142 ++++++++++++++++++
 src/modules/modals/Modals.vue                 |   7 +
 .../partials/NavigationTableItem.vue          |  11 ++
 4 files changed, 177 insertions(+)
 create mode 100644 src/modules/modals/EditTable.vue

diff --git a/src/modules/main/sections/DataTable.vue b/src/modules/main/sections/DataTable.vue
index 11300f97b..0d5b198f2 100644
--- a/src/modules/main/sections/DataTable.vue
+++ b/src/modules/main/sections/DataTable.vue
@@ -23,6 +23,14 @@
 				<template #actions>
 					<NcActions :force-menu="true" :type="isViewSettingSet ? 'secondary' : 'tertiary'">
 						<NcActionCaption v-if="canManageElement(table)" :title="t('tables', 'Manage table')" />
+						<NcActionButton v-if="canManageElement(table) "
+							:close-after-click="true"
+							@click="emit('tables:table:edit', table.id)">
+							<template #icon>
+								<IconRename :size="20" decorative />
+							</template>
+							{{ t('tables', 'Edit table') }}
+						</NcActionButton>
 						<NcActionButton v-if="canManageElement(table) "
 							:close-after-click="true"
 							@click="$emit('create-view')">
@@ -77,12 +85,14 @@
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
 import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
 import PlaylistPlus from 'vue-material-design-icons/PlaylistPlus.vue'
+import IconRename from 'vue-material-design-icons/Rename.vue'
 import TableView from '../partials/TableView.vue'
 import EmptyTable from './EmptyTable.vue'
 import Creation from 'vue-material-design-icons/Creation.vue'
 import Import from 'vue-material-design-icons/Import.vue'
 import { NcActionButton, NcActions, NcActionCaption } from '@nextcloud/vue'
 import { mapState } from 'vuex'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	components: {
@@ -95,6 +105,7 @@ export default {
 		PlaylistPlus,
 		EmptyTable,
 		Import,
+		IconRename,
 	},
 
 	mixins: [permissionsMixin],
@@ -127,6 +138,7 @@ export default {
 			localSelectedRows: this.selectedRows,
 		}
 	},
+
 	computed: {
 		...mapState(['views']),
 		hasViews() {
@@ -136,10 +148,15 @@ export default {
 			return !(!this.viewSetting || ((!this.viewSetting.hiddenColumns || this.viewSetting.hiddenColumns.length === 0) && (!this.viewSetting.sorting) && (!this.viewSetting.filter || this.viewSetting.filter.length === 0)))
 		},
 	},
+
 	watch: {
 		localSelectedRows() {
 			this.$emit('update:selectedRows', this.localSelectedRows)
 		},
 	},
+
+	methods: {
+		emit,
+	},
 }
 </script>
diff --git a/src/modules/modals/EditTable.vue b/src/modules/modals/EditTable.vue
new file mode 100644
index 000000000..c8a73d44f
--- /dev/null
+++ b/src/modules/modals/EditTable.vue
@@ -0,0 +1,142 @@
+<template>
+	<NcModal v-if="showModal"
+		size="normal"
+		@close="actionCancel">
+		<div class="modal__content">
+			<div class="row">
+				<div class="col-4">
+					<h2>{{ t('tables', 'Edit table') }}</h2>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-4 mandatory">
+					{{ t('tables', 'Title') }}
+				</div>
+				<div class="col-3 inline">
+					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
+						<NcButton type="tertiary"
+							:aria-label="t('tables', 'Select emoji for table')"
+							:title="t('tables', 'Select emoji')"
+							@click.prevent>
+							{{ icon ? icon : '...' }}
+						</NcButton>
+					</NcEmojiPicker>
+					<input v-model="title"
+						:class="{missing: errorTitle}"
+						type="text"
+						:placeholder="t('tables', 'Title of the new table')">
+				</div>
+			</div>
+			<div class="row">
+				<div class="fix-col-4 space-T justify-between">
+					<NcButton v-if="!prepareDeleteTable" type="error" @click="prepareDeleteTable = true">
+						{{ t('tables', 'Delete') }}
+					</NcButton>
+					<NcButton v-if="prepareDeleteTable"
+						:wide="true"
+						type="error"
+						@click="actionDeleteTable">
+						{{ t('tables', 'I really want to delete this table!') }}
+					</NcButton>
+					<NcButton type="primary" @click="submit">
+						{{ t('tables', 'Save') }}
+					</NcButton>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import '@nextcloud/dialogs/dist/index.css'
+import { mapGetters } from 'vuex'
+
+export default {
+	name: 'EditTable',
+	components: {
+		NcModal,
+		NcEmojiPicker,
+		NcButton,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		tableId: {
+			type: Number,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			title: '',
+			icon: '',
+			errorTitle: false,
+			prepareDeleteTable: false,
+		}
+	},
+	computed: {
+		...mapGetters(['getTable', 'activeTable']),
+	},
+	watch: {
+		title() {
+			if (this.title && this.title.length >= 200) {
+				showError(t('tables', 'The title limit is reached with 200 characters. Please use a shorter title.'))
+				this.title = this.title.slice(0, 199)
+			}
+		},
+		tableId() {
+			if (this.tableId) {
+				const table = this.getTable(this.tableId)
+				this.title = table.title
+				this.icon = table.emoji
+			}
+		},
+	},
+	methods: {
+		actionCancel() {
+			this.reset()
+			this.$emit('close')
+		},
+		async submit() {
+			if (this.title === '') {
+				showError(t('tables', 'Cannot update table. Title is missing.'))
+				this.errorTitle = true
+			} else {
+				const res = await this.$store.dispatch('updateTable', { id: this.tableId, data: { title: this.title, emoji: this.icon } })
+				if (res) {
+					showSuccess(t('tables', 'Updated table "{emoji}{table}".', { emoji: this.icon ? this.icon + ' ' : '', table: this.title }))
+					this.actionCancel()
+				}
+			}
+		},
+		reset() {
+			this.title = ''
+			this.errorTitle = false
+			this.templateChoice = 'custom'
+			this.icon = ''
+			this.prepareDeleteTable = false
+		},
+		async actionDeleteTable() {
+			const deleteId = this.tableId
+			const activeTableId = this.activeTable.id
+			this.prepareDeleteTable = false
+			const res = await this.$store.dispatch('removeTable', { tableId: this.tableId })
+			if (res) {
+				showSuccess(t('tables', 'Table "{emoji}{table}" removed.', { emoji: this.icon ? this.icon + ' ' : '', table: this.title }))
+
+				// if the actual table was deleted, go to startpage
+				if (deleteId === activeTableId) {
+					await this.$router.push('/').catch(err => err)
+				}
+
+				this.actionCancel()
+			}
+
+		},
+	},
+}
+</script>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
index 17178f62a..63987d1f2 100644
--- a/src/modules/modals/Modals.vue
+++ b/src/modules/modals/Modals.vue
@@ -30,6 +30,8 @@
 			:element="importToElement?.element"
 			:is-element-view="importToElement?.isView"
 			@close="importToElement = null" />
+
+		<EditTable :table-id="editTable" :show-modal="editTable !== null" @close="editTable = null" />
 	</div>
 </template>
 
@@ -47,9 +49,11 @@ import Import from './Import.vue'
 import DeleteTable from './DeleteTable.vue'
 import CreateTable from './CreateTable.vue'
 import DeleteView from './DeleteView.vue'
+import EditTable from './EditTable.vue'
 
 export default {
 	components: {
+		EditTable,
 		DeleteView,
 		CreateTable,
 		Import,
@@ -77,6 +81,7 @@ export default {
 			createViewTableId: null, // if null, no modal open
 			tableToDelete: null,
 			viewToDelete: null,
+			editTable: null,
 		}
 	},
 
@@ -84,6 +89,7 @@ export default {
 		// table
 		subscribe('tables:table:create', () => { this.showModalCreateTable = true })
 		subscribe('tables:table:delete', table => { this.tableToDelete = table })
+		subscribe('tables:table:edit', tableId => { this.editTable = tableId })
 
 		// views
 		subscribe('tables:view:reload', () => { this.reload(true) })
@@ -129,6 +135,7 @@ export default {
 		unsubscribe('tables:table:create', () => { this.showModalCreateTable = true })
 		unsubscribe('tables:modal:import', element => { this.importToElement = element })
 		unsubscribe('tables:table:delete', table => { this.tableToDelete = table })
+		unsubscribe('tables:table:edit', tableId => { this.editTable = tableId })
 	},
 }
 </script>
diff --git a/src/modules/navigation/partials/NavigationTableItem.vue b/src/modules/navigation/partials/NavigationTableItem.vue
index 0550342db..bd1c41430 100644
--- a/src/modules/navigation/partials/NavigationTableItem.vue
+++ b/src/modules/navigation/partials/NavigationTableItem.vue
@@ -27,6 +27,14 @@
 		</template>
 
 		<template #actions>
+			<NcActionButton v-if="canManageElement(table) "
+				:close-after-click="true"
+				@click="emit('tables:table:edit', table.id)">
+				<template #icon>
+					<IconRename :size="20" decorative />
+				</template>
+				{{ t('tables', 'Edit table') }}
+			</NcActionButton>
 			<NcActionButton v-if="canManageElement(table)"
 				:close-after-click="true"
 				@click="createView">
@@ -81,10 +89,12 @@ import Creation from 'vue-material-design-icons/Creation.vue'
 import Import from 'vue-material-design-icons/Import.vue'
 import NavigationViewItem from './NavigationViewItem.vue'
 import PlaylistPlus from 'vue-material-design-icons/PlaylistPlus.vue'
+import IconRename from 'vue-material-design-icons/Rename.vue'
 
 export default {
 
 	components: {
+		IconRename,
 		// eslint-disable-next-line vue/no-reserved-component-names
 		Table,
 		Import,
@@ -155,6 +165,7 @@ export default {
 		},
 	},
 	methods: {
+		emit,
 		deleteTable() {
 			emit('tables:table:delete', this.table)
 		},