From 65d670a995a06f900a0add350af0caf08668c52a Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 8 Sep 2023 14:13:27 +0200
Subject: [PATCH] improved meal plan UI

---
 vue/src/apps/MealPlanView/MealPlanView.vue    | 334 ++++++++----------
 vue/src/components/MealPlanCalenderHeader.vue |   2 +-
 vue/src/components/MealPlanCard.vue           |  90 ++---
 3 files changed, 184 insertions(+), 242 deletions(-)

diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 1473d708..3587566f 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -1,219 +1,163 @@
 <template>
     <div>
-        <b-tabs content-class="mt-3" v-model="current_tab">
-            <b-tab :title="$t('Planner')" active>
-                <div class=" d-none d-lg-block">
-                    <div class="row">
-                        <div class="col col-2">
-                            <h4>{{ $t('Meal_Types') }}</h4>
+        <div class=" d-none d-lg-block">
+            <div class="row">
+                <div class="col col-2">
+                    <h4>{{ $t('Meal_Types') }}</h4>
 
-                            <b-form-checkbox :button-variant="danger" v-model="mt.checked" size="lg" v-for="mt in meal_types" v-bind:key="mt.id">
-
-                                <b-badge variant="primary" :style="{'background-color':mt.color}">{{ mt.name }}</b-badge>
-                            </b-form-checkbox>
-
-                            <hr/>
-                            <button class="btn btn-success shadow-none mt-1 btn-block" @click="createEntryClick(new Date())"><i
-                                class="fas fa-calendar-plus"></i> {{ $t("Create") }}
-                            </button>
-                            <button class="btn btn-primary shadow-none mt-1 btn-block" @click="createAutoPlan(new Date())"><i
-                                class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }}
-                            </button>
-                            <a class="btn btn-primary shadow-none mt-1 btn-blockmt-1 btn-block" :href="iCalUrl"><i class="fas fa-download"></i>
-                                {{ $t("Export_To_ICal") }}
-                            </a>
-
-
-                        </div>
-                        <div class="col col-10">
-                            <div class="row calender-row ">
-                                <div class="col-12 calender-parent">
-                                    <calendar-view
-                                        :show-date="showDate"
-                                        :enable-date-selection="true"
-                                        class="theme-default"
-                                        :items="plan_items"
-                                        :display-period-uom="settings.displayPeriodUom"
-                                        :period-changed-callback="periodChangedCallback"
-                                        :enable-drag-drop="true"
-                                        :item-content-height="item_height"
-                                        @click-date="createEntryClick"
-                                        @drop-on-date="moveEntry"
-                                        :display-period-count="settings.displayPeriodCount"
-                                        :starting-day-of-week="settings.startingDayOfWeek"
-                                        :display-week-numbers="settings.displayWeekNumbers"
-                                    >
-                                        <template #item="{ value, weekStartDate, top }">
-                                            <meal-plan-card
-                                                :value="value"
-                                                :week-start-date="weekStartDate"
-                                                :top="top"
-                                                :detailed="detailed_items"
-                                                :item_height="item_height"
-                                                @dragstart="dragged_item = value"
-                                                @click-item="entryClick"
-                                                @open-context-menu="openContextMenu"
-                                            />
-                                        </template>
-                                        <template #header="{ headerProps }">
-                                            <meal-plan-calender-header
-                                                ref="header"
-                                                :header-props="headerProps"
-                                                @input="setShowDate"
-                                                @delete-dragged="deleteEntry(dragged_item)"
-                                                @create-new="createEntryClick(new Date())"
-                                                @set-starting-day-back="setStartingDay(-1)"
-                                                @set-starting-day-forward="setStartingDay(1)"
-                                                :i-cal-url="iCalUrl"
-                                                :options="options"
-                                                :settings_prop="settings"
-                                            />
-                                        </template>
-                                    </calendar-view>
-                                </div>
+                    <div class="d-flex flex-row align-items-center border" v-for="mt in meal_types" v-bind:key="mt.id">
+                        <div class="flex-column" style="width: 2.5rem; height: 2.5rem;" :style="{'background-color': mt.color}"></div>
+                        <div class="flex-column flex-grow-1 align-middle justify-content-center">
+                            <div class="card-body p-2 align-middle">
+                                {{ mt.name }}
                             </div>
                         </div>
