Feature/additional endpoints (#257)

* new recipe summary route

* add categories to cards

* add pillow

* show tags instead of categories

* additional debug info

* add todays meal image url

* about page

* fix reactive tag

* changelog + docs

* bump version

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

frontend/src/api/meta.js

@@ -5,6 +5,7 @@ const prefix = baseURL + "debug";
 
 const debugURLs = {
   version: `${prefix}/version`,
+  debug: `${prefix}`,
   lastRecipe: `${prefix}/last-recipe-json`,
   demo: `${prefix}/is-demo`,
 };
@@ -14,6 +15,12 @@ export const metaAPI = {
     let response = await apiReq.get(debugURLs.version);
     return response.data;
   },
+
+  async getDebugInfo() {
+    const response = await apiReq.get(debugURLs.debug);
+    return response.data;
+  },
+
   async getLastJson() {
     let response = await apiReq.get(debugURLs.lastRecipe);
     return response.data;

frontend/src/api/recipe.js

@@ -8,6 +8,7 @@ const prefix = baseURL + "recipes/";
 
 const recipeURLs = {
   allRecipes: baseURL + "recipes",
+  summary: baseURL + "recipes" + "/summary",
   allRecipesByCategory: prefix + "category",
   create: prefix + "create",
   createByURL: prefix + "create-url",
@@ -86,6 +87,11 @@ export const recipeAPI = {
     return response.data;
   },
 
+  async allSummary() {
+    const response = await apiReq.get(recipeURLs.summary);
+    return response.data;
+  },
+
   recipeImage(recipeSlug) {
     return `/api/recipes/${recipeSlug}/image?image_type=original`;
   },

frontend/src/components/Admin/AdminSidebar.vue

@@ -74,7 +74,7 @@
       </v-list>
 
       <v-list nav dense class="fixedBottom">
-        <v-list-item href="">
+        <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
             <v-icon :color="newVersionAvailable ? 'red--text' : ''">
               mdi-information
@@ -87,6 +87,7 @@
             </v-list-item-title>
             <v-list-item-subtitle>
               <a
+                @click.prevent
                 href="https://github.com/hay-kot/mealie/releases/latest"
                 target="_blank"
                 :class="newVersionAvailable ? 'red--text' : 'green--text'"

frontend/src/components/Recipe/RecipeCard.vue

@@ -5,6 +5,7 @@
       :elevation="hover ? 12 : 2"
       :to="route ? `/recipe/${slug}` : ''"
       @click="$emit('click')"
+      min-height="275"
     >
       <v-img height="200" :src="getImage(image)">
         <v-expand-transition v-if="description">
@@ -25,9 +26,9 @@
         </div>
       </v-card-title>
 
-      <v-card-actions class="">
+      <v-card-actions>
         <v-rating
-          class="mr-2"
+          class="mr-2 my-auto"
           color="secondary"
           background-color="secondary lighten-3"
           dense
@@ -36,14 +37,25 @@
           :value="rating"
         ></v-rating>
         <v-spacer></v-spacer>
+        <RecipeChips
+          :items="tags"
+          :title="false"
+          :limit="2"
+          :small="true"
+          :isCategory="false"
+        />
       </v-card-actions>
     </v-card>
   </v-hover>
 </template>
 
 <script>
+import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import { api } from "@/api";
 export default {
+  components: {
+    RecipeChips,
+  },
   props: {
     name: String,
     slug: String,
@@ -54,6 +66,9 @@ export default {
     route: {
       default: true,
     },
+    tags: {
+      default: true,
+    },
   },
   methods: {
     getImage(image) {

frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue

@@ -1,12 +1,13 @@
 <template>
   <div v-if="items && items.length > 0">
-    <h2 class="mt-4">{{ title }}</h2>
+    <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
       label
       class="ma-1"
       color="accent"
+      :small="small"
       dark
-      v-for="category in items"
+      v-for="category in items.slice(0, limit)"
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
@@ -19,10 +20,18 @@
 export default {
   props: {
     items: Array,
-    title: String,
+    title: {
+      default: null,
+    },
     isCategory: {
       default: true,
     },
+    limit: {
+      default: 999,
+    },
+    small: {
+      default: false,
+    },
   },
   computed: {
     allCategories() {
@@ -32,8 +41,8 @@ export default {
       return this.$store.getters.getAllTags;
     },
     urlParam() {
-      return this.isCategory ? 'category' : 'tag'
-    }
+      return this.isCategory ? "category" : "tag";
+    },
   },
   methods: {
     getSlug(name) {

frontend/src/components/UI/CardSection.vue

@@ -15,9 +15,9 @@
             <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">{{
-                    $t("general.sort")
-                  }}</v-btn>
+                  <v-btn text v-bind="attrs" v-on="on">
+                    {{ $t("general.sort") }}
+                  </v-btn>
                 </v-btn-toggle>
               </template>
               <v-list>
@@ -53,6 +53,7 @@
             :slug="recipe.slug"
             :rating="recipe.rating"
             :image="recipe.image"
+            :tags="recipe.tags"
           />
         </v-col>
       </v-row>

frontend/src/pages/Admin/About/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <v-card class="mt-3">
+      <v-card-title class="headline">
+        About Mealie
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-list-item-group color="primary">
+          <v-list-item v-for="property in prettyInfo" :key="property.name">
+            <v-list-item-icon>
+              <v-icon> {{ property.icon || "mdi-account" }} </v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title class="pl-4 flex row justify-space-between">
+                <div>{{ property.name }}</div>
+                <div>{{ property.value }}</div>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-card-text>
+      <v-divider></v-divider>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+export default {
+  data() {
+    return {
+      prettyInfo: [],
+    };
+  },
+  async mounted() {
+    await this.getInfo();
+  },
+  methods: {
+    async getInfo() {
+      const debugInfo = await api.meta.getDebugInfo();
+
+      this.prettyInfo = [
+        {
+          name: "Version",
+          icon: "mdi-information",
+          value: debugInfo.version,
+        },
+        {
+          name: "Application Mode",
+          icon: "mdi-dev-to",
+          value: debugInfo.production ? "Production" : "Development",
+        },
+        {
+          name: "Demo Status",
+          icon: "mdi-test-tube",
+          value: debugInfo.demoStatus ? "Demo" : "Not Demo",
+        },
+        {
+          name: "API Port",
+          icon: "mdi-api",
+          value: debugInfo.apiPort,
+        },
+        {
+          name: "API Docs",
+          icon: "mdi-file-document",
+          value: debugInfo.apiDocs ? "Enabled" : "Disabled",
+        },
+        {
+          name: "Database Type",
+          icon: "mdi-database",
+          value: debugInfo.dbType,
+        },
+        {
+          name: "SQLite File",
+          icon: "mdi-file-cabinet",
+          value: debugInfo.sqliteFile,
+        },
+        {
+          name: "Default Group",
+          icon: "mdi-account-group",
+          value: debugInfo.defaultGroup,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/pages/Recipes/TagPage.vue

@@ -33,7 +33,7 @@ export default {
     },
   },
   watch: {
-    async currentCategory() {
+    async currentTag() {
       this.getRecipes();
     },
   },

frontend/src/routes/admin.js

@@ -6,6 +6,7 @@ import Migration from "@/pages/Admin/Migration";
 import Profile from "@/pages/Admin/Profile";
 import ManageUsers from "@/pages/Admin/ManageUsers";
 import Settings from "@/pages/Admin/Settings";
+import About from "@/pages/Admin/About";
 import { store } from "../store";
 
 export default {
@@ -50,5 +51,9 @@ export default {
       path: "settings",
       component: Settings,
     },
+    {
+      path: "about",
+      component: About,
+    },
   ],
 };

frontend/src/store/index.js

@@ -54,15 +54,15 @@ const store = new Vuex.Store({
 
   actions: {
     async requestRecentRecipes() {
-      const keys = [
-        "name",
-        "slug",
-        "image",
-        "description",
-        "dateAdded",
-        "rating",
-      ];
-      const payload = await api.recipes.allByKeys(keys);
+      // const keys = [
+      //   "name",
+      //   "slug",
+      //   "image",
+      //   "description",
+      //   "dateAdded",
+      //   "rating",
+      // ];
+      const payload = await api.recipes.allSummary();
 
       this.commit("setRecentRecipes", payload);
     },