Enhancement: add a read-only option to view columns (code review fixes)

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>

Author: Koc

src/modules/main/partials/ColumnFormComponent.vue

@@ -90,3 +90,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(input[readonly]) {
+	opacity: 0.6;
+}
+</style>

src/modules/modals/CreateRow.vue

@@ -9,7 +9,7 @@
 		data-cy="createRowModal"
 		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div v-for="column in editableColumns" :key="column.id" :data-cy="column.title">
+			<div v-for="column in nonMetaColumns" :key="column.id" :data-cy="column.title">
 				<ColumnFormComponent
 					:column="column"
 					:value.sync="row[column.id]" />
@@ -86,16 +86,14 @@ export default {
 		}
 	},
 	computed: {
-		editableColumns() {
-			return this.columns
-				.filter(col => col.id >= 0)
-				.filter(col => !col.readonly)
+		nonMetaColumns() {
+			return this.columns.filter(col => col.id >= 0)
 		},
 		hasEmptyMandatoryRows() {
 			return this.checkMandatoryFields(this.row)
 		},
 		hasInvalidUrlProtocol() {
-			return this.editableColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.row[col.id]))
+			return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.row[col.id]))
 		},
 	},
 	watch: {

src/modules/modals/EditRow.vue

@@ -9,7 +9,7 @@
 		size="large"
 		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div v-for="column in editableColumns" :key="column.id">
+			<div v-for="column in nonMetaColumns" :key="column.id">
 				<ColumnFormComponent
 					:column="column"
 					:value.sync="localRow[column.id]" />
@@ -106,16 +106,14 @@ export default {
 		showDeleteButton() {
 			return this.canDeleteData(this.element) && !this.localLoading
 		},
-		editableColumns() {
-			return this.columns
-				.filter(col => col.id >= 0)
-				.filter(col => !col.readonly)
+		nonMetaColumns() {
+			return this.columns.filter(col => col.id >= 0)
 		},
 		hasEmptyMandatoryRows() {
 			return this.checkMandatoryFields(this.localRow)
 		},
 		hasInvalidUrlProtocol() {
-			return this.editableColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.localRow[col.id]))
+			return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.localRow[col.id]))
 		},
 	},
 	watch: {
@@ -183,7 +181,6 @@ export default {
 		},
 		reset() {
 			this.localRow = {}
-			this.dataLoaded = false
 			this.prepareDeleteRow = false
 		},
 		actionDeleteRow() {

src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePickerNative id="datetime-date-picker" v-model="localValue"
+		<NcDateTimePickerNative id="datetime-date-picker" v-model="localValue" :readonly="column.readonly"
 			type="date" />
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
@@ -36,7 +36,7 @@ export default {
 	},
 	computed: {
 		canBeCleared() {
-			return !this.column.mandatory
+			return !this.column.readonly && !this.column.mandatory
 		},
 		localValue: {
 			get() {

src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePickerNative id="datetime-picker" v-model="localValue"
+		<NcDateTimePickerNative id="datetime-picker" v-model="localValue" :readonly="column.readonly"
 			type="datetime-local" />
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
@@ -32,7 +32,7 @@ export default {
 	},
 	computed: {
 		canBeCleared() {
-			return !this.column.mandatory
+			return !this.column.readonly && !this.column.mandatory
 		},
 		localValue: {
 			get() {

src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue

@@ -4,7 +4,11 @@
 -->
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
-		<NcDateTimePickerNative id="datetime-time-picker" v-model="localValue" :label="t('tables', 'Please select a new time')"
+		<NcDateTimePickerNative
+			id="datetime-time-picker"
+			v-model="localValue"
+			:label="t('tables', 'Please select a new time')"
+			:readonly="column.readonly"
 			type="time" />
 		<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 	</RowFormWrapper>
@@ -36,7 +40,7 @@ export default {
 	},
 	computed: {
 		canBeCleared() {
-			return !this.column.mandatory
+			return !this.column.readonly && !this.column.mandatory
 		},
 		localValue: {
 			get() {

src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue

@@ -11,6 +11,7 @@
 			type="number"
 			:min="column.numberMin"
 			:max="column.numberMax"
+			:readonly="column.readonly"
 			:step="getStep">
 		<div v-if="column.numberSuffix" class="suffix">
 			{{ column.numberSuffix }}

src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue

@@ -8,6 +8,7 @@
 			type="number"
 			min="0"
 			max="100"
+			:readonly="column.readonly"
 			@input="enforceBounds">
 	</RowFormWrapper>
 </template>

src/shared/components/ncTable/partials/rowTypePartials/NumberStarsForm.vue

@@ -5,15 +5,15 @@
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description">
 		<div class="align-center">
-			<NcButton type="tertiary" :aria-label="t('tables', 'Reduce stars')" @click="less">
+			<NcButton type="tertiary" :aria-label="t('tables', 'Reduce stars')" :disabled="column.readonly || localValue <= 0" @click="less">
 				<template #icon>
 					<Minus :size="20" />
 				</template>
 			</NcButton>
-			<div class="stars">
+			<div class="stars" :class="{ 'readonly': column.readonly }">
 				{{ getStars }}
 			</div>
-			<NcButton type="tertiary" :aria-label="t('tables', 'Increase stars')" @click="more">
+			<NcButton type="tertiary" :aria-label="t('tables', 'Increase stars')" :disabled="column.readonly || localValue >= 5" @click="more">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -91,10 +91,12 @@ export default {
 	align-items: center;
 	display: inline-flex;
 }
-
 .stars {
 	font-size: 1.4em;
 	padding: 7px;
 }
+.stars.readonly {
+	opacity: 0.6;
+}
 
 </style>

src/shared/components/ncTable/partials/rowTypePartials/SelectionCheckForm.vue

@@ -4,7 +4,11 @@
 -->
 <template>
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description">
-		<NcCheckboxRadioSwitch type="switch" :checked.sync="localValue" data-cy="selectionCheckFormSwitch" />
+		<NcCheckboxRadioSwitch
+			type="switch"
+			:checked.sync="localValue"
+			:disabled="column.readonly"
+			data-cy="selectionCheckFormSwitch" />
 	</RowFormWrapper>
 </template>