settings form

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

@@ -3,6 +3,19 @@
     <v-card-title> General Settings </v-card-title>
     <v-divider></v-divider>
     <v-card-text>
+      <h2 class="mt-1 mb-1">Home Page</h2>
+      <v-row>
+        <v-col> Section Selector </v-col>
+        <v-col cols="2">
+          <v-text-field label="Card Limit"></v-text-field>
+        </v-col>
+        <v-spacer> </v-spacer>
+        <v-spacer> </v-spacer>
+      </v-row>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h2 class="mt-1 mb-1">Language</h2>
       <v-row>
         <v-col>
           <v-select
@@ -18,6 +31,7 @@
         <v-spacer></v-spacer>
       </v-row>
     </v-card-text>
+    <v-divider></v-divider>
   </v-card>
 </template>
 

frontend/src/components/UI/CardSection.vue

@@ -50,11 +50,12 @@ export default {
   props: {
     title: String,
     recipes: Array,
+    cardLimit: {
+      default: 6,
+    },
   },
   data() {
-    return {
-      cardLimit: 6,
-    };
+    return {};
   },
 };
 </script>

frontend/src/pages/HomePage.vue

@@ -1,11 +1,16 @@
 <template>
   <div>
-    <CardSection v-if="showRecent" title="Recent" :recipes="recentRecipes" />
+    <CardSection
+      v-if="pageSettings.showRecent"
+      title="Recent"
+      :recipes="recentRecipes"
+    />
     <CardSection
       v-for="section in recipeByCategory"
       :key="section.title"
       :title="section.title"
       :recipes="section.recipes"
+      :limit="pageSettings.showLimit"
     />
   </div>
 </template>
@@ -18,7 +23,6 @@ export default {
   },
   data() {
     return {
-      showRecent: true,
       recipeByCategory: [
         {
           title: "Title 1",
@@ -35,6 +39,9 @@ export default {
     recentRecipes() {
       return this.$store.getters.getRecentRecipes;
     },
+    pageSettings() {
+      return this.$store.getters.getHomePageSettings;
+    },
   },
   methods: {
     getRecentRecipes() {

frontend/src/store/modules/recipes.js

@@ -0,0 +1 @@
+c

frontend/src/store/store.js

@@ -18,6 +18,12 @@ const store = new Vuex.Store({
     language,
   },
   state: {
+    // Home Page Settings
+    homePage: {
+      showRecent: true,
+      showLimit: 9,
+      categories: [],
+    },
     // Snackbar
     snackActive: false,
     snackText: "",
@@ -29,6 +35,9 @@ const store = new Vuex.Store({
   },
 
   mutations: {
+    setHomePage(state, payload) {
+      state.homePage = payload;
+    },
     setSnackBar(state, payload) {
       state.snackText = payload.text;
       state.snackType = payload.type;
@@ -61,11 +70,12 @@ const store = new Vuex.Store({
 
   getters: {
     //
-    getSnackText: state => state.snackText,
-    getSnackActive: state => state.snackActive,
-    getSnackType: state => state.snackType,
+    getSnackText: (state) => state.snackText,
+    getSnackActive: (state) => state.snackActive,
+    getSnackType: (state) => state.snackType,
 
-    getRecentRecipes: state => state.recentRecipes,
+    getRecentRecipes: (state) => state.recentRecipes,
+    getHomePageSettings: (state) => state.homePage,
   },
 });