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/components/UI/CardSection.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mt-n5">
+    <v-card flat class="transparent" height="60px">
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <v-btn-toggle group>
+              <v-btn text :to="`/recipes/category/${title.toLowerCase()}`">
+                {{ title.toUpperCase() }}
+              </v-btn>
+            </v-btn-toggle>
+          </v-col>
+          <v-spacer></v-spacer>
+          <v-col align="end">
+            <v-menu offset-y v-if="sortable">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn-toggle group>
+                  <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>
+    </v-card>
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="3"
+        v-for="recipe in recipes.slice(0, cardLimit)"
+        :key="recipe.name"
+      >
+        <RecipeCard
+          :name="recipe.name"
+          :description="recipe.description"
+          :slug="recipe.slug"
+          :rating="recipe.rating"
+          :image="recipe.image"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import RecipeCard from "./RecipeCard";
+export default {
+  components: {
+    RecipeCard,
+  },
+  props: {
+    sortable: {
+      default: false,
+    },
+    title: String,
+    recipes: Array,
+    cardLimit: {
+      default: 6,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.transparent {
+  opacity: 1;
+}
+</style>

frontend/src/components/UI/RecentRecipes.vue

@@ -1,40 +0,0 @@
-<template>
-  <v-row>
-    <v-col
-      :sm="6"
-      :md="6"
-      :lg="4"
-      :xl="3"
-      v-for="recipe in recipes"
-      :key="recipe.name"
-    >
-      <RecipeCard
-        :name="recipe.name"
-        :description="recipe.description"
-        :slug="recipe.slug"
-        :rating="recipe.rating"
-        :image="recipe.image"
-      />
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-import RecipeCard from "./RecipeCard";
-
-export default {
-  components: {
-    RecipeCard,
-  },
-  data: () => ({}),
-  mounted() {},
-  computed: {
-    recipes() {
-      return this.$store.getters.getRecentRecipes;
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>

frontend/src/components/UI/Search.vue

@@ -1,63 +0,0 @@
-<template>
-  <v-autocomplete
-    :items="items"
-    :loading="isLoading"
-    v-model="selected"
-    clearable
-    return
-    dense
-    hide-details
-    hide-selected
-    item-text="slug"
-    :label="$t('search.search-for-a-recipe')"
-    single-line
-    @keyup.enter.native="moreInfo(selected)"
-  >
-    <template v-slot:no-data>
-      <v-list-item>
-        <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
-        </v-list-item-title>
-      </v-list-item>
-    </template>
-    <template v-slot:item="{ item }">
-      <v-list-item-avatar
-        color="primary"
-        class="headline font-weight-light white--text"
-      >
-        <v-img :src="getImage(item.image)"></v-img>
-      </v-list-item-avatar>
-      <v-list-item-content @click="moreInfo(item.slug)">
-        <v-list-item-title v-text="item.name"></v-list-item-title>
-      </v-list-item-content>
-    </template>
-  </v-autocomplete>
-</template>
-
-<script>
-import utils from "../../utils";
-
-export default {
-  data: () => ({
-    selected: null,
-    isLoading: false,
-  }),
-
-  computed: {
-    items() {
-      return this.$store.getters.getRecentRecipes;
-    },
-  },
-
-  methods: {
-    moreInfo(recipeSlug) {
-      this.$router.push(`/recipe/${recipeSlug}`);
-    },
-    getImage(image) {
-      return utils.getImageURL(image);
-    },
-  },
-};
-</script>
-
-<style>
-</style>