mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 21:45:25 +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
|
|
@ -2,21 +2,32 @@
|
|||
<v-container>
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-members.svg')"></v-img>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="125"
|
||||
max-width="125"
|
||||
:src="require('~/static/svgs/manage-members.svg')"
|
||||
/>
|
||||
</template>
|
||||
<template #title> {{ $t('group.manage-members') }} </template>
|
||||
<i18n path="group.manage-members-description">
|
||||
<template #manage>
|
||||
<b>{{ $t('group.manage') }}</b>
|
||||
</template>
|
||||
<template #invite>
|
||||
<b>{{ $t('group.invite') }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
<v-container class="mt-1 px-0">
|
||||
<nuxt-link class="text-center" :to="`/user/profile/edit`"> {{ $t('group.looking-to-update-your-profile') }} </nuxt-link>
|
||||
<template #title>
|
||||
{{ $t('group.manage-members') }}
|
||||
</template>
|
||||
<i18n-t keypath="group.manage-members-description">
|
||||
<template #manage>
|
||||
<b>{{ $t('group.manage') }}</b>
|
||||
</template>
|
||||
<template #invite>
|
||||
<b>{{ $t('group.invite') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<v-container class="mt-1 px-0">
|
||||
<nuxt-link
|
||||
class="text-center"
|
||||
:to="`/user/profile/edit`"
|
||||
> {{ $t('group.looking-to-update-your-profile') }}
|
||||
</nuxt-link>
|
||||
</v-container>
|
||||
</BasePageTitle>
|
||||
</BasePageTitle>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="members || []"
|
||||
|
|
@ -25,54 +36,78 @@
|
|||
hide-default-footer
|
||||
disable-pagination
|
||||
>
|
||||
<template #item.avatar="{ item }">
|
||||
<UserAvatar :tooltip="false" :user-id="item.id" />
|
||||
<template #[`item.avatar`]="{ item }">
|
||||
<UserAvatar
|
||||
v-if="item"
|
||||
:tooltip="false"
|
||||
:user-id="item.id"
|
||||
/>
|
||||
</template>
|
||||
<template #item.admin="{ item }">
|
||||
{{ item.admin ? $t('user.admin') : $t('user.user') }}
|
||||
<template #[`item.admin`]="{ item }">
|
||||
{{ item && item.admin ? $t('user.admin') : $t('user.user') }}
|
||||
</template>
|
||||
<template #item.manageHousehold="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.manageHousehold`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canManageHousehold"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
color="primary"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.manage="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.manage`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canManage"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.organize="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.organize`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canOrganize"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.invite="{ item }">
|
||||
<div class="d-flex justify-center">
|
||||
<template #[`item.invite`]="{ item }">
|
||||
<div
|
||||
v-if="item"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<v-checkbox
|
||||
v-model="item.canInvite"
|
||||
:disabled="item.id === $auth.user.id || item.admin"
|
||||
:disabled="item.id === sessionUser?.id || item.admin"
|
||||
class=""
|
||||
style="max-width: 30px"
|
||||
hide-details
|
||||
color="primary"
|
||||
@change="setPermissions(item)"
|
||||
></v-checkbox>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
|
@ -80,32 +115,35 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { UserOut } from "~/lib/api/types/user";
|
||||
import type { UserOut } from "~/lib/api/types/user";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
UserAvatar,
|
||||
},
|
||||
middleware: ["auth"],
|
||||
middleware: ["sidebase-auth"],
|
||||
setup() {
|
||||
const $auth = useMealieAuth();
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
const { i18n } = useContext();
|
||||
useSeoMeta({
|
||||
title: i18n.t("profile.members"),
|
||||
});
|
||||
|
||||
const members = ref<UserOut[] | null[]>([]);
|
||||
|
||||
const headers = [
|
||||
{ text: "", value: "avatar", sortable: false, align: "center" },
|
||||
{ text: i18n.t("user.username"), value: "username" },
|
||||
{ text: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ text: i18n.t("user.admin"), value: "admin" },
|
||||
{ text: i18n.t("group.manage"), value: "manage", sortable: false, align: "center" },
|
||||
{ text: i18n.t("settings.organize"), value: "organize", sortable: false, align: "center" },
|
||||
{ text: i18n.t("group.invite"), value: "invite", sortable: false, align: "center" },
|
||||
{ text: i18n.t("group.manage-household"), value: "manageHousehold", sortable: false, align: "center" },
|
||||
{ title: "", value: "avatar", sortable: false, align: "center" },
|
||||
{ title: i18n.t("user.username"), value: "username" },
|
||||
{ title: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ title: i18n.t("user.admin"), value: "admin" },
|
||||
{ title: i18n.t("group.manage"), value: "manage", sortable: false, align: "center" },
|
||||
{ title: i18n.t("settings.organize"), value: "organize", sortable: false, align: "center" },
|
||||
{ title: i18n.t("group.invite"), value: "invite", sortable: false, align: "center" },
|
||||
{ title: i18n.t("group.manage-household"), value: "manageHousehold", sortable: false, align: "center" },
|
||||
];
|
||||
|
||||
async function refreshMembers() {
|
||||
|
|
@ -131,12 +169,7 @@ export default defineComponent({
|
|||
await refreshMembers();
|
||||
});
|
||||
|
||||
return { members, headers, setPermissions };
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("profile.members"),
|
||||
};
|
||||
return { members, headers, setPermissions, sessionUser: $auth.user };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue