Amend errors in main.ts

Add ImportModal
Add local proxy setting

docker/docker-compose.yml

@@ -7,16 +7,16 @@ services:
     depends_on:
       - db
     environment:
-      QUARKUS_DATASOURCE_JDBC_URL:
-      QUARKUS_DATASOURCE_USERNAME:
-      QUARKUS_DATASOURCE_PASSWORD:
-      QUARKUS_OIDC_AUTH_SERVER_URL:
-      QUARKUS_OIDC_CLIENT_ID:
-      QUARKUS_OIDC_CREDENTIALS_SECRET:
-      QUARKUS_OIDC_TOKEN_AUDIENCE:
-      QUARKUS_OIDC_TOKEN_ISSUER:
+      QUARKUS_DATASOURCE_JDBC_URL: jdbc:postgresql://db:5432/dex
+      QUARKUS_DATASOURCE_USERNAME: dex
+      QUARKUS_DATASOURCE_PASSWORD: dex
+      QUARKUS_OIDC_AUTH_SERVER_URL: https://auth.smoothbrain.win/application/o/dex-be/
+      QUARKUS_OIDC_CLIENT_ID: wUSuMpZlbop44mij54Mshxuf4CMuXdR9h1Jv9Ixc
+      QUARKUS_OIDC_CREDENTIALS_SECRET: CY8i3LM5mqHRUKAie6EscEi8fteiehYgy0FC2HtY79U1TxhRcCde9FfFB3m05DYvOTqI4xufRmspI5N5uqzgXkAljoe7BTjXw1Hhgxz0e5KH0K1jADhpO5a4lczoifjl
+      QUARKUS_OIDC_TOKEN_AUDIENCE: K202NAqkgfjceLZr28gAVQgJDc6RjZfdrE1jNx0K,wUSuMpZlbop44mij54Mshxuf4CMuXdR9h1Jv9Ixc
+      QUARKUS_OIDC_TOKEN_ISSUER: https://auth.smoothbrain.win/application/o/dex/
       QUARKUS_HTTP_INSECURE_REQUESTS: enabled
-      DEX_FILE_PATH:
+      DEX_FILE_PATH: /data/files
     networks:
       - dex
 
@@ -25,7 +25,7 @@ services:
       context: ..
       dockerfile: docker/Dockerfile
     ports:
-      - "80:80"
+      - "7070:7070"
     depends_on:
       - be
     environment:

docker/entrypoint.sh

@@ -2,7 +2,7 @@
 set -e
 
 : "${API_HOST:=http://localhost}"
-: "${API_PORT:=80}"
+: "${API_PORT:=7070}"
 # Create runtime config file in writable location
 cat > /runtime-config/config.js <<EOF
 window.__APP_CONFIG__ = {

nginx.conf.template

@@ -32,7 +32,7 @@ http {
     }
 
     server {
-        listen 80;
+        listen 7070;
         server_name localhost;
         root /usr/share/nginx/html;
         index index.html;
@@ -57,7 +57,7 @@ http {
         }
 
         location /api/ {
-            proxy_pass http://backend;
+            proxy_pass http://backend:8080/;
 
             # Headers for both simple and preflight requests
             add_header 'Access-Control-Allow-Origin' '$http_origin' always;

src/App.vue

@@ -35,6 +35,10 @@
     <main class="app-main pt-[60px]">
       <Toast/>
       <RouterView/>
+      <ImportModal
+          :visible="importModalVisibility"
+          @update:visible="importModalVisibility = false"
+      />
     </main>
   </div>
 </template>
@@ -44,9 +48,11 @@ import {ref} from "vue";
 import {useRouter} from "vue-router";
 import Toast from 'primevue/toast';
 import {useAuthStore} from "./stores/auth.ts";
+import ImportModal from "@/components/ImportModal.vue";
 
 const authStore = useAuthStore();
 const router = useRouter();
+const importModalVisibility = ref(false);
 
 const items = ref([
   {
@@ -83,6 +89,11 @@ const items = ref([
     command: () => {
       router.push('/jobs');
     }
+  },
+  {
+    label: 'Import Set',
+    icon: 'pi pi-mobile',
+    command: () => importModalVisibility.value = true
   }
 ]);
 </script>

src/components.d.ts

@@ -19,11 +19,13 @@ declare module 'vue' {
     Column: typeof import('primevue/column')['default']
     CustomTag: typeof import('./components/CustomTag.vue')['default']
     DataTable: typeof import('primevue/datatable')['default']
+    Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
     DynamicAsset: typeof import('./components/DynamicAsset.vue')['default']
     Fieldset: typeof import('primevue/fieldset')['default']
     FloatLabel: typeof import('primevue/floatlabel')['default']
     Image: typeof import('primevue/image')['default']
+    ImportModal: typeof import('./components/ImportModal.vue')['default']
     InputNumber: typeof import('primevue/inputnumber')['default']
     InputText: typeof import('primevue/inputtext')['default']
     LinkArrowsComponent: typeof import('./components/LinkArrowsComponent.vue')['default']

src/components/ImportModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <Dialog
+      v-model:visible="visible"
+      @update:visible="$emit('update:visible', visible)"
+      modal
+      header="Edit Profile"
+      :style="{ width: '25rem' }"
+      :draggable="false"
+  >
+    <template #header>
+      <div class="inline-flex items-center justify-center gap-2">
+        <span class="font-bold whitespace-nowrap">Import Set</span>
+      </div>
+    </template>
+    <div class="flex items-center gap-4 mb-4">
+      <label for="setName" class="font-semibold w-24">Set Name</label>
+      <InputText id="setName" v-model="cardSetName" class="flex-auto" autocomplete="off" />
+    </div>
+    <template #footer>
+      <Button label="Cancel" text severity="secondary" @click="visible = false" autofocus />
+      <Button
+          label="Import"
+          :disabled="!cardSetName"
+          outlined
+          severity="primary"
+          @click="startSetScrapeJob(cardSetName)"
+          autofocus
+      />
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {inject, ref, type Ref, watch} from "vue";
+import {SetServiceKey} from "@/main.ts";
+import {SetService} from "@/api/openapi";
+import {useToast} from "primevue";
+
+const emit = defineEmits(['update:visible'])
+const toast = useToast();
+const loading: Ref<boolean> = ref(false);
+const visible: Ref<boolean> = defineModel("visible", {
+  required: true
+})
+
+const cardSetName: Ref<string | null> = ref(null)
+
+const setService: SetService = inject(SetServiceKey) as SetService
+
+const startSetScrapeJob = async (name: string | null) => {
+  if (!name) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await setService.scrapeSetByName({
+      name: name
+    })
+
+    toast.add({
+      severity: "info",
+      detail: `Import Job for '${cardSetName}' has been started'`
+    })
+  } catch (e) {
+    toast.add({
+      severity: "error",
+      detail: "Error occurred trying to import CardSet - see logs for details"
+    })
+  } finally {
+    loading.value = false;
+    visible.value = false;
+    emit('update:visible', visible)
+  }
+}
+
+watch(visible, (newValue: boolean) => {
+  if (!newValue) {
+    cardSetName.value = null;
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

vite.config.ts

@@ -24,6 +24,13 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     }
   },
+  proxy: {
+    '/api': {
+      target: 'http://localhost:8080',
+      changeOrigin: true,
+      secure: false,
+    }
+  },
   build: {
     // @ts-ignore
     assetsInclude: [