Merge branch 'develop' into draggable_pill_update

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -1,73 +1,81 @@
 <template>
   <div>
-    <div class="row">
-      <div class="col-12 calender-parent">
-        <calendar-view
-            :show-date="showDate" :enable-date-selection="true" class="theme-default"
-            @date-selection-finish="createEntryRange" :items="plan_items"
-            :display-period-uom="settings.displayPeriodUom"
-            :period-changed-callback="refreshData" :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"/>
-          </template>
+    <b-tabs content-class="mt-3">
+      <b-tab :title="$t('Planner')" active>
+        <div class="row">
+          <div class="col-12 calender-parent">
+            <calendar-view
+                :show-date="showDate" :enable-date-selection="true" class="theme-default"
+                @date-selection-finish="createEntryRange" :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
+                    :header-props="headerProps"
+                    @input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"/>
+              </template>
+            </calendar-view>
+          </div>
+        </div>
+      </b-tab>
+      <b-tab :title="$t('Settings')">
+        <div class="row mt-3">
+          <div class="col-3 calender-options">
+            <h5>{{ $t('CalenderSettings') }}</h5>
+            <b-form>
+              <b-form-group id="UomInput"
+                            :label="$t('Period')"
+                            :description="$t('PeriodToShow')"
+                            label-for="UomInput">
+                <b-form-select
+                    id="UomInput"
+                    v-model="settings.displayPeriodUom"
+                    :options="options.displayPeriodUom"
+                ></b-form-select>
+              </b-form-group>
+              <b-form-group id="PeriodInput"
+                            :label="$t('PeriodCount')"
+                            :description="$t('ShowHowManyPeriods')"
+                            label-for="PeriodInput">
+                <b-form-select
+                    id="PeriodInput"
+                    v-model="settings.displayPeriodCount"
+                    :options="options.displayPeriodCount"
+                ></b-form-select>
+              </b-form-group>
+              <b-form-group id="DaysInput"
+                            :label="$t('StartingDay')"
+                            :description="$t('StartingDay')"
+                            label-for="DaysInput">
+                <b-form-select
+                    id="DaysInput"
+                    v-model="settings.startingDayOfWeek"
+                    :options="dayNames"
+                ></b-form-select>
+              </b-form-group>
+            </b-form>
+          </div>
+          <div class="col-6">
+            <h5>{{ $t('MealTypes') }}</h5>
+            <b-form>
 
-          <template #header="{ headerProps }">
-            <calendar-view-header
-                :header-props="headerProps"
-                @input="setShowDate"/>
-          </template>
-        </calendar-view>
-      </div>
-    </div>
-    <div class="row mt-3">
-      <div class="col-3 calender-options">
-        <h5>{{ $t('CalenderSettings') }}</h5>
-        <b-form>
-          <b-form-group id="UomInput"
-                        :label="$t('Period')"
-                        :description="$t('PeriodToShow')"
-                        label-for="UomInput">
-            <b-form-select
-                id="UomInput"
-                v-model="settings.displayPeriodUom"
-                :options="options.displayPeriodUom"
-            ></b-form-select>
-          </b-form-group>
-          <b-form-group id="PeriodInput"
-                        :label="$t('PeriodCount')"
-                        :description="$t('ShowHowManyPeriods')"
-                        label-for="PeriodInput">
-            <b-form-select
-                id="PeriodInput"
-                v-model="settings.displayPeriodCount"
-                :options="options.displayPeriodCount"
-            ></b-form-select>
-          </b-form-group>
-          <b-form-group id="DaysInput"
-                        :label="$t('StartingDay')"
-                        :description="$t('StartingDay')"
-                        label-for="DaysInput">
-            <b-form-select
-                id="DaysInput"
-                v-model="settings.startingDayOfWeek"
-                :options="dayNames"
-            ></b-form-select>
-          </b-form-group>
-        </b-form>
-      </div>
-      <div class="col-6">
-        <h5>{{ $t('MealTypes') }}</h5>
-        <b-form>
+            </b-form>
+            <recipe-card :recipe="recipe_viewed" v-if="false"></recipe-card>
+          </div>
+        </div>
+      </b-tab>
+    </b-tabs>
 
-        </b-form>
-        <recipe-card :recipe="recipe_viewed" v-if="false"></recipe-card>
-      </div>
-    </div>
     <ContextMenu ref="menu">
       <template #menu="{ contextData }">
         <ContextMenuItem @click="$refs.menu.close();openEntryEdit(contextData.originalItem.entry)">
@@ -100,7 +108,7 @@
 import ContextMenu from "@/components/ContextMenu/ContextMenu";
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem";
 import "vue-simple-calendar/static/css/default.css"
