feat(ratings): adds rating edition mode

Author: dvcol

src/components/common/numbers/AnimatedNumber.vue

@@ -30,12 +30,23 @@ defineProps({
     required: false,
     default: false,
   },
+  active: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
 });
 </script>
 
 <template>
   <NStatistic class="statistics" :class="{ disabled }" tabular-nums>
-    <NNumberAnimation :from="from" :to="to" :duration="duration" :precision="precision" />
+    <NNumberAnimation
+      :from="from"
+      :to="to"
+      :duration="duration"
+      :precision="precision"
+      :active="active"
+    />
     <span v-if="unit" class="unit">{{ unit }}</span>
   </NStatistic>
 </template>

src/components/common/numbers/ProgressNumber.vue

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
 import { NProgress, NSkeleton, NSpin } from 'naive-ui';
 
-import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  type PropType,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
 
 import AnimatedNumber from './AnimatedNumber.vue';
 
 import { Rating } from '~/models/rating.model';
+import { debounce } from '~/utils/debounce.utils';
 import { wait } from '~/utils/promise.utils';
 
 const props = defineProps({
@@ -42,19 +51,91 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  editable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  container: {
+    type: Object as PropType<HTMLElement>,
+    required: false,
+  },
+  transform: {
+    type: Function as PropType<(progress: number) => number>,
+    required: false,
+  },
 });
 
-const { progress, delay } = toRefs(props);
+const emit = defineEmits<{
+  (e: 'onEditing', editing: boolean): void;
+  (e: 'onEdit', progress: number): void;
+  (e: 'onEditProgress', progress: number): void;
+}>();
+
+const { progress, delay, container, duration, editable, transform } = toRefs(props);
 
 const _progress = ref(0);
 
+const progressRef = ref<InstanceType<typeof NProgress>>();
+const containerRef = computed(() => container?.value ?? progressRef.value?.$el);
+
+const editing = ref(false);
+const angleProgress = ref(0);
+
+const debounceEmitProgress = debounce(
+  () => emit('onEditProgress', angleProgress.value),
+  500,
+);
+
+const editProgress = computed(() => {
+  if (!editing.value) return _progress.value;
+  debounceEmitProgress();
+  return angleProgress.value;
+});
+
+const progressDuration = computed(() =>
+  editing.value ? 100 : duration.value - delay.value,
+);
+
 const color = computed(() => {
-  if (_progress.value <= Rating.Bad * 10) return 'color-error';
-  if (_progress.value <= Rating.Mediocre * 10) return 'color-warning';
-  if (_progress.value <= Rating.Good * 10) return 'color-info';
+  if (editProgress.value <= Rating.Bad * 10) return 'color-error';
+  if (editProgress.value <= Rating.Mediocre * 10) return 'color-warning';
+  if (editProgress.value <= Rating.Good * 10) return 'color-info';
   return 'color-primary';
 });
 
+const emitProgress = computed(() => {
+  if (!transform?.value || typeof transform.value !== 'function') {
+    return angleProgress.value;
+  }
+  return transform.value(angleProgress.value);
+});
+
+const onClick = () => {
+  if (!editable.value) return;
+  editing.value = !editing.value;
+  emit('onEditing', editing.value);
+  if (!editing.value) emit('onEdit', emitProgress.value);
+  if (editing.value) progressRef.value?.$el?.focus();
+};
+
+const listener = (event: MouseEvent) => {
+  if (!progressRef.value?.$el) return;
+  // Get the bounding rectangle of the tracking box
+  const rect = progressRef.value?.$el.getBoundingClientRect();
+
+  // Calculate the mouse position relative to the tracking box
+  const mouseX = event.clientX - (rect.left + rect.width / 2);
+  const mouseY = rect.top + rect.height / 2 - event.clientY;
+
+  // Convert (x, y) to angle in radians then in degrees
+  let degrees = Math.atan2(mouseX, mouseY) * (180 / Math.PI) - 180;
+
+  // Adjust angle to 0-360° range
+  if (degrees < 0) degrees += 360;
+  angleProgress.value = Math.round(degrees / 3.6);
+};
+
 onMounted(async () => {
   watch(
     progress,
@@ -64,32 +145,50 @@ onMounted(async () => {
     },
     { immediate: true },
   );
+  watch(
+    containerRef,
+    (_new, _old) => {
+      _old?.removeEventListener('mousemove', listener);
+      if (editable.value) _new?.addEventListener('mousemove', listener);
+    },
+
+    { immediate: true },
+  );
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   _progress.value = 0;
+  containerRef.value?.removeEventListener('mousemove', listener);
 });
 </script>
 
 <template>
-  <NSpin v-if="loading" class="spin" size="large">
+  <NSpin v-show="loading" class="spin" size="large">
     <NProgress class="progress" type="circle">
       <NSkeleton class="skeleton" text round />
     </NProgress>
   </NSpin>
   <NProgress
-    v-else
+    v-show="!loading"
+    ref="progressRef"
     class="progress custom-color"
+    :class="{ editing, editable }"
     type="circle"
-    :percentage="_progress"
+    :percentage="editProgress"
     :style="{
-      '--duration': `${ duration - delay }ms`,
+      '--duration': `${ progressDuration }ms`,
       '--custom-progress-color': `var(--${ color })`,
     }"
+    :tabindex="editable ? 0 : undefined"
+    @click="onClick"
+    @keydown.enter="onClick"
+    @blur="editing = false"
   >
+    <span v-if="editing">{{ emitProgress }}</span>
     <AnimatedNumber
