Alisa/web/src/components/UpdateDialog.vue

<template>
  <v-btn class="mr-3" @click="edit = true" flat size="small">
    <Pencil />
  </v-btn>
  <v-dialog v-model="edit" width="600" persistent>
    <v-card max-width="600">
      <v-form @submit.prevent="submitEdit">
        <v-card-title>
          <span class="headline">Edit License</span>
        </v-card-title>
        <v-card-subtitle>
          <span>Edit a License inside the database</span>
        </v-card-subtitle>
        <v-card-text>
          <div>
            <v-text-field
              label="License Name *"
              v-model="editLicenseName"
              variant="outlined"
              required
              clearable
              :rules="editNameRules"
              class="mb-3"
            ></v-text-field>
            <v-text-field
              label="License Key *"
              v-model="editLicenseKey"
              variant="outlined"
              required
              clearable
              :rules="editNameRules"
              class="mb-3"
            ></v-text-field>
            <v-autocomplete
              clearable
              label="Select Group *"
              :items="data"
              variant="outlined"
              :rules="editNameRules"
              class="mb-1"
              v-model="editLicenseGroup"
            ></v-autocomplete>
            <!-- Divider maybe remove -->
            <v-divider class="border-opacity-50" :thickness="2"></v-divider>
            <div>
              <div class="mb-3 mt-3">
                <v-date-input
                  label="Start Date (optional)"
                  variant="outlined"
                  prepend-icon=""
                  prepend-inner-icon="mdi-calendar-check"
                  clearable
                  v-model="editStartDate"
                  hide-details
                ></v-date-input>
              </div>
              <div class="mb-6">
                <v-date-input
                  label="Stop Date (optional)"
                  variant="outlined"
                  prepend-icon=""
                  prepend-inner-icon="mdi-calendar-remove"
                  clearable
                  v-model="editStopDate"
                  hide-details
                ></v-date-input>
              </div>
            </div>
            <v-number-input
              label="Amount (optional)"
              users
              variant="outlined"
              clearable
              :min="0"
              v-model="editAmount"
            >
            </v-number-input>
            <v-text-field
              label="Notes (optional)"
              v-model="editNotes"
              variant="outlined"
              clearable
            ></v-text-field>
            <span class="dialogNote">
              all fields marked with * are required
            </span>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-row>
            <v-col cols="10" align="right" no-gutters>
              <v-btn
                class="ms-auto"
                text="Cancel"
                color="blue darken-1"
                @click="edit = false"
              ></v-btn>
            </v-col>
            <v-col>
              <v-btn
                class="ms-auto"
                text="Update"
                type="submit"
                color="blue darken-1"
              ></v-btn>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-form>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { Pencil } from "lucide-vue-next";
import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
import { axiosInstance } from "@/client";
import { SubmitEventPromise } from "vuetify";
import { LicenseGroup, UpdateLicenseDto, License } from "@/types";
import { ref } from "vue";

const { license } = defineProps<{
  license: License;
}>();

//  EDIT SECTION

const edit = ref(false);
const editLicenseName = ref(license.name);
const editLicenseGroup = ref(license.group_id);
const editAmount = ref(license.amount);
const editLicenseKey = ref(license.key);
const editStartDate = ref<Date | null>(
  license.start ? new Date(license.start) : null
);
const editStopDate = ref<Date | null>(
  license.end ? new Date(license.end) : null
);
const editNotes = ref<string | undefined>(license.note);

const editNameRules = [
  (value: string) => {
    if (value) return true;

    return "YOU MUST ENTER (A GROUP NAME)";
  },
];

async function submitEdit(event: SubmitEventPromise) {
  const result = await event;
  if (result.valid) {
    const editData = {
      name: editLicenseName.value,
      group_id: editLicenseGroup.value,
      amount: editAmount.value,
      key: editLicenseKey.value,
      start: editStartDate.value
        ? editStartDate.value.toISOString()
        : undefined,
      end: editStopDate.value ? editStopDate.value.toISOString() : undefined,
      note: editNotes.value,
    };
    console.log(editData);
    editMutate(editData);
  } else {
    console.log("Invalid");
  }
}

const queryClient = useQueryClient();

const gyros = license.id;

const { mutate: editMutate } = useMutation({
  mutationFn: async (newEdit: UpdateLicenseDto) => {
    await axiosInstance.put(`/licenses/${gyros}`, newEdit);
  },
  onError: (error) => {
    console.log(error);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["licenses"] });
    edit.value = false;
  },
});

const { data } = useQuery({
  queryKey: ["licenses"],
  queryFn: async () => {
    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
    return res.data;
  },
  select: (data) => {
    return data.map((group) => {
      return {
        title: group.name,
        value: group.id,
      };
    });
  },
});
</script>

<style scoped></style>