mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-03 04:25:24 +02:00
feat: Add Categories, Tags and Tools to Manage Data Page (#2737)
* add categories * add tags * 🧹 * 🧹 l18n * add tools * remove broken on Hand for tools * fix for tools onHand not updating from frontend * tools: re-add "on Hand" * remove itemized icon from create button * change combine icon * add divider to BaseOverflowButton * divide and conquer --------- Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
Kuchenpirat
GitHub
parent
08656ec09a
commit
63ac21bce2
11 changed files with 605 additions and 24 deletions
|
|
@ -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>
|
||||
|
|
@ -168,7 +168,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>
|
||||
|
|
|
|||
|
|
@ -90,10 +90,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>
|
||||
|
|
@ -180,7 +180,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…
Add table
Add a link
Reference in a new issue