feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/Buttons/TheDownloadBtn.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-btn color="accent" text :loading="downloading" @click="downloadFile">
+    {{ showButtonText }}
+  </v-btn>
+</template>
+
+<script>
+/**
+ * The download button used for the entire site
+ * pass a URL to the endpoint that will return a
+ * file_token which will then be used to request the file
+ * from the server and open that link in a new tab
+ */
+import { apiReq } from "@/api/api-utils";
+export default {
+  props: {
+    /**
+     * URL to get token from
+     */
+    downloadUrl: {
+      default: "",
+    },
+    /**
+     * Override button text. Defaults to "Download"
+     */
+    buttonText: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      downloading: false,
+    };
+  },
+  computed: {
+    showButtonText() {
+      return this.buttonText || this.$t("general.download");
+    },
+  },
+  methods: {
+    async downloadFile() {
+      this.downloading = true;
+      await apiReq.download(this.downloadUrl);
+      this.downloading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/components/UI/Buttons/TheUploadBtn.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-form ref="file">
+    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
+    <v-btn
+      :loading="isSelecting"
+      @click="onButtonClick"
+      color="accent"
+      :text="textBtn"
+    >
+      <v-icon left> {{ icon }}</v-icon>
+      {{ text ? text : defaultText }}
+    </v-btn>
+  </v-form>
+</template>
+
+<script>
+const UPLOAD_EVENT = "uploaded";
+import { api } from "@/api";
+export default {
+  props: {
+    post: {
+      type: Boolean,
+      default: true,
+    },
+    url: String,
+    text: { default: "Upload" },
+    icon: { default: "mdi-cloud-upload" },
+    fileName: { default: "archive" },
+    textBtn: {
+      default: true,
+    },
+  },
+  data: () => ({
+    file: null,
+    isSelecting: false,
+  }),
+
+  computed: {
+    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;
+        }
+
+        let formData = new FormData();
+        formData.append(this.fileName, this.file);
+
+        await api.utils.uploadFile(this.url, formData);
+
+        this.isSelecting = false;
+        this.$emit(UPLOAD_EVENT);
+      }
+    },
+    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>