Add Action Filters

Fix LibrarySelect for the 100th time

website/app/app.vue

@@ -24,7 +24,7 @@
                 <UNavigationMenu :items="items" orientation="horizontal" variant="link" color="neutral" />
             </template>
             <template #right>
-                <UButton icon="i-lucide-brick-wall-shield" :to="`/actions?return=${$route.fullPath}`" variant="soft" color="secondary" />
+                <UButton icon="i-lucide-brick-wall-shield" :to="`/actions?return=${$route.fullPath}`" :disabled="$route.fullPath.startsWith('/actions')" variant="soft" color="secondary" />
                 <UButton icon="i-lucide-plus" to="/search" color="primary" label="Manga" />
                 <UColorModeButton color="secondary" />
                 <UButton icon="i-lucide-settings" variant="ghost" :to="`/settings?return=${$route.fullPath}`" color="secondary" />

website/app/components/LibrarySelect.vue

@@ -3,6 +3,7 @@
     <USelect
         v-else
         v-model="library"
+        :default-value="libraryId ?? undefined"
         placeholder="Library"
         icon="i-lucide-library-big"
         color="secondary"
@@ -35,8 +36,8 @@ export interface LibrarySelectProps {
 
 const props = defineProps<LibrarySelectProps>();
 
-const library = ref(props.libraryId);
-const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
+const library = ref();
+const { data: libraries } = await useApi('/v2/FileLibrary');
 
 const loading = ref(false);
 const onLibrarySelectChange = async () => {

website/app/components/TrangaPage.vue

@@ -18,6 +18,9 @@
                             <p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
                         </slot>
                     </div>
+                    <div class="flex flew-row gap-2">
+                        <slot name="center" />
+                    </div>
                     <div class="flex flew-row gap-2">
                         <slot name="actions" />
                     </div>

website/app/composables/FetchKeys.ts

@@ -6,4 +6,5 @@ export const FetchKeys = {
     Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` },
     Libraries: { All: 'Libraries', Id: (id: string) => `Libraries/${id}` },
     Settings: { All: 'Settings' },
+    Actions: { Types: 'Actions/Types'}
 };

website/app/pages/actions.vue

@@ -1,5 +1,10 @@
 <template>
     <TrangaPage rimless>
+        <template #center>
+            <USelect v-model="params.action" :items="ActionTypes?.map(a => a.split(/(?=[A-Z])/).join(' '))" class="w-50" @change="refreshData" />
+            <UInput v-model="params.start" trailing-icon="i-lucide-chevron-first" type="datetime-local" @change="refreshData" />
+            <UInput v-model="params.end" icon="i-lucide-chevron-last" type="datetime-local" @change="refreshData" />
+        </template>
         <template #actions>
             <UTooltip text="Reload" :kbds="['meta', 'R']">
                 <UButton variant="soft" color="secondary" icon="i-lucide-refresh-ccw" loading-auto @click="refreshData" />
@@ -13,10 +18,10 @@
                 {{ new Date(row.original.performedAt).toLocaleString() }}
             </template>
             <template #manga-cell="{ row }">
-                <UButton v-if="row.original.mangaId" :to="`/manga/${row.original.mangaId}?return=${$route.fullPath}`">Manga</UButton>
+                <UButton v-if="row.original.mangaId" :to="`/manga/${row.original.mangaId}?return=${$route.fullPath}`" variant="ghost" color="primary">Manga</UButton>
             </template>
             <template #chapter-cell="{ row }">
-                <UButton v-if="row.original.chapterId" :to="`/manga/${row.original.chapterId}?return=${$route.fullPath}`">Chapter</UButton>
+                <UButton v-if="row.original.chapterId" :to="`/manga/${row.original.chapterId}?return=${$route.fullPath}`" variant="ghost" color="secondary">Chapter</UButton>
             </template>
             <template #additional-cell="{ row }">
                 <p v-if="row.original.from">From: {{ row.original.from }}</p>
@@ -34,8 +39,14 @@ import type { TableColumn } from '#ui/components/Table.vue';
 type Filter = components['schemas']['Filter'];
 type ActionRecord = components['schemas']['ActionRecord'];
 
-const params = ref<Partial<Filter>>(useRoute().query);
-const { data, refresh } = useApi('/v2/Actions/Filter', { method: 'POST', body: params.value, immediate: false });
+const { $api } = useNuxtApp();
+
+const params = computed<Partial<Filter>>(() => { return  { ...useRoute().query,
+    start: new Date(Date.now()-(24 * 60 * 60 * 1000)).toISOString().slice(0, 16),
+    end: new Date(Date.now()).toISOString().slice(0, 16),
+}});
+const data = ref(await $api('/v2/Actions/Filter', { method: 'POST', body: params.value }));
+const { data: ActionTypes } = useApi('/v2/Actions/Types', { key : FetchKeys.Actions.Types });
 
 const columns: TableColumn<ActionRecord>[] = [
     {
@@ -65,7 +76,7 @@ const columns: TableColumn<ActionRecord>[] = [
 ];
 
 const refreshData = async (): Promise<void> => {
-    await refresh();
+    data.value = await $api('/v2/Actions/Filter', { method: 'POST', body: params.value });
 };
 defineShortcuts({ meta_r: { usingInput: true, handler: refreshData } });
 </script>

website/app/pages/manga/[mangaId]/index.vue

@@ -66,6 +66,7 @@
             </div>
         </div>
         <template #actions>
+            <UButton icon="i-lucide-brick-wall-shield" :to="`/actions?mangaId=${mangaId}&return=${$route.fullPath}`" variant="soft" color="secondary" />
             <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${$route.fullPath}`" color="secondary"
                 >Merge</UButton
             >