-
+
-
@@ -161,7 +186,33 @@
import { store } from "@/store";
import { SubmitEventPromise } from "vuetify";
import { ref } from "vue";
-import { Plus, LogOut, FolderPlus } from "lucide-vue-next";
+import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
+import { useQuery } from "@tanstack/vue-query";
+import axios from "axios";
+import { LicenseGroup } from "@/types";
+
+const { data } = useQuery({
+ queryKey: ["licenses"],
+ queryFn: async () => {
+ const res = await axios.get
(
+ import.meta.env.VITE_BACKEND_URL + "/licenses",
+ {
+ headers: {
+ Authorization: `Bearer ${store.token}`,
+ },
+ }
+ );
+ return res.data;
+ },
+ select: (data) => {
+ return data.map((group) => {
+ return {
+ title: group.name,
+ value: group.id,
+ };
+ });
+ },
+});
function handlelogout() {
store.setToken(null);
@@ -169,8 +220,21 @@ function handlelogout() {
async function submit(event: SubmitEventPromise) {
const result = await event;
- console.log(result);
+ if (result.valid) {
+ console.log({
+ name: addLicenseName.value,
+ group_id: addLicenseGroup.value,
+ amount: addAmount.value,
+ key: addLicenseKey.value,
+ start: addStartDate.value,
+ stop: addStopDate.value,
+ notes: addNotes.value,
+ });
+ } else {
+ console.log("Invalid");
+ }
}
+
//
// GROUP SECTION
//
@@ -178,6 +242,7 @@ async function submit(event: SubmitEventPromise) {
const group = ref(false); // Dialog for Group
const groupLicenseName = ref("");
+// Rules for Group Dialog
const licenseGroupRules = [
(value: string) => {
if (value) return true;
@@ -191,6 +256,10 @@ const licenseGroupRules = [
const add = ref(false);
// References for Add License Dialog
const addLicenseName = ref("");
+const addLicenseKey = ref("");
+const addLicenseGroup = ref();
+
+// Rules for Add License Dialog
const licenseNameRules = [
(value: string) => {
if (value) return true;
@@ -198,6 +267,22 @@ const licenseNameRules = [
return "YOU MUST ENTER (A LICENSE NAME)";
},
];
+const selectGroupRules = [
+ (value: string) => {
+ if (value) return true;
+
+ return "YOU MUST SELECT (A LICENSE GROUP)";
+ },
+];
+
+const licenseKeyRules = [
+ (value: string) => {
+ if (value) return true;
+
+ return "YOU MUST ENTER (A LICENSE KEY)";
+ },
+];
+// Optional Fields
const addAmount = ref();
const addNotes = ref("");
diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
index dce2feb..ac102b8 100644
--- a/web/src/components/MainPage.vue
+++ b/web/src/components/MainPage.vue
@@ -6,7 +6,10 @@
Error: {{ error?.message }}
@@ -19,37 +22,27 @@ import CategoryContainer from "./CategoryContainer.vue";
import { useQuery } from "@tanstack/vue-query";
import axios from "axios";
import { store } from "@/store";
+import { LicenseGroup } from "@/types";
-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({
+const { isPending, isError, data, error } = useQuery({
queryKey: ["licenses"],
queryFn: async () => {
- const res = await axios.get
(import.meta.env.VITE_BACKEND_URL + "/licenses", {
- headers: {
- Authorization: `Bearer ${store.token}`
+ const res = await axios.get(
+ import.meta.env.VITE_BACKEND_URL + "/licenses",
+ {
+ headers: {
+ Authorization: `Bearer ${store.token}`,
+ },
}
- })
- return res.data
- }
-})
+ );
+ return res.data;
+ },
+});
diff --git a/web/src/types.ts b/web/src/types.ts
new file mode 100644
index 0000000..2454aaf
--- /dev/null
+++ b/web/src/types.ts
@@ -0,0 +1,14 @@
+export interface LicenseGroup {
+ id: string;
+ name: string;
+ licenses: License[];
+}
+
+export interface License {
+ name: string;
+ id: string;
+ start?: Date;
+ end?: Date;
+ key: string;
+ amount?: number;
+}