+
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="row d-block d-lg-none">
-                                <div>
-                                    <div class="col-12">
-                                        <div class="col-12 d-flex justify-content-center mt-2">
-                                            <b-button-toolbar key-nav aria-label="Toolbar with button groups">
-                                                <b-button-group class="mx-1">
-                                                    <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
-                                                              @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
-                                                </b-button-group>
-                                                <b-button-group class="mx-1">
-                                                    <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
-                                                        class="fas fa-home"></i></b-button>
-                                                    <b-form-datepicker right button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
-                                                </b-button-group>
-                                                <b-button-group class="mx-1">
-                                                    <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
-                                                              @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
-                                                </b-button-group>
-                                            </b-button-toolbar>
-                                        </div>
-                                    </div>
-                                    <div class="col-12 mt-2" style="padding-bottom: 60px">
-                                        <div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
-                                            <b-list-group>
-                                                <b-list-group-item>
-                                                    <div class="d-flex flex-row align-middle">
-                                                        <h6 class="mb-0 mt-1 align-middle">{{ day.date_label }}</h6>
 
-                                                        <div class="flex-grow-1 text-right">
-                                                            <b-button class="btn-sm btn-outline-primary" @click="showMealPlanEditModal(null, day.create_default_date)"><i
-                                                                class="fa fa-plus"></i></b-button>
-                                                        </div>
-                                                    </div>
+                    <hr/>
+                    <button class="btn btn-success shadow-none mt-1 btn-block" @click="createEntryClick(new Date())"><i
+                        class="fas fa-calendar-plus"></i> {{ $t("Create") }}
+                    </button>
+                    <button class="btn btn-warning shadow-none mt-1 btn-block" @click="createAutoPlan(new Date())"><i
+                        class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }}
+                    </button>
+                    <a class="btn btn-primary shadow-none mt-1 btn-blockmt-1 btn-block" :href="iCalUrl"><i class="fas fa-download"></i>
+                        {{ $t("Export_To_ICal") }}
+                    </a>
 
