Add CardSetImportModal

src/components/CardSetImportModal.vue

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+      modal
+      :draggable="false"
+      :dismissable-mask="true"
+      :visible="visible"
+      @update:visible="emit('update:visible', $event)"
+  >
+    <template #header>
+      <div class="inline-flex items-center justify-center gap-2">
+        <span class="font-bold whitespace-nowrap">Import Set</span>
+      </div>
+    </template>
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Import a Set by its name</span>
+    <div class="flex items-center gap-4 mb-4">
+      <label for="setName" class="font-semibold w-24">Set Name</label>
+      <InputText id="setName" class="flex-auto" autocomplete="off" v-model="cardSetName"/>
+    </div>
+    <template #footer>
+      <Button label="Cancel" text severity="secondary" @click="visible = false"/>
+      <Button label="Import" outlined severity="secondary" @click="importSet(cardSetName)"/>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {inject, ref, type Ref, watch} from "vue";
+import {SetService} from "@/api/openapi";
+import {SetServiceKey} from "@/main.ts";
+import {useToast} from "primevue";
+
+const toast = useToast();
+const emit = defineEmits(['update:visible'])
+const visible: Ref<boolean> = defineModel("visible", {
+  required: true
+})
+
+const setService: SetService = inject(SetServiceKey) as SetService;
+const cardSetName: Ref<string | null> = ref(null);
+
+const importSet = async(name: string | null) => {
+  if (!name) {
+    toast.add({
+      severity: "warn",
+      summary: `Name of Set is required to import`,
+    })
+    return;
+  }
+
+  try {
+    await setService.scrapeSetByName({
+      name: name,
+    });
+
+    toast.add({
+      severity: "info",
+      summary: `Import Job for Set '${cardSetName.value}' was started successfully`,
+    })
+  } catch (ex: unknown) {
+    toast.add({
+      severity: "error",
+      summary: `Error occurred trying to import Set '${cardSetName.value}'`,
+    })
+  } finally {
+    cardSetName.value = null;
+    visible.value = false
+  }
+}
+
+watch(visible, () => {
+  cardSetName.value = null;
+})
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -143,10 +143,6 @@ const apiUrl = import.meta.env.PROD
     ? "/"
     : `http://${getConfig().API_HOST}:${getConfig().API_PORT}`;
 
-console.log(apiUrl)
-console.log(import.meta.env.PROD)
-console.log(`http://${getConfig().API_HOST}:${getConfig().API_PORT}`)
-
 const axiosInstance = axios.create({
   baseURL: apiUrl,
   headers: {

src/views/set/SetsView.vue

@@ -1,4 +1,8 @@
 <template>
+  <CardSetImportModal
+    :visible="importModalVisible"
+    @update:visible="args => importModalVisible = args"
+  />
   <DataTable
       tableStyle="min-width: 50rem"
       dataKey="id"
@@ -16,6 +20,11 @@
       @page="handlePaging"
       @sort="handleSorting"
   >
+    <template #header>
+      <div class="flex justify-end">
+        <Button type="button" size="small" label="Import" icon="pi pi-download" @click="importModalVisible = true"/>
+      </div>
+    </template>
     <Column header="Image">
       <template #body>
         <Image alt="Image" preview class="h-64">
@@ -24,7 +33,9 @@
           </template>
           <template #image>
             <div class="overflow-hidden">
-              <img src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125" alt="image" width="650" height="650"/>
+              <img
+                  src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125"
+                  alt="image" width="650" height="650"/>
             </div>
           </template>
           <template #preview="slotProps">
@@ -46,8 +57,8 @@
       </template>
     </Column>
     <Column header="No. of Regional Sets">
-      <template #body="slotProps">
+      <template #body>
-        {{ slotProps.data.regionalSets.length }}
+        N/A
       </template>
     </Column>
     <template #footer> In total there are {{ sets ? sets.length : 0 }} Card Sets</template>
@@ -55,11 +66,12 @@
 </template>
 
 <script setup lang="ts">
-import {type SetDto, SetService} from "../../api/openapi";
+import {type SetDto, SetService} from "@/api/openapi";
 import {inject, onMounted, ref, type Ref} from "vue";
-import {SetServiceKey} from "../../main.ts";
+import {SetServiceKey} from "@/main.ts";
 import type {DataTablePageEvent, DataTableSortEvent} from "primevue";
 
+const importModalVisible: Ref<boolean> = ref(false);
 const setService: SetService = inject(SetServiceKey) as SetService;
 const loading: Ref<boolean> = ref(true);
 const sets: Ref<SetDto[]> = ref([])
@@ -72,16 +84,16 @@ const first = ref(0);
 
 const fetchCardSetPage = async (page: number, pageSize: number): Promise<void> => {
   loading.value = true;
-  const cardPage = (await setService.getCardSetPage({
+  const setPage = (await setService.getCardSetPage({
         name: null,
         page: page,
         pageSize: pageSize
       }
   )).data
 
-  sets.value = cardPage.content
+  sets.value = setPage.content
-  pageCount.value = cardPage.totalPages!!
+  pageCount.value = setPage.totalPages!!
-  totalRecords.value = cardPage.totalRecords!!
+  totalRecords.value = setPage.totalRecords!!
   loading.value = false;
 }