Alisa/web/src/components/ListViewElement.vue

<template>
  <v-sheet elevation="4" width="96vw" rounded="lg" class="mt-3">
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-title>
          <div class="mr-3">
            {{ props.licenseName }}
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <KeyRound class="mr-1" />
            {{ props.licenseKey }}
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <CalendarCheck />
            <span>
              {{
                props.startDate
                  ? props.startDate.toLocaleDateString()
                  : "Indefinitely"
              }}
            </span>
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <CalendarX />
            <span>
              {{
                props.endDate
                  ? props.endDate.toLocaleDateString()
                  : "Indefinitely"
              }}
            </span>
          </div>

          <div
            class="mr-3 d-flex align-self-center"
            style="align-items: center"
          >
            <img
              src="../assets/doublekey.svg"
              alt="logo"
              class="logo mr-1"
              width="24"
            />
            <span v-if="props.amount == null || props.amount == undefined">
              <Infinity />
            </span>
            <span v-else>
              {{ props.amount }}
            </span>
          </div>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          Notes:
          <div class="flex-nowrap d-flex" no-gutters>
            <div
              class="flex-grow-1 overflow-x-auto border-e-md align-self-end"
              cols="10"
            >
              {{ props.notes }}
            </div>

            <div align="end">
              <!--              -->
              <!-- EDIT SECTION -->
              <!--              -->
              <v-btn class="mr-3" @click="edit" 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">Add License</span>
                    </v-card-title>
                    <v-card-subtitle>
                      <span> Add an extra License to 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="Add"
                            type="submit"
                            color="blue darken-1"
                          ></v-btn>
                        </v-col>
                      </v-row>
                    </v-card-actions>
                  </v-form>
                </v-card>
              </v-dialog>
              <!--                 -->
              <!--   DELETE BTN    -->
              <!--                 -->
              <v-btn class="mr-3" flat size="small" color="red" variant="text">
                <Trash />
              </v-btn>
            </div>
          </div>
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-sheet>
</template>

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

const props = defineProps<{
  id: string;
  licenseName: string;
  licenseKey: string;
  startDate: Date | null;
  endDate: Date | null;
  amount?: number;
  notes?: string;
}>();

//  EDIT SECTION

const edit = ref(false);
const editLicenseName = ref("");
const editLicenseGroup = ref();
const editAmount = ref();
const editLicenseKey = ref("");
const editStartDate = ref<Date | null>();
const editStopDate = ref<Date | null>();
const editNotes = ref<string | undefined>("");

//Give initial values to the fields
editLicenseName.value = props.licenseName;
editLicenseKey.value = props.licenseKey;
editAmount.value = props.amount;
editStartDate.value = props.startDate;
editStopDate.value = props.endDate;
editNotes.value = props.notes;

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 ?? null,
      end: editStopDate.value ?? null,
      notes: editNotes.value,
    };
    console.log(editData);
    editMutate(editData);
  } else {
    console.log("Invalid");
  }
}

const queryClient = useQueryClient();

const gyros = props.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>
.values {
  display: flex;
  align-items: center;
}
</style>