-                                                </b-list-group-item>
-                                                <b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.entry.id">
-                                                    <div class="d-flex flex-row align-items-center">
-                                                        <div>
-                                                            <b-img style="height: 50px; width: 50px; object-fit: cover"
-                                                                   :src="plan.entry.recipe.image" rounded="circle" v-if="plan.entry.recipe?.image"></b-img>
-                                                            <b-img style="height: 50px; width: 50px; object-fit: cover"
-                                                                   :src="image_placeholder" rounded="circle" v-else></b-img>
-                                                        </div>
-                                                        <div class="flex-grow-1 ml-2"
-                                                             style="text-overflow: ellipsis; overflow-wrap: anywhere;">
+                    <a class="btn btn-info shadow-none mt-1 btn-block" :href="resolveDjangoUrl('view_settings')">
+                        <i class="fas fa-cogs"></i> {{ $t("Settings") }}
+                    </a>
+                </div>
+                <div class="col col-10">
+                    <div class="row calender-row ">
+                        <div class="col-12 calender-parent">
+                            <calendar-view
+                                :show-date="showDate"
+                                :enable-date-selection="true"
+                                class="theme-default"
+                                :items="plan_items"
+                                :display-period-uom="settings.displayPeriodUom"
+                                :period-changed-callback="periodChangedCallback"
+                                :enable-drag-drop="true"
+                                :item-content-height="item_height"
+                                @click-date="createEntryClick"
+                                @drop-on-date="moveEntry"
+                                :display-period-count="settings.displayPeriodCount"
+                                :starting-day-of-week="settings.startingDayOfWeek"
+                                :display-week-numbers="settings.displayWeekNumbers"
+                            >
+                                <template #item="{ value, weekStartDate, top }">
+                                    <meal-plan-card
+                                        :value="value"
+                                        :week-start-date="weekStartDate"
+                                        :top="top"
+                                        :detailed="detailed_items"
+                                        :item_height="item_height"
+                                        @dragstart="dragged_item = value"
+                                        @click-item="entryClick"
+                                        @open-context-menu="openContextMenu"
+                                    />
+                                </template>
+                                <template #header="{ headerProps }">
+                                    <meal-plan-calender-header
+                                        ref="header"
+                                        :header-props="headerProps"
+                                        @input="setShowDate"
+                                        @delete-dragged="deleteEntry(dragged_item)"
+                                        @create-new="createEntryClick(new Date())"
+                                        @set-starting-day-back="setStartingDay(-1)"
+                                        @set-starting-day-forward="setStartingDay(1)"
+                                        :i-cal-url="iCalUrl"
+                                        :options="options"
+                                        :settings_prop="settings"
+                                    />
+                                </template>
+                            </calendar-view>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="row d-block d-lg-none">
+                        <div>
+                            <div class="col-12">
+                                <div class="col-12 d-flex justify-content-center mt-2">
+                                    <b-button-toolbar key-nav aria-label="Toolbar with button groups">
+                                        <b-button-group class="mx-1">
+                                            <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
+                                                      @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
+                                        </b-button-group>
+                                        <b-button-group class="mx-1">
+                                            <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
+                                                class="fas fa-home"></i></b-button>
+                                            <b-form-datepicker right button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
+                                        </b-button-group>
+                                        <b-button-group class="mx-1">
+                                            <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
+                                                      @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
+                                        </b-button-group>
+                                    </b-button-toolbar>
+                                </div>
+                            </div>
+                            <div class="col-12 mt-2" style="padding-bottom: 60px">
+                                <div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
+                                    <b-list-group>
+                                        <b-list-group-item>
+                                            <div class="d-flex flex-row align-middle">
+                                                <h6 class="mb-0 mt-1 align-middle">{{ day.date_label }}</h6>
+
+                                                <div class="flex-grow-1 text-right">
+                                                    <b-button class="btn-sm btn-outline-primary" @click="showMealPlanEditModal(null, day.create_default_date)"><i
+                                                        class="fa fa-plus"></i></b-button>
+                                                </div>
+                                            </div>
+
+                                        </b-list-group-item>
+                                        <b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.entry.id">
+                                            <div class="d-flex flex-row align-items-center">
+                                                <div>
+                                                    <b-img style="height: 50px; width: 50px; object-fit: cover"
+                                                           :src="plan.entry.recipe.image" rounded="circle" v-if="plan.entry.recipe?.image"></b-img>
+                                                    <b-img style="height: 50px; width: 50px; object-fit: cover"
+                                                           :src="image_placeholder" rounded="circle" v-else></b-img>
+                                                </div>
+                                                <div class="flex-grow-1 ml-2"
+                                                     style="text-overflow: ellipsis; overflow-wrap: anywhere;">
                                                     <span class="two-row-text">
                                                         <a :href="resolveDjangoUrl('view_recipe', plan.entry.recipe.id)" v-if="plan.entry.recipe">{{ plan.entry.recipe.name }}</a>
                                                         <span v-else>{{ plan.entry.title }}</span> <br/>
                                                     </span>
-                                                            <span v-if="plan.entry.note" class="two-row-text">
+                                                    <span v-if="plan.entry.note" class="two-row-text">
                                                     <small>{{ plan.entry.note }}</small> <br/>
                                                 </span>
-                                                            <small class="text-muted">
-                                                                <span v-if="plan.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs "/></span>
-                                                                {{ plan.entry.meal_type_name }}
-                                                                <span v-if="plan.entry.recipe">
+                                                    <small class="text-muted">
+                                                        <span v-if="plan.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs "/></span>
+                                                        {{ plan.entry.meal_type_name }}
+                                                        <span v-if="plan.entry.recipe">
                                                      - <i class="fa fa-clock"></i> {{ plan.entry.recipe.working_time + plan.entry.recipe.waiting_time }} {{ $t('min') }}
                                                 </span>
