set initial selection for category button

frontend/src/App.vue

@@ -78,6 +78,7 @@ export default {
     this.$store.dispatch("requestRecentRecipes");
     this.$store.dispatch("refreshToken");
     this.$store.dispatch("requestCurrentGroup");
+    this.$store.dispatch("requestCategories");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();
   },

frontend/src/api/category.js

@@ -10,7 +10,7 @@ const categoryURLs = {
 };
 
 export default {
-  async get_all() {
+  async getAll() {
     let response = await apiReq.get(categoryURLs.get_all);
     return response.data;
   },

frontend/src/api/mealplan.js

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

frontend/src/components/Admin/Backup/ImportSummaryDialog/index.vue

@@ -141,7 +141,6 @@ export default {
       return numbers;
     },
     open(importData) {
-      console.log(importData);
       this.recipeData = importData.recipeImports;
       this.themeData = importData.themeImports;
       this.settingsData = importData.settingsImports;

frontend/src/components/Admin/General/CreatePageDialog.vue

@@ -12,14 +12,18 @@
 
         <v-spacer></v-spacer>
       </v-app-bar>
-      <v-form ref="newGroup" @submit="submitForm">
+      <v-form ref="newGroup" @submit.prevent="submitForm">
         <v-card-text>
           <v-text-field
             autofocus
             v-model="page.name"
             label="Page Name"
           ></v-text-field>
-          <CategorySelector v-model="page.categories" />
+          <CategorySelector
+            v-model="page.categories"
+            ref="categoryFormSelector"
+            @mounted="catMounted = true"
+          />
         </v-card-text>
 
         <v-card-actions>
@@ -46,6 +50,7 @@ export default {
   },
   data() {
     return {
+      catMounted: false,
       title: "",
       buttonText: "",
       create: false,
@@ -57,16 +62,9 @@ export default {
       },
     };
   },
-  mounted() {
-    this.page = {
-      name: "",
-      position: 0,
-      categories: [],
-    };
-  },
   watch: {
-    page() {
-      console.log(this.page);
+    catMounted(val) {
+      if (val) this.pushSelected();
     },
   },
   methods: {
@@ -76,6 +74,11 @@ export default {
       this.buttonText = parameters.buttonText;
       this.title = parameters.title;
       this.pageDialog = true;
+
+      if (this.catMounted) this.pushSelected();
+    },
+    pushSelected() {
+      this.$refs.categoryFormSelector.setInit(this.page.categories);
     },
     async submitForm() {
       if (this.create) {

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

@@ -38,7 +38,7 @@
               </v-icon>
 
               <v-toolbar-title class="headline">
-                {{$t('settings.homepage.home-page-sections')}}
+                {{ $t("settings.homepage.home-page-sections") }}
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
@@ -80,7 +80,7 @@
               </v-icon>
 
               <v-toolbar-title class="headline">
-                {{$t('settings.homepage.all-categories')}}
+                {{ $t("settings.homepage.all-categories") }}
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
@@ -153,13 +153,12 @@ export default {
   },
   computed: {
     allCategories() {
-      return this.$store.getters.getCategories;
+      return this.$store.getters.getAllCategories;
     },
   },
 
   methods: {
     writeLang(val) {
-      console.log(val);
       this.settings.language = val;
     },
     deleteCategoryfromDatabase(category) {

frontend/src/components/FormHelpers/CategorySelector.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import api from "@/api";
+const MOUNTED_EVENT = "mounted";
 export default {
   props: {
     value: Array,
@@ -24,21 +24,24 @@ export default {
   data() {
     return {
       selected: [],
-      allCategories: [],
     };
   },
-  watch: {
-    value() {
-      this.selected = this.value;
-    },
+  mounted() {
+    this.$emit(MOUNTED_EVENT);
   },
-  async created() {
-    this.allCategories = await api.categories.get_all();
+
+  computed: {
+    allCategories() {
+      return this.$store.getters.getAllCategories;
+    },
   },
   methods: {
     emitChange() {
       this.$emit("input", this.selected);
     },
+    setInit(val) {
+      this.selected = val;
+    },
   },
 };
 </script>

frontend/src/components/UI/CardSection.vue

@@ -2,8 +2,8 @@
   <div class="mt-n5" v-if="recipes">
     <v-card flat class="transparent" height="60px">
       <v-card-text>
-        <v-row v-if="title != null"> 
-          <v-col >
+        <v-row v-if="title != null">
+          <v-col>
             <v-btn-toggle group>
               <v-btn text :to="`/recipes/${title.toLowerCase()}`">
                 {{ title.toUpperCase() }}
@@ -92,18 +92,13 @@ export default {
       default: false,
     },
     title: {
-      default: null
+      default: null,
     },
     recipes: Array,
     cardLimit: {
       default: 999,
     },
   },
-  watch: {
-    recipes(val) {
-      console.log(val)
-    }
-  },
   computed: {
     viewScale() {
       switch (this.$vuetify.breakpoint.name) {

frontend/src/store/index.js

@@ -26,6 +26,7 @@ const store = new Vuex.Store({
     recentRecipes: [],
     allRecipes: [],
     mealPlanCategories: [],
+    allCategories: [],
   },
 
   mutations: {
@@ -36,6 +37,9 @@ const store = new Vuex.Store({
     setMealPlanCategories(state, payload) {
       state.mealPlanCategories = payload;
     },
+    setAllCategories(state, payload) {
+      state.allCategories = payload;
+    },
   },
 
   actions: {
@@ -52,11 +56,16 @@ const store = new Vuex.Store({
 
       this.commit("setRecentRecipes", payload);
     },
+    async requestCategories({ commit }) {
+      const categories = await api.categories.getAll();
+      commit("setAllCategories", categories);
+    },
   },
 
   getters: {
     getRecentRecipes: state => state.recentRecipes,
     getMealPlanCategories: state => state.mealPlanCategories,
+    getAllCategories: state => state.allCategories,
   },
 });