frontend category placeholder

frontend/src/App.vue

@@ -58,6 +58,7 @@ export default {
   mounted() {
     this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
+    this.$store.dispatch("requestHomePageSettings");
     this.$store.dispatch("initLang");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();

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

@@ -0,0 +1,144 @@
+<template>
+  <v-card flat>
+    <v-card-text>
+      <h2 class="mt-1 mb-1">Home Page</h2>
+      <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
+        <v-col sm="2">
+          <v-switch v-model="showRecent" label="Show Recent"></v-switch>
+        </v-col>
+        <v-col>
+          <v-slider
+            class="pt-4"
+            label="Card Per Section"
+            v-model="showLimit"
+            max="30"
+            dense
+            color="primary"
+            min="3"
+            thumb-label
+          >
+          </v-slider>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+    </v-card-text>
+    <v-card-text>
+      <v-row>
+        <v-col>
+          <v-card outlined min-height="250">
+            <v-card-text class="pt-2 pb-1">
+              <h3>Homepage Categories</h3>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-list min-height="200px" dense>
+              <v-list-item-group>
+                <draggable v-model="homeCategories" group="categories">
+                  <v-list-item
+                    v-for="(item, index) in homeCategories"
+                    :key="item"
+                  >
+                    <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-content>
+                    <v-list-item-icon @click="deleteActiveCategory(index)">
+                      <v-icon>mdi-delete</v-icon>
+                    </v-list-item-icon>
+                  </v-list-item>
+                </draggable>
+              </v-list-item-group>
+            </v-list>
+          </v-card>
+        </v-col>
+        <v-col>
+          <v-card outlined min-height="250px">
+            <v-card-text class="pt-2 pb-1">
+              <h3>
+                All Categories
+                <span>
+                  <v-btn absolute right x-small color="success" icon> <v-icon>mdi-plus</v-icon></v-btn>
+                </span>
+              </h3>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-list min-height="200px" dense>
+              <v-list-item-group>
+                <draggable v-model="categories" group="categories">
+                  <v-list-item v-for="item in categories" :key="item">
+                    <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-content>
+                    <v-list-item-icon @click="deleteActiveCategory(index)">
+                      <v-icon>mdi-delete</v-icon>
+                    </v-list-item-icon>
+                  </v-list-item>
+                </draggable>
+              </v-list-item-group>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="saveSettings" class="mr-2">
+        <v-icon left> mdi-content-save </v-icon>
+        {{ $t("general.save") }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+
+export default {
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      homeCategories: [],
+      showLimit: null,
+      categories: ["breakfast"],
+      showRecent: true,
+    };
+  },
+  mounted() {
+    this.getOptions();
+  },
+
+  methods: {
+    getOptions() {
+      let options = this.$store.getters.getHomePageSettings;
+      this.showLimit = options.showLimit;
+      this.categories = options.categories;
+      this.showRecent = options.showRecent;
+      this.homeCategories = options.homeCategories;
+    },
+    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);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -4,76 +4,14 @@
       General Settings
       <v-spacer></v-spacer>
       <span>
-        <v-btn class="pt-1" text to="/docs">
+        <v-btn class="pt-1" text href="/docs">
           <v-icon left>mdi-link</v-icon>
           Local API
         </v-btn>
       </span>
     </v-card-title>
     <v-divider></v-divider>
-    <v-card-text>
+    <HomePageSettings />
-      <h2 class="mt-1 mb-1">Home Page</h2>
-      <v-slider
-        label="Card Per Section"
-        v-model="homeOptions.recipesToShow"
-        max="30"
-        dense
-        color="primary"
-        min="3"
-        thumb-label
-      >
-      </v-slider>
-    </v-card-text>
-    <v-card-text>
-      <v-row>
-        <v-col>
-          <v-card outlined min-height="250">
-            <v-card-text class="pb-1">
-              <h3>Homepage Categories</h3>
-            </v-card-text>
-            <v-divider></v-divider>
-            <v-list min-height="200px" dense>
-              <v-list-item-group>
-                <draggable v-model="usedCategories" group="categories">
-                  <v-list-item v-for="item in usedCategories" :key="item">
-                    <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-content>
-                  </v-list-item>
-                </draggable>
-              </v-list-item-group>
-            </v-list>
-          </v-card>
-        </v-col>
-        <v-col>
-          <v-card outlined min-height="250px">
-            <v-card-text class="pb-1">
-              <h3>All Categories</h3>
-            </v-card-text>
-            <v-divider></v-divider>
-            <v-list min-height="200px" dense>
-              <v-list-item-group>
-                <draggable v-model="categories" group="categories">
-                  <v-list-item v-for="item in categories" :key="item">
-                    <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-content>
-                  </v-list-item>
-                </draggable>
-              </v-list-item-group>
-            </v-list>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-card-text>
     <v-divider></v-divider>
     <v-card-text>
       <h2 class="mt-1 mb-1">Language</h2>
@@ -97,11 +35,11 @@
 </template>
 
 <script>
-import draggable from "vuedraggable";
+import HomePageSettings from "./HomePageSettings";
 
 export default {
   components: {
-    draggable,
+    HomePageSettings,
   },
   data() {
     return {

frontend/src/components/UI/CardSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-n5">
-    <v-card flat class="transparent mb-2" height="50px">
+    <v-card flat class="transparent" height="60px">
       <v-card-text>
         <v-row>
           <v-col>
@@ -12,10 +12,21 @@
           </v-col>
           <v-spacer></v-spacer>
           <v-col align="end">
-            <v-btn-toggle group>
+            <v-menu offset-y>
-              <v-btn text color="accent"> Sort </v-btn>
+              <template v-slot:activator="{ on, attrs }">
-              <v-btn text color="accent"> Limit </v-btn>
+                <v-btn-toggle group>
-            </v-btn-toggle>
+                  <v-btn text v-bind="attrs" v-on="on"> Sort </v-btn>
+                </v-btn-toggle>
+              </template>
+              <v-list>
+                <v-list-item @click="$emit('sort-recent')">
+                  <v-list-item-title> Recent </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="$emit('sort')">
+                  <v-list-item-title> A-Z </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </v-col>
         </v-row>
       </v-card-text>

frontend/src/pages/HomePage.vue

@@ -4,13 +4,16 @@
       v-if="pageSettings.showRecent"
       title="Recent"
       :recipes="recentRecipes"
+      :card-limit="pageSettings.showLimit"
     />
     <CardSection
-      v-for="section in recipeByCategory"
+      v-for="(section, index) in recipeByCategory"
-      :key="section.title"
+      :key="index"
       :title="section.title"
       :recipes="section.recipes"
-      :limit="pageSettings.showLimit"
+      :card-limit="pageSettings.showLimit"
+      @sort="sortAZ(index)"
+      @sort-recent="sortRecent(index)"
     />
   </div>
 </template>
@@ -36,17 +39,29 @@ export default {
     };
   },
   computed: {
-    recentRecipes() {
-      return this.$store.getters.getRecentRecipes;
-    },
     pageSettings() {
       return this.$store.getters.getHomePageSettings;
     },
+    recentRecipes() {
+      return this.$store.getters.getRecentRecipes;
+    },
   },
   methods: {
     getRecentRecipes() {
       this.$store.dispatch("requestRecentRecipes");
     },
+    sortAZ(index) {
+      this.recipeByCategory[index].recipes.sort((a, b) =>
+        a.name > b.name ? 1 : -1
+      );
+      console.log(this.recipeByCategory[index].recipes);
+    },
+    sortRecent(index) {
+      this.recipeByCategory[index].recipes.sort((a, b) =>
+        a.dateAdded > b.dateAdded ? -1 : 1
+      );
+      console.log(this.recipeByCategory[index].recipes);
+    },
   },
 };
 </script>

frontend/src/store/modules/recipes.js

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

frontend/src/store/store.js

@@ -19,10 +19,11 @@ const store = new Vuex.Store({
   },
   state: {
     // Home Page Settings
-    homePage: {
+    homePageSettings: {
       showRecent: true,
       showLimit: 9,
       categories: [],
+      homeCategories: [],
     },
     // Snackbar
     snackActive: false,
@@ -35,8 +36,8 @@ const store = new Vuex.Store({
   },
 
   mutations: {
-    setHomePage(state, payload) {
+    setHomePageSettings(state, payload) {
-      state.homePage = payload;
+      state.homePageSettings = payload;
     },
     setSnackBar(state, payload) {
       state.snackText = payload.text;
@@ -66,6 +67,15 @@ const store = new Vuex.Store({
 
       this.commit("setRecentRecipes", payload);
     },
+
+    async requestHomePageSettings() {
+      // TODO: Query Backend for Categories
+      // this.commit("setHomePage", {
+      //   showRecent: true,
+      //   showLimit: 9,
+      //   categories: ["breakfast", "lunch", "dinner"],
+      // });
+    },
   },
 
   getters: {
@@ -75,7 +85,7 @@ const store = new Vuex.Store({
     getSnackType: (state) => state.snackType,
 
     getRecentRecipes: (state) => state.recentRecipes,
-    getHomePageSettings: (state) => state.homePage,
+    getHomePageSettings: (state) => state.homePageSettings,
   },
 });