mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
Merge branch 'mealie-recipes:mealie-next' into manage-data-improve-delete-prompt
This commit is contained in:
commit
e98eee56be
@ -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);
|
||||
|
@ -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,
|
||||
|
@ -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({
|
||||
|
@ -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",
|
||||
|
@ -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(() => {
|
||||
|
174
frontend/pages/group/data/categories.vue
Normal file
174
frontend/pages/group/data/categories.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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">
|
||||
|
175
frontend/pages/group/data/tags.vue
Normal file
175
frontend/pages/group/data/tags.vue
Normal 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>
|
187
frontend/pages/group/data/tools.vue
Normal file
187
frontend/pages/group/data/tools.vue
Normal 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>
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user