ongoing edit columns

css/style.css

@@ -27,6 +27,11 @@ p span, .p span {
     font-weight: 100;
 }
 
+[class^='col-'] span {
+    color: var(--color-text-lighter);
+    font-weight: 100;
+}
+
 .icon-left {
     background-position: left;
     padding-left: 22px;
@@ -54,3 +59,7 @@ p span, .p span {
 .icon-loading:first-child {
     top: 10vh;
 }
+
+.block {
+    display: block !important;
+}

lib/Db/Column.php

@@ -19,6 +19,7 @@ class Column extends Entity implements JsonSerializable {
     protected $prefix;
     protected $suffix;
     protected $description;
+    protected $orderWeight;
 
     // type number
     protected $numberDefault;
@@ -36,6 +37,7 @@ class Column extends Entity implements JsonSerializable {
         $this->addType('id', 'integer');
         $this->addType('tableId', 'integer');
         $this->addType('mandatory', 'boolean');
+        $this->addType('orderWeight', 'integer');
 
         // type number
         $this->addType('numberDecimals', 'integer');
@@ -63,6 +65,7 @@ class Column extends Entity implements JsonSerializable {
             'prefix'        => $this->prefix,
             'suffix'        => $this->suffix,
             'description'   => $this->description,
+            'orderWeight'   => $this->orderWeight,
 
             // type number
             'numberDefault' => $this->numberDefault,

src/modals/EditColumns.vue

@@ -0,0 +1,105 @@
+<template>
+	<Modal v-if="showModal" @close="actionCancel">
+		<div class="modal__content">
+			<div v-if="loading" class="icon-loading" />
+
+			<div class="row">
+				<div class="col-4">
+					<h2>{{ t('tables', 'Edit columns') }}</h2>
+				</div>
+			</div>
+
+			<div v-for="column in columns" :key="column.id" class="row">
+				<div class="col-1 block" :class="{mandatory: column.mandatory}">
+					{{ column.title }}
+
+					<span v-if="column.type === 'number'" class="block">{{ t('tables', 'Number') }}
+						{{ (column.mandatory) ? ', ' + t('tables', 'mandatory'): '' }}</span>
+					<span v-if="column.type === 'text' && !column.textMultiline" class="block">{{ t('tables', 'Textline') }}
+						{{ (column.mandatory) ? ', ' + t('tables', 'mandatory'): '' }}</span>
+					<span v-if="column.type === 'number' && column.textMultiline" class="block">{{ t('tables', 'Longtext') }}
+						{{ (column.mandatory) ? ', ' + t('tables', 'mandatory'): '' }}</span>
+				</div>
+				<div class="col-1">
+					{{ column.description }}
+				</div>
+				<div class="col-1">
+					{{ column.oderWeight }}
+				</div>
+				<div class="col-1">
+					<Actions>
+						<ActionButton icon="icon-delete" @click="alert('Delete')">
+							{{ t('tables', 'Delete') }}
+						</ActionButton>
+					</Actions>
+				</div>
+			</div>
+
+			<div class="row">
+				<div class="col-4 margin-bottom">
+					<Button @click="actionCancel">
+						{{ t('tables', 'Close') }}
+					</Button>
+				</div>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+import { mapGetters } from 'vuex'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+export default {
+	name: 'EditColumns',
+	components: {
+		Modal,
+		Actions,
+		ActionButton,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			loading: false,
+			columns: null,
+		}
+	},
+	computed: {
+		...mapGetters(['activeTable']),
+	},
+	mounted() {
+		this.getColumnsForTableFromBE()
+	},
+	methods: {
+		async getColumnsForTableFromBE() {
+			this.loading = true
+			if (!this.activeTable.id) {
+				this.columns = null
+			} else {
+				try {
+					console.debug('try to fetch columns for table id: ', this.activeTable.id)
+					const response = await axios.get(generateUrl('/apps/tables/column/' + this.activeTable.id))
+					this.columns = response.data
+					console.debug('columns loaded', this.columns)
+				} catch (e) {
+					console.error(e)
+					showError(t('tables', 'Could not fetch columns for table'))
+				}
+			}
+			this.loading = false
+		},
+		actionCancel() {
+			this.$emit('close')
+		},
+	},
+}
+</script>

src/pages/sections/TableDescription.vue

@@ -9,7 +9,7 @@
 					</template>
 					{{ t('tables', 'Add a new column') }}
 				</ActionButton>
-				<ActionButton>
+				<ActionButton :close-after-click="true" @click="showEditColumns = true">
 					<template #icon>
 						<ViewColumnOutline :size="20" decorative title="" />
 					</template>
@@ -18,6 +18,7 @@
 			</Actions>
 		</h2>
 		<CreateColumn :show-modal="showCreateColumn" @close="showCreateColumn = false" />
+		<EditColumns :show-modal="showEditColumns" @close="showEditColumns = false" />
 	</div>
 </template>
 
@@ -28,6 +29,7 @@ import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline'
 import CreateColumn from '../../modals/CreateColumn'
+import EditColumns from '../../modals/EditColumns'
 
 export default {
 	name: 'TableDescription',
@@ -37,10 +39,12 @@ export default {
 		TableColumnPlusAfter,
 		ViewColumnOutline,
 		CreateColumn,
+		EditColumns,
 	},
 	data() {
 		return {
 			showCreateColumn: false,
+			showEditColumns: false,
 		}
 	},
 	computed: {