-                                                            </small>
-                                                        </div>
-                                                        <div class="hover-button">
-                                                            <a class="pr-2" @click.stop="openContextMenu($event, {originalItem: plan})"><i class="fas fa-ellipsis-v"></i></a>
-                                                        </div>
-                                                    </div>
-                                                </b-list-group-item>
-
-                                            </b-list-group>
-                                        </div>
-                                    </div>
+                                                    </small>
+                                                </div>
+                                                <div class="hover-button">
+                                                    <a class="pr-2" @click.stop="openContextMenu($event, {originalItem: plan})"><i class="fas fa-ellipsis-v"></i></a>
+                                                </div>
+                                            </div>
+                                        </b-list-group-item>
 
+                                    </b-list-group>
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                </div>
 
-            </b-tab>
-            <b-tab :title="$t('Settings')">
-                <div class="row mt-3">
-                    <div class="col-12 col-md-9 col-lg-6">
-                        <h5>{{ $t("Meal_Types") }}</h5>
-                        <div>
-                            <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10"
-                                       @sort="sortMealTypes()" ghost-class="ghost">
-                                <b-card no-body class="mt-1 list-group-item p-2" style="cursor: move"
-                                        v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id">
-                                    <b-card-header class="p-2 border-0">
-                                        <div class="row">
-                                            <div class="col-2">
-                                                <button type="button" class="btn btn-lg shadow-none"><i
-                                                    class="fas fa-arrows-alt-v"></i></button>
-                                            </div>
-                                            <div class="col-10">
-                                                <h5 class="mt-1 mb-1">
-                                                    {{ meal_type.name }}<span class="float-right text-primary" style="cursor: pointer"
-                                                ><i class="fa"
-                                                    v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
-                                                    @click="editOrSaveMealType(index)" aria-hidden="true"></i
-                                                ></span>
-                                                </h5>
-                                            </div>
-                                        </div>
-                                    </b-card-header>
-                                    <b-card-body class="p-4" v-if="meal_type.editing">
-                                        <div class="form-group">
-                                            <label>{{ $t("Name") }}</label>
-                                            <input class="form-control" :placeholder="$t('Name')"
-                                                   v-model="meal_type.name"/>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>{{ $t("Color") }}</label>
-                                            <input class="form-control" type="color" name="Name"
-                                                   :value="meal_type.color"
-                                                   @change="meal_type.color = $event.target.value"/>
-                                        </div>
-                                        <b-form-checkbox id="checkbox-1" v-model="meal_type.default"
-                                                         name="default_checkbox" class="mb-2">
-                                            {{ $t("Default") }}
-                                        </b-form-checkbox>
-                                        <button class="btn btn-danger" @click="deleteMealType(index)">{{
-                                                $t("Delete")
-                                            }}
-                                        </button>
-                                        <button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">
-                                            {{ $t("Save") }}
-                                        </button>
-                                    </b-card-body>
-                                </b-card>
-                            </draggable>
-                            <button class="btn btn-success float-right mt-1" @click="newMealType">
-                                <i class="fas fa-plus"></i>
-                                {{ $t("New_Meal_Type") }}
-                            </button>
                         </div>
                     </div>
                 </div>
-            </b-tab>
-        </b-tabs>
+            </div>
+        </div>
+
+
         <ContextMenu ref="menu">
             <template #menu="{ contextData }">
                 <ContextMenuItem
@@ -336,7 +280,6 @@ export default {
         ContextMenu,
         ContextMenuItem,
         MealPlanCalenderHeader,
-        draggable,
         BottomNavigationBar,
     },
     mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
@@ -362,7 +305,6 @@ export default {
                 displayWeekNumbers: true,
             },
             dragged_item: null,
