remove console.log + refactor categories

frontend/src/api/mealplan.js

@@ -16,7 +16,6 @@ const mealPlanURLs = {
 export default {
   async create(postBody) {
     let response = await apiReq.post(mealPlanURLs.create, postBody);
-    console.log(JSON.stringify(postBody));
     return response;
   },
 

frontend/src/components/Settings/Backup/NewBackupCard.vue

@@ -101,7 +101,6 @@ export default {
         templates: this.selectedTemplates,
       };
 
-      console.log(data);
 
       await api.backups.create(data);
       this.loading = false;

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

@@ -75,7 +75,6 @@ export default {
       let response = await api.backups.requestAvailable();
       this.availableBackups = response.imports;
       this.availableTemplates = response.templates;
-      console.log(this.availableBackups);
     },
     deleteBackup() {
       if (this.$refs.form.validate()) {

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

@@ -41,14 +41,14 @@
                 >
                   <v-list-item
                     v-for="(item, index) in homeCategories"
-                    :key="item"
+                    :key="`${item.name}-${index}`"
                   >
                     <v-list-item-icon>
                       <v-icon>mdi-menu</v-icon>
                     </v-list-item-icon>
 
                     <v-list-item-content>
-                      <v-list-item-title v-text="item"></v-list-item-title>
+                      <v-list-item-title v-text="item.name"></v-list-item-title>
                     </v-list-item-content>
                     <v-list-item-icon @click="deleteActiveCategory(index)">
                       <v-icon>mdi-delete</v-icon>
@@ -81,13 +81,16 @@
                     minHeight: `200px`,
                   }"
                 >
-                  <v-list-item v-for="item in categories" :key="item">
+                  <v-list-item
+                    v-for="(item, index) in categories"
+                    :key="`${item.name}-${index}`"
+                  >
                     <v-list-item-icon>
                       <v-icon>mdi-menu</v-icon>
                     </v-list-item-icon>
 
                     <v-list-item-content>
-                      <v-list-item-title v-text="item"></v-list-item-title>
+                      <v-list-item-title v-text="item.name"></v-list-item-title>
                     </v-list-item-content>
                     <v-list-item-icon @click="deleteActiveCategory(index)">
                       <v-icon>mdi-delete</v-icon>
@@ -142,8 +145,10 @@ export default {
       this.homeCategories.splice(index, 1);
     },
     saveSettings() {
-      console.log("Saving Settings");
+
-      console.log(this.homeCategories);
+      this.homeCategories.forEach((element, index) => {
+        element.position = index + 1;
+      });
       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

@@ -58,7 +58,6 @@ export default {
   methods: {
     getOptions() {
       this.langOptions = this.$store.getters.getAllLangs;
-      console.log(this.langOptions);
       this.selectedLang = this.$store.getters.getActiveLang;
     },
   },

frontend/src/components/Settings/Migration/MigrationCard.vue

@@ -81,7 +81,6 @@ export default {
     async importMigration(file_name) {
       this.loading == true;
       let response = await api.migrations.import(this.folder, file_name);
-      console.log(response);
       this.$emit("imported", response.successful, response.failed);
       this.loading == false;
     },

frontend/src/components/UI/CategorySidebar.vue

@@ -5,7 +5,7 @@
         <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-title>{{ nav.title | titleCase }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>
@@ -15,7 +15,8 @@
 export default {
   data() {
     return {
-      links: [
+      links: [],
+      baseLinks: [
         {
           icon: "mdi-home",
           to: "/",
@@ -34,15 +35,28 @@ export default {
       return this.$store.getters.getCategories;
     },
   },
+  watch: {
+    allCategories() {
+      this.buildSidebar();
+    },
+  },
   mounted() {
+    this.buildSidebar();
+  },
+
+  methods: {
+    async buildSidebar() {
+      this.links = [];
+      this.links.push(...this.baseLinks);
       this.allCategories.forEach(async (element) => {
         this.links.push({
-        title: element,
+          title: element.name,
-        to: `/recipes/${element}`,
+          to: `/recipes/${element.slug}`,
           icon: "mdi-tag",
         });
       });
     },
+  },
 };
 </script>
 

frontend/src/components/UI/SearchBar.vue

@@ -82,7 +82,6 @@ export default {
     search() {
       if (this.search.trim() === "") this.result = this.list;
       else this.result = this.fuse.search(this.search.trim());
-      console.log("test");
 
       this.$emit("results", this.result);
       if (this.showResults === true) {

frontend/src/components/UI/SearchDialog.vue

@@ -61,7 +61,6 @@ export default {
       this.searchResults = results;
     },
     emitSelect(name, slug) {
-      console.log(name, slug);
       this.$emit("select", name, slug);
       this.dialog = false;
     },

frontend/src/main.js

@@ -14,17 +14,16 @@ const router = new VueRouter({
   mode: process.env.NODE_ENV === "production" ? "history" : "hash",
 });
 
-
 new Vue({
   vuetify,
   store,
   router,
   i18n,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount("#app");
 
 // Truncate
-let filter = function(text, length, clamp) {
+let truncate = function (text, length, clamp) {
   clamp = clamp || "...";
   let node = document.createElement("div");
   node.innerHTML = text;
@@ -32,6 +31,11 @@ let filter = function(text, length, clamp) {
   return content.length > length ? content.slice(0, length) + clamp : content;
 };
 
-Vue.filter("truncate", filter);
+let titleCase = function (value) {
+  return value.replace(/(?:^|\s|-)\S/g, (x) => x.toUpperCase());
+};
+
+Vue.filter("truncate", truncate);
+Vue.filter("titleCase", titleCase);
 
 export { router };

frontend/src/pages/HomePage.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    <CategorySidebar/>
+    <CategorySidebar />
-
     <CardSection
       v-if="showRecent"
       title="Recent"
@@ -11,7 +10,7 @@
     <CardSection
       :sortable="true"
       v-for="(section, index) in recipeByCategory"
-      :key="index"
+      :key="section.name + section.position"
       :title="section.name"
       :recipes="section.recipes"
       :card-limit="showLimit"
@@ -50,12 +49,17 @@ export default {
     },
   },
   async mounted() {
+    await this.buildPage();
+    this.recipeByCategory.sort((a, b) => a.position - b.position);
+  },
+  methods: {
+    async buildPage() {
       this.homeCategories.forEach(async (element) => {
-      let recipes = await this.getRecipeByCategory(element);
+        let recipes = await this.getRecipeByCategory(element.slug);
+        recipes.position = element.position;
         this.recipeByCategory.push(recipes);
       });
     },
-  methods: {
     async getRecipeByCategory(category) {
       return await api.categories.get_recipes_in_category(category);
     },