mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-25 06:15:34 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
93
frontend/app/pages/group/data/categories.vue
Normal file
93
frontend/app/pages/group/data/categories.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.categories"
|
||||
:title="$t('data-pages.categories.category-data')"
|
||||
:create-title="$t('data-pages.categories.new-category')"
|
||||
:edit-title="$t('data-pages.categories.edit-category')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="categoryStore.store.value || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="categoryStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCategoryStore } from "~/composables/store";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import type { RecipeCategory } from "~/lib/api/types/recipe";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
|
||||
const i18n = useI18n();
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
const categoryStore = useCategoryStore();
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems = [
|
||||
{
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
] as AutoFormItems;
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: { name: "" } as RecipeCategory,
|
||||
});
|
||||
|
||||
async function handleCreate(createFormData: RecipeCategory) {
|
||||
await categoryStore.actions.createOne(createFormData);
|
||||
createForm.data.name = "";
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as RecipeCategory,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: RecipeCategory) {
|
||||
await categoryStore.actions.updateOne(editFormData);
|
||||
editForm.data = {} as RecipeCategory;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: RecipeCategory[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await categoryStore.actions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
474
frontend/app/pages/group/data/foods.vue
Normal file
474
frontend/app/pages/group/data/foods.vue
Normal file
@@ -0,0 +1,474 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Merge Dialog -->
|
||||
<BaseDialog
|
||||
v-model="mergeDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$t('data-pages.foods.combine-food')"
|
||||
can-confirm
|
||||
@confirm="mergeFoods"
|
||||
>
|
||||
<v-card-text>
|
||||
<div>
|
||||
{{ $t("data-pages.foods.merge-dialog-text") }}
|
||||
</div>
|
||||
<v-autocomplete
|
||||
v-model="fromFood"
|
||||
return-object
|
||||
:items="foods"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.source-food')"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="toFood"
|
||||
return-object
|
||||
:items="foods"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.target-food')"
|
||||
/>
|
||||
|
||||
<template v-if="canMerge && fromFood && toFood">
|
||||
<div class="text-center">
|
||||
{{ $t("data-pages.foods.merge-food-example", { food1: fromFood.name, food2: toFood.name }) }}
|
||||
</div>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Seed Dialog -->
|
||||
<BaseDialog
|
||||
v-model="seedDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$t('data-pages.seed-data')"
|
||||
can-confirm
|
||||
@confirm="seedDatabase"
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="pb-2">
|
||||
{{ $t("data-pages.foods.seed-dialog-text") }}
|
||||
</div>
|
||||
<v-autocomplete
|
||||
v-model="locale"
|
||||
:items="locales"
|
||||
item-title="name"
|
||||
:custom-filter="normalizeFilter"
|
||||
:label="$t('data-pages.select-language')"
|
||||
class="my-3"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
offset
|
||||
>
|
||||
<template #item="{ item, props }">
|
||||
<v-list-item v-bind="props">
|
||||
<v-list-item-subtitle>
|
||||
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert
|
||||
v-if="foods && foods.length > 0"
|
||||
type="error"
|
||||
class="mb-0 text-body-2"
|
||||
>
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Alias Sub-Dialog -->
|
||||
<RecipeDataAliasManagerDialog
|
||||
v-if="editForm.data"
|
||||
v-model="aliasManagerDialog"
|
||||
:data="editForm.data"
|
||||
@submit="updateFoodAlias"
|
||||
@cancel="aliasManagerDialog = false"
|
||||
/>
|
||||
|
||||
<!-- Bulk Assign Labels Dialog -->
|
||||
<BaseDialog
|
||||
v-model="bulkAssignLabelDialog"
|
||||
:title="$t('data-pages.labels.assign-label')"
|
||||
:icon="$globals.icons.tags"
|
||||
can-confirm
|
||||
@confirm="assignSelected"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>{{ $t("general.caution") }}</v-card-title>
|
||||
<v-card-text>{{ $t("data-pages.foods.label-overwrite-warning") }}</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-autocomplete
|
||||
v-model="bulkAssignLabelId"
|
||||
clearable
|
||||
:items="allLabels"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-value="id"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.food-label')"
|
||||
/>
|
||||
<v-card variant="outlined">
|
||||
<v-virtual-scroll
|
||||
height="400"
|
||||
item-height="25"
|
||||
:items="bulkAssignTarget"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$t('data-pages.foods.food-data')"
|
||||
:create-title="$t('data-pages.foods.create-food')"
|
||||
:edit-title="$t('data-pages.foods.edit-food')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="foods || []"
|
||||
:bulk-actions="[
|
||||
{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' },
|
||||
{ icon: $globals.icons.tags, text: $t('data-pages.labels.assign-label'), event: 'assign-selected' },
|
||||
]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="foodStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
>
|
||||
<template #table-button-row>
|
||||
<BaseButton @click="mergeDialog = true">
|
||||
<template #icon>
|
||||
{{ $globals.icons.externalLink }}
|
||||
</template>
|
||||
{{ $t('data-pages.combine') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<template #[`item.label`]="{ item }">
|
||||
<MultiPurposeLabel
|
||||
v-if="item.label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label.name }}
|
||||
</MultiPurposeLabel>
|
||||
</template>
|
||||
|
||||
<template #[`item.onHand`]="{ item }">
|
||||
<v-icon :color="item.onHand ? 'success' : undefined">
|
||||
{{ item.onHand ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<template #[`item.createdAt`]="{ item }">
|
||||
{{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
|
||||
</template>
|
||||
|
||||
<template #table-button-bottom>
|
||||
<BaseButton @click="seedDialog = true">
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
{{ $t('data-pages.seed') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<template #edit-dialog-custom-action>
|
||||
<BaseButton
|
||||
edit
|
||||
@click="aliasManagerDialog = true"
|
||||
>
|
||||
{{ $t('data-pages.manage-aliases') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</GroupDataPage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { LocaleObject } from "@nuxtjs/i18n";
|
||||
import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import type { CreateIngredientFood, IngredientFood, IngredientFoodAlias } from "~/lib/api/types/recipe";
|
||||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { normalizeFilter } from "~/composables/use-utils";
|
||||
import { useFoodStore, useLabelStore } from "~/composables/store";
|
||||
import type { MultiPurposeLabelOut } from "~/lib/api/types/labels";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
|
||||
interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
|
||||
onHand: boolean;
|
||||
householdsWithIngredientFood: string[];
|
||||
}
|
||||
|
||||
interface IngredientFoodWithOnHand extends IngredientFood {
|
||||
onHand: boolean;
|
||||
}
|
||||
const userApi = useUserApi();
|
||||
const i18n = useI18n();
|
||||
const auth = useMealieAuth();
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.plural-name"),
|
||||
value: "pluralName",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("recipe.description"),
|
||||
value: "description",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("shopping-list.label"),
|
||||
value: "label",
|
||||
show: true,
|
||||
sortable: true,
|
||||
sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
|
||||
const label1Name = label1?.name || "";
|
||||
const label2Name = label2?.name || "";
|
||||
return label1Name.localeCompare(label2Name);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.t("tool.on-hand"),
|
||||
value: "onHand",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.date-added"),
|
||||
value: "createdAt",
|
||||
show: false,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const userHousehold = computed(() => auth.user.value?.householdSlug || "");
|
||||
const foodStore = useFoodStore();
|
||||
const foods = computed(() => foodStore.store.value.map((food) => {
|
||||
const onHand = food.householdsWithIngredientFood?.includes(userHousehold.value) || false;
|
||||
return { ...food, onHand } as IngredientFoodWithOnHand;
|
||||
}));
|
||||
|
||||
// ============================================================
|
||||
// Labels
|
||||
const { store: allLabels } = useLabelStore();
|
||||
const labelOptions = computed(() => allLabels.value.map(label => ({ text: label.name, value: label.id })) || []);
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems = computed<AutoFormItems>(() => [
|
||||
{
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
{
|
||||
label: i18n.t("general.plural-name"),
|
||||
varName: "pluralName",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
label: i18n.t("recipe.description"),
|
||||
varName: "description",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
label: i18n.t("data-pages.foods.food-label"),
|
||||
varName: "labelId",
|
||||
type: fieldTypes.SELECT,
|
||||
options: labelOptions.value,
|
||||
selectReturnValue: "value",
|
||||
},
|
||||
{
|
||||
label: i18n.t("tool.on-hand"),
|
||||
varName: "onHand",
|
||||
type: fieldTypes.BOOLEAN,
|
||||
hint: i18n.t("data-pages.foods.on-hand-checkbox-label"),
|
||||
},
|
||||
]);
|
||||
|
||||
// ===============================================================
|
||||
// Create
|
||||
|
||||
const createForm = reactive({
|
||||
get items() {
|
||||
return formItems.value;
|
||||
},
|
||||
data: { name: "", onHand: false, householdsWithIngredientFood: [] } as CreateIngredientFoodWithOnHand,
|
||||
});
|
||||
|
||||
async function handleCreate() {
|
||||
if (!createForm.data || !createForm.data.name) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (createForm.data.onHand) {
|
||||
createForm.data.householdsWithIngredientFood = [userHousehold.value];
|
||||
}
|
||||
|
||||
// @ts-expect-error the createOne function erroneously expects an id because it uses the IngredientFood type
|
||||
await foodStore.actions.createOne(createForm.data);
|
||||
createForm.data = {
|
||||
name: "",
|
||||
onHand: false,
|
||||
householdsWithIngredientFood: [],
|
||||
};
|
||||
}
|
||||
|
||||
// ===============================================================
|
||||
// Edit
|
||||
|
||||
const editForm = reactive({
|
||||
get items() {
|
||||
return formItems.value;
|
||||
},
|
||||
data: {} as IngredientFoodWithOnHand,
|
||||
});
|
||||
|
||||
async function handleEdit() {
|
||||
if (!editForm.data) {
|
||||
return;
|
||||
}
|
||||
if (!editForm.data.householdsWithIngredientFood) {
|
||||
editForm.data.householdsWithIngredientFood = [];
|
||||
}
|
||||
|
||||
if (editForm.data.onHand && !editForm.data.householdsWithIngredientFood.includes(userHousehold.value)) {
|
||||
editForm.data.householdsWithIngredientFood.push(userHousehold.value);
|
||||
}
|
||||
else if (!editForm.data.onHand && editForm.data.householdsWithIngredientFood.includes(userHousehold.value)) {
|
||||
const idx = editForm.data.householdsWithIngredientFood.indexOf(userHousehold.value);
|
||||
if (idx !== -1) editForm.data.householdsWithIngredientFood.splice(idx, 1);
|
||||
}
|
||||
|
||||
await foodStore.actions.updateOne(editForm.data);
|
||||
editForm.data = {} as IngredientFoodWithOnHand;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: IngredientFoodWithOnHand[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.map(item => item.id);
|
||||
await foodStore.actions.deleteMany(ids);
|
||||
}
|
||||
else if (event === "assign-selected") {
|
||||
bulkAssignEventHandler(items);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Alias Manager
|
||||
|
||||
const aliasManagerDialog = ref(false);
|
||||
function updateFoodAlias(newAliases: IngredientFoodAlias[]) {
|
||||
if (!editForm.data) {
|
||||
return;
|
||||
}
|
||||
editForm.data.aliases = newAliases;
|
||||
aliasManagerDialog.value = false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Merge Foods
|
||||
|
||||
const mergeDialog = ref(false);
|
||||
const fromFood = ref<IngredientFoodWithOnHand | null>(null);
|
||||
const toFood = ref<IngredientFoodWithOnHand | null>(null);
|
||||
|
||||
const canMerge = computed(() => {
|
||||
return fromFood.value && toFood.value && fromFood.value.id !== toFood.value.id;
|
||||
});
|
||||
|
||||
async function mergeFoods() {
|
||||
if (!canMerge.value || !fromFood.value || !toFood.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.foods.merge(fromFood.value.id, toFood.value.id);
|
||||
|
||||
if (data) {
|
||||
foodStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
||||
const seedDialog = ref(false);
|
||||
const locale = ref("");
|
||||
|
||||
const { locales: LOCALES, locale: currentLocale } = useLocales();
|
||||
|
||||
onMounted(() => {
|
||||
locale.value = currentLocale.value;
|
||||
});
|
||||
|
||||
const locales = LOCALES.filter(locale =>
|
||||
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
|
||||
);
|
||||
|
||||
async function seedDatabase() {
|
||||
const { data } = await userApi.seeders.foods({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
foodStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Assign Labels
|
||||
const bulkAssignLabelDialog = ref(false);
|
||||
const bulkAssignTarget = ref<IngredientFoodWithOnHand[]>([]);
|
||||
const bulkAssignLabelId = ref<string | undefined>();
|
||||
|
||||
function bulkAssignEventHandler(selection: IngredientFoodWithOnHand[]) {
|
||||
bulkAssignTarget.value = selection;
|
||||
bulkAssignLabelDialog.value = true;
|
||||
}
|
||||
|
||||
async function assignSelected() {
|
||||
if (!bulkAssignLabelId.value) {
|
||||
return;
|
||||
}
|
||||
for (const item of bulkAssignTarget.value) {
|
||||
item.labelId = bulkAssignLabelId.value;
|
||||
await foodStore.actions.updateOne(item);
|
||||
}
|
||||
bulkAssignTarget.value = [];
|
||||
bulkAssignLabelId.value = undefined;
|
||||
foodStore.actions.refresh();
|
||||
}
|
||||
</script>
|
||||
11
frontend/app/pages/group/data/index.vue
Normal file
11
frontend/app/pages/group/data/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const router = useRouter();
|
||||
onMounted(() => {
|
||||
// Force redirect to first valid page
|
||||
router.push("/group/data/foods");
|
||||
});
|
||||
</script>
|
||||
196
frontend/app/pages/group/data/labels.vue
Normal file
196
frontend/app/pages/group/data/labels.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Seed Dialog -->
|
||||
<BaseDialog
|
||||
v-model="seedDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$t('data-pages.seed-data')"
|
||||
can-confirm
|
||||
@confirm="seedDatabase"
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="pb-2">
|
||||
{{ $t("data-pages.labels.seed-dialog-text") }}
|
||||
</div>
|
||||
<v-autocomplete
|
||||
v-model="locale"
|
||||
:items="locales"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.select-language')"
|
||||
class="my-3"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
offset
|
||||
>
|
||||
<template #item="{ item, props }">
|
||||
<v-list-item v-bind="props">
|
||||
<v-list-item-subtitle>
|
||||
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert
|
||||
v-if="labelStore.store.value && labelStore.store.value.length > 0"
|
||||
type="error"
|
||||
class="mb-0 text-body-2"
|
||||
>
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.tags"
|
||||
:title="$t('data-pages.labels.labels')"
|
||||
:create-title="$t('data-pages.labels.new-label')"
|
||||
:edit-title="$t('data-pages.labels.edit-label')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="labelStore.store.value || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="labelStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
>
|
||||
<template #[`item.name`]="{ item }">
|
||||
<MultiPurposeLabel
|
||||
v-if="item"
|
||||
:label="item"
|
||||
>
|
||||
{{ item.name }}
|
||||
</MultiPurposeLabel>
|
||||
</template>
|
||||
|
||||
<template #create-dialog-top>
|
||||
<MultiPurposeLabel v-if="createForm.data.name" :label="createForm.data" class="my-2" />
|
||||
</template>
|
||||
|
||||
<template #edit-dialog-top>
|
||||
<MultiPurposeLabel v-if="editForm.data.name" :label="editForm.data" class="my-2" />
|
||||
</template>
|
||||
|
||||
<template #table-button-bottom>
|
||||
<BaseButton @click="seedDialog = true">
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
{{ $t('data-pages.seed') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</GroupDataPage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabel.vue";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import type { MultiPurposeLabelSummary } from "~/lib/api/types/labels";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { normalizeFilter } from "~/composables/use-utils";
|
||||
import { useLabelStore } from "~/composables/store";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
|
||||
const userApi = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const labelStore = useLabelStore();
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems: AutoFormItems = [
|
||||
{
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
{
|
||||
label: i18n.t("general.color"),
|
||||
varName: "color",
|
||||
type: fieldTypes.COLOR,
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: {
|
||||
name: "",
|
||||
color: "",
|
||||
} as MultiPurposeLabelSummary,
|
||||
});
|
||||
|
||||
async function handleCreate(createFormData: MultiPurposeLabelSummary) {
|
||||
await labelStore.actions.createOne(createFormData);
|
||||
createForm.data = { name: "", color: "#7417BE" } as MultiPurposeLabelSummary;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as MultiPurposeLabelSummary,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: MultiPurposeLabelSummary) {
|
||||
await labelStore.actions.updateOne(editFormData);
|
||||
editForm.data = {} as MultiPurposeLabelSummary;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: MultiPurposeLabelSummary[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await labelStore.actions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
||||
const seedDialog = ref(false);
|
||||
const locale = ref("");
|
||||
|
||||
const { locales: locales, locale: currentLocale } = useLocales();
|
||||
|
||||
onMounted(() => {
|
||||
locale.value = currentLocale.value;
|
||||
});
|
||||
|
||||
async function seedDatabase() {
|
||||
const { data } = await userApi.seeders.labels({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
labelStore.actions.refresh();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
127
frontend/app/pages/group/data/recipe-actions.vue
Normal file
127
frontend/app/pages/group/data/recipe-actions.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.linkVariantPlus"
|
||||
:title="$t('data-pages.recipe-actions.new-recipe-action')"
|
||||
:create-title="$t('data-pages.recipe-actions.new-recipe-action')"
|
||||
:edit-title="$t('data-pages.recipe-actions.edit-recipe-action')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="actionStore.recipeActions.value || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
initial-sort="title"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="actionStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
|
||||
import type { GroupRecipeActionOut } from "~/lib/api/types/household";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.title"),
|
||||
value: "title",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.url"),
|
||||
value: "url",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.recipe-actions.action-type"),
|
||||
value: "actionType",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const actionStore = useGroupRecipeActions();
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems = computed<AutoFormItems>(() => [
|
||||
{
|
||||
label: i18n.t("general.title"),
|
||||
varName: "title",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
{
|
||||
label: i18n.t("general.url"),
|
||||
varName: "url",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required, validators.url],
|
||||
},
|
||||
{
|
||||
label: i18n.t("data-pages.recipe-actions.action-type"),
|
||||
varName: "actionType",
|
||||
type: fieldTypes.SELECT,
|
||||
options: [
|
||||
{ text: i18n.t("data-pages.recipe-actions.action-types.link"), value: "link" },
|
||||
{ text: i18n.t("data-pages.recipe-actions.action-types.post"), value: "post" },
|
||||
],
|
||||
selectReturnValue: "value",
|
||||
rules: [validators.required],
|
||||
},
|
||||
]);
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as GroupRecipeActionOut,
|
||||
});
|
||||
|
||||
async function handleCreate() {
|
||||
await actionStore.actions.createOne(createForm.data);
|
||||
createForm.data = {} as GroupRecipeActionOut;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit Action
|
||||
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as GroupRecipeActionOut,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: GroupRecipeActionOut) {
|
||||
await actionStore.actions.updateOne(editFormData);
|
||||
editForm.data = {} as GroupRecipeActionOut;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: GroupRecipeActionOut[]) {
|
||||
console.log("Bulk Action Event:", event, "Items:", items);
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await actionStore.actions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
519
frontend/app/pages/group/data/recipes.vue
Normal file
519
frontend/app/pages/group/data/recipes.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Export Purge Confirmation Dialog -->
|
||||
<BaseDialog
|
||||
v-model="purgeExportsDialog"
|
||||
:title="$t('data-pages.recipes.purge-exports')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
can-confirm
|
||||
@confirm="purgeExports()"
|
||||
>
|
||||
<v-card-text> {{ $t('data-pages.recipes.are-you-sure-you-want-to-delete-all-export-data') }} </v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Base Dialog Object -->
|
||||
<BaseDialog
|
||||
ref="domDialog"
|
||||
v-model="dialog.state"
|
||||
width="650px"
|
||||
:icon="dialog.icon"
|
||||
:title="dialog.title"
|
||||
:submit-text="$t('general.submit')"
|
||||
can-submit
|
||||
@submit="dialog.callback"
|
||||
>
|
||||
<v-card-text v-if="dialog.mode == MODES.tag">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="toSetTags"
|
||||
selector-type="tags"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.category">
|
||||
<RecipeOrganizerSelector
|
||||
v-model="toSetCategories"
|
||||
selector-type="categories"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.delete">
|
||||
<p class="h4">
|
||||
{{ $t('data-pages.recipes.confirm-delete-recipes') }}
|
||||
</p>
|
||||
<v-card variant="outlined">
|
||||
<v-virtual-scroll
|
||||
height="400"
|
||||
item-height="25"
|
||||
:items="selected"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.export">
|
||||
<p class="h4">
|
||||
{{ $t('data-pages.recipes.the-following-recipes-selected-length-will-be-exported',
|
||||
[selected.length]) }}
|
||||
</p>
|
||||
<v-card variant="outlined">
|
||||
<v-virtual-scroll
|
||||
height="400"
|
||||
item-height="25"
|
||||
:items="selected"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
<v-card-text
|
||||
v-else-if="dialog.mode == MODES.updateSettings"
|
||||
class="px-12"
|
||||
>
|
||||
<p>{{ $t('data-pages.recipes.settings-chosen-explanation') }}</p>
|
||||
<div class="mx-auto">
|
||||
<RecipeSettingsSwitches v-model="recipeSettings" />
|
||||
</div>
|
||||
<p class="text-center mb-0">
|
||||
<i>{{ $t('data-pages.recipes.selected-length-recipe-s-settings-will-be-updated', selected.length) }}</i>
|
||||
</p>
|
||||
</v-card-text>
|
||||
<v-card-text v-else-if="dialog.mode == MODES.changeOwner">
|
||||
<v-select
|
||||
v-model="selectedOwner"
|
||||
:items="allUsers"
|
||||
item-title="fullName"
|
||||
item-value="id"
|
||||
:label="$t('general.owner')"
|
||||
hide-details
|
||||
>
|
||||
<template #prepend>
|
||||
<UserAvatar
|
||||
:user-id="selectedOwner"
|
||||
:tooltip="false"
|
||||
/>
|
||||
</template>
|
||||
</v-select>
|
||||
<v-card-text
|
||||
v-if="selectedOwnerHousehold"
|
||||
class="d-flex"
|
||||
style="align-items: flex-end;"
|
||||
>
|
||||
<v-icon>{{ $globals.icons.household }}</v-icon>
|
||||
<span class="pl-1">{{ selectedOwnerHousehold.name }}</span>
|
||||
</v-card-text>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<section>
|
||||
<!-- Recipe Data Table -->
|
||||
<BaseCardSectionTitle
|
||||
:icon="$globals.icons.primary"
|
||||
:title="$t('data-pages.recipes.recipe-data')"
|
||||
>
|
||||
{{ $t('data-pages.recipes.recipe-data-description') }}
|
||||
</BaseCardSectionTitle>
|
||||
<v-card-actions class="mt-n5 mb-1">
|
||||
<v-menu
|
||||
offset-y
|
||||
bottom
|
||||
nudge-bottom="6"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
color="accent"
|
||||
class="mr-2"
|
||||
variant="elevated"
|
||||
dark
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.cog }}
|
||||
</v-icon>
|
||||
{{ $t('data-pages.columns') }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="py-2">
|
||||
<div>{{ $t('data-pages.recipes.recipe-columns') }}</div>
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2" />
|
||||
<v-card-text class="mt-n5">
|
||||
<v-checkbox
|
||||
v-for="(_, key) in headers"
|
||||
:key="key"
|
||||
v-model="headers[key]"
|
||||
density="compact"
|
||||
flat
|
||||
inset
|
||||
:label="headerLabels[key]"
|
||||
hide-details
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<BaseOverflowButton
|
||||
:disabled="selected.length < 1"
|
||||
mode="event"
|
||||
color="info"
|
||||
variant="elevated"
|
||||
:items="actions"
|
||||
@export-selected="openDialog(MODES.export)"
|
||||
@tag-selected="openDialog(MODES.tag)"
|
||||
@categorize-selected="openDialog(MODES.category)"
|
||||
@delete-selected="openDialog(MODES.delete)"
|
||||
@update-settings="openDialog(MODES.updateSettings)"
|
||||
@change-owner="openDialog(MODES.changeOwner)"
|
||||
/>
|
||||
|
||||
<p
|
||||
v-if="selected.length > 0"
|
||||
class="text-caption my-auto ml-5"
|
||||
>
|
||||
{{ $t('general.selected-count', selected.length)
|
||||
}}
|
||||
</p>
|
||||
</v-card-actions>
|
||||
<v-card>
|
||||
<RecipeDataTable
|
||||
v-model="selected"
|
||||
:loading="loading"
|
||||
:recipes="allRecipes"
|
||||
:show-headers="headers"
|
||||
/>
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton
|
||||
color="info"
|
||||
@click="
|
||||
selectAll();
|
||||
openDialog(MODES.export);
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
{{ $t('general.export-all') }}
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</section>
|
||||
|
||||
<section class="mt-10">
|
||||
<!-- Data Table -->
|
||||
<BaseCardSectionTitle
|
||||
:icon="$globals.icons.database"
|
||||
section
|
||||
:title="$t('data-pages.recipes.data-exports')"
|
||||
>
|
||||
{{ $t('data-pages.recipes.data-exports-description') }}
|
||||
</BaseCardSectionTitle>
|
||||
<v-card-actions class="mt-n5 mb-1">
|
||||
<BaseButton
|
||||
delete
|
||||
@click="purgeExportsDialog = true"
|
||||
/>
|
||||
</v-card-actions>
|
||||
<v-card>
|
||||
<GroupExportData :exports="groupExports" />
|
||||
</v-card>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
|
||||
import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerSelector.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useRecipes, allRecipes } from "~/composables/recipes";
|
||||
import type { Recipe, RecipeSettings } from "~/lib/api/types/recipe";
|
||||
import GroupExportData from "~/components/Domain/Group/GroupExportData.vue";
|
||||
import type { GroupDataExport } from "~/lib/api/types/group";
|
||||
import type { MenuItem } from "~/components/global/BaseOverflowButton.vue";
|
||||
import RecipeSettingsSwitches from "~/components/Domain/Recipe/RecipeSettingsSwitches.vue";
|
||||
import { useUserStore } from "~/composables/store/use-user-store";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
import { useHouseholdStore } from "~/composables/store/use-household-store";
|
||||
|
||||
enum MODES {
|
||||
tag = "tag",
|
||||
category = "category",
|
||||
export = "export",
|
||||
delete = "delete",
|
||||
updateSettings = "updateSettings",
|
||||
changeOwner = "changeOwner",
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
scrollToTop: true,
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const auth = useMealieAuth();
|
||||
const { $globals } = useNuxtApp();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("data-pages.recipes.recipe-data"),
|
||||
});
|
||||
|
||||
const { refreshRecipes } = useRecipes(true, true, false, `householdId=${auth.user.value?.householdId || ""}`);
|
||||
const selected = ref<Recipe[]>([]);
|
||||
|
||||
function resetAll() {
|
||||
selected.value = [];
|
||||
toSetTags.value = [];
|
||||
toSetCategories.value = [];
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const headers = reactive({
|
||||
id: false,
|
||||
owner: false,
|
||||
tags: true,
|
||||
tools: true,
|
||||
categories: true,
|
||||
recipeServings: false,
|
||||
recipeYieldQuantity: false,
|
||||
recipeYield: false,
|
||||
dateAdded: false,
|
||||
});
|
||||
|
||||
const headerLabels = {
|
||||
id: i18n.t("general.id"),
|
||||
owner: i18n.t("general.owner"),
|
||||
tags: i18n.t("tag.tags"),
|
||||
categories: i18n.t("recipe.categories"),
|
||||
tools: i18n.t("tool.tools"),
|
||||
recipeServings: i18n.t("recipe.recipe-servings"),
|
||||
recipeYieldQuantity: i18n.t("recipe.recipe-yield"),
|
||||
recipeYield: i18n.t("recipe.recipe-yield-text"),
|
||||
dateAdded: i18n.t("general.date-added"),
|
||||
};
|
||||
|
||||
const actions: MenuItem[] = [
|
||||
{
|
||||
icon: $globals.icons.database,
|
||||
text: i18n.t("export.export"),
|
||||
event: "export-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.tags,
|
||||
text: i18n.t("data-pages.recipes.tag"),
|
||||
event: "tag-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.categories,
|
||||
text: i18n.t("data-pages.recipes.categorize"),
|
||||
event: "categorize-selected",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.cog,
|
||||
text: i18n.t("data-pages.recipes.update-settings"),
|
||||
event: "update-settings",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.user,
|
||||
text: i18n.t("general.change-owner"),
|
||||
event: "change-owner",
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: i18n.t("general.delete"),
|
||||
event: "delete-selected",
|
||||
},
|
||||
];
|
||||
|
||||
const api = useUserApi();
|
||||
const loading = ref(false);
|
||||
|
||||
// ===============================================================
|
||||
// Group Exports
|
||||
|
||||
const purgeExportsDialog = ref(false);
|
||||
|
||||
async function purgeExports() {
|
||||
await api.bulk.purgeExports();
|
||||
refreshExports();
|
||||
}
|
||||
|
||||
const groupExports = ref<GroupDataExport[]>([]);
|
||||
|
||||
async function refreshExports() {
|
||||
const { data } = await api.bulk.fetchExports();
|
||||
|
||||
if (data) {
|
||||
groupExports.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshExports();
|
||||
});
|
||||
// ===============================================================
|
||||
// All Recipes
|
||||
|
||||
function selectAll() {
|
||||
selected.value = allRecipes.value;
|
||||
}
|
||||
|
||||
async function exportSelected() {
|
||||
loading.value = true;
|
||||
const { data } = await api.bulk.bulkExport({
|
||||
recipes: selected.value.map((x: Recipe) => x.slug ?? ""),
|
||||
exportType: "json",
|
||||
});
|
||||
|
||||
if (data) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
resetAll();
|
||||
refreshExports();
|
||||
}
|
||||
|
||||
const toSetTags = ref([]);
|
||||
|
||||
async function tagSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
|
||||
await api.bulk.bulkTag({ recipes, tags: toSetTags.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
const toSetCategories = ref([]);
|
||||
|
||||
async function categorizeSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
|
||||
await api.bulk.bulkCategorize({ recipes, categories: toSetCategories.value });
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
|
||||
|
||||
await api.bulk.bulkDelete({ recipes });
|
||||
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
const recipeSettings = reactive<RecipeSettings>({
|
||||
public: false,
|
||||
showNutrition: false,
|
||||
showAssets: false,
|
||||
landscapeView: false,
|
||||
disableComments: false,
|
||||
locked: false,
|
||||
});
|
||||
|
||||
async function updateSettings() {
|
||||
loading.value = true;
|
||||
|
||||
const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
|
||||
|
||||
await api.bulk.bulkSetSettings({ recipes, settings: recipeSettings });
|
||||
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
async function changeOwner() {
|
||||
if (!selected.value.length || !selectedOwner.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
selected.value.forEach((r) => {
|
||||
r.userId = selectedOwner.value;
|
||||
});
|
||||
|
||||
loading.value = true;
|
||||
await api.recipes.patchMany(selected.value);
|
||||
|
||||
await refreshRecipes();
|
||||
resetAll();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Dialog Management
|
||||
|
||||
const dialog = reactive({
|
||||
state: false,
|
||||
title: i18n.t("data-pages.recipes.tag-recipes"),
|
||||
mode: MODES.tag,
|
||||
tag: "",
|
||||
callback: () => {
|
||||
// Stub function to be overwritten
|
||||
return Promise.resolve();
|
||||
},
|
||||
icon: $globals.icons.tags,
|
||||
});
|
||||
|
||||
function openDialog(mode: MODES) {
|
||||
const titles: Record<MODES, string> = {
|
||||
[MODES.tag]: i18n.t("data-pages.recipes.tag-recipes"),
|
||||
[MODES.category]: i18n.t("data-pages.recipes.categorize-recipes"),
|
||||
[MODES.export]: i18n.t("data-pages.recipes.export-recipes"),
|
||||
[MODES.delete]: i18n.t("data-pages.recipes.delete-recipes"),
|
||||
[MODES.updateSettings]: i18n.t("data-pages.recipes.update-settings"),
|
||||
[MODES.changeOwner]: i18n.t("general.change-owner"),
|
||||
};
|
||||
|
||||
const callbacks: Record<MODES, () => Promise<void>> = {
|
||||
[MODES.tag]: tagSelected,
|
||||
[MODES.category]: categorizeSelected,
|
||||
[MODES.export]: exportSelected,
|
||||
[MODES.delete]: deleteSelected,
|
||||
[MODES.updateSettings]: updateSettings,
|
||||
[MODES.changeOwner]: changeOwner,
|
||||
};
|
||||
|
||||
const icons: Record<MODES, string> = {
|
||||
[MODES.tag]: $globals.icons.tags,
|
||||
[MODES.category]: $globals.icons.categories,
|
||||
[MODES.export]: $globals.icons.database,
|
||||
[MODES.delete]: $globals.icons.delete,
|
||||
[MODES.updateSettings]: $globals.icons.cog,
|
||||
[MODES.changeOwner]: $globals.icons.user,
|
||||
};
|
||||
|
||||
dialog.mode = mode;
|
||||
dialog.title = titles[mode];
|
||||
dialog.callback = callbacks[mode];
|
||||
dialog.icon = icons[mode];
|
||||
dialog.state = true;
|
||||
}
|
||||
|
||||
const { store: allUsers } = useUserStore();
|
||||
const { store: households } = useHouseholdStore();
|
||||
const selectedOwner = ref("");
|
||||
const selectedOwnerHousehold = computed(() => {
|
||||
if (!selectedOwner.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const owner = allUsers.value.find(u => u.id === selectedOwner.value);
|
||||
if (!owner) {
|
||||
return null;
|
||||
};
|
||||
|
||||
return households.value.find(h => h.id === owner.householdId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-btn--disabled {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
</style>
|
||||
94
frontend/app/pages/group/data/tags.vue
Normal file
94
frontend/app/pages/group/data/tags.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.tags"
|
||||
:title="$t('data-pages.tags.tag-data')"
|
||||
:create-title="$t('data-pages.tags.new-tag')"
|
||||
:edit-title="$t('data-pages.tags.edit-tag')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="tagStore.store.value || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="tagStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useTagStore } from "~/composables/store";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import type { RecipeTag } from "~/lib/api/types/recipe";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
const tagStore = useTagStore();
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems = [
|
||||
{
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
] as AutoFormItems;
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: { name: "" } as RecipeTag,
|
||||
});
|
||||
|
||||
async function handleCreate(createFormData: RecipeTag) {
|
||||
await tagStore.actions.createOne(createFormData);
|
||||
createForm.data.name = "";
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as RecipeTag,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: RecipeTag) {
|
||||
await tagStore.actions.updateOne(editFormData);
|
||||
editForm.data = {} as RecipeTag;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: RecipeTag[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await tagStore.actions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
frontend/app/pages/group/data/tools.vue
Normal file
135
frontend/app/pages/group/data/tools.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div>
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.tools"
|
||||
:title="$t('data-pages.tools.tool-data')"
|
||||
:create-title="$t('data-pages.tools.new-tool')"
|
||||
:edit-title="$t('data-pages.tools.edit-tool')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="tools || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="toolStore.actions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
>
|
||||
<template #[`item.onHand`]="{ item }">
|
||||
<v-icon :color="item.onHand ? 'success' : undefined">
|
||||
{{ item.onHand ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</GroupDataPage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import { useToolStore } from "~/composables/store";
|
||||
import type { RecipeTool, RecipeToolCreate } from "~/lib/api/types/recipe";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
|
||||
interface RecipeToolWithOnHand extends RecipeTool {
|
||||
onHand: boolean;
|
||||
}
|
||||
|
||||
const i18n = useI18n();
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("tool.on-hand"),
|
||||
value: "onHand",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const auth = useMealieAuth();
|
||||
const userHousehold = computed(() => auth.user.value?.householdSlug || "");
|
||||
const toolStore = useToolStore();
|
||||
const tools = computed(() => toolStore.store.value.map((tools) => {
|
||||
const onHand = tools.householdsWithTool?.includes(userHousehold.value) || false;
|
||||
return { ...tools, onHand } as RecipeToolWithOnHand;
|
||||
}));
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
const formItems = [
|
||||
{
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
{
|
||||
label: i18n.t("tool.on-hand"),
|
||||
varName: "onHand",
|
||||
type: fieldTypes.BOOLEAN,
|
||||
},
|
||||
] as AutoFormItems;
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: { name: "", onHand: false } as RecipeToolCreate,
|
||||
});
|
||||
|
||||
async function handleCreate(createFormData: RecipeToolCreate) {
|
||||
// @ts-expect-error createOne eroniusly expects id and slug which are not preset at time of creation
|
||||
await toolStore.actions.createOne({ name: createFormData.name, householdsWithTool: createFormData.onHand ? [userHousehold.value] : [] } as RecipeToolCreate);
|
||||
createForm.data = { name: "", onHand: false } as RecipeToolCreate;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as RecipeToolWithOnHand,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: RecipeToolWithOnHand) {
|
||||
// if list of households is undefined default to empty array
|
||||
if (!editFormData.householdsWithTool) {
|
||||
editFormData.householdsWithTool = [];
|
||||
}
|
||||
|
||||
if (editFormData.onHand && !editFormData.householdsWithTool.includes(userHousehold.value)) {
|
||||
editFormData.householdsWithTool.push(userHousehold.value);
|
||||
}
|
||||
else if (!editFormData.onHand && editFormData.householdsWithTool.includes(userHousehold.value)) {
|
||||
const idx = editFormData.householdsWithTool.indexOf(userHousehold.value);
|
||||
if (idx !== -1) editFormData.householdsWithTool.splice(idx, 1);
|
||||
}
|
||||
|
||||
await toolStore.actions.updateOne({ ...editFormData, id: editFormData.id } as RecipeTool);
|
||||
editForm.data = {} as RecipeToolWithOnHand;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: RecipeToolWithOnHand[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await toolStore.actions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
449
frontend/app/pages/group/data/units.vue
Normal file
449
frontend/app/pages/group/data/units.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Merge Dialog -->
|
||||
<BaseDialog
|
||||
v-model="mergeDialog"
|
||||
:icon="$globals.icons.units"
|
||||
:title="$t('data-pages.units.combine-unit')"
|
||||
can-confirm
|
||||
@confirm="mergeUnits"
|
||||
>
|
||||
<v-card-text>
|
||||
<i18n-t keypath="data-pages.units.combine-unit-description">
|
||||
<template #source-unit-will-be-deleted>
|
||||
<strong> {{ $t('data-pages.recipes.source-unit-will-be-deleted') }} </strong>
|
||||
</template>
|
||||
</i18n-t>
|
||||
|
||||
<v-autocomplete
|
||||
v-model="fromUnit"
|
||||
return-object
|
||||
:items="unitStore"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.units.source-unit')"
|
||||
class="mt-2"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="toUnit"
|
||||
return-object
|
||||
:items="unitStore"
|
||||
:custom-filter="normalizeFilter"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.units.target-unit')"
|
||||
/>
|
||||
|
||||
<template v-if="canMerge && fromUnit && toUnit">
|
||||
<div class="text-center">
|
||||
{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}
|
||||
</div>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Alias Sub-Dialog -->
|
||||
<RecipeDataAliasManagerDialog
|
||||
v-if="editForm.data"
|
||||
v-model="aliasManagerDialog"
|
||||
:data="editForm.data"
|
||||
can-submit
|
||||
@submit="updateUnitAlias"
|
||||
@cancel="aliasManagerDialog = false"
|
||||
/>
|
||||
|
||||
<!-- Seed Dialog -->
|
||||
<BaseDialog
|
||||
v-model="seedDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$t('data-pages.seed-data')"
|
||||
can-confirm
|
||||
@confirm="seedDatabase"
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="pb-2">
|
||||
{{ $t("data-pages.units.seed-dialog-text") }}
|
||||
</div>
|
||||
<v-autocomplete
|
||||
v-model="locale"
|
||||
:items="locales"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.select-language')"
|
||||
class="my-3"
|
||||
hide-details
|
||||
variant="outlined"
|
||||
offset
|
||||
>
|
||||
<template #item="{ item, props }">
|
||||
<v-list-item v-bind="props">
|
||||
<v-list-item-subtitle>
|
||||
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert
|
||||
v-if="unitStore && unitStore.length > 0"
|
||||
type="error"
|
||||
class="mb-0 text-body-2"
|
||||
>
|
||||
{{ $t("data-pages.foods.seed-dialog-warning") }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<GroupDataPage
|
||||
:icon="$globals.icons.units"
|
||||
:title="$t('general.units')"
|
||||
:create-title="$t('data-pages.units.create-unit')"
|
||||
:edit-title="$t('data-pages.units.edit-unit')"
|
||||
:table-headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:data="unitStore || []"
|
||||
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
|
||||
:create-form="createForm"
|
||||
:edit-form="editForm"
|
||||
@create-one="handleCreate"
|
||||
@edit-one="handleEdit"
|
||||
@delete-one="unitActions.deleteOne"
|
||||
@bulk-action="handleBulkAction"
|
||||
>
|
||||
<template #table-button-row>
|
||||
<BaseButton
|
||||
:icon="$globals.icons.externalLink"
|
||||
@click="mergeDialog = true"
|
||||
>
|
||||
{{ $t('data-pages.combine') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<template #[`item.useAbbreviation`]="{ item }">
|
||||
<v-icon :color="item.useAbbreviation ? 'success' : undefined">
|
||||
{{ item.useAbbreviation ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<template #[`item.fraction`]="{ item }">
|
||||
<v-icon :color="item.fraction ? 'success' : undefined">
|
||||
{{ item.fraction ? $globals.icons.check : $globals.icons.close }}
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<template #[`item.createdAt`]="{ item }">
|
||||
{{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
|
||||
</template>
|
||||
|
||||
<template #table-button-bottom>
|
||||
<BaseButton :icon="$globals.icons.database" @click="seedDialog = true">
|
||||
{{ $t('data-pages.seed') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<template #edit-dialog-custom-action>
|
||||
<BaseButton
|
||||
:icon="$globals.icons.tags"
|
||||
color="info"
|
||||
@click="aliasManagerDialog = true"
|
||||
>
|
||||
{{ $t('data-pages.manage-aliases') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</GroupDataPage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { LocaleObject } from "@nuxtjs/i18n";
|
||||
import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import type { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
|
||||
import type { StandardizedUnitType } from "~/lib/api/types/non-generated";
|
||||
import { useLocales } from "~/composables/use-locales";
|
||||
import { normalizeFilter } from "~/composables/use-utils";
|
||||
import { useUnitStore } from "~/composables/store";
|
||||
import type { AutoFormItems } from "~/types/auto-forms";
|
||||
import type { TableHeaders, TableConfig } from "~/components/global/CrudTable.vue";
|
||||
import { fieldTypes } from "~/composables/forms";
|
||||
|
||||
const userApi = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
const tableConfig: TableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders: TableHeaders[] = [
|
||||
{
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.plural-name"),
|
||||
value: "pluralName",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.abbreviation"),
|
||||
value: "abbreviation",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.plural-abbreviation"),
|
||||
value: "pluralAbbreviation",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.use-abbv"),
|
||||
value: "useAbbreviation",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.description"),
|
||||
value: "description",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.fraction"),
|
||||
value: "fraction",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-quantity"),
|
||||
value: "standardQuantity",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit"),
|
||||
value: "standardUnit",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.t("general.date-added"),
|
||||
value: "createdAt",
|
||||
show: false,
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const { store: unitStore, actions: unitActions } = useUnitStore();
|
||||
|
||||
// ============================================================
|
||||
// Form items (shared)
|
||||
type StandardizedUnitTypeOption = {
|
||||
text: string;
|
||||
value: StandardizedUnitType;
|
||||
};
|
||||
|
||||
const formItems = computed<AutoFormItems>(() => [
|
||||
{
|
||||
cols: 8,
|
||||
label: i18n.t("general.name"),
|
||||
varName: "name",
|
||||
type: fieldTypes.TEXT,
|
||||
rules: [validators.required],
|
||||
},
|
||||
{
|
||||
cols: 4,
|
||||
label: i18n.t("data-pages.units.abbreviation"),
|
||||
varName: "abbreviation",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
cols: 8,
|
||||
label: i18n.t("general.plural-name"),
|
||||
varName: "pluralName",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
cols: 4,
|
||||
label: i18n.t("data-pages.units.plural-abbreviation"),
|
||||
varName: "pluralAbbreviation",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
label: i18n.t("data-pages.units.description"),
|
||||
varName: "description",
|
||||
type: fieldTypes.TEXT,
|
||||
},
|
||||
{
|
||||
section: i18n.t("data-pages.units.standardization"),
|
||||
sectionDetails: i18n.t("data-pages.units.standardization-description"),
|
||||
cols: 2,
|
||||
varName: "standardQuantity",
|
||||
type: fieldTypes.NUMBER,
|
||||
numberInputConfig: {
|
||||
min: 0,
|
||||
max: undefined,
|
||||
precision: null,
|
||||
controlVariant: "hidden",
|
||||
},
|
||||
},
|
||||
{
|
||||
cols: 10,
|
||||
varName: "standardUnit",
|
||||
type: fieldTypes.SELECT,
|
||||
selectReturnValue: "value",
|
||||
options: [
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.fluid-ounce"),
|
||||
value: "fluid_ounce",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.cup"),
|
||||
value: "cup",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.ounce"),
|
||||
value: "ounce",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.pound"),
|
||||
value: "pound",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.milliliter"),
|
||||
value: "milliliter",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.liter"),
|
||||
value: "liter",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.gram"),
|
||||
value: "gram",
|
||||
},
|
||||
{
|
||||
text: i18n.t("data-pages.units.standard-unit-labels.kilogram"),
|
||||
value: "kilogram",
|
||||
},
|
||||
] as StandardizedUnitTypeOption[],
|
||||
},
|
||||
{
|
||||
section: i18n.t("general.settings"),
|
||||
cols: 4,
|
||||
label: i18n.t("data-pages.units.use-abbv"),
|
||||
varName: "useAbbreviation",
|
||||
type: fieldTypes.BOOLEAN,
|
||||
},
|
||||
{
|
||||
cols: 4,
|
||||
label: i18n.t("data-pages.units.fraction"),
|
||||
varName: "fraction",
|
||||
type: fieldTypes.BOOLEAN,
|
||||
},
|
||||
]);
|
||||
|
||||
// ============================================================
|
||||
// Create
|
||||
const createForm = reactive({
|
||||
items: formItems,
|
||||
data: {
|
||||
name: "",
|
||||
fraction: false,
|
||||
useAbbreviation: false,
|
||||
} as CreateIngredientUnit,
|
||||
});
|
||||
|
||||
async function handleCreate(createFormData: CreateIngredientUnit) {
|
||||
// @ts-expect-error createOne eroniusly expects id which is not preset at time of creation
|
||||
await unitActions.createOne(createFormData);
|
||||
createForm.data = {
|
||||
name: "",
|
||||
fraction: false,
|
||||
useAbbreviation: false,
|
||||
} as CreateIngredientUnit;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Edit
|
||||
const editForm = reactive({
|
||||
items: formItems,
|
||||
data: {} as IngredientUnit,
|
||||
});
|
||||
|
||||
async function handleEdit(editFormData: IngredientUnit) {
|
||||
await unitActions.updateOne(editFormData);
|
||||
editForm.data = {} as IngredientUnit;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Bulk Actions
|
||||
async function handleBulkAction(event: string, items: IngredientUnit[]) {
|
||||
if (event === "delete-selected") {
|
||||
const ids = items.filter(item => item.id != null).map(item => item.id!);
|
||||
await unitActions.deleteMany(ids);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Alias Manager
|
||||
|
||||
const aliasManagerDialog = ref(false);
|
||||
function updateUnitAlias(newAliases: IngredientUnitAlias[]) {
|
||||
if (!editForm.data) {
|
||||
return;
|
||||
}
|
||||
editForm.data.aliases = newAliases;
|
||||
aliasManagerDialog.value = false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Merge Units
|
||||
|
||||
const mergeDialog = ref(false);
|
||||
const fromUnit = ref<IngredientUnit | null>(null);
|
||||
const toUnit = ref<IngredientUnit | null>(null);
|
||||
|
||||
const canMerge = computed(() => {
|
||||
return fromUnit.value && toUnit.value && fromUnit.value.id !== toUnit.value.id;
|
||||
});
|
||||
|
||||
async function mergeUnits() {
|
||||
if (!canMerge.value || !fromUnit.value || !toUnit.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await userApi.units.merge(fromUnit.value.id, toUnit.value.id);
|
||||
|
||||
if (data) {
|
||||
unitActions.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Seed
|
||||
|
||||
const seedDialog = ref(false);
|
||||
const locale = ref("");
|
||||
|
||||
const { locales: LOCALES, locale: currentLocale } = useLocales();
|
||||
|
||||
onMounted(() => {
|
||||
locale.value = currentLocale.value;
|
||||
});
|
||||
|
||||
const locales = LOCALES.filter(locale =>
|
||||
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
|
||||
);
|
||||
|
||||
async function seedDatabase() {
|
||||
const { data } = await userApi.seeders.units({ locale: locale.value });
|
||||
|
||||
if (data) {
|
||||
unitActions.refresh();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user