Initial commit
This commit is contained in:
330
resources/js/views/apps/roles/RoleCards.vue
Normal file
330
resources/js/views/apps/roles/RoleCards.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar10 from '@images/avatars/avatar-10.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import avatar6 from '@images/avatars/avatar-6.png'
|
||||
import avatar7 from '@images/avatars/avatar-7.png'
|
||||
import avatar8 from '@images/avatars/avatar-8.png'
|
||||
import avatar9 from '@images/avatars/avatar-9.png'
|
||||
import girlUsingMobile from '@images/pages/girl-using-mobile.png'
|
||||
|
||||
const roles = ref([
|
||||
{
|
||||
role: 'Administrator',
|
||||
users: [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
],
|
||||
details: {
|
||||
name: 'Administrator',
|
||||
permissions: [
|
||||
{
|
||||
name: 'User Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
name: 'Disputes Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
name: 'API Control',
|
||||
read: true,
|
||||
write: true,
|
||||
create: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
role: 'Manager',
|
||||
users: [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
avatar5,
|
||||
avatar6,
|
||||
avatar7,
|
||||
],
|
||||
details: {
|
||||
name: 'Manager',
|
||||
permissions: [
|
||||
{
|
||||
name: 'Reporting',
|
||||
read: true,
|
||||
write: true,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Payroll',
|
||||
read: true,
|
||||
write: true,
|
||||
create: true,
|
||||
},
|
||||
{
|
||||
name: 'User Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
role: 'Users',
|
||||
users: [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
avatar5,
|
||||
],
|
||||
details: {
|
||||
name: 'Users',
|
||||
permissions: [
|
||||
{
|
||||
name: 'User Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Content Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Disputes Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Database Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
role: 'Support',
|
||||
users: [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
avatar5,
|
||||
avatar6,
|
||||
],
|
||||
details: {
|
||||
name: 'Support',
|
||||
permissions: [
|
||||
{
|
||||
name: 'Repository Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Content Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Database Management',
|
||||
read: true,
|
||||
write: true,
|
||||
create: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
role: 'Restricted User',
|
||||
users: [
|
||||
avatar1,
|
||||
avatar2,
|
||||
avatar3,
|
||||
avatar4,
|
||||
avatar5,
|
||||
avatar6,
|
||||
avatar7,
|
||||
avatar8,
|
||||
avatar9,
|
||||
avatar10,
|
||||
],
|
||||
details: {
|
||||
name: 'Restricted User',
|
||||
permissions: [
|
||||
{
|
||||
name: 'User Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Content Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Disputes Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
{
|
||||
name: 'Database Management',
|
||||
read: true,
|
||||
write: false,
|
||||
create: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const isRoleDialogVisible = ref(false)
|
||||
const roleDetail = ref()
|
||||
const isAddRoleDialogVisible = ref(false)
|
||||
|
||||
const editPermission = value => {
|
||||
isRoleDialogVisible.value = true
|
||||
roleDetail.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Roles -->
|
||||
<VCol
|
||||
v-for="item in roles"
|
||||
:key="item.role"
|
||||
cols="12"
|
||||
sm="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center pb-4">
|
||||
<div class="text-body-1">
|
||||
Total {{ item.users.length }} users
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<template
|
||||
v-for="(user, index) in item.users"
|
||||
:key="user"
|
||||
>
|
||||
<VAvatar
|
||||
v-if="item.users.length > 4 && item.users.length !== 4 && index < 3"
|
||||
size="40"
|
||||
:image="user"
|
||||
/>
|
||||
|
||||
<VAvatar
|
||||
v-if="item.users.length === 4"
|
||||
size="40"
|
||||
:image="user"
|
||||
/>
|
||||
</template>
|
||||
<VAvatar
|
||||
v-if="item.users.length > 4"
|
||||
:color="$vuetify.theme.current.dark ? '#373B50' : '#EEEDF0'"
|
||||
>
|
||||
<span>
|
||||
+{{ item.users.length - 3 }}
|
||||
</span>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
{{ item.role }}
|
||||
</h5>
|
||||
<div class="d-flex align-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click="editPermission(item.details)"
|
||||
>
|
||||
Edit Role
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
icon="tabler-copy"
|
||||
class="text-high-emphasis"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add New Role -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
lg="4"
|
||||
>
|
||||
<VCard
|
||||
class="h-100"
|
||||
:ripple="false"
|
||||
>
|
||||
<VRow
|
||||
no-gutters
|
||||
class="h-100"
|
||||
>
|
||||
<VCol
|
||||
cols="5"
|
||||
class="d-flex flex-column justify-end align-center mt-5"
|
||||
>
|
||||
<img
|
||||
width="85"
|
||||
:src="girlUsingMobile"
|
||||
>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="7">
|
||||
<VCardText class="d-flex flex-column align-end justify-end gap-4">
|
||||
<VBtn
|
||||
size="small"
|
||||
@click="isAddRoleDialogVisible = true"
|
||||
>
|
||||
Add New Role
|
||||
</VBtn>
|
||||
<div class="text-end">
|
||||
Add new role,<br> if it doesn't exist.
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
<AddEditRoleDialog v-model:is-dialog-visible="isAddRoleDialogVisible" />
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<AddEditRoleDialog
|
||||
v-model:is-dialog-visible="isRoleDialogVisible"
|
||||
v-model:role-permissions="roleDetail"
|
||||
/>
|
||||
</template>
|
||||
364
resources/js/views/apps/roles/UserList.vue
Normal file
364
resources/js/views/apps/roles/UserList.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<script setup>
|
||||
import AddNewUserDrawer from '@/views/apps/user/list/AddNewUserDrawer.vue'
|
||||
|
||||
// 👉 Store
|
||||
const searchQuery = ref('')
|
||||
const selectedRole = ref()
|
||||
const selectedPlan = ref()
|
||||
const selectedStatus = ref()
|
||||
|
||||
// Data table options
|
||||
const itemsPerPage = ref(10)
|
||||
const page = ref(1)
|
||||
const sortBy = ref()
|
||||
const orderBy = ref()
|
||||
const selectedRows = ref([])
|
||||
|
||||
const updateOptions = options => {
|
||||
sortBy.value = options.sortBy[0]?.key
|
||||
orderBy.value = options.sortBy[0]?.order
|
||||
}
|
||||
|
||||
// Headers
|
||||
const headers = [
|
||||
{
|
||||
title: 'User',
|
||||
key: 'user',
|
||||
},
|
||||
{
|
||||
title: 'Role',
|
||||
key: 'role',
|
||||
},
|
||||
{
|
||||
title: 'Plan',
|
||||
key: 'plan',
|
||||
},
|
||||
{
|
||||
title: 'Billing',
|
||||
key: 'billing',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
},
|
||||
{
|
||||
title: 'Actions',
|
||||
key: 'actions',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
|
||||
const {
|
||||
data: usersData,
|
||||
execute: fetchUsers,
|
||||
} = await useApi(createUrl('/apps/users', {
|
||||
query: {
|
||||
q: searchQuery,
|
||||
status: selectedStatus,
|
||||
plan: selectedPlan,
|
||||
role: selectedRole,
|
||||
itemsPerPage,
|
||||
page,
|
||||
sortBy,
|
||||
orderBy,
|
||||
},
|
||||
}))
|
||||
|
||||
const users = computed(() => usersData.value.users)
|
||||
const totalUsers = computed(() => usersData.value.totalUsers)
|
||||
|
||||
// 👉 search filters
|
||||
const roles = [
|
||||
{
|
||||
title: 'Admin',
|
||||
value: 'admin',
|
||||
},
|
||||
{
|
||||
title: 'Author',
|
||||
value: 'author',
|
||||
},
|
||||
{
|
||||
title: 'Editor',
|
||||
value: 'editor',
|
||||
},
|
||||
{
|
||||
title: 'Maintainer',
|
||||
value: 'maintainer',
|
||||
},
|
||||
{
|
||||
title: 'Subscriber',
|
||||
value: 'subscriber',
|
||||
},
|
||||
]
|
||||
|
||||
const resolveUserRoleVariant = role => {
|
||||
const roleLowerCase = role.toLowerCase()
|
||||
if (roleLowerCase === 'subscriber')
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'tabler-user',
|
||||
}
|
||||
if (roleLowerCase === 'author')
|
||||
return {
|
||||
color: 'warning',
|
||||
icon: 'tabler-settings',
|
||||
}
|
||||
if (roleLowerCase === 'maintainer')
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'tabler-chart-donut',
|
||||
}
|
||||
if (roleLowerCase === 'editor')
|
||||
return {
|
||||
color: 'info',
|
||||
icon: 'tabler-pencil',
|
||||
}
|
||||
if (roleLowerCase === 'admin')
|
||||
return {
|
||||
color: 'error',
|
||||
icon: 'tabler-device-laptop',
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'tabler-user',
|
||||
}
|
||||
}
|
||||
|
||||
const resolveUserStatusVariant = stat => {
|
||||
const statLowerCase = stat.toLowerCase()
|
||||
if (statLowerCase === 'pending')
|
||||
return 'warning'
|
||||
if (statLowerCase === 'active')
|
||||
return 'success'
|
||||
if (statLowerCase === 'inactive')
|
||||
return 'secondary'
|
||||
|
||||
return 'primary'
|
||||
}
|
||||
|
||||
const isAddNewUserDrawerVisible = ref(false)
|
||||
|
||||
const addNewUser = async userData => {
|
||||
await $api('/apps/users', {
|
||||
method: 'POST',
|
||||
body: userData,
|
||||
})
|
||||
|
||||
// refetch User
|
||||
fetchUsers()
|
||||
}
|
||||
|
||||
const deleteUser = async id => {
|
||||
await $api(`/apps/users/${ id }`, { method: 'DELETE' })
|
||||
|
||||
// Delete from selectedRows
|
||||
const index = selectedRows.value.findIndex(row => row === id)
|
||||
if (index !== -1)
|
||||
selectedRows.value.splice(index, 1)
|
||||
|
||||
// refetch User
|
||||
fetchUsers()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<VCard>
|
||||
<VCardText class="d-flex flex-wrap gap-4">
|
||||
<div class="d-flex gap-2 align-center">
|
||||
<p class="text-body-1 mb-0">
|
||||
Show
|
||||
</p>
|
||||
<AppSelect
|
||||
:model-value="itemsPerPage"
|
||||
:items="[
|
||||
{ value: 10, title: '10' },
|
||||
{ value: 25, title: '25' },
|
||||
{ value: 50, title: '50' },
|
||||
{ value: 100, title: '100' },
|
||||
{ value: -1, title: 'All' },
|
||||
]"
|
||||
style="inline-size: 5.5rem;"
|
||||
@update:model-value="itemsPerPage = parseInt($event, 10)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-4">
|
||||
<!-- 👉 Search -->
|
||||
<AppTextField
|
||||
v-model="searchQuery"
|
||||
placeholder="Search User"
|
||||
style="inline-size: 15.625rem;"
|
||||
/>
|
||||
|
||||
<!-- 👉 Add user button -->
|
||||
<AppSelect
|
||||
v-model="selectedRole"
|
||||
placeholder="Select Role"
|
||||
:items="roles"
|
||||
clearable
|
||||
clear-icon="tabler-x"
|
||||
style="inline-size: 10rem;"
|
||||
/>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- SECTION datatable -->
|
||||
<VDataTableServer
|
||||
v-model:items-per-page="itemsPerPage"
|
||||
v-model:model-value="selectedRows"
|
||||
v-model:page="page"
|
||||
:items-per-page-options="[
|
||||
{ value: 10, title: '10' },
|
||||
{ value: 20, title: '20' },
|
||||
{ value: 50, title: '50' },
|
||||
{ value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' },
|
||||
]"
|
||||
:items="users"
|
||||
:items-length="totalUsers"
|
||||
:headers="headers"
|
||||
class="text-no-wrap"
|
||||
show-select
|
||||
@update:options="updateOptions"
|
||||
>
|
||||
<!-- User -->
|
||||
<template #item.user="{ item }">
|
||||
<div class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:variant="!item.avatar ? 'tonal' : undefined"
|
||||
:color="!item.avatar ? resolveUserRoleVariant(item.role).color : undefined"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
<span v-else>{{ avatarText(item.fullName) }}</span>
|
||||
</VAvatar>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-base">
|
||||
<RouterLink
|
||||
:to="{ name: 'apps-user-view-id', params: { id: item.id } }"
|
||||
class="font-weight-medium text-link"
|
||||
>
|
||||
{{ item.fullName }}
|
||||
</RouterLink>
|
||||
</h6>
|
||||
<div class="text-sm">
|
||||
{{ item.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 👉 Role -->
|
||||
<template #item.role="{ item }">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon
|
||||
:size="22"
|
||||
:icon="resolveUserRoleVariant(item.role).icon"
|
||||
:color="resolveUserRoleVariant(item.role).color"
|
||||
/>
|
||||
|
||||
<div class="text-capitalize text-high-emphasis text-body-1">
|
||||
{{ item.role }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Plan -->
|
||||
<template #item.plan="{ item }">
|
||||
<div class="text-body-1 text-high-emphasis text-capitalize">
|
||||
{{ item.currentPlan }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Status -->
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
:color="resolveUserStatusVariant(item.status)"
|
||||
size="small"
|
||||
label
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<IconBtn @click="deleteUser(item.id)">
|
||||
<VIcon icon="tabler-trash" />
|
||||
</IconBtn>
|
||||
|
||||
<IconBtn>
|
||||
<VIcon icon="tabler-eye" />
|
||||
</IconBtn>
|
||||
|
||||
<VBtn
|
||||
icon
|
||||
variant="text"
|
||||
color="medium-emphasis"
|
||||
>
|
||||
<VIcon icon="tabler-dots-vertical" />
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem :to="{ name: 'apps-user-view-id', params: { id: item.id } }">
|
||||
<template #prepend>
|
||||
<VIcon icon="tabler-eye" />
|
||||
</template>
|
||||
|
||||
<VListItemTitle>View</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem link>
|
||||
<template #prepend>
|
||||
<VIcon icon="tabler-pencil" />
|
||||
</template>
|
||||
<VListItemTitle>Edit</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem @click="deleteUser(item.id)">
|
||||
<template #prepend>
|
||||
<VIcon icon="tabler-trash" />
|
||||
</template>
|
||||
<VListItemTitle>Delete</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<template #bottom>
|
||||
<TablePagination
|
||||
v-model:page="page"
|
||||
:items-per-page="itemsPerPage"
|
||||
:total-items="totalUsers"
|
||||
/>
|
||||
</template>
|
||||
</VDataTableServer>
|
||||
<!-- SECTION -->
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Add New User -->
|
||||
<AddNewUserDrawer
|
||||
v-model:is-drawer-open="isAddNewUserDrawerVisible"
|
||||
@user-data="addNewUser"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.user-list-name:not(:hover) {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user