mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -1,13 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Merge Dialog -->
|
||||
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.foods" :title="$tc('data-pages.foods.combine-food')" @confirm="mergeFoods">
|
||||
<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" item-text="name" :label="$t('data-pages.foods.source-food')" />
|
||||
<v-autocomplete v-model="toFood" return-object :items="foods" item-text="name" :label="$t('data-pages.foods.target-food')" />
|
||||
<v-autocomplete
|
||||
v-model="fromFood"
|
||||
return-object
|
||||
:items="foods"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.source-food')"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="toFood"
|
||||
return-object
|
||||
:items="foods"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.target-food')"
|
||||
/>
|
||||
|
||||
<template v-if="canMerge && fromFood && toFood">
|
||||
<div class="text-center">
|
||||
|
|
@ -17,11 +35,12 @@
|
|||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Seed Dialog-->
|
||||
<!-- Seed Dialog -->
|
||||
<BaseDialog
|
||||
v-model="seedDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$tc('data-pages.seed-data')"
|
||||
:title="$t('data-pages.seed-data')"
|
||||
can-confirm
|
||||
@confirm="seedDatabase"
|
||||
>
|
||||
<v-card-text>
|
||||
|
|
@ -31,24 +50,26 @@
|
|||
<v-autocomplete
|
||||
v-model="locale"
|
||||
:items="locales"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.select-language')"
|
||||
class="my-3"
|
||||
hide-details
|
||||
outlined
|
||||
variant="outlined"
|
||||
offset
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title> {{ item.name }} </v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
{{ item.progress }}% {{ $tc("language-dialog.translated") }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
|
||||
</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
|
||||
<v-alert v-if="foods && foods.length > 0" type="error" class="mb-0 text-body-2">
|
||||
<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>
|
||||
|
|
@ -58,9 +79,10 @@
|
|||
<BaseDialog
|
||||
v-model="createDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$tc('data-pages.foods.create-food')"
|
||||
:title="$t('data-pages.foods.create-food')"
|
||||
:submit-icon="$globals.icons.save"
|
||||
:submit-text="$tc('general.save')"
|
||||
:submit-text="$t('general.save')"
|
||||
can-submit
|
||||
@submit="createFood"
|
||||
>
|
||||
<v-card-text>
|
||||
|
|
@ -71,22 +93,24 @@
|
|||
:label="$t('general.name')"
|
||||
:hint="$t('data-pages.foods.example-food-singular')"
|
||||
:rules="[validators.required]"
|
||||
></v-text-field>
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="createTarget.pluralName"
|
||||
:label="$t('general.plural-name')"
|
||||
:hint="$t('data-pages.foods.example-food-plural')"
|
||||
></v-text-field>
|
||||
<v-text-field v-model="createTarget.description" :label="$t('recipe.description')"></v-text-field>
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="createTarget.description"
|
||||
:label="$t('recipe.description')"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="createTarget.labelId"
|
||||
clearable
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.food-label')"
|
||||
>
|
||||
</v-autocomplete>
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="createTarget.onHand"
|
||||
hide-details
|
||||
|
|
@ -95,8 +119,9 @@
|
|||
<p class="text-caption mt-1">
|
||||
{{ $t("data-pages.foods.on-hand-checkbox-label") }}
|
||||
</p>
|
||||
</v-form> </v-card-text
|
||||
></BaseDialog>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Alias Sub-Dialog -->
|
||||
<RecipeDataAliasManagerDialog
|
||||
|
|
@ -111,9 +136,10 @@
|
|||
<BaseDialog
|
||||
v-model="editDialog"
|
||||
:icon="$globals.icons.foods"
|
||||
:title="$tc('data-pages.foods.edit-food')"
|
||||
:title="$t('data-pages.foods.edit-food')"
|
||||
:submit-icon="$globals.icons.save"
|
||||
:submit-text="$tc('general.save')"
|
||||
:submit-text="$t('general.save')"
|
||||
can-submit
|
||||
@submit="editSaveFood"
|
||||
>
|
||||
<v-card-text v-if="editTarget">
|
||||
|
|
@ -123,25 +149,24 @@
|
|||
:label="$t('general.name')"
|
||||
:hint="$t('data-pages.foods.example-food-singular')"
|
||||
:rules="[validators.required]"
|
||||
></v-text-field>
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="editTarget.pluralName"
|
||||
:label="$t('general.plural-name')"
|
||||
:hint="$t('data-pages.foods.example-food-plural')"
|
||||
></v-text-field>
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="editTarget.description"
|
||||
:label="$t('recipe.description')"
|
||||
></v-text-field>
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="editTarget.labelId"
|
||||
clearable
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.food-label')"
|
||||
>
|
||||
</v-autocomplete>
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="editTarget.onHand"
|
||||
hide-details
|
||||
|
|
@ -153,21 +178,32 @@
|
|||
</v-form>
|
||||
</v-card-text>
|
||||
<template #custom-card-action>
|
||||
<BaseButton edit @click="aliasManagerEventHandler">{{ $t('data-pages.manage-aliases') }}</BaseButton>
|
||||
<BaseButton
|
||||
edit
|
||||
@click="aliasManagerEventHandler"
|
||||
>
|
||||
{{ $t('data-pages.manage-aliases') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
:title="$tc('general.confirm')"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
can-confirm
|
||||
@confirm="deleteFood"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ $t("general.confirm-delete-generic") }}
|
||||
<p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
|
||||
<p
|
||||
v-if="deleteTarget"
|
||||
class="mt-4 ml-4"
|
||||
>
|
||||
{{ deleteTarget.name }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
|
||||
|
|
@ -175,20 +211,25 @@
|
|||
<BaseDialog
|
||||
v-model="bulkDeleteDialog"
|
||||
width="650px"
|
||||
:title="$tc('general.confirm')"
|
||||
:title="$t('general.confirm')"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
color="error"
|
||||
can-confirm
|
||||
@confirm="deleteSelected"
|
||||
>
|
||||
<v-card-text>
|
||||
<p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
|
||||
<p class="h4">
|
||||
{{ $t('general.confirm-delete-generic-items') }}
|
||||
</p>
|
||||
<v-card variant="outlined">
|
||||
<v-virtual-scroll
|
||||
height="400"
|
||||
item-height="25"
|
||||
:items="bulkDeleteTarget"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<v-list-item class="pb-2">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
|
@ -199,14 +240,15 @@
|
|||
<!-- Bulk Assign Labels Dialog -->
|
||||
<BaseDialog
|
||||
v-model="bulkAssignLabelDialog"
|
||||
:title="$tc('data-pages.labels.assign-label')"
|
||||
: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>{{ $tc("general.caution") }}</v-card-title>
|
||||
<v-card-text>{{ $tc("data-pages.foods.label-overwrite-warning") }}</v-card-text>
|
||||
<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
|
||||
|
|
@ -214,16 +256,18 @@
|
|||
clearable
|
||||
:items="allLabels"
|
||||
item-value="id"
|
||||
item-text="name"
|
||||
:label="$tc('data-pages.foods.food-label')"
|
||||
item-title="name"
|
||||
:label="$t('data-pages.foods.food-label')"
|
||||
/>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll height="400" item-height="25" :items="bulkAssignTarget">
|
||||
<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-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
|
@ -232,14 +276,18 @@
|
|||
</BaseDialog>
|
||||
|
||||
<!-- Data Table -->
|
||||
<BaseCardSectionTitle :icon="$globals.icons.foods" section :title="$tc('data-pages.foods.food-data')"> </BaseCardSectionTitle>
|
||||
<BaseCardSectionTitle
|
||||
:icon="$globals.icons.foods"
|
||||
section
|
||||
:title="$t('data-pages.foods.food-data')"
|
||||
/>
|
||||
<CrudTable
|
||||
v-model:headers="tableHeaders"
|
||||
:table-config="tableConfig"
|
||||
:headers.sync="tableHeaders"
|
||||
:data="foods || []"
|
||||
:bulk-actions="[
|
||||
{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'},
|
||||
{icon: $globals.icons.tags, text: $tc('data-pages.labels.assign-label'), event: 'assign-selected'}
|
||||
{ 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' },
|
||||
]"
|
||||
initial-sort="createdAt"
|
||||
initial-sort-desc
|
||||
|
|
@ -250,28 +298,38 @@
|
|||
@assign-selected="bulkAssignEventHandler"
|
||||
>
|
||||
<template #button-row>
|
||||
<BaseButton create @click="createDialog = true" />
|
||||
<BaseButton
|
||||
create
|
||||
@click="createDialog = true"
|
||||
/>
|
||||
<BaseButton @click="mergeDialog = true">
|
||||
<template #icon> {{ $globals.icons.externalLink }} </template>
|
||||
<template #icon>
|
||||
{{ $globals.icons.externalLink }}
|
||||
</template>
|
||||
{{ $t('data-pages.combine') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
<template #item.label="{ item }">
|
||||
<MultiPurposeLabel v-if="item.label" :label="item.label">
|
||||
<template #[`item.label`]="{ item }">
|
||||
<MultiPurposeLabel
|
||||
v-if="item.label"
|
||||
:label="item.label"
|
||||
>
|
||||
{{ item.label.name }}
|
||||
</MultiPurposeLabel>
|
||||
</template>
|
||||
<template #item.onHand="{ item }">
|
||||
<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 }">
|
||||
<template #[`item.createdAt`]="{ item }">
|
||||
{{ formatDate(item.createdAt) }}
|
||||
</template>
|
||||
<template #button-bottom>
|
||||
<BaseButton @click="seedDialog = true">
|
||||
<template #icon> {{ $globals.icons.database }} </template>
|
||||
<template #icon>
|
||||
{{ $globals.icons.database }}
|
||||
</template>
|
||||
{{ $t('data-pages.seed') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
|
@ -280,17 +338,16 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, computed, useContext } from "@nuxtjs/composition-api";
|
||||
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 { CreateIngredientFood, IngredientFood, IngredientFoodAlias } from "~/lib/api/types/recipe";
|
||||
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 { useFoodStore, useLabelStore } from "~/composables/store";
|
||||
import { VForm } from "~/types/vuetify";
|
||||
import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
|
||||
import type { MultiPurposeLabelOut } from "~/lib/api/types/labels";
|
||||
import type { VForm } from "~/types/auto-forms";
|
||||
|
||||
interface CreateIngredientFoodWithOnHand extends CreateIngredientFood {
|
||||
onHand: boolean;
|
||||
|
|
@ -301,40 +358,44 @@ interface IngredientFoodWithOnHand extends IngredientFood {
|
|||
onHand: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: { MultiPurposeLabel, RecipeDataAliasManagerDialog },
|
||||
setup() {
|
||||
const userApi = useUserApi();
|
||||
const { $auth, i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
const $auth = useMealieAuth();
|
||||
const tableConfig = {
|
||||
hideColumns: true,
|
||||
canExport: true,
|
||||
};
|
||||
const tableHeaders = [
|
||||
{
|
||||
text: i18n.tc("general.id"),
|
||||
text: i18n.t("general.id"),
|
||||
value: "id",
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
text: i18n.tc("general.name"),
|
||||
text: i18n.t("general.name"),
|
||||
value: "name",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.tc("general.plural-name"),
|
||||
text: i18n.t("general.plural-name"),
|
||||
value: "pluralName",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.tc("recipe.description"),
|
||||
text: i18n.t("recipe.description"),
|
||||
value: "description",
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
text: i18n.tc("shopping-list.label"),
|
||||
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 || "";
|
||||
|
|
@ -342,26 +403,29 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
{
|
||||
text: i18n.tc("tool.on-hand"),
|
||||
text: i18n.t("tool.on-hand"),
|
||||
value: "onHand",
|
||||
show: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
text: i18n.tc("general.date-added"),
|
||||
text: i18n.t("general.date-added"),
|
||||
value: "createdAt",
|
||||
show: false,
|
||||
}
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
function formatDate(date: string) {
|
||||
try {
|
||||
return i18n.d(Date.parse(date), "medium");
|
||||
} catch {
|
||||
}
|
||||
catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
const userHousehold = computed(() => $auth.user?.householdSlug || "");
|
||||
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;
|
||||
|
|
@ -423,12 +487,14 @@ export default defineComponent({
|
|||
if (editTarget.value.onHand && !editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
|
||||
if (!editTarget.value.householdsWithIngredientFood) {
|
||||
editTarget.value.householdsWithIngredientFood = [userHousehold.value];
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
editTarget.value.householdsWithIngredientFood.push(userHousehold.value);
|
||||
}
|
||||
} else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
|
||||
}
|
||||
else if (!editTarget.value.onHand && editTarget.value.householdsWithIngredientFood?.includes(userHousehold.value)) {
|
||||
editTarget.value.householdsWithIngredientFood = editTarget.value.householdsWithIngredientFood.filter(
|
||||
(household) => household !== userHousehold.value
|
||||
household => household !== userHousehold.value,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -525,8 +591,8 @@ export default defineComponent({
|
|||
locale.value = currentLocale.value;
|
||||
});
|
||||
|
||||
const locales = LOCALES.filter((locale) =>
|
||||
(i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
|
||||
const locales = LOCALES.filter(locale =>
|
||||
(i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value as any),
|
||||
);
|
||||
|
||||
async function seedDatabase() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue