github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-24 07:15:24 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Recipe Organizer Dialog

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 12:14:22 +00:00
commit 00fab04fee
1 changed files with 80 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

76
frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
View file

@ -60,54 +60,39 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store"; import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated"; import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated";
const CREATED_ITEM_EVENT = "created-item"; const CREATED_ITEM_EVENT = "created-item";
export default defineNuxtComponent({ interface Props {
props: { color?: string | null;
modelValue: { tagDialog?: boolean;
type: Boolean, itemType?: RecipeOrganizer;
default: false, }
}, const props = withDefaults(defineProps<Props>(), {
color: { color: null,
type: String, tagDialog: true,
default: null, itemType: "category" as RecipeOrganizer,
}, });
tagDialog: {
type: Boolean, const emit = defineEmits<{
default: true, "created-item": [item: any];
}, }>();
itemType: {
type: String as () => RecipeOrganizer, const dialog = defineModel<boolean>({ default: false });
default: "category",
},
},
emits: ["update:modelValue"],
setup(props, context) {
const i18n = useI18n(); const i18n = useI18n();
const state = reactive({ const name = ref("");
name: "", const onHand = ref(false);
onHand: false,
});
const dialog = computed({
get() {
return props.modelValue;
},
set(value) {
context.emit("update:modelValue", value);
},
});
watch( watch(
() => props.modelValue, dialog,
(val: boolean) => { (val: boolean) => {
if (!val) state.name = ""; if (!val) name.value = "";
}, },
); );
@ -154,25 +139,14 @@ export default defineNuxtComponent({
async function select() { async function select() {
if (store) { if (store) {
// @ts-expect-error the same state is used for different organizer types, which have different requirements // @ts-expect-error the same state is used for different organizer types, which have different requirements
await store.actions.createOne({ ...state }); await store.actions.createOne({ name: name.value, onHand: onHand.value });
} }
const newItem = store.store.value.find(item => item.name === state.name); const newItem = store.store.value.find(item => item.name === name.value);
context.emit(CREATED_ITEM_EVENT, newItem); emit(CREATED_ITEM_EVENT, newItem);
dialog.value = false; dialog.value = false;
} }
return {
Organizer,
...toRefs(state),
dialog,
properties,
rules,
select,
};
},
});
</script> </script>
<style></style> <style></style>