-import {CalendarView, CalendarViewHeader, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
+import {CalendarView, CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
 import Vue from "vue";
 import {BootstrapVue} from "bootstrap-vue";
 import {ApiApiFactory} from "@/utils/openapi/api";
@@ -110,6 +118,7 @@ import moment from 'moment'
 import {ApiMixin, StandardToasts} from "@/utils/utils";
 import MealPlanEditModal from "../../components/MealPlanEditModal";
 import VueCookies from "vue-cookies";
+import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader";
 
 Vue.prototype.moment = moment
 Vue.use(BootstrapVue)
@@ -124,9 +133,9 @@ export default {
     MealPlanCard,
     RecipeCard,
     CalendarView,
-    CalendarViewHeader,
     ContextMenu,
-    ContextMenuItem
+    ContextMenuItem,
+    MealPlanCalenderHeader
   },
   mixins: [CalendarMathMixin, ApiMixin],
   data: function () {
@@ -253,7 +262,6 @@ export default {
     createEntryClick(data) {
       this.entryEditing = this.options.entryEditing
       this.entryEditing.date = moment(data).format('YYYY-MM-DD')
-      console.log(this.entryEditing)
       this.$bvModal.show(`edit-modal`)
     },
     findEntry(id) {
@@ -278,7 +286,6 @@ export default {
       })
     },
     moveEntryRight(data) {
-      console.log(data)
       this.plan_entries.forEach((entry) => {
         if (entry.id === data.id) {
           entry.date = moment(entry.date).add(1, 'd')
@@ -303,6 +310,9 @@ export default {
       let entry = this.findEntry(data.id)
       this.openEntryEdit(entry)
     },
+    openContextMenu($event, value) {
+      this.$refs.menu.open($event, value)
+    },
     openEntryEdit(entry) {
       this.$bvModal.show(`edit-modal`)
       this.entryEditing = entry
@@ -311,10 +321,15 @@ export default {
         this.entryEditing.title_placeholder = this.entryEditing.recipe.name
       }
     },
-    refreshData() {
+    periodChangedCallback(date) {
       let apiClient = new ApiApiFactory()
 
-      apiClient.listMealPlans().then(result => {
+      apiClient.listMealPlans({
+        query: {
+          from_date: moment(date.periodStart).format('YYYY-MM-DD'),
+          to_date: moment(date.periodEnd).format('YYYY-MM-DD')
+        }
+      }).then(result => {
         this.plan_entries = result.data
       })
       apiClient.listMealTypes().then(result => {

vue/src/components/GenericMultiselect.vue

@@ -38,12 +38,24 @@ export default {
   },
   props: {
     placeholder: {type: String, default: undefined},
-    model: {type: Object, default () {return {}}},
+    model: {
+      type: Object, default() {
+        return {}
+      }
+    },
     label: {type: String, default: 'name'},
     parent_variable: {type: String, default: undefined},
     limit: {type: Number, default: 10,},
-    sticky_options: {type:Array, default(){return []}},
-    initial_selection: {type:Array, default(){return []}},
+    sticky_options: {
+      type: Array, default() {
+        return []
+      }
+    },
+    initial_selection: {
+      type: Array, default() {
+        return []
+      }
+    },
     multiple: {type: Boolean, default: true},
     allow_create: {type: Boolean, default: false}, // TODO: this will create option to add new drop-downs
     create_placeholder: {type: String, default: 'You Forgot to Add a Tag Placeholder'},
@@ -72,17 +84,33 @@ export default {
       }
       this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
         this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
+        if (this.selected_objects.length === 0 && this.initial_selection.length === 0 && this.objects.length > 0) {
+          this.objects.forEach((item) => {
+            if ("default" in item) {
+              if (item.default) {
+                if(this.multiple) {
+                  this.selected_objects = [item]
+                } else {
+                  this.selected_objects = item
+                }
+                this.selectionChanged()
+              }
+            }
+          })
+        }
       })
     },
     selectionChanged: function () {
       this.$emit('change', {var: this.parent_variable, val: this.selected_objects})
-      
+
     },
     addNew(e) {
       this.$emit('new', e)
       // could refactor as Promise - seems unecessary
-      setTimeout(() => {  this.search(''); }, 750);
-      
+      setTimeout(() => {
+        this.search('');
+      }, 750);
+
     }
   }
 }

vue/src/components/MealPlanCalenderHeader.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="cv-header">
+    <div class="cv-header-nav">
+      <button
+          :disabled="!headerProps.previousYear"
+          class="previousYear"
+          aria-label="Previous Year"
+          @click.prevent="onInput(headerProps.previousYear)"
+      >
+        {{ previousYearLabel }}
+      </button>
+      <button
+          :disabled="!headerProps.previousPeriod"
+          class="previousPeriod"
+          aria-label="Previous Period"
+          @click.prevent="onInput(headerProps.previousPeriod)"
+          v-html="previousPeriodLabel"
+      />
+      <button
+          class="currentPeriod"
+          aria-label="Current Period"
+          @click.prevent="onInput(headerProps.currentPeriod)"
+      >
+        {{ headerProps.currentPeriodLabel }}
+      </button>
+      <button
+          :disabled="!headerProps.nextPeriod"
+          class="nextPeriod"
+          aria-label="Next Period"
+          @click.prevent="onInput(headerProps.nextPeriod)"
+      >
+        {{ nextPeriodLabel }}
+      </button>
+      <button
+          :disabled="!headerProps.nextYear"
+          class="nextYear"
+          aria-label="Next Year"
+          @click.prevent="onInput(headerProps.nextYear)">
+        {{ nextYearLabel }}
+      </button>
+    </div>
+    <div class="periodLabel">
+      <slot name="label">{{ headerProps.periodLabel }}</slot>
+    </div>
+    <div class="actionArea d-none d-sm-flex">
+      <span class="delete-area text-danger p-1 mr-2" @drop.prevent="onDeleteDrop($event)"
+            @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i
+          class="fas fa-trash"></i> {{ $t('DragHereToDelete') }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "MealPlanCalenderHeader",
+  props: {
+    headerProps: {
+      type: Object,
+      required: true,
+    },
+    previousYearLabel: {type: String, default: "<<"},
+    previousPeriodLabel: {type: String, default: "<"},
+    nextPeriodLabel: {type: String, default: ">"},
+    nextYearLabel: {type: String, default: ">>"},
+  },
+  methods: {
+    onInput(d) {
+      this.$emit("input", d)
+    },
+    onDeleteDragEnter(e) {
+      e.currentTarget.classList.add("draghover")
+    },
+    onDeleteDragLeave(e) {
+      e.currentTarget.classList.remove("draghover")
+    },
+    onDeleteDrop(e) {
+      e.currentTarget.classList.remove("draghover")
+      this.$emit("delete-dragged")
+    },
+  },
+}
+</script>
+<style>
+.cv-header {
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row nowrap;
+  align-items: center;
+  min-height: 2.5em;
+  border-width: 1px 1px 0 1px;
+}
+
+.cv-header .periodLabel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row nowrap;
+  min-height: 1.5em;
+  line-height: 1;
+  font-size: 1.5em;
+}
+
+.cv-header .actionArea {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row nowrap;
+  min-height: 1.5em;
+  line-height: 1;
+  font-size: 1.5em;
+}
+
+.delete-area {
+  border-style: dotted;
+  margin-left: auto;
+  order: 2;
+  user-select: none
+}
+
+.delete-area.draghover {
+  box-shadow: inset 0 0 0.1em 0.1em #A7240E !important;
+}
+
+.cv-header,
+.cv-header button {
+  border-style: solid;
+  border-color: #ddd;
+}
+
+.cv-header-nav,
+.cv-header .periodLabel {
+  margin: 0.1em 0.6em;
+}
+
+.cv-header-nav button,
+.cv-header .periodLabel {
+  padding: 0.4em 0.6em;
+}
+
+.cv-header button {
+  box-sizing: border-box;
+  line-height: 1em;
+  font-size: 1em;
+  border-width: 1px;
+}
+</style>

vue/src/components/MealPlanCard.vue

@@ -5,7 +5,7 @@
        @click="onClickItem(value, $event)"
        :aria-grabbed="value == currentDragItem"
        :class="value.classes" :title="title"
-       @contextmenu.prevent="$parent.$parent.$refs.menu.open($event, value)">
+       @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">{{
@@ -20,7 +20,7 @@
           <div class="dropdown b-dropdown position-static btn-group">
             <button aria-haspopup="true" aria-expanded="false" type="button"
                     class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
-                    @click.stop="$parent.$parent.$refs.menu.open($event, value)"><i class="fas fa-ellipsis-v fa-lg"></i>
+                    @click.stop="$emit('open-context-menu', $event, value)"><i class="fas fa-ellipsis-v fa-lg"></i>
             </button>
           </div>
         </div>
@@ -31,6 +31,7 @@
       <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>
@@ -63,7 +64,8 @@ export default {
   data: function () {
     return {
       dateSelectionOrigin: null,
-      currentDragItem: null
+      currentDragItem: null,
+      image_placeholder: window.IMAGE_PLACEHOLDER
     }
   },
   computed: {

vue/src/locales/pl.json

@@ -0,0 +1,162 @@
+{
+    "warning_feature_beta": "",
+    "err_fetching_resource": "",
+    "err_creating_resource": "",
+    "err_updating_resource": "",
+    "err_deleting_resource": "",
+    "success_fetching_resource": "",
+    "success_creating_resource": "",
+    "success_updating_resource": "",
+    "success_deleting_resource": "",
+    "step_time_minutes": "",
+    "confirm_delete": "",
+    "import_running": "",
+    "all_fields_optional": "",
+    "convert_internal": "",
+    "show_only_internal": "",
+    "show_split_screen": "",
+    "Log_Recipe_Cooking": "",
+    "External_Recipe_Image": "",
+    "Add_to_Shopping": "",
+    "Add_to_Plan": "",
+    "Step_start_time": "",
+    "Sort_by_new": "",
+    "Recipes_per_page": "",
+    "Show_as_header": "",
+    "Hide_as_header": "",
+    "Copy_template_reference": "",
+    "Save_and_View": "",
+    "Manage_Books": "",
+    "Meal_Plan": "",
+    "Select_Book": "",
+    "Recipe_Image": "",
+    "Import_finished": "",
+    "View_Recipes": "",
+    "Log_Cooking": "",
+    "New_Recipe": "",
+    "Url_Import": "",
+    "Reset_Search": "",
+    "Recently_Viewed": "",
+    "Load_More": "",
+    "New_Keyword": "",
+    "Delete_Keyword": "",
+    "Edit_Keyword": "",
+    "Edit_Recipe": "",
+    "Move_Keyword": "",
+    "Merge_Keyword": "",
+    "Hide_Keywords": "",
+    "Hide_Recipes": "",
+    "Move_Up": "",
+    "Move_Down": "",
+    "Step_Name": "",
+    "Step_Type": "",
+    "Make_Header": "",
+    "Make_Ingredient": "",
+    "Enable_Amount": "",
+    "Disable_Amount": "",
+    "Add_Step": "",
+    "Keywords": "",
+    "Books": "",
+    "Proteins": "",
+    "Fats": "",
+    "Carbohydrates": "",
+    "Calories": "",
+    "Nutrition": "",
+    "Date": "",
+    "Share": "",
+    "Automation": "",
+    "Parameter": "",
+    "Export": "",
+    "Copy": "",
+    "Rating": "",
+    "Close": "",
+    "Cancel": "",
+    "Link": "",
+    "Add": "",
+    "New": "",
+    "Note": "",
+    "Success": "",
+    "Failure": "",
+    "Ingredients": "",
+    "Supermarket": "",
+    "Categories": "",
+    "Category": "",
+    "Selected": "",
+    "min": "",
+    "Servings": "",
+    "Waiting": "",
+    "Preparation": "",
+    "External": "",
+    "Size": "",
+    "Files": "",
+    "File": "",
+    "Edit": "",
+    "Delete": "",
+    "Open": "",
+    "Ok": "",
+    "Save": "",
+    "Step": "",
+    "Search": "",
+    "Import": "",
+    "Print": "",
+    "Settings": "",
+    "or": "",
+    "and": "",
+    "Information": "",
+    "Download": "",
+    "Create": "",
+    "Advanced Search Settings": "",
+    "View": "",
+    "Recipes": "",
+    "Move": "",
+    "Merge": "",
+    "Parent": "",
+    "delete_confirmation": "",
+    "move_confirmation": "",
+    "merge_confirmation": "",
+    "create_rule": "",
+    "move_selection": "",
+    "merge_selection": "",
+    "Root": "",
+    "Ignore_Shopping": "",
+    "Shopping_Category": "",
+    "Edit_Food": "",
+    "Move_Food": "",
+    "New_Food": "",
+    "Hide_Food": "",
+    "Food_Alias": "",
+    "Unit_Alias": "",
+    "Keyword_Alias": "",
+    "Delete_Food": "",
+    "No_ID": "",
+    "Meal_Plan_Days": "",
+    "merge_title": "",
+    "move_title": "",
+    "Food": "",
+    "Recipe_Book": "",
+    "del_confirmation_tree": "",
+    "delete_title": "",
+    "create_title": "",
+    "edit_title": "",
+    "Name": "",
+    "Type": "",
+    "Description": "",
+    "Recipe": "",
+    "tree_root": "",
+    "Icon": "",
+    "Unit": "",
+    "No_Results": "",
+    "New_Unit": "",
+    "Create_New_Shopping Category": "",
+    "Create_New_Food": "",
+    "Create_New_Keyword": "",
+    "Create_New_Unit": "",
+    "and_up": "",
+    "Instructions": "",
+    "Unrated": "",
+    "Automate": "",
+    "Key_Ctrl": "",
+    "Key_Shift": "",
+    "Time": "",
+    "Text": ""
+}