frontend category management

frontend/src/components/Settings/General/HomePageSettings.vue

@@ -119,36 +119,34 @@ export default {
   },
   data() {
     return {
-      homeCategories: [],
+      homeCategories: null,
       showLimit: null,
-      categories: ["breakfast"],
       showRecent: true,
     };
   },
   mounted() {
     this.getOptions();
   },
-
+  computed: {
+    categories() {
+      return this.$store.getters.getCategories;
+    },
+  },
   methods: {
     getOptions() {
-      let options = this.$store.getters.getHomePageSettings;
-      this.showLimit = options.showLimit;
-      this.categories = options.categories;
-      this.showRecent = options.showRecent;
-      this.homeCategories = options.homeCategories;
+      this.showLimit = this.$store.getters.getShowLimit;
+      this.showRecent = this.$store.getters.getShowRecent;
+      this.homeCategories = this.$store.getters.getHomeCategories;
     },
     deleteActiveCategory(index) {
       this.homeCategories.splice(index, 1);
     },
     saveSettings() {
-      let payload = {
-        showRecent: this.showRecent,
-        showLimit: this.showLimit,
-        categories: this.categories,
-        homeCategories: this.homeCategories,
-      };
-
-      this.$store.commit("setHomePageSettings", payload);
+      console.log("Saving Settings");
+      console.log(this.homeCategories);
+      this.$store.commit("setShowRecent", this.showRecent);
+      this.$store.commit("setShowLimit", this.showLimit);
+      this.$store.commit("setHomeCategories", this.homeCategories);
     },
   },
 };

frontend/src/components/Settings/General/index.vue

@@ -43,22 +43,14 @@ export default {
   },
   data() {
     return {
-      categories: ["cat 1", "cat 2", "cat 3"],
-      usedCategories: ["recent"],
       langOptions: [],
       selectedLang: "en",
-      homeOptions: {
-        recipesToShow: 10,
-      },
     };
   },
   mounted() {
     this.getOptions();
   },
   watch: {
-    usedCategories() {
-      console.log(this.usedCategories);
-    },
     selectedLang() {
       this.$store.commit("setLang", this.selectedLang);
     },
@@ -66,6 +58,7 @@ export default {
   methods: {
     getOptions() {
       this.langOptions = this.$store.getters.getAllLangs;
+      console.log(this.langOptions);
       this.selectedLang = this.$store.getters.getActiveLang;
     },
   },

frontend/src/components/UI/CategorySidebar.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-navigation-drawer width="175px" clipped app permanent expand-on-hover>
+    <v-list nav dense>
+      <v-list-item v-for="nav in links" :key="nav.title" link :to="nav.to">
+        <v-list-item-icon>
+          <v-icon>{{ nav.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>{{ nav.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      links: [
+        {
+          icon: "mdi-home",
+          to: "/",
+          title: "Home",
+        },
+        {
+          icon: "mdi-view-module",
+          to: "/recipes/all",
+          title: "All Recipes",
+        },
+      ],
+    };
+  },
+  computed: {
+    allCategories() {
+      return this.$store.getters.getCategories;
+    },
+  },
+  mounted() {
+    this.allCategories.forEach(async (element) => {
+      this.links.push({
+        title: element,
+        to: `/recipes/${element}`,
+        icon: "mdi-tag",
+      });
+    });
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/UploadBtn.vue

@@ -3,7 +3,7 @@
     <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
     <v-btn :loading="isSelecting" @click="onButtonClick" color="accent" text>
       <v-icon left> mdi-cloud-upload </v-icon>
-      {{ $t('general.upload') }}
+      {{ $t("general.upload") }}
     </v-btn>
   </v-form>
 </template>
@@ -15,7 +15,6 @@ export default {
     url: String,
   },
   data: () => ({
-    defaultButtonText: this.$t("general.upload"),
     file: null,
     isSelecting: false,
   }),