feat: Inline editing - Stars

src/shared/components/ncTable/partials/TableCellStars.vue

@@ -3,15 +3,44 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		{{ getValue }}
+	<div class="cell-stars">
+		<div v-if="!isEditing" @click="startEditing">
+			<div class="stars-display">
+				{{ getValue }}
+			</div>
+		</div>
+		<div v-else
+			ref="editingContainer"
+			class="inline-editing-container"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<div class="align-center" :class="{ 'is-loading': localLoading }">
+				<div class="clickable-stars">
+					<span v-for="star in 5"
+						:key="star"
+						class="star"
+						:class="{ 'filled': star <= editValue, 'clickable': !localLoading && canEditCell() }"
+						:aria-label="t('tables', 'Set {star} stars', { star })"
+						@click="setStar(star)">
+						{{ star <= editValue ? '★' : '☆' }}
+					</span>
+				</div>
+				<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+import cellEditMixin from '../mixins/cellEditMixin.js'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'TableCellStars',
+
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -26,6 +55,7 @@ export default {
 			default: 0,
 		},
 	},
+
 	computed: {
 		getValue() {
 			const starEmpty = '☆'
@@ -34,13 +64,111 @@ export default {
 			return starFull.repeat(v) + starEmpty.repeat(5 - v)
 		},
 	},
+
+	watch: {
+		isEditing(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					document.addEventListener('click', this.handleClickOutside)
+				})
+			} else {
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		setStar(starNumber) {
+			if (!this.localLoading && this.canEditCell()) {
+				// If clicking on a star that represents the current rating, clear to 0
+				if (starNumber === this.editValue) {
+					this.editValue = 0
+				} else {
+					this.editValue = starNumber
+				}
+			}
+		},
+
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			if (this.editValue === this.value) {
+				this.isEditing = false
+				return
+			}
+
+			const success = await this.updateCellValue(this.editValue)
+
+			if (!success) {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+			this.isEditing = false
+		},
+
+		handleClickOutside(event) {
+			// Check if the click is outside the editing container
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
+		},
+	},
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.cell-stars {
+	width: 100%;
+}
+
+.cell-stars > div:first-child {
+	cursor: pointer;
+}
+
+.stars-display {
+	font-size: 20px;
+	cursor: pointer;
+}
+
+.align-center {
+	align-items: center;
+	display: flex;
 
-.wrapper {
-	padding-right: 10px;
+	&.is-loading {
+		opacity: 0.7;
+	}
 }
 
+.clickable-stars {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.star {
+	font-size: 1.4em;
+	padding: 4px;
+	transition: transform 0.1s ease;
+
+	&.clickable {
+		cursor: pointer;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+
+	&.filled {
+		color: var(--color-warning);
+	}
+}
+
+.icon-loading-inline {
+	margin-left: 4px;
+}
 </style>

src/shared/components/ncTable/partials/TableRow.vue

@@ -114,7 +114,6 @@ export default {
 				ColumnTypes.TextRich,
 				ColumnTypes.SelectionMulti,
 				ColumnTypes.TextLink,
-				ColumnTypes.NumberStars,
 				ColumnTypes.Datetime,
 				ColumnTypes.DatetimeDate,
 				ColumnTypes.DatetimeTime,