added meal type settings to meal plan settings component
This commit is contained in:
parent
1a20c4bef5
commit
d33b0d2254
@ -58,6 +58,7 @@ import SmallText from "@/components/Modals/SmallText"
|
|||||||
import HelpBadge from "@/components/Badges/Help"
|
import HelpBadge from "@/components/Badges/Help"
|
||||||
import NumberInput from "@/components/Modals/NumberInput.vue";
|
import NumberInput from "@/components/Modals/NumberInput.vue";
|
||||||
import TextAreaInput from "@/components/Modals/TextAreaInput.vue";
|
import TextAreaInput from "@/components/Modals/TextAreaInput.vue";
|
||||||
|
import ColorInput from "@/components/Modals/ColorInput.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "GenericModalForm",
|
name: "GenericModalForm",
|
||||||
@ -71,7 +72,8 @@ export default {
|
|||||||
HelpBadge,
|
HelpBadge,
|
||||||
DateInput,
|
DateInput,
|
||||||
NumberInput,
|
NumberInput,
|
||||||
TextAreaInput
|
TextAreaInput,
|
||||||
|
ColorInput
|
||||||
},
|
},
|
||||||
mixins: [ApiMixin, ToastMixin],
|
mixins: [ApiMixin, ToastMixin],
|
||||||
props: {
|
props: {
|
||||||
|
@ -12,6 +12,8 @@
|
|||||||
></generic-multiselect>
|
></generic-multiselect>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
<b-form v-if="meal_plan_store">
|
<b-form v-if="meal_plan_store">
|
||||||
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
|
<b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
|
||||||
label-for="UomInput">
|
label-for="UomInput">
|
||||||
@ -34,6 +36,38 @@
|
|||||||
</b-form-checkbox>
|
</b-form-checkbox>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
</b-form>
|
</b-form>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<h5>{{ $t("Meal_Types") }}
|
||||||
|
<button type="button" class="btn btn-success shadow-none float-right" @click="generic_action = Actions.CREATE;"><i class="fas fa-plus"></i></button>
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
<draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" class="mt-4"
|
||||||
|
@sort="sortMealTypes()" ghost-class="ghost" handle=".handle">
|
||||||
|
<b-list-group-item v-for="mt in meal_types" v-bind:key="mt.id">
|
||||||
|
|
||||||
|
<button type="button" class="btn handle shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
|
||||||
|
|
||||||
|
<b-badge :style="{'background-color': mt.color}"><i class="fas fa-palette"></i> </b-badge>
|
||||||
|
<span> {{ mt.name }} </span>
|
||||||
|
|
||||||
|
<b-badge v-if="mt.default">{{ $t('Default') }}</b-badge>
|
||||||
|
<div class="btn-group float-right">
|
||||||
|
<button type="button" class="btn btn-primary shadow-none" @click="generic_action = Actions.UPDATE; editing_meal_type=mt;"><i class="fas fa-edit"></i></button>
|
||||||
|
<button type="button" class="btn btn-danger shadow-none" @click="generic_action = Actions.DELETE; editing_meal_type=mt;"><i class="fas fa-trash-alt"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</b-list-group-item>
|
||||||
|
</draggable>
|
||||||
|
<b-list-group>
|
||||||
|
|
||||||
|
|
||||||
|
</b-list-group>
|
||||||
|
|
||||||
|
<generic-modal-form :model="Models.MEAL_TYPE" :action="generic_action" :show="generic_action !== null"
|
||||||
|
:item1="editing_meal_type"
|
||||||
|
@finish-action="finishGenericAction"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -45,16 +79,16 @@ import axios from "axios";
|
|||||||
import GenericMultiselect from "@/components/GenericMultiselect";
|
import GenericMultiselect from "@/components/GenericMultiselect";
|
||||||
import {useMealPlanStore} from "@/stores/MealPlanStore";
|
import {useMealPlanStore} from "@/stores/MealPlanStore";
|
||||||
import {CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
|
import {CalendarMathMixin} from "vue-simple-calendar/src/components/bundle";
|
||||||
|
import draggable from "vuedraggable"
|
||||||
|
import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
|
||||||
|
|
||||||
axios.defaults.xsrfCookieName = 'csrftoken'
|
axios.defaults.xsrfCookieName = 'csrftoken'
|
||||||
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
|
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
|
||||||
|
|
||||||
let SETTINGS_COOKIE_NAME = "mealplan_settings"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "MealPlanSettingsComponent",
|
name: "MealPlanSettingsComponent",
|
||||||
mixins: [ApiMixin, CalendarMathMixin],
|
mixins: [ApiMixin, CalendarMathMixin],
|
||||||
components: {GenericMultiselect},
|
components: {GenericModalForm, draggable, GenericMultiselect},
|
||||||
props: {
|
props: {
|
||||||
user_id: Number,
|
user_id: Number,
|
||||||
},
|
},
|
||||||
@ -71,6 +105,9 @@ export default {
|
|||||||
],
|
],
|
||||||
displayPeriodCount: [1, 2, 3, 4],
|
displayPeriodCount: [1, 2, 3, 4],
|
||||||
},
|
},
|
||||||
|
meal_types: [],
|
||||||
|
generic_action: null,
|
||||||
|
editing_meal_type: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -79,6 +116,8 @@ export default {
|
|||||||
this.loadSettings()
|
this.loadSettings()
|
||||||
|
|
||||||
this.meal_plan_store = useMealPlanStore()
|
this.meal_plan_store = useMealPlanStore()
|
||||||
|
|
||||||
|
this.loadMealTypes()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadSettings: function () {
|
loadSettings: function () {
|
||||||
@ -107,6 +146,36 @@ export default {
|
|||||||
})
|
})
|
||||||
return options
|
return options
|
||||||
},
|
},
|
||||||
|
loadMealTypes: function () {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
apiClient.listMealTypes().then(result => {
|
||||||
|
this.meal_types = result.data
|
||||||
|
}).catch(err => {
|
||||||
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
sortMealTypes() {
|
||||||
|
this.meal_types.forEach(function (element, index) {
|
||||||
|
element.order = index
|
||||||
|
})
|
||||||
|
|
||||||
|
this.meal_types.forEach((meal_type) => {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.updateMealType(meal_type.id, meal_type).then((e) => {
|
||||||
|
|
||||||
|
}).catch((err) => {
|
||||||
|
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
finishGenericAction: function (e) {
|
||||||
|
if (e !== 'cancel') {
|
||||||
|
this.loadMealTypes()
|
||||||
|
}
|
||||||
|
this.editing_meal_type = null;
|
||||||
|
this.generic_action = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user