Feature/UI updates (#990)

* titleCase utility

* update rules ui

* order by date_added

* fix error on page refresh

* fix health checks

* fix cookbook return values

frontend/composables/use-utils.ts

@@ -4,6 +4,13 @@ export const useAsyncKey = function () {
   return String(Date.now());
 };
 
+export const titleCase = function (str: string) {
+  return str
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
 export function detectServerBaseUrl(req?: IncomingMessage | null) {
   if (!req || req === undefined) {
     return "";

frontend/pages/group/mealplan/settings.vue

@@ -5,7 +5,7 @@
         <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
       </template>
       <template #title> Meal Plan Rules </template>
-      Here you can set rules for auto selecting recipes for you meal plans. These rules are used by the server to
+      You can create rules for auto selecting recipes for you meal plans. These rules are used by the server to
       determine the random pool of recipes to select from when creating meal plans. Note that if rules have the same
       day/type constraints then the categories of the rules will be merged. In practice, it's unnecessary to create
       duplicate rules, but it's possible to do so.
@@ -36,9 +36,10 @@
       <BaseCardSectionTitle class="mt-10" title="Recipe Rules" />
       <div>
         <div v-for="(rule, idx) in allRules" :key="rule.id">
-          <v-card class="my-2">
-            <v-card-title>
-              {{ rule.day }} - {{ rule.entryType }}
+          <v-card class="my-2 left-border">
+            <v-card-title class="headline pb-1">
+              {{ rule.day === "unset" ? "Applies to all days" : `Applies on ${rule.day}s` }}
+              {{ rule.entryType === "unset" ? "for all meal types" : ` for ${rule.entryType} meal types` }}
               <span class="ml-auto">
                 <BaseButtonGroup
                   :buttons="[
@@ -60,8 +61,15 @@
             </v-card-title>
             <v-card-text>
               <template v-if="!editState[rule.id]">
-                <div>Categories: {{ rule.categories.map((c) => c.name).join(", ") }}</div>
-                <div>Tags: {{ rule.tags.map((t) => t.name).join(", ") }}</div>
+                <div v-if="rule.categories">
+                  <h4 class="py-1">{{ $t("category.categories") }}:</h4>
+                  <RecipeChips :items="rule.categories" is-category small />
+                </div>
+
+                <div v-if="rule.tags">
+                  <h4 class="py-1">{{ $t("tag.tags") }}:</h4>
+                  <RecipeChips :items="rule.tags" :is-category="false" small />
+                </div>
               </template>
               <template v-else>
                 <GroupMealPlanRuleForm
@@ -88,10 +96,12 @@ import { useUserApi } from "~/composables/api";
 import { PlanRulesCreate, PlanRulesOut } from "~/types/api-types/meal-plan";
 import GroupMealPlanRuleForm from "~/components/Domain/Group/GroupMealPlanRuleForm.vue";
 import { useAsyncKey } from "~/composables/use-utils";
+import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
 
 export default defineComponent({
   components: {
     GroupMealPlanRuleForm,
+    RecipeChips,
   },
   props: {
     value: {

frontend/pages/recipe/create.vue

@@ -217,7 +217,7 @@
       <!--  Debug Extras -->
       <section v-if="debugData && tab === 'debug'">
         <v-checkbox v-model="debugTreeView" label="Tree View"></v-checkbox>
-        <VJsoneditor
+        <LazyRecipeJsonEditor
           v-model="debugData"
           class="primary"
           :options="{
@@ -322,11 +322,9 @@ import {
   useRouter,
   useContext,
   computed,
-  useRoute
+  useRoute,
 } from "@nuxtjs/composition-api";
 import { AxiosResponse } from "axios";
-// @ts-ignore No Types for v-jsoneditor
-import VJsoneditor from "v-jsoneditor";
 import { useUserApi } from "~/composables/api";
 import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
 import { validators } from "~/composables/use-validators";
@@ -336,7 +334,7 @@ import { VForm } from "~/types/vuetify";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 
 export default defineComponent({
-  components: { VJsoneditor, RecipeCategoryTagSelector },
+  components: { RecipeCategoryTagSelector },
   setup() {
     const state = reactive({
       error: false,
@@ -397,7 +395,7 @@ export default defineComponent({
 
     const recipeUrl = computed({
       set(recipe_import_url: string) {
-        recipe_import_url = recipe_import_url.trim()
+        recipe_import_url = recipe_import_url.trim();
         router.replace({ query: { ...route.value.query, recipe_import_url } });
       },
       get() {
@@ -516,7 +514,6 @@ export default defineComponent({
 });
 </script>
 
-
 <style>
 .force-white > a {
   color: white !important;