Skip to content

Commit

Permalink
lots of improvements to recipe editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vabene1111
vabene1111 committed Dec 4, 2024
1 parent 931064a commit 1512238
Show file tree
Hide file tree
Showing 39 changed files with 260 additions and 193 deletions.
1 change: 1 addition & 0 deletions vue3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"mavon-editor": "^3.0.1",
"pinia": "^2.1.7",
"vue": "^3.5.7",
"vue-draggable-plus": "^0.6.0",
"vue-i18n": "9",
"vue-router": "4",
"vue-simple-calendar": "^7.1.0",
Expand Down
4 changes: 2 additions & 2 deletions vue3/src/components/display/IngredientsTableRow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
<v-tooltip v-model="showTooltip" activator="parent" location="start">{{ props.ingredient.note }}</v-tooltip>
</v-icon>
</td>
<td v-if="props.draggable">
<i class="fas fa-grip-lines drag-handle cursor-move"></i>
<td v-if="props.draggable" >
<v-icon icon="$dragHandle" class="drag-handle cursor-move"></v-icon>
</td>
</template>

Expand Down
41 changes: 30 additions & 11 deletions vue3/src/components/inputs/ModelSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@

:ref="`ref_${props.id}`"
class="material-multiselect"
:resolve-on-load="searchOnLoad"
:resolve-on-load="props.searchOnLoad"
v-model="model"
:options="search"
:on-create="createObject"
:createOption="props.allowCreate"
:delay="300"
:object="true"
:valueProp="props.itemValue"
:label="props.itemLabel"
:valueProp="itemValue"
:label="itemLabel"
:searchable="true"
:strict="false"
:disabled="props.disabled"
Expand All @@ -30,17 +30,18 @@
:noResultsText="$t('No_Results')"
:loading="loading"
@open="multiselect.refreshOptions()"
:append-to-body="appendToBody"
:append-to-body="props.appendToBody"
:classes="{
dropdown: 'multiselect-dropdown z-3000',
containerActive: '',
}"
/>

</v-input>
</template>

