feat(panel): adds modal picker to buttons

Author: dvcol

src/components/views/panel/PanelButtonProgress.vue

@@ -2,7 +2,9 @@
 import {
   type ButtonProps,
   NButton,
+  NDatePicker,
   NIcon,
+  NModal,
   NPopselect,
   type PopselectProps,
   type SelectOption,
@@ -57,13 +59,39 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (o: 'onSelect', value: string | number | (string | number)[], date?: number): void;
+}>();
+
 const { percentage } = toRefs(props);
 
+const root = ref();
+const trigger = ref();
+
 const progressBackground = computed(() => {
   if (percentage?.value === undefined) return false;
   return percentage.value > 0 && percentage.value < 100;
 });
 
+const showPicker = ref(false);
+
+const onSelect = (value: string | number | (string | number)[]) => {
+  if (value === 'custom') {
+    showPicker.value = true;
+    return;
+  }
+  emit('onSelect', value);
+};
+
+const onClear = () => {
+  showPicker.value = false;
+};
+
+const onConfirm = (value: number) => {
+  showPicker.value = false;
+  emit('onSelect', 'custom', value);
+};
+
 const renderLabel = (option: SelectOption & { icon: Component }) => [
   h(NIcon, {
     style: {
@@ -74,9 +102,6 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
   }),
   option.label?.toString(),
 ];
-
-const root = ref();
-const trigger = ref();
 </script>
 
 <template>
@@ -85,16 +110,16 @@ const trigger = ref();
     class="button-progress-container"
     :data-progress="percentage"
     :style="{
-      '--progress': `${percentage}%`,
-      '--progress-color': `var(--${type}-color-dark)`,
+      '--progress': `${ percentage }%`,
+      '--progress-color': `var(--${ type }-color-dark)`,
     }"
   >
     <ProgressTooltip
       :progress="progress"
       :to="root"
       :style="{
-        '--custom-bg-color': `var(--bg-color-${type}-80)`,
-        '--custom-bg-color-hover': `var(--bg-color-${type})`,
+        '--custom-bg-color': `var(--bg-color-${ type }-80)`,
+        '--custom-bg-color-hover': `var(--bg-color-${ type })`,
       }"
       v-bind="tooltip"
     >
@@ -103,15 +128,16 @@ const trigger = ref();
       </template>
       <NPopselect
         :style="{
-          '--custom-bg-color': `var(--bg-color-${type}-80)`,
-          '--custom-bg-color-hover': `var(--bg-color-${type})`,
+          '--custom-bg-color': `var(--bg-color-${ type }-80)`,
+          '--custom-bg-color-hover': `var(--bg-color-${ type })`,
         }"
         :to="root"
         :render-label="renderLabel"
         trigger="focus"
         :disabled="disabled"
         v-bind="select"
         :on-update:show="_show => !_show && trigger?.$el?.blur()"
+        :on-update-value="onSelect"
       >
         <NButton
           ref="trigger"
@@ -129,6 +155,24 @@ const trigger = ref();
         </NButton>
       </NPopselect>
     </ProgressTooltip>
+
+    <NModal
+      v-model:show="showPicker"
+      :to="root"
+      :style="{
+        '--custom-bg-color': `var(--bg-color-${ type }-80)`,
+        '--custom-bg-color-hover': `var(--bg-color-${ type })`,
+      }"
+      class="picker-modal"
+    >
+      <NDatePicker
+        panel
+        type="datetime"
+        clearable
+        :on-clear="onClear"
+        :on-confirm="onConfirm"
+      />
+    </NModal>
   </div>
 </template>
 
@@ -164,4 +208,8 @@ const trigger = ref();
     );
   }
 }
+
+.picker-modal {
+  margin: auto;
+}
 </style>

src/components/views/panel/ShowPanelButtons.vue

@@ -56,6 +56,27 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (e: 'onListUpdate', value: ListEntity['id'][]): void;
+  (e: 'onCollectionUpdate', value: ListEntity['id'], date?: number): void;
+  (e: 'onWatchedUpdate', value: ListEntity['id'], date?: number): void;
+}>();
+
+const onListUpdate = (value: ListEntity['id'] | ListEntity['id'][]) => {
+  emit('onListUpdate', value as ListEntity['id'][]);
+};
+
+const onCollectionUpdate = (
+  value: ListEntity['id'] | ListEntity['id'][],
+  date?: number,
+) => {
+  emit('onCollectionUpdate', value as ListEntity['id'], date);
+};
+
+const onWatchedUpdate = (value: ListEntity['id'] | ListEntity['id'][], date?: number) => {
+  emit('onWatchedUpdate', value as ListEntity['id'], date);
+};
+
 const { mode, watchedProgress, collectionProgress, activeLoading } = toRefs(props);
 
 const watched = computed(() => {
@@ -150,6 +171,7 @@ onMounted(() => {
         :filled="!!activeLists?.length"
         :disabled="listsLoading"
         type="warning"
+        @on-select="onListUpdate"
       >
         <template #tooltip>
           <NFlex vertical size="small" align="center" justify="center">
@@ -177,6 +199,7 @@ onMounted(() => {
         :filled="collected"
         :disabled="collectionLoading"
         type="info"
+        @on-select="onCollectionUpdate"
       >
         {{ i18n(`label__collection__${ collected ? 'remove' : 'add' }`) }}
       </PanelButtonProgress>
@@ -196,6 +219,7 @@ onMounted(() => {
         :percentage="watchedPercentage"
         :filled="watched"
         :disabled="watchedLoading"
+        @on-select="onWatchedUpdate"
       >
         {{ i18n(`label__history__${ watched ? 'remove' : 'add' }`) }}
       </PanelButtonProgress>