1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +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 2025-06-20 00:09:12 +07:00 committed by GitHub
parent 89ab7fac25
commit c24d532608
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
403 changed files with 23959 additions and 19557 deletions

View file

@ -1,25 +1,53 @@
<template>
<div>
<!-- Merge Dialog -->
<BaseDialog v-model="mergeDialog" :icon="$globals.icons.units" :title="$t('data-pages.units.combine-unit')" @confirm="mergeUnits">
<BaseDialog
v-model="mergeDialog"
:icon="$globals.icons.units"
:title="$t('data-pages.units.combine-unit')"
can-confirm
@confirm="mergeUnits"
>
<v-card-text>
<i18n path="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>
<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="store" item-text="id" :label="$t('data-pages.units.source-unit')">
<template #selection="{ item }"> {{ item.name }}</template>
<template #item="{ item }"> {{ item.name }} </template>
<v-autocomplete
v-model="fromUnit"
return-object
:items="store"
item-title="id"
:label="$t('data-pages.units.source-unit')"
>
<template #chip="{ item }">
{{ item.raw.name }}
</template>
<template #item="{ item }">
{{ item.raw.name }}
</template>
</v-autocomplete>
<v-autocomplete v-model="toUnit" return-object :items="store" item-text="id" :label="$t('data-pages.units.target-unit')">
<template #selection="{ item }"> {{ item.name }}</template>
<template #item="{ item }"> {{ item.name }} </template>
<v-autocomplete
v-model="toUnit"
return-object
:items="store"
item-title="id"
:label="$t('data-pages.units.target-unit')"
>
<template #chip="{ item }">
{{ item.raw.name }}
</template>
<template #item="{ item }">
{{ item.raw.name }}
</template>
</v-autocomplete>
<template v-if="canMerge && fromUnit && toUnit">
<div class="text-center">{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}</div>
<div class="text-center">
{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}
</div>
</template>
</v-card-text>
</BaseDialog>
@ -30,7 +58,8 @@
:icon="$globals.icons.units"
:title="$t('data-pages.units.create-unit')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="createUnit"
>
<v-card-text>
@ -41,25 +70,36 @@
:label="$t('general.name')"
:hint="$t('data-pages.units.example-unit-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="createTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.units.example-unit-plural')"
></v-text-field>
/>
<v-text-field
v-model="createTarget.abbreviation"
:label="$t('data-pages.units.abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-singular')"
></v-text-field>
/>
<v-text-field
v-model="createTarget.pluralAbbreviation"
:label="$t('data-pages.units.plural-abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-plural')"
></v-text-field>
<v-text-field v-model="createTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
<v-checkbox v-model="createTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
<v-checkbox v-model="createTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
/>
<v-text-field
v-model="createTarget.description"
:label="$t('data-pages.units.description')"
/>
<v-checkbox
v-model="createTarget.fraction"
hide-details
:label="$t('data-pages.units.display-as-fraction')"
/>
<v-checkbox
v-model="createTarget.useAbbreviation"
hide-details
:label="$t('data-pages.units.use-abbreviation')"
/>
</v-form>
</v-card-text>
</BaseDialog>
@ -69,6 +109,7 @@
v-if="editTarget"
:value="aliasManagerDialog"
:data="editTarget"
can-submit
@submit="updateUnitAlias"
@cancel="aliasManagerDialog = false"
/>
@ -79,7 +120,8 @@
:icon="$globals.icons.units"
:title="$t('data-pages.units.edit-unit')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
:submit-text="$t('general.save')"
can-submit
@submit="editSaveUnit"
>
<v-card-text v-if="editTarget">
@ -89,43 +131,65 @@
:label="$t('general.name')"
:hint="$t('data-pages.units.example-unit-singular')"
:rules="[validators.required]"
></v-text-field>
/>
<v-text-field
v-model="editTarget.pluralName"
:label="$t('general.plural-name')"
:hint="$t('data-pages.units.example-unit-plural')"
></v-text-field>
/>
<v-text-field
v-model="editTarget.abbreviation"
:label="$t('data-pages.units.abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-singular')"
></v-text-field>
/>
<v-text-field
v-model="editTarget.pluralAbbreviation"
:label="$t('data-pages.units.plural-abbreviation')"
:hint="$t('data-pages.units.example-unit-abbreviation-plural')"
></v-text-field>
<v-text-field v-model="editTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
<v-checkbox v-model="editTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
<v-checkbox v-model="editTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
/>
<v-text-field
v-model="editTarget.description"
:label="$t('data-pages.units.description')"
/>
<v-checkbox
v-model="editTarget.fraction"
hide-details
:label="$t('data-pages.units.display-as-fraction')"
/>
<v-checkbox
v-model="editTarget.useAbbreviation"
hide-details
:label="$t('data-pages.units.use-abbreviation')"
/>
</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="deleteUnit"
>
<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>
@ -133,20 +197,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>
@ -154,11 +223,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>
@ -168,36 +238,42 @@
<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="store && store.length > 0" type="error" class="mb-0 text-body-2">
<v-alert
v-if="store && store.length > 0"
type="error"
class="mb-0 text-body-2"
>
{{ $t("data-pages.foods.seed-dialog-warning") }}
</v-alert>
</v-card-text>
</BaseDialog>
<!-- Data Table -->
<BaseCardSectionTitle :icon="$globals.icons.units" section :title="$tc('data-pages.units.unit-data')"> </BaseCardSectionTitle>
<BaseCardSectionTitle
:icon="$globals.icons.units"
section
:title="$t('data-pages.units.unit-data')"
/>
<CrudTable
v-model:headers="tableHeaders"
:table-config="tableConfig"
:headers.sync="tableHeaders"
:data="store"
:bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
:bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
initial-sort="createdAt"
initial-sort-desc
@delete-one="deleteEventHandler"
@ -206,29 +282,36 @@
@delete-selected="bulkDeleteEventHandler"
>
<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.useAbbreviation="{ item }">
<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 }">
<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 }">
<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>
@ -237,21 +320,21 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, 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 { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
import type { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
import { useLocales } from "~/composables/use-locales";
import { useUnitStore } from "~/composables/store";
import { VForm } from "~/types/vuetify";
import type { VForm } from "~/types/auto-forms";
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeDataAliasManagerDialog },
setup() {
const userApi = useUserApi();
const { i18n } = useContext();
const i18n = useI18n();
const tableConfig = {
hideColumns: true,
canExport: true,
@ -266,26 +349,31 @@ export default defineComponent({
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"),
@ -296,18 +384,21 @@ export default defineComponent({
text: i18n.t("data-pages.units.fraction"),
value: "fraction",
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 "";
}
}
@ -450,8 +541,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),
);
async function seedDatabase() {