<script lang="ts" setup>
import {onBeforeMount, onMounted, PropType, ref, useTemplateRef} from "vue"
import {computed, onBeforeMount, onMounted, PropType, ref, useTemplateRef} from "vue"
import {EditorSupportedModels, GenericModel, getGenericModelFromString} from "@/types/Models"
import Multiselect from '@vueform/multiselect'
import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
Expand All @@ -55,8 +56,6 @@ const props = defineProps({
id: {type: String, required: false, default: Math.floor(Math.random()*10000).toString()},
itemLabel: {type: String, default: "name"},
itemValue: {type: String, default: "id"},
limit: {type: Number, default: 25},
disabled: {type: Boolean, default: false},
Expand All @@ -77,6 +76,26 @@ const props = defineProps({
searchOnLoad: {type: Boolean, default: false},
})
/**
* check if model has a non-standard value attribute defined, if not use "id" as the value attribute
*/
const itemValue = computed(() => {
if(modelClass.value.model.itemValue){
return modelClass.value.model.itemValue
}
return 'id'
})
/**
* check if model has a non-standard label attribute defined, if not use "name" as the value attribute
*/
const itemLabel = computed(() => {
if(modelClass.value.model.itemLabel){
return modelClass.value.model.itemLabel
}
return 'name'
})
const model = defineModel()
const modelClass = ref({} as GenericModel)
const loading = ref(false)
Expand Down Expand Up @@ -117,7 +136,7 @@ function search(query: string) {
* @param select$ reference to multiselect instance
*/
async function createObject(object: any, select$: Multiselect) {
return await modelClass.value.create({name: object[props.itemLabel]}).then((createdObj : any) => {
return await modelClass.value.create({name: object[itemLabel.value]}).then((createdObj : any) => {
useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000, createdObj)
emit('create', object)
return createdObj
Expand All @@ -132,11 +151,11 @@ async function createObject(object: any, select$: Multiselect) {
<style src="@vueform/multiselect/themes/default.css"></style>
<style>
.material-multiselect {
--ms-line-height: 2.5;
--ms-bg: rgba(235, 235, 235, 0.75);
--ms-line-height: 2.3;
--ms-bg: rgba(235, 235, 235, 0.3);
--ms-border-color: 0;
--ms-border-color-active: 0;
border-bottom: 4px #0f0f0f;
border-bottom: inset 1px #323232;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
Expand Down
224 changes: 118 additions & 106 deletions vue3/src/components/inputs/StepEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,152 @@
<template>

<!--TODO name, time, recipe, file(s), ingredients, quick add ingredients -->
<v-card>

<v-card variant="outlined">
<template #title>
<v-card-title v-if="step.name">{{ step.name }}</v-card-title>
<v-card-title v-else-if="stepIndex !== undefined">Step {{ stepIndex + 1 }}</v-card-title>
<v-card-title>
<v-chip color="primary">{{ props.stepIndex + 1 }}</v-chip>
{{ step.name }}
</v-card-title>
</template>
<template v-slot:append>
<v-btn size="small" variant="plain" icon="fas fa-sliders-h"></v-btn> <!--TODO implement -->
<v-btn size="small" variant="plain" icon>
<v-icon icon="fas fa-sliders-h"></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item prepend-icon="fas fa-plus-circle" @click="showTime = true" v-if="!showTime && step.time == 0">{{ $t('Time') }}</v-list-item>
<v-list-item prepend-icon="fas fa-plus-circle" @click="showFile = true" v-if="!showFile && step.file == null">{{ $t('File') }}</v-list-item>
<v-list-item prepend-icon="fas fa-plus-circle" @click="showRecipe = true" v-if="!showRecipe && step.stepRecipe == null">{{ $t('Recipe') }}</v-list-item>

<v-list-item prepend-icon="$delete">{{ $t('Delete') }}</v-list-item>
</v-list>
</v-menu>
</v-btn>
<v-icon icon="$dragHandle" class="drag-handle cursor-move"></v-icon>
</template>

<v-card-text>
<v-text-field
v-model="step.name"
label="Step Name"
></v-text-field>
<v-chip-group>
<v-chip v-if="step.time == 0"><i class="fas fa-plus-circle fa-fw mr-1"></i> Time</v-chip>
<v-chip v-if="step.instruction == ''"><i class="fas fa-plus-circle fa-fw mr-1"></i> Instructions</v-chip>
<v-chip v-if="step.file == null"><i class="fas fa-plus-circle fa-fw mr-1"></i> File</v-chip>
<v-chip v-if="step.stepRecipe == null"><i class="fas fa-plus-circle fa-fw mr-1"></i> Recipe</v-chip>
</v-chip-group>

<v-table density="compact">

<draggable tag="tbody" v-model="step.ingredients" handle=".drag-handle" item-key="id" @sort="sortIngredients">
<template #item="{element}">
<v-dialog>
<template v-slot:activator="{ props: activatorProps }">
<IngredientsTableRow v-bind="activatorProps" :ingredient="element" :key="element.id" :show-notes="false" :draggable="true"></IngredientsTableRow>
</template>
<template v-slot:default="{ isActive }">
<v-card >
<v-card-title>Ingredient</v-card-title>
<v-card-text>
<v-form>
<v-text-field
label="Amount"
v-model.number="element.amount"
></v-text-field>
<model-select model="Unit" v-model="element.unit" :multiple="false"></model-select>
<model-select model="Food" v-model="element.food" :multiple="false"></model-select>
<v-text-field
label="Note"
v-model="element.note"
></v-text-field>
</v-form>

</v-card-text>
</v-card>
</template>
</v-dialog>

</template>
</draggable>

</v-table>

<v-alert @click="dialog_markdown_edit = true" class="mt-2">
{{ step.instruction }}
</v-alert>

<v-row>
<v-col cols="12" md="6" v-if="showTime || step.time != 0">
<v-number-input :label="$t('Time')" v-model="step.time" :min="0" :step="5" control-variant="split"></v-number-input>
</v-col>
<v-col cols="12" md="6" v-if="showRecipe || step.stepRecipe != null">
<model-select model="Recipe" v-model="step.stepRecipe" append-to-body></model-select>
</v-col>
<v-col cols="12" md="6" v-if="showFile || step.file != null">
<model-select model="UserFile" v-model="step.file" append-to-body></model-select>
</v-col>
</v-row>

<v-row dense>
<v-col cols="12">
<v-label>{{ $t('Ingredients') }}</v-label>

<vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients">
<v-row v-for="(ingredient, index) in step.ingredients" dense>
<v-col cols="2">
<v-number-input :label="$t('Amount')" v-model="ingredient.amount" inset control-variant="stacked" :min="0"></v-number-input>
</v-col>
<v-col cols="3">
<model-select model="Unit" v-model="ingredient.unit"></model-select>
</v-col>
<v-col cols="3">
<model-select model="Food" v-model="ingredient.food"></model-select>
</v-col>
<v-col cols="3" @keydown.tab="insertAndFocusIngredient">
<v-text-field :label="$t('Note')" v-model="ingredient.note"></v-text-field>
</v-col>
<v-col cols="1">
<v-btn variant="plain" icon>
<v-icon icon="$settings" ></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item @click="step.ingredients.splice(index, 1)" prepend-icon="$delete">{{$t('Delete')}}</v-list-item>
</v-list>
</v-menu>
</v-btn>
<v-icon icon="$dragHandle" class="drag-handle"></v-icon>
</v-col>
</v-row>
</vue-draggable>
</v-col>
<v-col cols="12">
<v-label>{{ $t('Instructions') }}</v-label>
<v-alert @click="dialogMarkdownEdit = true" class="mt-2 cursor-text" min-height="52px">
{{ step.instruction }}
</v-alert>
</v-col>
</v-row>


</v-card-text>
</v-card>

<v-dialog
v-model="dialog_markdown_edit"
transition="dialog-bottom-transition">
<v-card>
<v-card-title>Ingredient</v-card-title>
<v-form>
<v-text-field></v-text-field>
</v-form>
</v-card>
</v-dialog>

<v-dialog
v-model="dialog_markdown_edit"
transition="dialog-bottom-transition"
fullscreen>
v-model="dialogMarkdownEdit"
:max-width="(mobile) ? '100vw': '75vw'"
:fullscreen="mobile">
<v-card>
<v-toolbar>
<v-toolbar-title>Edit Instructions</v-toolbar-title>
<v-btn icon="fas fa-close" @click="dialog_markdown_edit = false"></v-btn>
<v-btn icon="fas fa-close" @click="dialogMarkdownEdit = false"></v-btn>
</v-toolbar>
<step-markdown-editor class="h-100" :step="step" @change="step = $event.step;"></step-markdown-editor>

<step-markdown-editor class="h-100" v-model="step"></step-markdown-editor>
</v-card>
</v-dialog>
</template>

<script lang="ts">
import {defineComponent, PropType} from 'vue'
import {Step} from "@/openapi";
<script setup lang="ts">
import {ref} from 'vue'
import {Ingredient, Step} from "@/openapi";
import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
import IngredientsTable from "@/components/display/IngredientsTable.vue";
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
import draggable from "vuedraggable";
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {useDisplay} from "vuetify";
import {VueDraggable} from "vue-draggable-plus";
export default defineComponent({
name: "StepEditor",
components: {ModelSelect, draggable, IngredientsTableRow, IngredientsTable, StepMarkdownEditor},
emits: ['update:modelValue'],
props: {
modelValue: {
type: Object as PropType<Step>,
required: true,
},
stepIndex: {
type: Number,
required: false,
},
},
computed: {
step: {
get() {
return this.modelValue
},
set(value: Step) {
this.$emit('update:modelValue', value)
}
}
},
data() {
return {
dialog_markdown_edit: false,
}
},
methods: {
sortIngredients() {
this.step.ingredients.forEach((value, index) => {
value.order = index
})
}
}
const step = defineModel<Step>({required: true})
const props = defineProps({
stepIndex: {type: Number, required: true},
})
const {mobile} = useDisplay()
const showTime = ref(false)
const showRecipe = ref(false)
const showFile = ref(false)
const dialogMarkdownEdit = ref(false)
/**
* sort function called by draggable when ingredient table is sorted
*/
function sortIngredients() {
step.value.ingredients.forEach((value, index) => {
value.order = index
})
}
function insertAndFocusIngredient(event: KeyboardEvent){
console.log('TRIGGER TAB')
event.preventDefault()
step.value.ingredients.push(
{
amount: 0,
food: null,
unit: null
} as Ingredient
)
}
</script>


Expand Down
Loading

0 comments on commit 1512238

Please sign in to comment.