v0.2.0 Updates (#130)

* migration redesign init

* new color picker

* changelog

* added UI language selection

* fix layout issue on recipe editor

* remove git as dependency

* added UI editor for original URL

* CI/CD Tests

* test: fixed migration routes

* test todos

* bug/added docker volume

* chowdow test data

* partial image recipe image testing

* added card section card

* settings form

* homepage cetegory ui

* frontend category placeholder

* fixed broken scheduler

* remove old files

* removed temp test

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/src/pages/HomePage.vue

@@ -1,15 +1,66 @@
 <template>
   <div>
-    <RecentRecipes />
+    <CardSection
+      v-if="pageSettings.showRecent"
+      title="Recent"
+      :recipes="recentRecipes"
+      :card-limit="pageSettings.showLimit"
+    />
+    <CardSection
+      :sortable="true"
+      v-for="(section, index) in recipeByCategory"
+      :key="index"
+      :title="section.title"
+      :recipes="section.recipes"
+      :card-limit="pageSettings.showLimit"
+      @sort="sortAZ(index)"
+      @sort-recent="sortRecent(index)"
+    />
   </div>
 </template>
 
 <script>
-import RecentRecipes from "../components/UI/RecentRecipes";
-
+import CardSection from "../components/UI/CardSection";
 export default {
   components: {
-    RecentRecipes,
+    CardSection,
+  },
+  data() {
+    return {
+      recipeByCategory: [
+        {
+          title: "Title 1",
+          recipes: this.$store.getters.getRecentRecipes,
+        },
+        {
+          title: "Title 2",
+          recipes: this.$store.getters.getRecentRecipes,
+        },
+      ],
+    };
+  },
+  computed: {
+    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
+      );
+    },
+    sortRecent(index) {
+      this.recipeByCategory[index].recipes.sort((a, b) =>
+        a.dateAdded > b.dateAdded ? -1 : 1
+      );
+    },
   },
 };
 </script>