mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-21 22:13:31 -07:00
Recipe Organizer Dialog
This commit is contained in:
parent
1c31e9c90e
commit
00fab04fee
1 changed files with 80 additions and 106 deletions
|
@ -60,119 +60,93 @@
|
||||||
</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,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
itemType: {
|
|
||||||
type: String as () => RecipeOrganizer,
|
|
||||||
default: "category",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ["update:modelValue"],
|
|
||||||
setup(props, context) {
|
|
||||||
const i18n = useI18n();
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
name: "",
|
|
||||||
onHand: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const dialog = computed({
|
|
||||||
get() {
|
|
||||||
return props.modelValue;
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
context.emit("update:modelValue", value);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(val: boolean) => {
|
|
||||||
if (!val) state.name = "";
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const userApi = useUserApi();
|
|
||||||
|
|
||||||
const store = (() => {
|
|
||||||
switch (props.itemType) {
|
|
||||||
case Organizer.Tag:
|
|
||||||
return useTagStore();
|
|
||||||
case Organizer.Tool:
|
|
||||||
return useToolStore();
|
|
||||||
default:
|
|
||||||
return useCategoryStore();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
const properties = computed(() => {
|
|
||||||
switch (props.itemType) {
|
|
||||||
case Organizer.Tag:
|
|
||||||
return {
|
|
||||||
title: i18n.t("tag.create-a-tag"),
|
|
||||||
label: i18n.t("tag.tag-name"),
|
|
||||||
api: userApi.tags,
|
|
||||||
};
|
|
||||||
case Organizer.Tool:
|
|
||||||
return {
|
|
||||||
title: i18n.t("tool.create-a-tool"),
|
|
||||||
label: i18n.t("tool.tool-name"),
|
|
||||||
api: userApi.tools,
|
|
||||||
};
|
|
||||||
default:
|
|
||||||
return {
|
|
||||||
title: i18n.t("category.create-a-category"),
|
|
||||||
label: i18n.t("category.category-name"),
|
|
||||||
api: userApi.categories,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const rules = {
|
|
||||||
required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string),
|
|
||||||
};
|
|
||||||
|
|
||||||
async function select() {
|
|
||||||
if (store) {
|
|
||||||
// @ts-expect-error the same state is used for different organizer types, which have different requirements
|
|
||||||
await store.actions.createOne({ ...state });
|
|
||||||
}
|
|
||||||
|
|
||||||
const newItem = store.store.value.find(item => item.name === state.name);
|
|
||||||
|
|
||||||
context.emit(CREATED_ITEM_EVENT, newItem);
|
|
||||||
dialog.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
Organizer,
|
|
||||||
...toRefs(state),
|
|
||||||
dialog,
|
|
||||||
properties,
|
|
||||||
rules,
|
|
||||||
select,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
"created-item": [item: any];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const dialog = defineModel<boolean>({ default: false });
|
||||||
|
|
||||||
|
const i18n = useI18n();
|
||||||
|
|
||||||
|
const name = ref("");
|
||||||
|
const onHand = ref(false);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
dialog,
|
||||||
|
(val: boolean) => {
|
||||||
|
if (!val) name.value = "";
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const userApi = useUserApi();
|
||||||
|
|
||||||
|
const store = (() => {
|
||||||
|
switch (props.itemType) {
|
||||||
|
case Organizer.Tag:
|
||||||
|
return useTagStore();
|
||||||
|
case Organizer.Tool:
|
||||||
|
return useToolStore();
|
||||||
|
default:
|
||||||
|
return useCategoryStore();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const properties = computed(() => {
|
||||||
|
switch (props.itemType) {
|
||||||
|
case Organizer.Tag:
|
||||||
|
return {
|
||||||
|
title: i18n.t("tag.create-a-tag"),
|
||||||
|
label: i18n.t("tag.tag-name"),
|
||||||
|
api: userApi.tags,
|
||||||
|
};
|
||||||
|
case Organizer.Tool:
|
||||||
|
return {
|
||||||
|
title: i18n.t("tool.create-a-tool"),
|
||||||
|
label: i18n.t("tool.tool-name"),
|
||||||
|
api: userApi.tools,
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
title: i18n.t("category.create-a-category"),
|
||||||
|
label: i18n.t("category.category-name"),
|
||||||
|
api: userApi.categories,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string),
|
||||||
|
};
|
||||||
|
|
||||||
|
async function select() {
|
||||||
|
if (store) {
|
||||||
|
// @ts-expect-error the same state is used for different organizer types, which have different requirements
|
||||||
|
await store.actions.createOne({ name: name.value, onHand: onHand.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
const newItem = store.store.value.find(item => item.name === name.value);
|
||||||
|
|
||||||
|
emit(CREATED_ITEM_EVENT, newItem);
|
||||||
|
dialog.value = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue