feat(frontend): 🚧 CRUD Functionality

frontend/components/global/AppButtonCopy.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-tooltip
+    ref="copyToolTip"
+    v-model="show"
+    color="success lighten-1"
+    top
+    :open-on-hover="false"
+    :open-on-click="true"
+    close-delay="500"
+    transition="slide-y-transition"
+  >
+    <template #activator="{ on }">
+      <v-btn
+        icon
+        :color="color"
+        retain-focus-on-click
+        @click="
+          on.click;
+          textToClipboard();
+        "
+        @blur="on.blur"
+      >
+        <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
+      </v-btn>
+    </template>
+    <span>
+      <v-icon left dark>
+        {{ $globals.icons.clipboardCheck }}
+      </v-icon>
+      <slot> {{ $t("general.copied") }}! </slot>
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    copyText: {
+      default: "Default Copy Text",
+    },
+    color: {
+      default: "primary",
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+
+  methods: {
+    toggleBlur() {
+      this.$refs.copyToolTip.deactivate();
+    },
+    textToClipboard() {
+      this.show = true;
+      const copyText = this.copyText;
+      navigator.clipboard.writeText(copyText).then(
+        () => console.log("Copied", copyText),
+        () => console.log("Copied Failed", copyText)
+      );
+      setTimeout(() => {
+        this.toggleBlur();
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/components/global/AppButtonUpload.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-form ref="file">
+    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
+    <slot v-bind="{ isSelecting, onButtonClick }">
+      <v-btn :loading="isSelecting" :small="small" color="accent" :text="textBtn" @click="onButtonClick">
+        <v-icon left> {{ effIcon }}</v-icon>
+        {{ text ? text : defaultText }}
+      </v-btn>
+    </slot>
+  </v-form>
+</template>
+
+<script>
+import { api } from "@/api";
+const UPLOAD_EVENT = "uploaded";
+export default {
+  props: {
+    small: {
+      default: false,
+    },
+    post: {
+      type: Boolean,
+      default: true,
+    },
+    url: String,
+    text: String,
+    icon: { default: null },
+    fileName: { default: "archive" },
+    textBtn: {
+      default: true,
+    },
+  },
+  data: () => ({
+    file: null,
+    isSelecting: false,
+  }),
+
+  computed: {
+    effIcon() {
+      return this.icon ? this.icon : this.$globals.icons.upload;
+    },
+    defaultText() {
+      return this.$t("general.upload");
+    },
+  },
+
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.isSelecting = true;
+
+        if (!this.post) {
+          this.$emit(UPLOAD_EVENT, this.file);
+          this.isSelecting = false;
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append(this.fileName, this.file);
+
+        const response = await api.utils.uploadFile(this.url, formData);
+
+        if (response) {
+          this.$emit(UPLOAD_EVENT, response);
+        }
+        this.isSelecting = false;
+      }
+    },
+    onButtonClick() {
+      this.isSelecting = true;
+      window.addEventListener(
+        "focus",
+        () => {
+          this.isSelecting = false;
+        },
+        { once: true }
+      );
+
+      this.$refs.uploader.click();
+    },
+    onFileChanged(e) {
+      this.file = e.target.files[0];
+      this.upload();
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/components/global/BaseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <v-btn
-    :color="btnAttrs.color"
+    :color="color || btnAttrs.color"
     :small="small"
     :x-small="xSmall"
     :loading="loading"
@@ -76,6 +76,10 @@ export default {
       type: String,
       default: null,
     },
+    color: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {

frontend/components/global/BaseDialog.vue

@@ -32,7 +32,7 @@
             <v-spacer></v-spacer>
 
             <BaseButton v-if="$listeners.delete" delete secondary @click="deleteEvent" />
-            <BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="submitEvent">
+            <BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="$emit('confirm')">
               {{ $t("general.confirm") }}
             </BaseButton>
             <BaseButton v-else-if="$listeners.submit" type="submit" @click="submitEvent">