+      v-else
       :from="from"
-      :to="_progress"
+      :to="editProgress"
       :duration="duration"
       :precision="precision"
       :disabled="!_progress"
@@ -102,10 +201,22 @@ onUnmounted(() => {
 .spin,
 .progress {
   --progress-size: 3.7rem !important;
+
+  &.editable {
+    cursor: grab;
+  }
+
+  &.editing {
+    cursor: grabbing;
+  }
 }
 
 .custom-color {
   --n-fill-color: var(--custom-progress-color, var(--color-info)) !important;
+
+  &:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
 }
 
 .spin {

src/components/common/typography/TextField.vue

@@ -79,7 +79,7 @@ const { openTab } = useLinksStore();
 <template>
   <NFlex
     class="detail"
-    :class="{ grow, array, disabled }"
+    :class="{ grow, array, disabled, vertical }"
     :style="{ '--prefix-min-width': labelWidth, '--text-flex': flex }"
     :align="align"
     :wrap="wrap"
@@ -140,6 +140,10 @@ const { openTab } = useLinksStore();
   align-items: baseline;
   min-width: max-content;
 
+  &.vertical {
+    width: 100%;
+  }
+
   &:hover .prefix {
     color: var(--white-70);
   }

src/components/views/panel/PanelRating.vue

@@ -75,6 +75,8 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
       vertical
       size="small"
       flex="0 1 auto"
+      align="center"
+      style="padding-top: 1.5rem"
     >
       <NSkeleton v-if="loading" class="rating-skeleton" text round />
       <AnimatedNumber
@@ -89,7 +91,13 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
     </TextField>
 
     <!--  Rating progress  -->
-    <TextField :label="i18n('label_rating')" vertical flex="0 1 auto">
+    <TextField
+      :label="i18n('label_rating')"
+      vertical
+      flex="0 1 auto"
+      align="center"
+      style="padding-bottom: 1.5rem"
+    >
       <ButtonLinkExternal
         :href="url"
         :title="i18n('calendar', 'common', 'link')"
@@ -113,10 +121,12 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
 .rating-container {
   --duration: 1000ms;
 
-  gap: 1rem;
+  flex: 1 1 auto;
+  min-width: 6rem;
   padding: 0.5rem;
 
   .rating-skeleton {
+    width: 2.125rem;
     margin-top: 0.5rem;
   }
 

src/components/views/panel/PanelScore.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NFlex, NSkeleton } from 'naive-ui';
-import { computed, toRefs } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 
 import ProgressNumber from '~/components/common/numbers/ProgressNumber.vue';
 
@@ -30,6 +30,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (e: 'onEdit', progress: number): void;
+}>();
+
 const i18n = useI18n('panel', 'ratings');
 
 const { score } = toRefs(props);
@@ -45,6 +49,11 @@ const _scoreLabel = computed(() => {
     return 'not_rated';
   }
 });
+
+const transformProgress = (progress: number) => Math.round(progress / 10) * 10;
+const onEdit = (_progress: number) => emit('onEdit', _progress);
+
+const containerRef = ref<InstanceType<typeof TextField>>();
 </script>
 
 <template>
@@ -56,6 +65,9 @@ const _scoreLabel = computed(() => {
       vertical
       size="small"
       flex="0 1 auto"
+      align="center"
+      justify="center"
+      style="padding-top: 1.5rem"
     >
       <NSkeleton v-if="loading" class="score-skeleton" text round />
       <span v-else class="score-label" :class="{ disabled: !score }">
@@ -64,12 +76,24 @@ const _scoreLabel = computed(() => {
     </TextField>
 
     <!--  Score  -->
-    <TextField :label="i18n('label_score')" vertical flex="0 1 auto">
+    <TextField
+      ref="containerRef"
+      :label="i18n('label_score')"
+      :title="i18n('title_score')"
+      vertical
+      flex="0 1 auto"
+      align="center"
+      style="padding-bottom: 1.5rem"
+    >
       <ProgressNumber
         :progress="_score"
         :duration="duration"
         :precision="precision"
         :loading="loading"
+        :container="containerRef?.$el"
+        :transform="transformProgress"
+        editable
+        @on-edit="onEdit"
       />
     </TextField>
   </NFlex>
@@ -79,7 +103,8 @@ const _scoreLabel = computed(() => {
 .score-container {
   --duration: 1000ms;
 
-  gap: 1rem;
+  flex: 1 1 auto;
+  min-width: 6rem;
   padding: 0.5rem;
 
   .score-label {
@@ -92,6 +117,7 @@ const _scoreLabel = computed(() => {
   }
 
   .score-skeleton {
+    width: 2.125rem;
     margin-top: 0.5rem;
   }
 

src/components/views/panel/PanelStatistics.vue

@@ -32,7 +32,13 @@ defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (e: 'onScoreEdit', progress: number): void;
+}>();
+
 const { enableRatings } = useExtensionSettingsStoreRefs();
+
+const onScoreEdit = (progress: number) => emit('onScoreEdit', progress);
 </script>
 
 <template>
@@ -45,7 +51,12 @@ const { enableRatings } = useExtensionSettingsStoreRefs();
       :url="url"
     />
     <slot />
-    <PanelScore v-if="enableRatings" :loading="loadingScore" :score="score" />
+    <PanelScore
+      v-if="enableRatings"
+      :loading="loadingScore"
+      :score="score"
+      @on-edit="onScoreEdit"
+    />
   </NFlex>
 </template>