meal plan stuff

vue/src/components/MealPlanCard.vue

@@ -14,7 +14,7 @@
         <div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed" :style="`background-color: ${background_color}`">
             <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{ entry.entry.meal_type.icon }}</span>
             <span class="font-light d-none d-md-inline">{{ entry.entry.meal_type.name }}</span>
-            <span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')" /></span>
+            <span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')"/></span>
         </div>
         <div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0" v-if="detailed">
             <a>
@@ -41,11 +41,8 @@
         <div class="card-body p-1" v-if="detailed && entry.entry.recipe == null" :style="`background-color: ${background_color}`">
             <p>{{ entry.entry.note }}</p>
         </div>
+
         <div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
-            <div class="col-2">
-                <span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left :title="entry.entry.meal_type.name">{{ entry.entry.meal_type.icon }}</span>
-                <span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left :title="entry.entry.meal_type.name">❓</span>
-            </div>
             <div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
                 <span class="font-light">{{ title }}</span>
             </div>
@@ -71,7 +68,8 @@ export default {
             image_placeholder: window.IMAGE_PLACEHOLDER,
         }
     },
-    mounted() {},
+    mounted() {
+    },
     computed: {
         entry: function () {
             return this.value.originalItem

vue/src/components/MealPlanEditModal.vue

@@ -135,10 +135,9 @@ import Vue from "vue"
 import VueCookies from "vue-cookies"
 import {BootstrapVue} from "bootstrap-vue"
 import GenericMultiselect from "@/components/GenericMultiselect"
-import {ApiMixin, getUserPreference} from "@/utils/utils"
+import {ApiMixin, getUserPreference, ToastMixin} from "@/utils/utils"
 
 const {ApiApiFactory} = require("@/utils/openapi/api")
-const {StandardToasts} = require("@/utils/utils")
 
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
 import {useMealPlanStore} from "@/stores/MealPlanStore";
@@ -163,7 +162,7 @@ export default {
             default: true,
         },
     },
-    mixins: [ApiMixin],
+    mixins: [ApiMixin, ToastMixin],
     components: {
         GenericMultiselect,
         RecipeCard: () => import("@/components/RecipeCard.vue"),
@@ -234,9 +233,11 @@ export default {
         editEntry() {
 
             if (this.entryEditing.meal_type == null) {
+                this.makeToast('Warning', this.$t('Meal_Type_Required'), 'warning')
                 return;
             }
             if (this.entryEditing.recipe == null && this.entryEditing.title === "") {
+                this.makeToast('Warning', this.$t('Title_or_Recipe_Required'), 'warning')
                 return
             }
             //TODO properly validate

vue/src/components/Modals/ColorInput.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <b-form-group v-bind:label="field_label" class="mb-3">
+            <b-form-input v-model="new_value" type="color" ></b-form-input>
+            <em v-if="help" class="small text-muted">{{ help }}</em>
+            <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
+        </b-form-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ColorInput",
+    props: {
+        field: { type: String, default: "You Forgot To Set Field Name" },
+        label: { type: String, default: "Text Field" },
+        value: { type: String, default: "" },
+        help: { type: String, default: undefined },
+        subtitle: { type: String, default: undefined },
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
+    data() {
+        return {
+            new_value: undefined,
+        }
+    },
+    mounted() {
+        this.new_value = this.value
+    },
+    watch: {
+        new_value: function () {
+            this.$root.$emit("change", this.field, this.new_value)
+        },
+    },
+    methods: {},
+}
+</script>

vue/src/components/Modals/GenericModalForm.vue

@@ -19,6 +19,7 @@
                     <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" :optional="f.optional"/>
                     <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
                     <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
+                    <color-input v-if="visibleCondition(f, 'color')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                     <number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                 </div>
                 <template v-slot:modal-footer>