move Table Description to EditTable

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
nextcloud · Apr 5, 2024 · 530e7d6 · 530e7d6
1 parent 69a54c4
commit 530e7d6
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 76 deletions.
diff --git a/src/modules/main/sections/Table.vue b/src/modules/main/sections/Table.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<ElementTitle :active-element="table" :view-setting.sync="localViewSetting" />
-		<TableDescription :active-element="table" />
+		<TableDescription :description="table.description" :read-only="true" />
 		<Dashboard v-if="hasViews"
 			:table="table"
 			@create-column="$emit('create-column')"

diff --git a/src/modules/main/sections/TableDescription.vue b/src/modules/main/sections/TableDescription.vue
@@ -1,58 +1,35 @@
 <template>
 	<div class="element-description">
-		<div class="mode-switch">
-			<div class="buttons-wrap">
-				<NcButton v-if="mode !== 'edit' && canManageElement(activeElement)" @click="() => mode='edit'">
-					<template #icon>
-						<IconPencil :size="15" />
-					</template>
-					<template #default>
-						{{ t('tables','Edit') }}
-					</template>
-				</NcButton>
-				<NcButton v-if="mode !== 'view'" :size="15" @click="() => mode='view'">
-					<template #icon>
-						<IconCheck :size="15" />
-					</template>
-					<template #default>
-						{{ t('tables','Done') }}
-					</template>
-				</NcButton>
-			</div>
-		</div>
-		<div v-show="mode !== 'hidden'" class="description__editor">
+		<div v-show="mode !== 'hidden' && (!readOnly || description.length > 0)" class="description__editor">
 			<div id="description-editor" ref="textEditor" />
 		</div>
 	</div>
 </template>
 
 <script>
 
-import { NcButton } from '@nextcloud/vue'
 import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
-import IconPencil from 'vue-material-design-icons/Pencil.vue'
-import IconCheck from 'vue-material-design-icons/Check.vue'
 
 export default {
 	name: 'TableDescription',
 
 	components: {
-		NcButton,
-		IconPencil,
-		IconCheck,
 	},
 	mixins: [permissionsMixin],
 	props: {
-		activeElement: {
-			type: Object,
-			default: null,
+		description: {
+			type: String,
+			default: '',
+		},
+		readOnly: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
 	data() {
 		return {
 			mode: 'view',
-			description: '',
 		}
 	},
 	watch: {
@@ -62,50 +39,34 @@ export default {
 	},
 
 	mounted() {
-		this.setupEditor()
+		if (!this.readOnly || this.description.length > 0) {
+			this.setupEditor()
+		}
 	},
 	async beforeDestroy() {
 		await this.destroyEditor()
 	},
 	methods: {
 		async setupEditor() {
 			if (this?.editor) await this.destroyEditor()
-			this.descriptionLastEdited = 0
-			this.description = this.activeElement.description
 			if (this.$refs.textEditor === undefined) {
 				return
 			}
 			this.editor = await window.OCA.Text.createEditor({
 				el: this.$refs.textEditor,
-				content: this.activeElement.description,
-				readOnly: !this.canManageElement(this.activeElement),
+				content: this.description,
+				readOnly: this.readOnly,
 				onUpdate: ({ markdown }) => {
 					if (this.description === markdown) {
 						this.descriptionLastEdit = 0
 						return
 					}
-					this.description = markdown
-					this.updateDescription()
+					this.$emit('update:description', markdown)
 				},
 			})
-			this.editor.setReadOnly(true)
-		},
-		async saveDescription() {
-			if (this.descriptionLastEdited !== 0 || this.description === this.activeElement.description || !this.canManageElement(this.activeElement)) {
-				return
-			}
-			this.descriptionSaving = true
-			await this.$store.dispatch('updateTableProperty', { id: this.activeElement.id, data: { description: this.description }, property: 'description' })
-			this.descriptionLastEdit = 0
-			this.descriptionSaving = false
-		},
-		updateDescription() {
-			this.descriptionLastEdit = Date.now()
-			clearTimeout(this.descriptionSaveTimeout)
-			this.descriptionSaveTimeout = setTimeout(this.saveDescription, 1000)
+
 		},
 		async destroyEditor() {
-			await this.saveDescription()
 			this?.editor?.destroy()
 		},
 	},
@@ -118,28 +79,10 @@ export default {
 	padding-bottom: 0 !important;
 }
 
-.mode-switch{
-	margin-left: 14px;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	.buttons-wrap {
-		display: flex;
-		background: var(--color-main-background);
-		border: 2px solid var(--color-border);
-		border-radius: var(--border-radius-pill);
-		z-index: 10022;
-		:deep(.button-vue){
-			max-height: 30px !important;
-			min-height: unset !important;
-		}
-	}
-}
-
 .element-description {
 	max-width: 100vw;
 	width: var(--text-editor-max-width);
-	padding-inline: min(60px,5vw)
+	padding-inline: min(60px,5vw);
 }
 
 :deep(.text-readonly-bar){

diff --git a/src/modules/main/sections/TableWrapper.vue b/src/modules/main/sections/TableWrapper.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<ElementTitle :active-element="table" :view-setting.sync="localViewSetting" />
-		<TableDescription :active-element="table" />
+		<TableDescription :description="table.description" :read-only="true" />
 		<DataTable :show-options="false" :table="table" :columns="columns" :rows="rows" :view-setting.sync="localViewSetting"
 			@create-column="$emit('create-column')"
 			@import="$emit('import')"

diff --git a/src/modules/modals/EditTable.vue b/src/modules/modals/EditTable.vue
@@ -38,6 +38,9 @@
 						:display-name="localTable.ownerDisplayName"
 						:user="localTable.owner" />
 				</div>
+				<div class="row">
+					<TableDescription :description.sync="localTable.description" />
+				</div>
 				<div class="row">
 					<div class="fix-col-4 space-T justify-between">
 						<NcButton v-if="!prepareDeleteTable" type="error" @click="prepareDeleteTable = true">
@@ -71,6 +74,7 @@ import '@nextcloud/dialogs/dist/index.css'
 import { mapGetters } from 'vuex'
 import permissionsMixin from '../../shared/components/ncTable/mixins/permissionsMixin.js'
 import { emit } from '@nextcloud/event-bus'
+import TableDescription from '../main/sections/TableDescription.vue'
 
 export default {
 	name: 'EditTable',
@@ -79,6 +83,7 @@ export default {
 		NcEmojiPicker,
 		NcButton,
 		NcUserBubble,
+		TableDescription,
 	},
 	mixins: [permissionsMixin],
 	props: {
@@ -130,7 +135,7 @@ export default {
 				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 } })
+				const res = await this.$store.dispatch('updateTable', { id: this.tableId, data: { title: this.title, emoji: this.icon, description: this.localTable.description } })
 				if (res) {
 					showSuccess(t('tables', 'Updated table "{emoji}{table}".', { emoji: this.icon ? this.icon + ' ' : '', table: this.title }))
 					this.actionCancel()
@@ -178,4 +183,9 @@ export default {
 	margin-left: calc(var(--default-grid-baseline) * 3);
 }
 
+:deep(.element-description) {
+	padding-inline: 0 !important;
+	max-width: 100%;
+}
+
 </style>