Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-03 04:25:24 +02:00
Code Issues Releases Activity

feat: Migrate to Nuxt 3 framework (#5184)

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

81
frontend/pages/admin/manage/groups/_id.vue → frontend/pages/admin/manage/groups/[id].vue
View file

@ -1,47 +1,73 @@
<template>
<v-container v-if="group" class="narrow-container">
<v-container
v-if="group"
class="narrow-container"
>
<BasePageTitle>
<template #header>
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
<v-img
width="100%"
max-height="125"
max-width="125"
:src="require('~/static/svgs/manage-group-settings.svg')"
/>
</template>
<template #title>
{{ $t('group.admin-group-management') }}
</template>
<template #title> {{ $t('group.admin-group-management') }} </template>
{{ $t('group.admin-group-management-text') }}
</BasePageTitle>
<AppToolbar back> </AppToolbar>
<AppToolbar back />
<v-card-text> {{ $t('group.group-id-value', [group.id]) }} </v-card-text>
<v-form v-if="!userError" ref="refGroupEditForm" @submit.prevent="handleSubmit">
<v-card outlined>
<v-form
v-if="!userError"
ref="refGroupEditForm"
@submit.prevent="handleSubmit"
>
<v-card variant="outlined" style="border-color: lightgrey;">
<v-card-text>
<v-text-field v-model="group.name" :label="$t('group.group-name')"> </v-text-field>
<GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
<v-text-field
v-model="group.name"
:label="$t('group.group-name')"
/>
<GroupPreferencesEditor
v-if="group.preferences"
v-model="group.preferences"
/>
</v-card-text>
</v-card>
<div class="d-flex pa-2">
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
<BaseButton
type="submit"
edit
class="ml-auto"
>
{{ $t("general.update") }}
</BaseButton>
</div>
</v-form>
</v-container>
</template>
<script lang="ts">
import { defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
import { useAdminApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
import { GroupInDB } from "~/lib/api/types/user";
import { VForm } from "~/types/vuetify";
export default defineComponent({
export default defineNuxtComponent({
components: {
GroupPreferencesEditor,
},
layout: "admin",
setup() {
definePageMeta({
layout: "admin",
});
const route = useRoute();
const { i18n } = useContext();
const i18n = useI18n();
const groupId = route.value.params.id;
const groupId = computed(() => route.params.id as string);
// ==============================================
// New User Form
@ -50,22 +76,20 @@ export default defineComponent({
const adminApi = useAdminApi();
const group = ref<GroupInDB | null>(null);
const userError = ref(false);
onMounted(async () => {
const { data, error } = await adminApi.groups.getOne(groupId);
const { data: group } = useLazyAsyncData(`get-household-${groupId.value}`, async () => {
if (!groupId.value) {
return null;
}
const { data, error } = await adminApi.groups.getOne(groupId.value);
if (error?.response?.status === 404) {
alert.error(i18n.tc("user.user-not-found"));
alert.error(i18n.t("user.user-not-found"));
userError.value = true;
}
if (data) {
group.value = data;
}
});
return data;
}, { watch: [groupId] });
async function handleSubmit() {
if (!refGroupEditForm.value?.validate() || group.value === null) {
@ -79,8 +103,9 @@ export default defineComponent({
window.location.reload();
}
group.value = data;
} else {
alert.error(i18n.tc("settings.settings-update-failed"));
}
else {
alert.error(i18n.t("settings.settings-update-failed"));
}
}

88
frontend/pages/admin/manage/groups/index.vue
View file

@ -4,11 +4,16 @@
v-model="createDialog"
:title="$t('group.create-group')"
:icon="$globals.icons.group"
can-submit
@submit="createGroup(createGroupForm.data)"
>
<template #activator> </template>
<template #activator />
<v-card-text>
<AutoForm v-model="createGroupForm.data" :update-mode="updateMode" :items="createGroupForm.items" />
<AutoForm
v-model="createGroupForm.data"
:update-mode="updateMode"
:items="createGroupForm.items"
/>
</v-card-text>
</BaseDialog>
@ -16,18 +21,25 @@
v-model="confirmDialog"
:title="$t('general.confirm')"
color="error"
can-confirm
@confirm="deleteGroup(deleteTarget)"
>
<template #activator> </template>
<template #activator />
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseCardSectionTitle :title="$tc('group.group-management')"> </BaseCardSectionTitle>
<BaseCardSectionTitle :title="$t('group.group-management')" />
<section>
<v-toolbar flat color="transparent" class="justify-between">
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
<v-toolbar
flat
color="transparent"
class="justify-between"
>
<BaseButton @click="openDialog">
{{ $t("general.create") }}
</BaseButton>
</v-toolbar>
<v-data-table
@ -38,26 +50,30 @@
hide-default-footer
disable-pagination
:search="search"
@click:row="handleRowClick"
@click:row="($event, { item }) => handleRowClick(item)"
>
<template #item.households="{ item }">
{{ item.households.length }}
<template #[`item.households`]="{ item }">
{{ item.households!.length }}
</template>
<template #item.users="{ item }">
{{ item.users.length }}
<template #[`item.users`]="{ item }">
{{ item.users!.length }}
</template>
<template #item.actions="{ item }">
<v-tooltip bottom :disabled="!(item && (item.households.length > 0 || item.users.length > 0))">
<template #activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" >
<template #[`item.actions`]="{ item }">
<v-tooltip
bottom
:disabled="!(item && (item.households!.length > 0 || item.users!.length > 0))"
>
<template #activator="{ props }">
<div v-bind="props">
<v-btn
:disabled="item && (item.households.length > 0 || item.users.length > 0)"
:disabled="item && (item.households!.length > 0 || item.users!.length > 0)"
class="mr-1"
icon
color="error"
variant="text"
@click.stop="
confirmDialog = true;
deleteTarget = item.id;
deleteTarget = +item.id;
"
>
<v-icon>
@ -66,25 +82,33 @@
</v-btn>
</div>
</template>
<span>{{ $tc("admin.group-delete-note") }}</span>
<span>{{ $t("admin.group-delete-note") }}</span>
</v-tooltip>
</template>
</v-data-table>
<v-divider></v-divider>
<v-divider />
</section>
</v-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
import { fieldTypes } from "~/composables/forms";
import { useGroups } from "~/composables/use-groups";
import { GroupInDB } from "~/lib/api/types/user";
import type { GroupInDB } from "~/lib/api/types/user";
export default defineComponent({
layout: "admin",
export default defineNuxtComponent({
setup() {
const { i18n } = useContext();
definePageMeta({
layout: "admin",
});
const i18n = useI18n();
// Set page title
useSeoMeta({
title: i18n.t("group.manage-groups"),
});
const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
const state = reactive({
@ -94,15 +118,15 @@ export default defineComponent({
search: "",
headers: [
{
text: i18n.t("group.group"),
title: i18n.t("group.group"),
align: "start",
sortable: false,
value: "id",
},
{ text: i18n.t("general.name"), value: "name" },
{ text: i18n.t("group.total-households"), value: "households" },
{ text: i18n.t("user.total-users"), value: "users" },
{ text: i18n.t("general.delete"), value: "actions" },
{ title: i18n.t("general.name"), value: "name" },
{ title: i18n.t("group.total-households"), value: "households" },
{ title: i18n.t("user.total-users"), value: "users" },
{ title: i18n.t("general.delete"), value: "actions" },
],
updateMode: false,
createGroupForm: {
@ -125,17 +149,15 @@ export default defineComponent({
state.createGroupForm.data.name = "";
}
const router = useRouter();
function handleRowClick(item: GroupInDB) {
router.push(`/admin/manage/groups/${item.id}`);
navigateTo(`/admin/manage/groups/${item.id}`);
}
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup, openDialog, handleRowClick };
},
head() {
return {
title: this.$t("group.manage-groups") as string,
title: useI18n().t("group.manage-groups"),
};
},
});