From d3a7777a8425de3f022a96144d725e0f29df66f4 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 07:17:03 +0100
Subject: [PATCH 1/4] feat: Inline editing - Stars

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellStars.vue       | 160 +++++++++++++++++-
 .../components/ncTable/partials/TableRow.vue  |   1 -
 2 files changed, 155 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index d13a55c101..a245e030bd 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -3,15 +3,58 @@
   - 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 }">
+				<NcButton type="tertiary"
+					:aria-label="t('tables', 'Reduce stars')"
+					:disabled="localLoading || editValue <= 0 || !canEditCell()"
+					@click="less">
+					<template #icon>
+						<span class="minus-icon">-</span>
+					</template>
+				</NcButton>
+				<div class="stars">
+					{{ getEditValue }}
+				</div>
+				<NcButton type="tertiary"
+					:aria-label="t('tables', 'Increase stars')"
+					:disabled="localLoading || editValue >= 5 || !canEditCell()"
+					@click="more">
+					<template #icon>
+						<span class="plus-icon">+</span>
+					</template>
+				</NcButton>
+				<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+import { NcButton } from '@nextcloud/vue'
+import cellEditMixin from '../mixins/cellEditMixin.js'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'TableCellStars',
+
+	components: {
+		NcButton,
+	},
+
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -26,6 +69,13 @@ export default {
 			default: 0,
 		},
 	},
+
+	data() {
+		return {
+			// No additional data needed
+		}
+	},
+
 	computed: {
 		getValue() {
 			const starEmpty = '☆'
@@ -33,14 +83,114 @@ export default {
 			const v = this.value
 			return starFull.repeat(v) + starEmpty.repeat(5 - v)
 		},
+		getEditValue() {
+			const starEmpty = '☆'
+			const starFull = '★'
+			const v = this.editValue
+			return starFull.repeat(v) + starEmpty.repeat(5 - v)
+		},
+	},
+
+	watch: {
+		isEditing(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					// Add click outside listener
+					document.addEventListener('click', this.handleClickOutside)
+				})
+			} else {
+				// Remove click outside listener
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		more() {
+			if (this.editValue < 5 && !this.localLoading && this.canEditCell()) {
+				this.editValue++
+			}
+		},
+
+		less() {
+			if (this.editValue > 0 && !this.localLoading && this.canEditCell()) {
+				this.editValue--
+			}
+		},
+
+		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;
+
+	&.is-loading {
+		opacity: 0.7;
+	}
+}
+
+.stars {
+	font-size: 1.4em;
+	padding: 7px;
+}
 
-.wrapper {
-	padding-right: 10px;
+.editor-buttons {
+	display: flex;
+	gap: 8px;
+	margin-top: 8px;
+	align-items: center;
 }
 
+.icon-loading-inline {
+	margin-left: 4px;
+}
+
+.minus-icon, .plus-icon {
+	font-size: 20px;
+	font-weight: bold;
+}
 </style>
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index afea9d3d5d..2f66236cc8 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/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,

From 341d4be577d74d13291553eb79d2347eafd94e42 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 08:27:59 +0100
Subject: [PATCH 2/4] enh: remove unneeded section

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 src/shared/components/ncTable/partials/TableCellStars.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index a245e030bd..ba08821776 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -70,12 +70,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			// No additional data needed
-		}
-	},
-
 	computed: {
 		getValue() {
 			const starEmpty = '☆'

From 6d5c01d2e9b8f6541921ad75064845beca9aae8d Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Thu, 14 Aug 2025 04:06:38 +0100
Subject: [PATCH 3/4] enh: Click on stars to edit instead of buttons

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellStars.vue       | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index ba08821776..0a4d31d460 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -16,25 +16,16 @@
 			@keydown.enter="saveChanges"
 			@keydown.escape="cancelEdit">
 			<div class="align-center" :class="{ 'is-loading': localLoading }">
-				<NcButton type="tertiary"
-					:aria-label="t('tables', 'Reduce stars')"
-					:disabled="localLoading || editValue <= 0 || !canEditCell()"
-					@click="less">
-					<template #icon>
-						<span class="minus-icon">-</span>
-					</template>
-				</NcButton>
-				<div class="stars">
-					{{ getEditValue }}
+				<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>
-				<NcButton type="tertiary"
-					:aria-label="t('tables', 'Increase stars')"
-					:disabled="localLoading || editValue >= 5 || !canEditCell()"
-					@click="more">
-					<template #icon>
-						<span class="plus-icon">+</span>
-					</template>
-				</NcButton>
 				<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
 			</div>
 		</div>
@@ -42,17 +33,12 @@
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
 import cellEditMixin from '../mixins/cellEditMixin.js'
 import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'TableCellStars',
 
-	components: {
-		NcButton,
-	},
-
 	mixins: [cellEditMixin],
 
 	props: {
@@ -89,11 +75,9 @@ export default {
 		isEditing(newValue) {
 			if (newValue) {
 				this.$nextTick(() => {
-					// Add click outside listener
 					document.addEventListener('click', this.handleClickOutside)
 				})
 			} else {
-				// Remove click outside listener
 				document.removeEventListener('click', this.handleClickOutside)
 			}
 		},
@@ -102,15 +86,14 @@ export default {
 	methods: {
 		t,
 
-		more() {
-			if (this.editValue < 5 && !this.localLoading && this.canEditCell()) {
-				this.editValue++
-			}
-		},
-
-		less() {
-			if (this.editValue > 0 && !this.localLoading && this.canEditCell()) {
-				this.editValue--
+		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
+				}
 			}
 		},
 
@@ -172,6 +155,30 @@ export default {
 	padding: 7px;
 }
 
+.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);
+	}
+}
+
 .editor-buttons {
 	display: flex;
 	gap: 8px;
@@ -182,9 +189,4 @@ export default {
 .icon-loading-inline {
 	margin-left: 4px;
 }
-
-.minus-icon, .plus-icon {
-	font-size: 20px;
-	font-weight: bold;
-}
 </style>

From acaf55452cf1c413c2e947289de1e6156fde4cfa Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Mon, 18 Aug 2025 16:21:52 +0100
Subject: [PATCH 4/4] fix: Remove unused functions

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellStars.vue        | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index 0a4d31d460..e33457f40a 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -63,12 +63,6 @@ export default {
 			const v = this.value
 			return starFull.repeat(v) + starEmpty.repeat(5 - v)
 		},
-		getEditValue() {
-			const starEmpty = '☆'
-			const starFull = '★'
-			const v = this.editValue
-			return starFull.repeat(v) + starEmpty.repeat(5 - v)
-		},
 	},
 
 	watch: {
@@ -150,11 +144,6 @@ export default {
 	}
 }
 
-.stars {
-	font-size: 1.4em;
-	padding: 7px;
-}
-
 .clickable-stars {
 	display: flex;
 	align-items: center;
@@ -179,13 +168,6 @@ export default {
 	}
 }
 
-.editor-buttons {
-	display: flex;
-	gap: 8px;
-	margin-top: 8px;
-	align-items: center;
-}
-
 .icon-loading-inline {
 	margin-left: 4px;
 }