Feature/shopping list (#173)

* API Endpoint

* shopping list added to the UI

* fixed category sidebar on mobile

* fix category sidebar hidden all the time

* adjust mobile view on times

* remove console.logs

* actually remove console.logs

* Fixed varying card height on smaller screens

* change style of meal planner categories

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

frontend/src/api/themes.js

@@ -33,7 +33,6 @@ export default {
       colors: colors,
     };
     let response = await apiReq.put(settingsURLs.updateTheme(themeName), body);
-    console.log(response.data);
     return response.data;
   },
 

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -120,7 +120,6 @@ export default {
   },
   async mounted() {
     let settings = await api.settings.requestAll();
-    console.log(settings);
     this.items = await api.recipes.getAllByCategory(settings.planCategories);
   },
 

frontend/src/components/MealPlan/ShoppingListDialog.vue

@@ -72,7 +72,6 @@ export default {
     },
     async getIngredients() {
       this.ingredients = await api.mealPlans.shoppingList(this.planID);
-      console.log(this.ingredients);
       this.getRawIngredients();
     },
     getRawIngredients() {
@@ -82,7 +81,6 @@ export default {
 
       this.rawIngredients = this.rawIngredients.flat();
       this.rawIngredients = this.levenshteinFilter(this.rawIngredients);
-      console.log(this.rawIngredients);
     },
     levenshteinFilter(source, maximum = 5) {
       let _source, matches, x, y;

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -1,50 +1,58 @@
 <template>
   <v-card
     color="accent"
-    class="custom-transparent"
+    class="custom-transparent d-flex justify-start align-center text-center "
     tile
     :width="`${timeCardWidth}`"
+    v-if="totalTime || prepTime || performTime"
   >
-    <v-card-text
+    <v-card flat color="rgb(255, 0, 0, 0.0)">
-      class="text-caption white--text"
+      <v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon>
-      v-if="totalTime || prepTime || performTime"
+    </v-card>
+
+    <v-divider vertical color="white" class="py-1" v-if="totalTime">
+    </v-divider>
+    <v-card flat color="rgb(255, 0, 0, 0.0)" class=" my-2 " v-if="totalTime">
+      <v-card-text class="white--text">
+        <div>
+          <strong> {{ $t("recipe.total-time") }} </strong>
+        </div>
+        <div>{{ totalTime }}</div>
+      </v-card-text>
+    </v-card>
+
+    <v-divider vertical color="white" class="py-1" v-if="prepTime"> </v-divider>
+
+    <v-card
+      flat
+      color="rgb(255, 0, 0, 0.0)"
+      class="white--text my-2 "
+      v-if="prepTime"
     >
-      <v-row align="center" dense>
+      <v-card-text class="white--text">
-        <v-col :cols="iconColumn">
+        <div>
-          <v-icon large color="white"> mdi-clock-outline </v-icon>
+          <strong> {{ $t("recipe.prep-time") }} </strong>
-        </v-col>
+        </div>
-        <v-divider
+        <div>{{ prepTime }}</div>
-          vertical
+      </v-card-text>
-          color="white"
+    </v-card>
-          class="my-1"
+
-          v-if="totalTime"
+    <v-divider vertical color="white" class="my-1" v-if="performTime">
-        ></v-divider>
+    </v-divider>
-        <v-col v-if="totalTime">
+
-          <div><strong> {{ $t("recipe.total-time") }} </strong></div>
+    <v-card
-          <div>{{ totalTime }}</div>
+      flat
-        </v-col>
+      color="rgb(255, 0, 0, 0.0)"
-        <v-divider
+      class="white--text py-2 "
-          vertical
+      v-if="performTime"
-          color="white"
+    >
-          class="my-1"
+      <v-card-text class="white--text">
-          v-if="prepTime"
+        <div>
-        ></v-divider>
+          <strong> {{ $t("recipe.perform-time") }} </strong>
-        <v-col v-if="prepTime">
+        </div>
-          <div><strong> {{ $t("recipe.prep-time") }} </strong></div>
+        <div>{{ performTime }}</div>
-          <div>{{ prepTime }}</div>
+      </v-card-text>
-        </v-col>
+    </v-card>
-        <v-divider
-          vertical
-          color="white"
-          class="my-1"
-          v-if="performTime"
-        ></v-divider>
-        <v-col v-if="performTime">
-          <div><strong> {{ $t("recipe.perform-time") }} </strong></div>
-          <div>{{ performTime }}</div>
-        </v-col>
-      </v-row>
-    </v-card-text>
   </v-card>
 </template>
 
@@ -59,7 +67,7 @@ export default {
     timeLength() {
       let times = [];
       let timeArray = [this.totalTime, this.prepTime, this.performTime];
-      timeArray.forEach((element) => {
+      timeArray.forEach(element => {
         if (element) {
           times.push(element);
         }
@@ -83,10 +91,10 @@ export default {
     },
     timeCardWidth() {
       let timeArray = [this.totalTime, this.prepTime, this.performTime];
-      let width = 120;
+      let width = 80;
-      timeArray.forEach((element) => {
+      timeArray.forEach(element => {
         if (element) {
-          width += 70;
+          width += 95;
         }
       });
 

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

@@ -10,18 +10,22 @@
       <v-row>
         <v-col sm="12" md="6">
           <v-select
+            outlined
+            :flat="isFlat"
+            elavation="0"
             v-model="planCategories"
             :items="categories"
             item-text="name"
             item-value="name"
-            label="Allowed Categories"
             multiple
             chips
             hint="Only recipes with these categories will be used in Meal Plans"
+            class="mt-2"
             persistent-hint
           >
             <template v-slot:selection="data">
               <v-chip
+                outlined
                 :input-value="data.selected"
                 close
                 @click:close="removeCategory(data.index)"
@@ -114,6 +118,9 @@ export default {
     categories() {
       return this.$store.getters.getCategories;
     },
+    isFlat() {
+      return this.planCategories ? true : false;
+    },
   },
   methods: {
     saveTime(value) {
@@ -121,7 +128,6 @@ export default {
     },
     async getSiteSettings() {
       let settings = await api.settings.requestAll();
-      console.log(settings);
       this.webhooks = settings.webhooks.webhookURLs;
       this.name = settings.name;
       this.time = settings.webhooks.webhookTime;

frontend/src/components/UI/CategorySidebar.vue

@@ -37,6 +37,7 @@ export default {
   data() {
     return {
       showSidebar: false,
+      mobile: false,
       links: [],
       baseLinks: [
         {
@@ -56,24 +57,18 @@ export default {
     allCategories() {
       return this.$store.getters.getCategories;
     },
-    mobile() {
-      switch (this.$vuetify.breakpoint.name) {
-        case "xs":
-          return true;
-        case "sm":
-          return true;
-        default:
-          return false;
-      }
-    },
   },
   watch: {
     allCategories() {
       this.buildSidebar();
     },
+    showSidebar() {
+    },
   },
   mounted() {
     this.buildSidebar();
+    this.mobile = this.viewScale();
+    this.showSidebar = !this.viewScale();
   },
 
   methods: {
@@ -88,6 +83,16 @@ export default {
         });
       });
     },
+    viewScale() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+          return true;
+        case "sm":
+          return true;
+        default:
+          return false;
+      }
+    },
   },
 };
 </script>

frontend/src/components/UI/RecipeCard.vue

@@ -14,12 +14,16 @@
             style="height: 100%;"
           >
             <v-card-text class="v-card--text-show white--text">
-              {{ description }}
+              {{ description | truncate(300) }}
             </v-card-text>
           </div>
         </v-expand-transition>
       </v-img>
-      <v-card-title class="my-n3 mb-n6">{{ name | truncate(30) }}</v-card-title>
+      <v-card-title class="my-n3 mb-n6 ">
+        <div class="headerClass">
+          {{ name }}
+        </div>
+      </v-card-title>
 
       <v-card-actions class="">
         <v-row dense align="center">
@@ -75,4 +79,10 @@ export default {
 .v-card--text-show {
   opacity: 1 !important;
 }
+.headerClass {
+  white-space: nowrap;
+  word-break: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

frontend/src/components/UI/SearchBar.vue

@@ -90,7 +90,6 @@ export default {
           .map(x => ({ item: x }))
           .sort((a, b) => (a.name > b.name ? 1 : -1));
       }
-      console.log(this.result);
       this.$emit("results", this.result);
 
       if (this.showResults === true) {

frontend/src/components/UI/SearchDialog.vue

@@ -58,7 +58,6 @@ export default {
   },
   methods: {
     updateResults(results) {
-      console.log(results);
       this.searchResults = results;
     },
     emitSelect(name, slug) {

frontend/src/pages/MealPlanPage.vue

@@ -134,7 +134,6 @@ export default {
       this.requestMeals();
     },
     openShoppingList(id) {
-      console.log(this.$refs.shoppingList.openDialog);
       this.$refs.shoppingList.openDialog(id);
     },
   },