hide actions and pages in the frontend according to permissions

2026-08-10 17:22:15 +01:00 · 2024-04-25 04:12:10 +02:00
parent 77cedb160e
commit f22d423fff
21 changed files with 176 additions and 18 deletions
--- a/app/Http/Middleware/ShareInertiaData.php
+++ b/app/Http/Middleware/ShareInertiaData.php
@@ -27,7 +27,6 @@ class ShareInertiaData
        /** @var PermissionStore $permissions */
        $permissions = app(PermissionStore::class);
        Inertia::share(array_filter([
-            'permissions' => $request->user() !== null && $request->user()->currentTeam !== null ? $permissions->getPermissions($request->user()->currentTeam) : [],
            'jetstream' => function () use ($request) {
                /** @var User|null $user */
                $user = $request->user();
@@ -49,6 +48,7 @@ class ShareInertiaData
                ];
            },
            'auth' => [
+                'permissions' => $request->user() !== null && $request->user()->currentTeam !== null ? $permissions->getPermissions($request->user()->currentTeam) : [],
                'user' => function () use ($request): array {
                    /** @var User|null $user */
                    $user = $request->user();
--- a/resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue
@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
 import type { Client } from '@/utils/api';
+import { canDeleteClients } from '@/utils/permissions';

 const emit = defineEmits<{
    delete: [];
@@ -31,6 +32,7 @@ const props = defineProps<{
        </template>
        <template #content>
            <button
+                v-if="canDeleteClients()"
                @click="emit('delete')"
                :aria-label="'Delete Client ' + props.client.name"
                data-testid="client_delete"
--- a/resources/js/Components/Common/Client/ClientTable.vue
+++ b/resources/js/Components/Common/Client/ClientTable.vue
@@ -8,6 +8,7 @@ import { useClientsStore } from '@/utils/useClients';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
+import { canCreateClients } from '@/utils/permissions';

 const { clients } = storeToRefs(useClientsStore());

@@ -29,8 +30,11 @@ const createClient = ref(false);
                    <UserCircleIcon
                        class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
                    <h3 class="text-white font-semibold">No clients found</h3>
-                    <p class="pb-5">Create your first client now!</p>
+                    <p class="pb-5" v-if="canCreateClients()">
+                        Create your first client now!
+                    </p>
                    <SecondaryButton
+                        v-if="canCreateClients()"
                        @click="createClient = true"
                        :icon="PlusIcon"
                        >Create your First Client
--- a/resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue
@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
 import type { Member } from '@/utils/api';
+import { canDeleteMembers } from '@/utils/permissions';

 const emit = defineEmits<{
    delete: [];
@@ -31,6 +32,7 @@ const props = defineProps<{
        </template>
        <template #content>
            <button
+                v-if="canDeleteMembers()"
                @click="emit('delete')"
                :aria-label="'Delete Member ' + props.member.name"
                data-testid="client_delete"
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -9,6 +9,7 @@ import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { api } from '../../../../../openapi.json.client';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
+import { canInvitePlaceholderMembers } from '@/utils/permissions';

 const props = defineProps<{
    member: Member;
@@ -70,7 +71,10 @@ async function invitePlaceholder(id: string) {
        <div
            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
            <SecondaryButton
-                v-if="member.is_placeholder === true"
+                v-if="
+                    member.is_placeholder === true &&
+                    canInvitePlaceholderMembers()
+                "
                @click="invitePlaceholder(member.id)"
                size="small"
                >Invite</SecondaryButton
--- a/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
+import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
 const emit = defineEmits<{
    delete: [];
    edit: [];
@@ -34,12 +35,14 @@ const props = defineProps<{
                @click.prevent="emit('delete')"
                :aria-label="'Delete Project ' + props.project.name"
                data-testid="project_delete"
+                v-if="canDeleteProjects()"
                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                <span>Delete</span>
            </button>
            <button
                @click.prevent="emit('edit')"
+                v-if="canUpdateProjects()"
                :aria-label="'Edit Project ' + props.project.name"
                data-testid="project_edit"
                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -8,6 +8,7 @@ import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.v
 import { storeToRefs } from 'pinia';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
+import { canCreateProjects } from '@/utils/permissions';

 const { projects } = storeToRefs(useProjectsStore());

@@ -29,8 +30,11 @@ const createProject = ref(false);
                    <FolderPlusIcon
                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                    <h3 class="text-white font-semibold">No projects found</h3>
-                    <p class="pb-5">Create your first project now!</p>
+                    <p class="pb-5" v-if="canCreateProjects()">
+                        Create your first project now!
+                    </p>
                    <SecondaryButton
+                        v-if="canCreateProjects()"
                        @click="createProject = true"
                        :icon="PlusIcon"
                        >Create your First Project
--- a/resources/js/Components/Common/Tag/TagTable.vue
+++ b/resources/js/Components/Common/Tag/TagTable.vue
@@ -8,6 +8,7 @@ import { useTagsStore } from '@/utils/useTags';
 import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
+import { canCreateTags } from '@/utils/permissions';

 const { tags } = storeToRefs(useTagsStore());
 const createTag = ref(false);
@@ -28,8 +29,13 @@ const createTag = ref(false);
                    <FolderPlusIcon
                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                    <h3 class="text-white font-semibold">No tags found</h3>
-                    <p class="pb-5">Create your first tag now!</p>
-                    <SecondaryButton @click="createTag = true" :icon="PlusIcon"
+                    <p class="pb-5" v-if="canCreateTags()">
+                        Create your first tag now!
+                    </p>
+                    <SecondaryButton
+                        v-if="canCreateTags()"
+                        @click="createTag = true"
+                        :icon="PlusIcon"
                        >Create your First Tag</SecondaryButton
                    >
                </div>
--- a/resources/js/Components/Common/Tag/TagTableRow.vue
+++ b/resources/js/Components/Common/Tag/TagTableRow.vue
@@ -3,6 +3,7 @@ import type { Tag } from '@/utils/api';
 import { useTagsStore } from '@/utils/useTags';
 import TagMoreOptionsDropdown from '@/Components/Common/Tag/TagMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
+import { canDeleteTags } from '@/utils/permissions';

 const props = defineProps<{
    tag: Tag;
@@ -24,6 +25,7 @@ function deleteTag() {
        <div
            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
            <TagMoreOptionsDropdown
+                v-if="canDeleteTags()"
                :tag="tag"
                @delete="deleteTag"></TagMoreOptionsDropdown>
        </div>
--- a/resources/js/Components/Common/Task/TaskTable.vue
+++ b/resources/js/Components/Common/Task/TaskTable.vue
@@ -8,6 +8,7 @@ import { useTasksStore } from '@/utils/useTasks';
 import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
 import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
+import { canCreateTasks } from '@/utils/permissions';

 const { tasks } = storeToRefs(useTasksStore());

@@ -39,8 +40,13 @@ const createTask = ref(false);
                    <PlusCircleIcon
                        class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                    <h3 class="text-white font-semibold">No tasks found</h3>
-                    <p class="pb-5">Create your first task now!</p>
-                    <SecondaryButton @click="createTask = true" :icon="PlusIcon"
+                    <p class="pb-5" v-if="canCreateTasks()">
+                        Create your first task now!
+                    </p>
+                    <SecondaryButton
+                        v-if="canCreateTasks()"
+                        @click="createTask = true"
+                        :icon="PlusIcon"
                        >Create your First Task
                    </SecondaryButton>
                </div>
--- a/resources/js/Components/OrganizationSwitcher.vue
+++ b/resources/js/Components/OrganizationSwitcher.vue
@@ -6,6 +6,7 @@ import { router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
 import { isBillingActivated } from '@/utils/billing';
 import { initializeStores } from '@/utils/init';
+import { canUpdateOrganization } from '@/utils/permissions';

 const page = usePage<{
    jetstream: {
@@ -88,7 +89,9 @@ const switchToTeam = (team: Organization) => {
                    Organization Settings
                </DropdownLink>

-                <DropdownLink v-if="isBillingActivated()" href="/billing">
+                <DropdownLink
+                    v-if="canUpdateOrganization() && isBillingActivated()"
+                    href="/billing">
                    Billing
                </DropdownLink>

--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -21,6 +21,12 @@ import MainContainer from '@/Pages/MainContainer.vue';
 import { onMounted, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores } from '@/utils/init';
+import {
+    canViewClients,
+    canViewMembers,
+    canViewProjects,
+    canViewTags,
+} from '@/utils/permissions';

 defineProps({
    title: String,
@@ -84,6 +90,7 @@ onMounted(async () => {
                <nav>
                    <ul class="space-y-1">
                        <NavigationSidebarItem
+                            v-if="canViewProjects()"
                            title="Projects"
                            :icon="FolderIcon"
                            :href="route('projects')"
@@ -91,16 +98,19 @@ onMounted(async () => {
                                route().current('projects')
                            "></NavigationSidebarItem>
                        <NavigationSidebarItem
+                            v-if="canViewClients()"
                            title="Clients"
                            :icon="UserCircleIcon"
                            :current="route().current('clients')"
                            :href="route('clients')"></NavigationSidebarItem>
                        <NavigationSidebarItem
                            title="Members"
+                            v-if="canViewMembers()"
                            :icon="UserGroupIcon"
                            :current="route().current('members')"
                            :href="route('members')"></NavigationSidebarItem>
                        <NavigationSidebarItem
+                            v-if="canViewTags()"
                            title="Tags"
                            :icon="TagIcon"
                            :current="route().current('tags')"
--- a/resources/js/Pages/Clients.vue
+++ b/resources/js/Pages/Clients.vue
@@ -11,6 +11,7 @@ import { useClientsStore } from '@/utils/useClients';
 import ClientTable from '@/Components/Common/Client/ClientTable.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateClients } from '@/utils/permissions';

 onMounted(() => {
    useClientsStore().fetchClients();
@@ -31,7 +32,10 @@ const createClient = ref(false);
                    <TabBarItem>Archived</TabBarItem>
                </TabBar>
            </div>
-            <SecondaryButton :icon="PlusIcon" @click="createClient = true"
+            <SecondaryButton
+                v-if="canCreateClients()"
+                :icon="PlusIcon"
+                @click="createClient = true"
                >Create Client</SecondaryButton
            >
            <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
--- a/resources/js/Pages/Members.vue
+++ b/resources/js/Pages/Members.vue
@@ -12,6 +12,7 @@ import MemberInviteModal from '@/Components/Common/Member/MemberInviteModal.vue'
 import type { Role } from '@/types/jetstream';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
+import { canCreateInvitations } from '@/utils/permissions';

 const inviteMember = ref(false);

@@ -44,7 +45,10 @@ function isActiveTab(tab: string) {
                    >
                </TabBar>
            </div>
-            <SecondaryButton :icon="PlusIcon" @click="inviteMember = true"
+            <SecondaryButton
+                v-if="canCreateInvitations()"
+                :icon="PlusIcon"
+                @click="inviteMember = true"
                >Invite member</SecondaryButton
            >
            <MemberInviteModal
--- a/resources/js/Pages/ProjectShow.vue
+++ b/resources/js/Pages/ProjectShow.vue
@@ -19,6 +19,7 @@ import Card from '@/Components/Common/Card.vue';
 import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
 import ProjectMemberCreateModal from '@/Components/Common/ProjectMember/ProjectMemberCreateModal.vue';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
+import { canCreateTasks, canViewProjectMembers } from '@/utils/permissions';

 const { projects } = storeToRefs(useProjectsStore());

@@ -83,6 +84,7 @@ onMounted(() => {
                    <CardTitle title="Tasks" :icon="CheckCircleIcon">
                        <template #actions>
                            <SecondaryButton
+                                v-if="canCreateTasks()"
                                :icon="PlusIcon"
                                @click="createTask = true"
                                >Create Task
@@ -96,7 +98,7 @@ onMounted(() => {
                        <TaskTable :project-id="projectId"></TaskTable>
                    </Card>
                </div>
-                <div>
+                <div v-if="canViewProjectMembers()">
                    <CardTitle title="Project Members" :icon="UserGroupIcon">
                        <template #actions>
                            <SecondaryButton
--- a/resources/js/Pages/Projects.vue
+++ b/resources/js/Pages/Projects.vue
@@ -10,6 +10,7 @@ import { onMounted, ref } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateProjects } from '@/utils/permissions';

 onMounted(() => {
    useProjectsStore().fetchProjects();
@@ -30,7 +31,10 @@ const createProject = ref(false);
                    <TabBarItem>Archived</TabBarItem>
                </TabBar>
            </div>
-            <SecondaryButton :icon="PlusIcon" @click="createProject = true"
+            <SecondaryButton
+                v-if="canCreateProjects()"
+                :icon="PlusIcon"
+                @click="createProject = true"
                >Create Project</SecondaryButton
            >
            <ProjectCreateModal
--- a/resources/js/Pages/Tags.vue
+++ b/resources/js/Pages/Tags.vue
@@ -7,6 +7,7 @@ import { ref } from 'vue';
 import TagTable from '@/Components/Common/Tag/TagTable.vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateTags } from '@/utils/permissions';

 const createTag = ref(false);
 </script>
@@ -18,7 +19,10 @@ const createTag = ref(false);
            <div class="flex items-center space-x-6">
                <PageTitle :icon="FolderIcon" title="Tags"> </PageTitle>
            </div>
-            <SecondaryButton :icon="PlusIcon" @click="createTag = true"
+            <SecondaryButton
+                v-if="canCreateTags()"
+                :icon="PlusIcon"
+                @click="createTag = true"
                >Create Tag</SecondaryButton
            >
            <TagCreateModal v-model:show="createTag"></TagCreateModal>
--- a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
+++ b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
@@ -10,6 +10,7 @@ import type { Organization } from '@/types/models';
 import type { Permissions } from '@/types/jetstream';
 import { CreditCardIcon } from '@heroicons/vue/20/solid';
 import { isBillingActivated } from '@/utils/billing';
+import { canUpdateOrganization } from '@/utils/permissions';

 const props = defineProps<{
    team: Organization;
@@ -63,7 +64,9 @@ const updateTeamName = () => {
                    <Link href="/billing">
                        <PrimaryButton
                            type="button"
-                            v-if="isBillingActivated()">
+                            v-if="
+                                isBillingActivated() && canUpdateOrganization()
+                            ">
                            <CreditCardIcon class="w-5 h-5 me-2" />
                            Go to Billing
                        </PrimaryButton>
--- a/resources/js/Pages/Teams/Show.vue
+++ b/resources/js/Pages/Teams/Show.vue
@@ -7,6 +7,7 @@ import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
 import type { Organization } from '@/types/models';
 import type { Permissions, Role } from '@/types/jetstream';
 import ImportData from '@/Pages/Teams/Partials/ImportData.vue';
+import { canUpdateOrganization } from '@/utils/permissions';

 defineProps<{
    team: Organization;
@@ -42,7 +43,9 @@ defineProps<{

                <SectionBorder />

-                <ImportData :team="team"></ImportData>
+                <ImportData
+                    v-if="canUpdateOrganization()"
+                    :team="team"></ImportData>
            </div>
        </div>
    </AppLayout>
--- a/resources/js/utils/init.ts
+++ b/resources/js/utils/init.ts
@@ -5,13 +5,18 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { useClientsStore } from '@/utils/useClients';
 import { useMembersStore } from '@/utils/useMembers';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { canViewClients, canViewMembers } from '@/utils/permissions';

 export function initializeStores() {
    useProjectsStore().fetchProjects();
    useTasksStore().fetchTasks();
    useTagsStore().fetchTags();
    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-    useClientsStore().fetchClients();
-    useMembersStore().fetchMembers();
+    if (canViewMembers()) {
+        useMembersStore().fetchMembers();
+    }
+    if (canViewClients()) {
+        useClientsStore().fetchClients();
+    }
    useTimeEntriesStore().fetchTimeEntries();
 }
--- a/resources/js/utils/permissions.ts
+++ b/resources/js/utils/permissions.ts
@@ -0,0 +1,83 @@
+import { usePage } from '@inertiajs/vue3';
+
+const page = usePage<{
+    auth: {
+        permissions: string[];
+    };
+}>();
+
+function currentUserHasPermission(permission: string) {
+    console.log(page.props.auth.permissions);
+    if (Array.isArray(page.props.auth.permissions)) {
+        return page.props.auth.permissions.includes(permission);
+    }
+    return false;
+}
+
+export function canUpdateOrganization() {
+    return currentUserHasPermission('organizations:update');
+}
+
+export function canViewProjects() {
+    return currentUserHasPermission('projects:view');
+}
+
+export function canCreateProjects() {
+    return currentUserHasPermission('projects:create');
+}
+
+export function canUpdateProjects() {
+    return currentUserHasPermission('projects:update');
+}
+
+export function canDeleteProjects() {
+    return currentUserHasPermission('projects:delete');
+}
+
+export function canViewProjectMembers() {
+    return currentUserHasPermission('project-members:view');
+}
+
+export function canCreateTasks() {
+    return currentUserHasPermission('tasks:create');
+}
+
+export function canCreateClients() {
+    return currentUserHasPermission('clients:create');
+}
+
+export function canDeleteClients() {
+    return currentUserHasPermission('clients:delete');
+}
+
+export function canViewClients() {
+    return currentUserHasPermission('clients:view');
+}
+
+export function canViewMembers() {
+    return currentUserHasPermission('members:view');
+}
+
+export function canDeleteMembers() {
+    return currentUserHasPermission('members:delete');
+}
+
+export function canInvitePlaceholderMembers() {
+    return currentUserHasPermission('members:invite-placeholder');
+}
+
+export function canCreateInvitations() {
+    return currentUserHasPermission('invitations:create');
+}
+
+export function canViewTags() {
+    return currentUserHasPermission('tags:view');
+}
+
+export function canCreateTags() {
+    return currentUserHasPermission('tags:create');
+}
+
+export function canDeleteTags() {
+    return currentUserHasPermission('tags:delete');
+}