Merge branch 'mealie-recipes:mealie-next' into manage-data-improve-delete-prompt

This commit is contained in:
Kuchenpirat 2023-11-21 15:34:21 +01:00 committed by GitHub
commit e98eee56be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 605 additions and 24 deletions

View File

@ -131,8 +131,8 @@ export default defineComponent({
async function select() {
if (store) {
// @ts-ignore - only property really required is the name
await store.actions.createOne({ name: state.name });
// @ts-expect-error the same state is used for different organizer types, which have different requirements
await store.actions.createOne({ ...state });
}
const newItem = store.items.value.find((item) => item.name === state.name);

View File

@ -16,6 +16,7 @@
<BaseDialog v-if="updateTarget" v-model="dialogs.update" :title="$t('general.update')" @confirm="updateOne()">
<v-card-text>
<v-text-field v-model="updateTarget.name" label="Name"> </v-text-field>
<v-checkbox v-if="itemType === Organizer.Tool" v-model="updateTarget.onHand" :label="$t('tool.on-hand')"></v-checkbox>
</v-card-text>
</BaseDialog>
@ -75,7 +76,7 @@ import Fuse from "fuse.js";
import { defineComponent, computed, ref, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
import { useContextPresets } from "~/composables/use-context-presents";
import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
import { RecipeOrganizer } from "~/lib/api/types/non-generated";
import { Organizer, RecipeOrganizer } from "~/lib/api/types/non-generated";
import { useRouteQuery } from "~/composables/use-router";
import { deepCopy } from "~/composables/use-utils";
@ -83,6 +84,7 @@ interface GenericItem {
id: string;
name: string;
slug: string;
onHand: boolean;
}
export default defineComponent({
@ -217,6 +219,7 @@ export default defineComponent({
updateTarget,
deleteOne,
deleteTarget,
Organizer,
presets,
itemsSorted,
searchString,

View File

@ -14,33 +14,42 @@
<!-- Model -->
<v-list v-if="mode === MODES.model" dense>
<v-list-item-group v-model="itemGroup">
<v-list-item v-for="(item, index) in items" :key="index" @click="setValue(item)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<template v-for="(item, index) in items">
<v-list-item :key="index" @click="setValue(item)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
<!-- Links -->
<v-list v-else-if="mode === MODES.link" dense>
<v-list-item-group v-model="itemGroup">
<v-list-item v-for="(item, index) in items" :key="index" :to="item.to">
<template v-for="(item, index) in items">
<v-list-item :key="index" :to="item.to">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</template>
</v-list-item-group>
</v-list>
<!-- Event -->
<v-list v-else-if="mode === MODES.event" dense>
<v-list-item v-for="(item, index) in items" :key="index" @click="$emit(item.event)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<template v-for="(item, index) in items">
<v-list-item :key="index" @click="$emit(item.event)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</v-list-item>
</template>
</v-list>
</v-menu>
</template>
@ -64,6 +73,7 @@ export interface MenuItem {
to?: string;
value?: string;
event?: string;
divider?: boolean;
}
export default defineComponent({

View File

@ -953,7 +953,22 @@
"select-data": "Select Data",
"select-language": "Select Language",
"columns": "Columns",
"combine": "Combine"
"combine": "Combine",
"categories": {
"edit-category": "Edit Category",
"new-category": "New Category",
"category-data": "Category Data"
},
"tags": {
"new-tag": "New Tag",
"edit-tag": "Edit Tag",
"tag-data": "Tag Data"
},
"tools": {
"new-tool": "New Tool",
"edit-tool": "Edit Tool",
"tool-data": "Tool Data"
}
},
"user-registration": {
"user-registration": "User Registration",

View File

@ -44,6 +44,9 @@ export default defineComponent({
foods: i18n.tc("general.foods"),
units: i18n.tc("general.units"),
labels: i18n.tc("data-pages.labels.labels"),
categories: i18n.tc("category.categories"),
tags: i18n.tc("tag.tags"),
tools: i18n.tc("tool.tools"),
};
const route = useRoute();
@ -53,6 +56,7 @@ export default defineComponent({
text: i18n.t("general.recipes"),
value: "new",
to: "/group/data/recipes",
divider: true,
},
{
text: i18n.t("general.foods"),
@ -68,7 +72,23 @@ export default defineComponent({
text: i18n.t("data-pages.labels.labels"),
value: "new",
to: "/group/data/labels",
divider: true,
},
{
text: i18n.t("category.categories"),
value: "new",
to: "/group/data/categories",
},
{
text: i18n.t("tag.tags"),
value: "new",
to: "/group/data/tags",
},
{
text: i18n.t("tool.tools"),
value: "new",
to: "/group/data/tools",
}
]);
const buttonText = computed(() => {

View File

@ -0,0 +1,174 @@
<template>
<div>
<!-- Create Dialog -->
<BaseDialog
v-model="state.createDialog"
:title="$t('data-pages.categories.new-category')"
:icon="$globals.icons.categories"
@submit="createCategory"
>
<v-card-text>
<v-form ref="domNewCategoryForm">
<v-text-field
v-model="createTarget.name"
autofocus
:label="$t('general.name')"
:rules="[validators.required]"
></v-text-field>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
<BaseDialog
v-model="state.editDialog"
:icon="$globals.icons.categories"
:title="$t('data-pages.categories.edit-category')"
:submit-text="$tc('general.save')"
@submit="editSaveCategory"
>
<v-card-text v-if="editTarget">
<div class="mt-4">
<v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
</div>
</v-card-text>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
@confirm="deleteCategory"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<!-- Recipe Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
<CrudTable
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="categories || []"
:bulk-actions="[]"
@delete-one="deleteEventHandler"
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
</template>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useCategoryStore, useCategoryData } from "~/composables/store";
import { RecipeCategory } from "~/lib/api/types/admin";
export default defineComponent({
setup() {
const { i18n } = useContext();
const tableConfig = {
hideColumns: true,
canExport: true,
};
const tableHeaders = [
{
text: i18n.t("general.id"),
value: "id",
show: false,
},
{
text: i18n.t("general.name"),
value: "name",
show: true,
},
];
const state = reactive({
createDialog: false,
editDialog: false,
deleteDialog: false,
});
const categoryData = useCategoryData();
const categoryStore = useCategoryStore();
// ============================================================
// Create Category
async function createCategory() {
// @ts-ignore - only property really required is the name (RecipeOrganizerPage)
await categoryStore.actions.createOne({ name: categoryData.data.name });
categoryData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Category
const editTarget = ref<RecipeCategory | null>(null);
function editEventHandler(item: RecipeCategory) {
state.editDialog = true;
editTarget.value = item;
}
async function editSaveCategory() {
if (!editTarget.value) {
return;
}
await categoryStore.actions.updateOne(editTarget.value);
state.editDialog = false;
}
// ============================================================
// Delete Category
const deleteTarget = ref<RecipeCategory | null>(null);
function deleteEventHandler(item: RecipeCategory) {
state.deleteDialog = true;
deleteTarget.value = item;
}
async function deleteCategory() {
if (!deleteTarget.value || deleteTarget.value.id === undefined) {
return;
}
await categoryStore.actions.deleteOne(deleteTarget.value.id);
state.deleteDialog = false;
}
return {
state,
tableConfig,
tableHeaders,
categories: categoryStore.items,
validators,
// create
createTarget: categoryData.data,
createCategory,
// edit
editTarget,
editEventHandler,
editSaveCategory,
// delete
deleteTarget,
deleteEventHandler,
deleteCategory
};
},
});
</script>

View File

@ -171,7 +171,7 @@
<template #button-row>
<BaseButton create @click="createDialog = true" />
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.foods }} </template>
<template #icon> {{ $globals.icons.externalLink }} </template>
{{ $t('data-pages.combine') }}
</BaseButton>
</template>

View File

@ -93,10 +93,7 @@
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton create @click="state.createDialog = true">
<template #icon> {{ $globals.icons.tags }} </template>
{{ $t("general.create") }}
</BaseButton>
<BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
</template>
<template #item.name="{ item }">
<MultiPurposeLabel v-if="item" :label="item">

View File

@ -0,0 +1,175 @@
<template>
<div>
<!-- Create Dialog -->
<BaseDialog
v-model="state.createDialog"
:title="$t('data-pages.tags.new-tag')"
:icon="$globals.icons.tags"
@submit="createTag"
>
<v-card-text>
<v-form ref="domNewTagForm">
<v-text-field
v-model="createTarget.name"
autofocus
:label="$t('general.name')"
:rules="[validators.required]"
></v-text-field>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
<BaseDialog
v-model="state.editDialog"
:icon="$globals.icons.tags"
:title="$t('data-pages.tags.edit-tag')"
:submit-text="$tc('general.save')"
@submit="editSaveTag"
>
<v-card-text v-if="editTarget">
<div class="mt-4">
<v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
</div>
</v-card-text>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
@confirm="deleteTag"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<!-- Recipe Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
<CrudTable
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="tags || []"
:bulk-actions="[]"
@delete-one="deleteEventHandler"
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
</template>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useTagStore, useTagData } from "~/composables/store";
import { RecipeTag } from "~/lib/api/types/admin";
export default defineComponent({
setup() {
const { i18n } = useContext();
const tableConfig = {
hideColumns: true,
canExport: true,
};
const tableHeaders = [
{
text: i18n.t("general.id"),
value: "id",
show: false,
},
{
text: i18n.t("general.name"),
value: "name",
show: true,
},
];
const state = reactive({
createDialog: false,
editDialog: false,
deleteDialog: false,
});
const tagData = useTagData();
const tagStore = useTagStore();
// ============================================================
// Create Tag
async function createTag() {
// @ts-ignore - only property really required is the name (RecipeOrganizerPage)
await tagStore.actions.createOne({ name: tagData.data.name });
tagData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Tag
const editTarget = ref<RecipeTag | null>(null);
function editEventHandler(item: RecipeTag) {
state.editDialog = true;
editTarget.value = item;
}
async function editSaveTag() {
if (!editTarget.value) {
return;
}
await tagStore.actions.updateOne(editTarget.value);
state.editDialog = false;
}
// ============================================================
// Delete Tag
const deleteTarget = ref<RecipeTag | null>(null);
function deleteEventHandler(item: RecipeTag) {
state.deleteDialog = true;
deleteTarget.value = item;
}
async function deleteTag() {
if (!deleteTarget.value || deleteTarget.value.id === undefined) {
return;
}
await tagStore.actions.deleteOne(deleteTarget.value.id);
state.deleteDialog = false;
}
return {
state,
tableConfig,
tableHeaders,
tags: tagStore.items,
validators,
// create
createTarget: tagData.data,
createTag,
// edit
editTarget,
editEventHandler,
editSaveTag,
// delete
deleteTarget,
deleteEventHandler,
deleteTag
};
},
});
</script>

View File

@ -0,0 +1,187 @@
<template>
<div>
<!-- Create Dialog -->
<BaseDialog
v-model="state.createDialog"
:title="$t('data-pages.tools.new-tool')"
:icon="$globals.icons.potSteam"
@submit="createTool"
>
<v-card-text>
<v-form ref="domNewToolForm">
<v-text-field
v-model="createTarget.name"
autofocus
:label="$t('general.name')"
:rules="[validators.required]"
></v-text-field>
<v-checkbox v-model="createTarget.onHand" :label="$t('tool.on-hand')">
</v-checkbox>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Edit Dialog -->
<BaseDialog
v-model="state.editDialog"
:icon="$globals.icons.potSteam"
:title="$t('data-pages.tools.edit-tool')"
:submit-text="$tc('general.save')"
@submit="editSaveTool"
>
<v-card-text v-if="editTarget">
<div class="mt-4">
<v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
<v-checkbox v-model="editTarget.onHand" :label="$t('tool.on-hand')"> </v-checkbox>
</div>
</v-card-text>
</BaseDialog>
<!-- Delete Dialog -->
<BaseDialog
v-model="state.deleteDialog"
:title="$tc('general.confirm')"
:icon="$globals.icons.alertCircle"
color="error"
@confirm="deleteTool"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<!-- Tool Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
<CrudTable
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="tools || []"
:bulk-actions="[]"
@delete-one="deleteEventHandler"
@edit-one="editEventHandler"
>
<template #button-row>
<BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
</template>
<template #item.onHand="{ item }">
<v-icon :color="item.onHand ? 'success' : undefined">
{{ item.onHand ? $globals.icons.check : $globals.icons.close }}
</v-icon>
</template>
</CrudTable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
import { validators } from "~/composables/use-validators";
import { useToolStore, useToolData } from "~/composables/store";
import { RecipeTool } from "~/lib/api/types/admin";
export default defineComponent({
setup() {
const { i18n } = useContext();
const tableConfig = {
hideColumns: true,
canExport: true,
};
const tableHeaders = [
{
text: i18n.t("general.id"),
value: "id",
show: false,
},
{
text: i18n.t("general.name"),
value: "name",
show: true,
},
{
text: i18n.t("tool.on-hand"),
value: "onHand",
show: true,
},
];
const state = reactive({
createDialog: false,
editDialog: false,
deleteDialog: false,
});
const toolData = useToolData();
const toolStore = useToolStore();
// ============================================================
// Create Tag
async function createTool() {
// @ts-ignore - only property really required is the name and onHand (RecipeOrganizerPage)
await toolStore.actions.createOne({ name: toolData.data.name, onHand: toolData.data.onHand });
toolData.reset();
state.createDialog = false;
}
// ============================================================
// Edit Tag
const editTarget = ref<RecipeTool | null>(null);
function editEventHandler(item: RecipeTool) {
state.editDialog = true;
editTarget.value = item;
}
async function editSaveTool() {
if (!editTarget.value) {
return;
}
await toolStore.actions.updateOne(editTarget.value);
state.editDialog = false;
}
// ============================================================
// Delete Tag
const deleteTarget = ref<RecipeTool | null>(null);
function deleteEventHandler(item: RecipeTool) {
state.deleteDialog = true;
deleteTarget.value = item;
}
async function deleteTool() {
if (!deleteTarget.value || deleteTarget.value.id === undefined) {
return;
}
await toolStore.actions.deleteOne(deleteTarget.value.id);
state.deleteDialog = false;
}
return {
state,
tableConfig,
tableHeaders,
tools: toolStore.items,
validators,
// create
createTarget: toolData.data,
createTool,
// edit
editTarget,
editEventHandler,
editSaveTool,
// delete
deleteTarget,
deleteEventHandler,
deleteTool
};
},
});
</script>

View File

@ -183,7 +183,7 @@
<BaseButton create @click="createDialog = true" />
<BaseButton @click="mergeDialog = true">
<template #icon> {{ $globals.icons.units }} </template>
<template #icon> {{ $globals.icons.externalLink }} </template>
{{ $t('data-pages.combine') }}
</BaseButton>
</template>