mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 04:39:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

meal plan stuff

Browse Source
This commit is contained in:
vabene1111
2024-05-01 15:37:33 +02:00
parent f961413e94
commit 6d813ebb2f
4 changed files with 59 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
vue3/src/components/inputs/ModelSelect.vue
View File

@@ -1,58 +1,39 @@
<template>
<v-input>
<!-- &lt;!&ndash;TODO Problems: 1. behind other cards when those are underneath the element, making card overflow visible breaks cards &ndash;&gt;-->
<!-- <VueMultiselect-->
<!-- :id="id"-->
<!-- v-model="selected_items"-->
<!-- :options="items"-->
<!-- :close-on-select="true"-->
<!-- :clear-on-select="true"-->
<!-- :hide-selected="multiple"-->
<!-- :preserve-search="true"-->
<!-- :internal-search="false"-->
<!-- :limit="limit"-->
<!-- :placeholder="model"-->
<!-- :label="label"-->
<!-- track-by="id"-->
<!-- :multiple="multiple"-->
<!-- :taggable="allowCreate"-->
<!-- tag-placeholder="TODO CREATE PLACEHOLDER"-->
<!-- :loading="search_loading"-->
<!-- @search-change="debouncedSearchFunction"-->
<!-- @input="selectionChanged"-->
<!-- @tag="addItem"-->
<!-- @open="search('')"-->
<!-- :disabled="disabled"-->
<!-- class="material-multiselect"-->
<!-- >-->
<!-- </VueMultiselect>-->
<!--TODO resolve-on-load false for now, race condition with model class, make prop once better solution is found -->
<!-- TODO strange behavior/layering issues with appendTo body, find soltion to make it work -->
<Multiselect
:id="id"
class="material-multiselect z-max"
:resolve-on-load="false"
v-model="model"
:options="search"
:delay="300"
:object="true"
valueProp="id"
:label="label"
:valueProp="itemValue"
:label="itemLabel"
:searchable="true"
:strict="false"
:disabled="disabled"
:mode="mode"
:can-clear="canClear"
:can-deselect="canClear"
:limit="limit"
placeholder="TODO ADD LOCALIZED PLACEHOLDER"
noOptionsText="TODO ADD LOCALIZED NO-OPTIONS"
noResultsText="TODO ADD LOCALIZED NO-RESULTS"
/>
</v-input>
</template>
<script lang="ts" setup>
import {computed, onMounted, PropType, ref, Ref} from "vue"
import {ApiApi} from "@/openapi/index.js"
import {onMounted, PropType, ref, Ref} from "vue"
import {useDebounceFn} from "@vueuse/core"
import {GenericModel, getModelFromStr} from "@/types/Models"
import Multiselect from '@vueform/multiselect'
import {ErrorMessageType, MessageType, useMessageStore} from "@/stores/MessageStore";
const emit = defineEmits(['update:modelValue'])
@@ -61,22 +42,22 @@ const props = defineProps({
id: {type: String, required: false, default: Math.random().toString()},
itemLabel: {type: String, default: "name"},
itemValue: {type: String, default: "id"},
limit: {type: Number, default: 25},
disabled: {type: Boolean, default: false},
canClear: {type: Boolean, default: true},
mode: {type: String as PropType<'single' | 'multiple' | 'tags'>, default: 'single'},
// not verified
multiple: {type: Boolean, default: true},
limit: {type: Number, default: 25},
allowCreate: {type: Boolean, default: false},
search_on_load: {type: Boolean, default: false},
clearable: {type: Boolean, default: false},
chips: {type: Boolean, default: undefined},
itemName: {type: String, default: "name"},
itemValue: {type: String, default: "id"},
placeholder: {type: String, default: undefined},
label: {type: String, default: "name"},
parent_variable: {type: String, default: undefined},
sticky_options: {
@@ -85,42 +66,15 @@ const props = defineProps({
return []
},
},
initial_selection: {
type: Array,
default() {
return []
},
},
initial_single_selection: {
type: Object,
default: undefined,
},
disabled: {type: Boolean, default: false},
})
const model = defineModel()
const model_class = ref({} as GenericModel<any>)
const items: Ref<Array<any>> = ref([])
const selected_items: Ref<Array<any> | any> = ref(undefined)
const search_query = ref("")
const search_loading = ref(false)
const elementId = ref((Math.random() * 100000).toString())
onMounted(() => {
model_class.value = getModelFromStr(props.model)
if (props.search_on_load) {
debouncedSearchFunction("")
}
})
/**
* debounced search function bound to search input changing
*/
const debouncedSearchFunction = useDebounceFn((query: string) => {
search(query)
}, 300)
/**
* performs the API request to search for the selected input
@@ -130,36 +84,33 @@ function search(query: string) {
return model_class.value.list(query).then((r) => {
return r
}).catch((err) => {
//useMessageStore().addMessage(MessageType.ERROR, err, 8000)
useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
}).finally(() => {
search_loading.value = false
})
}
// TODO refactor for new multiselect
function addItem(item: string) {
console.log("CREATEING NEW with -> ", item)
const api = new ApiApi()
api.apiKeywordList()
model_class.value.create(item).then((createdObj) => {
//StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
useMessageStore().addMessage(MessageType.SUCCESS, 'Created', 5000)
if (selected_items.value instanceof Array) {
selected_items.value.push(createdObj)
} else {
selected_items.value = createdObj
}
items.value.push(createdObj)
selectionChanged()
}).catch((err) => {
//StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
}).finally(() => {
search_loading.value = false
})
}
function selectionChanged() {
emit('update:modelValue', selected_items)
}
</script>
<style src="@vueform/multiselect/themes/default.css"></style>