55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<HeaderBar />
|
|
<div class="ma-8">
|
|
<div v-if="isPending">Loading...</div>
|
|
<div v-else-if="isError">Error: {{ error?.message }}</div>
|
|
<ul v-else-if="data">
|
|
<li v-for="group in data" :key="group.id">
|
|
<CategoryContainer :licenseGroupName="group.name" :licenses="group.licenses" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import HeaderBar from "./HeaderBar.vue";
|
|
import CategoryContainer from "./CategoryContainer.vue";
|
|
import { useQuery } from "@tanstack/vue-query";
|
|
import axios from "axios";
|
|
import { store } from "@/store";
|
|
|
|
interface LicenseGroup {
|
|
id: string,
|
|
name: string,
|
|
licenses: License[]
|
|
}
|
|
|
|
interface License {
|
|
name: string;
|
|
id: string;
|
|
start?: Date,
|
|
end?: Date,
|
|
key: string,
|
|
amount?: number,
|
|
}
|
|
|
|
const {isPending, isError, data, error} = useQuery({
|
|
queryKey: ["licenses"],
|
|
queryFn: async () => {
|
|
const res = await axios.get<LicenseGroup[]>(import.meta.env.VITE_BACKEND_URL + "/licenses", {
|
|
headers: {
|
|
Authorization: `Bearer ${store.token}`
|
|
}
|
|
})
|
|
return res.data
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
li, ul {
|
|
list-style-type: none;
|
|
}
|
|
</style>
|