feat: edit/create rows from tables interactive content widget

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
nextcloud · Apr 10, 2024 · 110a7b7 · 110a7b7
1 parent f13ffc9
commit 110a7b7
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 28 deletions.
diff --git a/cypress/e2e/column-selection.cy.js b/cypress/e2e/column-selection.cy.js
@@ -29,7 +29,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.get('.modal__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
 		cy.get('.modal__content .title').click()
-		cy.get('.modal__content .select span[title="second option"]').should('be.visible')
+		cy.get('.vs__dropdown-toggle .vs__selected span[title="second option"]').should('exist')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('second option').should('be.visible')
 

diff --git a/lib/Reference/ContentReferenceHelper.php b/lib/Reference/ContentReferenceHelper.php
@@ -5,6 +5,7 @@
 use Exception;
 use OC\Collaboration\Reference\LinkReferenceProvider;
 use OCA\Tables\AppInfo\Application;
+use OCA\Tables\Db\Table;
 use OCA\Tables\Errors\InternalError;
 use OCA\Tables\Errors\NotFoundError;
 use OCA\Tables\Errors\PermissionError;
@@ -95,6 +96,9 @@ public function resolveReference(string $referenceText): ?IReference {
 			$reference = new Reference($referenceText);
 			$referenceInfo = [];
 
+			$referenceInfo['id'] = $elementId;
+			$referenceInfo['type'] = ($element instanceof Table) ? Application::NODE_TYPE_TABLE : Application::NODE_TYPE_VIEW;
+
 			if ($element->getEmoji()) {
 				$reference->setDescription($element->getEmoji() . ' ' . $element->getTitle());
 				$referenceInfo['title'] = $element->getTitle();
@@ -108,6 +112,8 @@ public function resolveReference(string $referenceText): ?IReference {
 
 			$referenceInfo['ownership'] = $element->getOwnership();
 			$referenceInfo['ownerDisplayName'] = $element->getOwnerDisplayName();
+			$referenceInfo['isShared'] = $element->getIsShared();
+			$referenceInfo['onSharePermissions'] = $element->getOnSharePermissions();
 			$referenceInfo['rowsCount'] = $element->getRowsCount();
 
 			$imageUrl = $this->urlGenerator->getAbsoluteURL(

diff --git a/src/modules/main/partials/ColumnFormComponent.vue b/src/modules/main/partials/ColumnFormComponent.vue
@@ -17,7 +17,6 @@ import DatetimeForm from '../../../shared/components/ncTable/partials/rowTypePar
 import DatetimeDateForm from '../../../shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue'
 import DatetimeTimeForm from '../../../shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue'
 import TextRichForm from '../../../shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue'
-import { AbstractColumn } from '../../../shared/components/ncTable/mixins/columnClass.js'
 
 export default {
 	name: 'ColumnFormComponent',
@@ -38,7 +37,7 @@ export default {
 	},
 	props: {
 		column: {
-			type: AbstractColumn,
+			type: Object,
 			default: null,
 		},
 		value: {
@@ -53,11 +52,14 @@ export default {
 	},
 	computed: {
 		getFormComponent() {
-			const form = this.snakeToCamel(this.column.type) + 'Form'
+			const columnType = this.column.type
+			const columnSubType = this.column.subtype ?? ''
+			const form = this.snakeToCamel(columnType) + this.snakeToCamel(columnSubType) + 'Form'
+
 			if (this.$options.components && this.$options.components[form]) {
 				return form
 			} else {
-				throw Error('Form ' + form + ' does no exist')
+				throw Error('Form ' + form + ' does not exist')
 			}
 		},
 	},

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
@@ -125,6 +125,11 @@ export default {
 			}
 		},
 		async sendNewRowToBE() {
+			if (!this.$store) {
+				const { default: store } = await import(/* webpackChunkName: 'store' */ '../../store/store.js')
+				this.$store = store
+			}
+
 			try {
 				const data = []
 				for (const [key, value] of Object.entries(this.row)) {
@@ -151,6 +156,44 @@ export default {
 </script>
 <style lang="scss" scoped>
 
+.modal__content {
+	padding: 20px;
+
+	.row .space-T,
+	.row.space-T {
+		padding-top: 20px;
+	}
+
+	:where([class*='fix-col-']) {
+		display: flex;
+	}
+
+	:where(.slot) {
+		align-items: baseline;
+	}
+
+	:where(.end) {
+		justify-content: end;
+	}
+
+	:where(.slot.fix-col-2) {
+		min-width: 50%;
+	}
+
+	:where(.fix-col-3) {
+		min-width: 75%;
+	}
+
+	:where(.slot.fix-col-4 input, .slot.fix-col-4 .row) {
+		min-width: 100% !important;
+	}
+
+	:where(.name-parts) {
+		display: block !important;
+		max-width: fit-content !important;
+	}
+}
+
 .padding-right {
 	padding-right: calc(var(--default-grid-baseline) * 3);
 }

diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
@@ -85,7 +85,7 @@ export default {
 	},
 	data() {
 		return {
-			localRow: {},
+			localRow: null,
 			prepareDeleteRow: false,
 			localLoading: false,
 		}
@@ -120,6 +120,9 @@ export default {
 			}
 		},
 	},
+	mounted() {
+		this.loadValues()
+	},
 	methods: {
 		loadValues() {
 			if (this.row) {
@@ -131,7 +134,7 @@ export default {
 			}
 		},
 		actionCancel() {
-			this.$router.back()
+			this.$router?.back()
 			this.reset()
 			this.$emit('close')
 		},
@@ -154,11 +157,13 @@ export default {
 			this.actionCancel()
 		},
 		async sendRowToBE() {
+			await this.loadStore()
+
 			const data = []
 			for (const [key, value] of Object.entries(this.localRow)) {
 				data.push({
 					columnId: key,
-					value,
+					value: value ?? '',
 				})
 			}
 			const res = await this.$store.dispatch('updateRow', {
@@ -180,6 +185,8 @@ export default {
 			this.deleteRowAtBE(this.row.id)
 		},
 		async deleteRowAtBE(rowId) {
+			await this.loadStore()
+
 			this.localLoading = true
 			const res = await this.$store.dispatch('removeRow', {
 				rowId,
@@ -192,6 +199,46 @@ export default {
 			this.localLoading = false
 			this.actionCancel()
 		},
+		async loadStore() {
+			if (this.$store) { return }
+
+			const { default: store } = await import(/* webpackChunkName: 'store' */ '../../store/store.js')
+			this.$store = store
+		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding: 20px;
+
+	:where(.row .space-T, .row.space-T) {
+		padding-top: 20px;
+	}
+
+	:where([class*='fix-col-']) {
+		display: flex;
+	}
+
+	:where(.slot) {
+		align-items: baseline;
+	}
+
+	:where(.end) {
+		justify-content: end;
+	}
+
+	:where(.slot.fix-col-2) {
+		min-width: 50%;
+	}
+
+	:where(.fix-col-3) {
+		min-width: 75%;
+	}
+
+	:where(.slot.fix-col-4 input, .slot.fix-col-4 .row) {
+		min-width: 100% !important;
+	}
+}
+</style>