category/tag page updates

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -18,20 +18,29 @@ Prerequisites
 - Nodejs
 - npm
 
-Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make vue` to start the backend and frontend servers. 
+Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make frontend` to start the backend and frontend servers. 
 
 ## Make File Reference 
-`make setup` installs python and node dependencies
 
-`make backend` Starts the backend server on port `9000`
+Run `make help` for reference
 
-`make vue` Starts the frontend server on port `8080`
+```
-
+clean                remove all build, test, coverage and Python artifacts
-`make mdocs` Starts the documentation server on port `8000`
+clean-pyc            remove Python file artifacts
-
+clean-test           remove test and coverage artifacts
-`make docker-dev` Builds docker-compose.dev.yml 
+test                 run tests quickly with the default Python
-
+lint                 check style with flake8
-`make docker-prod` Builds docker-compose.yml to test for production
+test-all             Check Lint Format and Testing
+setup                Setup Development Instance
+backend              Start Mealie Backend Development Server
+frontend             Start Mealie Frontend Development Server
+frontend-build       Build Frontend in frontend/dist
+docs                 Start Mkdocs Development Server
+docker-dev           Build and Start Docker Development Stack
+docker-prod          Build and Start Docker Production Stack
+code-gen             Run Code-Gen Scripts
+coverage             check code coverage quickly with the default Python
+```
 
 ## Before you Commit! 
 

frontend/src/components/Recipe/ContextMenu.vue

@@ -81,7 +81,7 @@ export default {
         },
         {
           title: this.$t("general.edit"),
-          icon: "{{ $globals.icons.edit }}",
+          icon: this.$globals.icons.edit,
           color: "accent",
           action: "edit",
         },

frontend/src/components/UI/CardSection.vue

@@ -2,7 +2,7 @@
   <div v-if="recipes">
     <v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
       <v-icon large left v-if="title">
-        {{ titleIcon }}
+        {{ displayTitleIcon }}
       </v-icon>
       <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
       <v-spacer></v-spacer>
@@ -120,7 +120,7 @@ export default {
       default: false,
     },
     titleIcon: {
-      default: "{{ $globals.icons.tags }}-multiple-outline",
+      default: null,
     },
     title: {
       default: null,
@@ -170,6 +170,9 @@ export default {
     effectiveHardLimit() {
       return Math.min(this.hardLimit, this.recipes.length);
     },
+    displayTitleIcon() {
+      return this.titleIcon || this.$globals.icons.tags;
+    },
   },
   methods: {
     bumpList() {

frontend/src/components/UI/Dialogs/BaseDialog.vue

@@ -10,7 +10,7 @@
       <v-card height="100%">
         <v-app-bar dark :color="color" class="mt-n1 mb-0">
           <v-icon large left>
-            {{ titleIcon }}
+            {{ displayTitleIcon }}
           </v-icon>
           <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
           <v-spacer></v-spacer>
@@ -55,7 +55,7 @@ export default {
       default: "Modal Title",
     },
     titleIcon: {
-      default: () => this.$globals.icons.user,
+      default: null,
     },
     modalWidth: {
       default: "500",
@@ -83,6 +83,9 @@ export default {
     determineClose() {
       return this.submitted && !this.loading && !this.keepOpen;
     },
+    displayTitleIcon() {
+      return this.titleIcon || this.$globals.icons.user;
+    },
   },
   watch: {
     determineClose() {

frontend/src/components/UI/TheSidebar.vue

@@ -98,15 +98,25 @@ export default {
           to: "/",
           title: this.$t("page.home-page"),
         },
+        {
+          icon: "mdi-magnify",
+          to: "/search",
+          title: this.$t("search.search"),
+        },
         {
           icon: "mdi-view-module",
           to: "/recipes/all",
           title: this.$t("page.all-recipes"),
         },
         {
-          icon: "mdi-magnify",
+          icon: this.$globals.icons.tags,
-          to: "/search",
+          to: "/recipes/category",
-          title: this.$t("search.search"),
+          title: this.$t("recipe.categories"),
+        },
+        {
+          icon: this.$globals.icons.tags,
+          to: "/recipes/tag",
+          title: this.$t("tag.tags"),
         },
       ];
     },
@@ -119,14 +129,8 @@ export default {
           to: `/pages/${x.slug}`,
           icon: this.$globals.icons.tags,
         }));
-      } else {
-        const categories = this.$store.getters.getAllCategories;
-        return categories.map(x => ({
-          title: x.name,
-          to: `/recipes/category/${x.slug}`,
-          icon: this.$globals.icons.tags,
-        }));
       }
+      return [];
     },
     mainMenu() {
       return [...this.baseMainLinks, ...this.customPages];

frontend/src/pages/Recipes/CategoryTagPage.vue

@@ -1,6 +1,30 @@
 <template>
   <v-container>
-    <CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
+    <div v-if="selectItems">
+      <v-app-bar color="transparent" flat class="mt-n1 rounded">
+        <v-icon large left>
+          {{ $globals.icons.tags }}
+        </v-icon>
+        <v-toolbar-title class="headline"> {{ altTitle }} </v-toolbar-title>
+        <v-spacer></v-spacer>
+      </v-app-bar>
+      <v-slide-x-transition hide-on-leave>
+        <v-row>
+          <v-col cols="12" :sm="12" :md="6" :lg="4" :xl="3" v-for="item in selectItems" :key="item.id">
+            <v-card hover :to="`/recipes/${routerTagCat}/${item.slug}`">
+              <v-card-actions>
+                <v-icon>
+                  {{ $globals.icons.tags }}
+                </v-icon>
+                <v-card-title class="py-1">{{ item.name }}</v-card-title>
+                <v-spacer></v-spacer>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-slide-x-transition>
+    </div>
+    <CardSection v-else :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
   </v-container>
 </template>
 
@@ -20,14 +44,29 @@ export default {
   },
   computed: {
     currentCategory() {
-      return this.$route.params.category;
+      return this.$route.params.category || false;
     },
     currentTag() {
-      return this.$route.params.tag;
+      return this.$route.params.tag || false;
     },
     TagOrCategory() {
       return this.currentCategory || this.currentTag;
     },
+    routerTagCat() {
+      return this.$route.path.split("/")[2];
+    },
+    altTitle() {
+      return this.routerTagCat === "category" ? this.$t("recipe.categories") : this.$t("tag.tags");
+    },
+
+    selectItems() {
+      if (this.TagOrCategory) return false;
+      if (this.routerTagCat === "category") {
+        return this.$store.getters.getAllCategories;
+      }
+      return this.$store.getters.getAllTags;
+    },
+
     shownRecipes() {
       if (this.sortedResults.length > 0) {
         return this.sortedResults;
@@ -48,7 +87,7 @@ export default {
   },
   methods: {
     async getRecipes() {
-      if (!this.TagOrCategory === null) return;
+      if (!this.TagOrCategory === null || this.selectItems) return;
 
       let data = {};
       if (this.currentCategory) {

frontend/src/routes/recipes.js

@@ -9,6 +9,8 @@ export const recipeRoutes = [
   // Recipes
   { path: "/recipes/all", component: AllRecipes },
   { path: "/recipes/tag/:tag", component: CategoryTagPage },
+  { path: "/recipes/tag", component: CategoryTagPage },
+  { path: "/recipes/category", component: CategoryTagPage },
   { path: "/recipes/category/:category", component: CategoryTagPage },
   // Misc
   { path: "/new/", component: NewRecipe },