Implement CardFilterPanel

src/main.ts

@@ -1,10 +1,18 @@
-import {createApp} from 'vue'
 import './style.css'
+
+import {createApp} from 'vue'
 import App from './App.vue'
 import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
-import {CardPrintService, CardService, DeckService, SetService} from "./api/openapi";
-import {ToastService} from "primevue";
+import {CardPrintService, CardService, DeckService, JobService, SetService} from "./api/openapi";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionPanel,
+  DatePicker, Fluid,
+  ToastService
+} from "primevue";
 import {createPinia} from "pinia";
 import {createRouter, createWebHistory, type Router, type RouteRecordRaw} from "vue-router";
 import HomeView from "./views/HomeView.vue";
@@ -16,18 +24,60 @@ import Callback from "./views/Callback.vue";
 import {useAuthStore} from "./stores/auth.ts";
 import axiosInstance from "./api";
 import SetsView from "./views/set/SetsView.vue";
+import JobsView from "./views/JobsView.vue";
+import {definePreset} from "@primeuix/themes";
 
 export const DeckServiceKey = Symbol("deckServiceKey")
 export const CardServiceKey = Symbol("cardServiceKey")
 export const SetServiceKey = Symbol("setServiceKey")
 export const CardPrintServiceKey = Symbol("cardPrintServiceKey")
+export const JobServiceKey = Symbol("jobServiceKey")
 
 const pinia = createPinia();
 
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    colorScheme: {
+      light: {
+        surface: {
+          0: '#ffffff',
+          50: '{zinc.50}',
+          100: '{zinc.100}',
+          200: '{zinc.200}',
+          300: '{zinc.300}',
+          400: '{zinc.400}',
+          500: '{zinc.500}',
+          600: '{zinc.600}',
+          700: '{zinc.700}',
+          800: '{zinc.800}',
+          900: '{zinc.900}',
+          950: '{zinc.950}'
+        }
+      },
+      dark: {
+        surface: {
+          0: "#ffffff",
+          50: "#f3f3f3",
+          100: "#e7e7e8",
+          200: "#cfd0d0",
+          300: "#b7b8b9",
+          400: "#9fa1a1",
+          500: "#87898a",
+          600: "#6e7173",
+          700: "#565a5b",
+          800: "#3e4244",
+          900: "#262b2c",
+          950: "#0e1315"
+        }
+      }
+    }
+  }
+});
+
 const app = createApp(App);
 app.use(PrimeVue, {
   theme: {
-    preset: Aura,
+    preset: MyPreset,
     options: {
       cssLayer: {
         name: 'primevue',
@@ -39,6 +89,13 @@ app.use(PrimeVue, {
 
 app.use(pinia);
 
+app.component('Accordion', Accordion)
+app.component('AccordionPanel', AccordionPanel)
+app.component('AccordionHeader', AccordionHeader)
+app.component('AccordionContent', AccordionContent)
+app.component('DatePicker', DatePicker)
+app.component('Fluid', Fluid)
+
 const authStore = useAuthStore();
 authStore.initialize();
 const userManager = authStore.userManager;
@@ -49,13 +106,14 @@ userManager.events.addAccessTokenExpired(async() => {
 
 const routes: RouteRecordRaw[] = [
   {path: '/', component: HomeView},
-  {path: '/cards', component: CardsView, meta: {requiresAuth: true}},
+  {path: '/cards', component: CardsView, meta: {requiresAuth: false}},
   {path: '/cards/:id', component: CardView, meta: {requiresAuth: true}},
   {path: '/decks', component: DecksView, meta: {requiresAuth: true}},
   {path: '/decks/:id', component: DeckView, meta: {requiresAuth: true}},
   {path: '/sets', component: SetsView},
   {path: '/sets/:id', component: DeckView, meta: {requiresAuth: true}},
-  {path: '/callback', component: Callback}
+  {path: '/callback', component: Callback},
+  {path: '/jobs', component: JobsView}
 ]
 
 const router: Router = createRouter({
@@ -80,10 +138,12 @@ const deckService: DeckService = new DeckService(undefined, "http://localhost:80
 const cardService: CardService = new CardService(undefined, "http://localhost:8080", axiosInstance)
 const setService: SetService = new SetService(undefined, "http://localhost:8080", axiosInstance)
 const cardPrintService: CardPrintService = new CardPrintService(undefined, "http://localhost:8080", axiosInstance)
+const jobService: JobService = new JobService(undefined, "http://localhost:8080", axiosInstance)
 
 app.provide(DeckServiceKey, deckService)
 app.provide(CardServiceKey, cardService)
 app.provide(SetServiceKey, setService)
 app.provide(CardPrintServiceKey, cardPrintService)
+app.provide(JobServiceKey, jobService)
 
 app.mount('#app');