web: add support for adding a license

web/src/client.ts

@@ -0,0 +1,11 @@
+import axios from "axios";
+import { store } from "@/store";
+let axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_BACKEND_URL,
+});
+axiosInstance.interceptors.request.use((config) => {
+  config.headers.Authorization = `Bearer ${store.token}`;
+  return config;
+});
+
+export { axiosInstance };

web/src/components/HeaderBar.vue

@@ -215,6 +215,9 @@
       </v-btn>
     </v-toolbar>
   </div>
+  <v-snackbar v-model="snackbar" :timeout="2000" elevation="24" location="top">
+    <span> Who am I??? </span>
+  </v-snackbar>
 </template>
 
 <script setup lang="ts">
@@ -222,9 +225,12 @@ import { store } from "@/store";
 import { SubmitEventPromise } from "vuetify";
 import { ref } from "vue";
 import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
-import { useQuery } from "@tanstack/vue-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
 import axios from "axios";
-import { LicenseGroup } from "@/types";
+import { axiosInstance } from "@/client";
+import { LicenseGroup, CreateLicenseDto } from "@/types";
+
+const queryClient = useQueryClient();
 
 const { data } = useQuery({
   queryKey: ["licenses"],
@@ -249,14 +255,27 @@ const { data } = useQuery({
   },
 });
 
+const { isPending, mutate } = useMutation({
+  mutationFn: async (newLicense: CreateLicenseDto) => {
+    await axiosInstance.post("/licenses", newLicense);
+  },
+  onError: (error) => {
+    snackbar.value = true;
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    add.value = false;
+  },
+});
+
 function handlelogout() {
   store.setToken(null);
 }
 
 async function submit(event: SubmitEventPromise) {
   const result = await event;
-  if (result.valid) {
+  if (result.valid && addLicenseGroup.value) {
-    console.log({
+    const data = {
       name: addLicenseName.value,
       group_id: addLicenseGroup.value,
       amount: addAmount.value,
@@ -264,12 +283,16 @@ async function submit(event: SubmitEventPromise) {
       start: addStartDate.value,
       stop: addStopDate.value,
       notes: addNotes.value,
-    });
+    };
+    console.log(data);
+    mutate(data);
   } else {
     console.log("Invalid");
   }
 }
 
+const snackbar = ref(false);
+
 //
 // GROUP SECTION
 //

web/src/components/MainPage.vue

@@ -20,21 +20,13 @@
 import HeaderBar from "./HeaderBar.vue";
 import CategoryContainer from "./CategoryContainer.vue";
 import { useQuery } from "@tanstack/vue-query";
-import axios from "axios";
+import { axiosInstance } from "@/client";
-import { store } from "@/store";
 import { LicenseGroup } from "@/types";
 
 const { isPending, isError, data, error } = useQuery({
   queryKey: ["licenses"],
   queryFn: async () => {
-    const res = await axios.get<LicenseGroup[]>(
+    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
-      import.meta.env.VITE_BACKEND_URL + "/licenses",
-      {
-        headers: {
-          Authorization: `Bearer ${store.token}`,
-        },
-      }
-    );
     return res.data;
   },
 });

web/src/types.ts

@@ -12,3 +12,5 @@ export interface License {
   key: string;
   amount?: number;
 }
+
+export type CreateLicenseDto = Omit<License, "id"> & { group_id: string };