-            current_tab: 0,
             meal_types: [],
             current_context_menu_item: null,
             options: {
@@ -404,7 +346,7 @@ export default {
         },
         item_height: function () {
             if (this.settings.displayPeriodUom === "week") {
-                return "10rem"
+                return "3rem"
             } else {
                 return "1.6rem"
             }
diff --git a/vue/src/components/MealPlanCalenderHeader.vue b/vue/src/components/MealPlanCalenderHeader.vue
index 5e9c8985..262d6799 100644
--- a/vue/src/components/MealPlanCalenderHeader.vue
+++ b/vue/src/components/MealPlanCalenderHeader.vue
@@ -29,7 +29,7 @@
                 <b-form-select class="ml-1" id="UomInput" v-model="settings.displayPeriodCount" :options="options.displayPeriodCount"></b-form-select>
             </span>
             <span
-                class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex align-items-center"
+                class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex align-items-center rounded"
                 @drop.prevent="onDeleteDrop($event)"
                 @dragenter.prevent="onDeleteDragEnter($event)"
                 @dragleave.prevent="onDeleteDragLeave($event)"
diff --git a/vue/src/components/MealPlanCard.vue b/vue/src/components/MealPlanCard.vue
index b04322fc..2fc06a25 100644
--- a/vue/src/components/MealPlanCard.vue
+++ b/vue/src/components/MealPlanCard.vue
@@ -1,52 +1,34 @@
 <template>
-    <div
-        v-hover
-        class="card cv-item meal-plan-card p-0"
-        :key="value.id"
-        :draggable="true"
-        :style="`top:${top};max-height:${item_height}`"
-        @dragstart="onDragItemStart(value, $event)"
-        @click="onClickItem(value, $event)"
-        :aria-grabbed="value == currentDragItem"
-        :class="value.classes"
-        @contextmenu.prevent="$emit('open-context-menu', $event, value)"
-    >
-        <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>
-        </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>
-                <div style="position: static">
-                    <div class="dropdown b-dropdown position-static btn-group">
-                        <button
-                            aria-haspopup="true"
-                            aria-expanded="false"
-                            type="button"
-                            class="btn btn-link text-decoration-none text-body pr-2 dropdown-toggle-no-caret"
-                            @click.stop="$emit('open-context-menu', $event, value)"
-                        >
-                            <i class="fas fa-ellipsis-v fa-lg"></i>
-                        </button>
-                    </div>
-                </div>
-            </a>
-        </div>
-        <div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
-            <span class="font-light">{{ title }}</span>
-        </div>
-        <b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
-        <b-img fluid class="card-img-bottom" :src="image_placeholder" v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
-        <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-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
-                <span class="font-light">{{ title }}</span>
+    <div v-hover
+         class="card cv-item meal-plan-card p-0"
+         :key="value.id"
+         :draggable="true"
+         :style="{'top': top, 'height': item_height, 'border-color': entry.entry.meal_type.color}"
+         @dragstart="onDragItemStart(value, $event)"
+         @click="onClickItem(value, $event)"
+         :aria-grabbed="value == currentDragItem"
+         :class="value.classes"
+         @contextmenu.prevent="$emit('open-context-menu', $event, value)">
+
+        <div class="d-flex flex-row align-items-center">
+            <div class="flex-column">
+                <img class="" style="object-fit: cover" :style="{'height': item_height, 'width': item_height}" :src="entry.entry.recipe.image"
+                     v-if="hasRecipe && detailed"/>
+                <img class="" style="object-fit: cover" :style="{'height': item_height, 'width': item_height}" :src="image_placeholder"
+                     v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"/>
+            </div>
+            <div class="flex-column flex-grow-0 align-middle justify-content-center">
+                <div class="card-body p-0 pl-1 align-middle">
+
+                    <span class="font-light" :class="{'two-line-text': detailed,'one-line-text': !detailed,}">
+                       <i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')" v-if="entry.entry.shopping"/>
+                        {{ title }}</span>
+                </div>
             </div>
         </div>
+
+
     </div>
 </template>
 
@@ -131,4 +113,22 @@ export default {
         font-size: 13px;
     }
 }
+
+.two-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.one-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>