mealie/frontend/pages/group/members.vue

<template>
  <v-container>
    <BasePageTitle divider>
      <template #header>
        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-members.svg')"></v-img>
      </template>
      <template #title> Manage Members </template>
      Manage the permissions of the members in your groups. <b> Manage </b> allows the user to access the
      data-management page <b> Invite </b> allows the user to generate invitation links for other users. Group owners
      cannot change their own permissions.
    </BasePageTitle>
    <v-data-table
      :headers="headers"
      :items="members || []"
      item-key="id"
      class="elevation-0"
      hide-default-footer
      disable-pagination
    >
      <template #item.avatar="{ item }">
        <UserAvatar :user-id="item.id" />
      </template>
      <template #item.admin="{ item }">
        {{ item.admin ? "Admin" : "User" }}
      </template>
      <template #item.manage="{ item }">
        <div class="d-flex justify-center">
          <v-checkbox
            v-model="item.canManage"
            :disabled="item.id === $auth.user.id || item.admin"
            class=""
            style="max-width: 30px"
            @change="setPermissions(item)"
          ></v-checkbox>
        </div>
      </template>
      <template #item.organize="{ item }">
        <div class="d-flex justify-center">
          <v-checkbox
            v-model="item.canOrganize"
            :disabled="item.id === $auth.user.id || item.admin"
            class=""
            style="max-width: 30px"
            @change="setPermissions(item)"
          ></v-checkbox>
        </div>
      </template>
      <template #item.invite="{ item }">
        <div class="d-flex justify-center">
          <v-checkbox
            v-model="item.canInvite"
            :disabled="item.id === $auth.user.id || item.admin"
            class=""
            style="max-width: 30px"
            @change="setPermissions(item)"
          ></v-checkbox>
        </div>
      </template>
    </v-data-table>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
import { UserOut } from "~/types/api-types/user";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";

export default defineComponent({
  components: {
    UserAvatar,
  },
  setup() {
    const api = useUserApi();

    const { i18n } = useContext();

    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: "Manage", value: "manage", sortable: false, align: "center" },
      { text: "Organize", value: "organize", sortable: false, align: "center" },
      { text: "Invite", value: "invite", sortable: false, align: "center" },
    ];

    async function refreshMembers() {
      const { data } = await api.groups.fetchMembers();
      if (data) {
        members.value = data;
      }
    }

    async function setPermissions(user: UserOut) {
      const payload = {
        userId: user.id,
        canInvite: user.canInvite,
        canManage: user.canManage,
        canOrganize: user.canOrganize,
      };

      await api.groups.setMemberPermissions(payload);
    }

    onMounted(async () => {
      await refreshMembers();
    });

    return { members, headers, setPermissions };
  },
  head() {
    return {
      title: "Members",
    };
  },
});
</script>