Skip to content

Commit

Permalink
feat(#303): Update user management and fix admin port ui bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@tholulomo
tholulomo committed Jun 19, 2023
1 parent 11a2726 commit 3f6a04e
Show file tree
Hide file tree
Showing 7 changed files with 188 additions and 63 deletions.
14 changes: 8 additions & 6 deletions app/src/components/portal/ProfileHeader.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<div class="u_margin-top-small">
<div class="u_display-flex u--layout-flex-justify-fs" style="align-items: center;">
<md-avatar class="md-avatar-icon md-large md-primary u_margin-none u--bg utility-gridborder">
<md-ripple class="md-title">
<router-link class="viz-tab__button" :to="{ name: 'PortalHome' }">{{ getInitials }}</router-link>
</md-ripple>
</md-avatar>
<router-link class="viz-sample__loading" :to="{ name: 'PortalHome' }">
<md-avatar class="md-avatar-icon md-large md-primary u_margin-none u--bg utility-gridborder">
<md-ripple class="md-title">
{{ getInitials }}
</md-ripple>
</md-avatar>
</router-link>
<div class="u--margin-pos">
<p class="u--color-primary md-body-1">{{ displayName ?? 'Welcome' }}</p>
<p class="u--color-primary md-body-1">{{ displayName }}</p>
<p class="u--color-grey md-caption">Your Admin Center</p>
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions app/src/modules/gql/user-gql.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,17 @@ mutation DeleteUser($input: deleteUsersInput) {
deleteUser(input: $input)
}
`

export const UPDATE_USER_QUERY = gql`
mutation UpdateUser($input: updateUserInput) {
updateUser(input: $input) {
_id
alias
givenName
surName
displayName
email
apiAccess
}
}
`
6 changes: 3 additions & 3 deletions app/src/pages/portal/Base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<md-app>
<md-app-toolbar id="header" @toggler="toggleMenuVisibility"/>

<md-app-content class="utility-roverflow viz-u-postion__rel">
<md-app-content class="viz-u-postion__rel">
<div class="md-layout u_width--max md-gutter md-alignment-top-center">
<div class="md-layout-item md-size-60 md-small-size-90 md-xsmall-size-95 ">
<profile-header></profile-header>

<div class="u_margin-top-small u_display-flex md-layout-row md-theme-demo-light md-scrollbar">
<!-- permanent drawer -->
<md-app-drawer class="md-right" :md-active.sync="sideBar" md-permanent="clipped">
<md-app-drawer :md-active.sync="sideBar" md-permanent="clipped">
<md-side-nav></md-side-nav>
</md-app-drawer>
<div class="u_width--max md-content u--margin-pos utility-roverflow">
Expand All @@ -33,7 +33,7 @@
<script>
import PageHeader from '@/components/portal/Header.vue'
import SideNav from '@/components/portal/SideNav.vue'
import ProfileHeader from '../../components/portal/ProfileHeader.vue'
import ProfileHeader from '@/components/portal/ProfileHeader.vue'
import Drawer from '@/components/Drawer.vue'
import { mapGetters } from 'vuex'
export default {
Expand Down
10 changes: 6 additions & 4 deletions app/src/pages/portal/Deploy.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@
<div class=" viz-u-mgup-sm utility-margin md-theme-default">
<div class="md-card-header contactus_radios md-card-header-flex">
<div class="md-card-header-text">
<div class="md-body-1">This task requires super admin priviledges, deploying unapproved changes will require
a rollback</div>
<div class="md-body-1">
This task requires super admin priviledges, deploying unapproved changes will require a rollback
</div>
</div>
</div>
<div class="md-card-actions md-alignment-right">
<button @click.prevent="toggleDialogBox" class="md-button btn btn--tertiary btn--noradius">Pull and Deploy
Latest Changes</button>
<button @click.prevent="toggleDialogBox" class="md-button btn btn--tertiary btn--noradius">
Pull and Deploy Latest Changes
</button>
</div>
<md-divider class="u_margin-top-small"></md-divider>
</div>
Expand Down
7 changes: 4 additions & 3 deletions app/src/pages/portal/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,15 @@

<div class="">
<h4 class="u--color-grey-sec md-button-content">token</h4>
<div style="word-wrap: break-word;" class="wrapper--medium md-card-header chart_editor__right-view md-card-header-flex dialog-box_content">
<div style="word-wrap: break-word;" class=" md-card-header chart_editor__right-view">
{{ token }}
</div>
<div class="md-card-actions md-alignment-right chart_editor__right-view ">
<button @click.prevent="copyContent" class="md-button btn btn--primary btn--noradius">Copy token</button>
<button @click.prevent="copyContent" class="md-button btn btn--primary btn--noradius ">
<span class="md-caption u--bg">Copy token</span>
</button>
</div>
</div>

</div>
</div>
</div>
Expand Down
197 changes: 152 additions & 45 deletions app/src/pages/portal/ManageUsers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,65 +15,117 @@
</template>
</dialogBox>
<div class="">
<div class="">
<div class="">
<div>
<div class="" v-if="loading">
<Spinner :loading="loading" :text="'Loading'" />
<div class="" v-if="loading">
<Spinner :loading="loading" :text="loadingText" />
</div>

<div v-if="updateMode" class="article_citations ">
<h2 class="md-title u--color-black">Update User</h2>
<form v-on:submit.prevent="updateUser" class="md-card-header">
<div class="md-layout md-gutter viz-u-mgbottom-big">
<div class="md-layout-item md-size-50 md-xsmall-size-100 md-gutter u_margin-top-small">
<md-field>
<label for="first-name">Firstname</label>
<md-input v-model="selectedUser.givenName" name="first-name" required />
</md-field>
</div>
<md-table v-if="!!Object.keys(users).length && !loading" v-model="tableData" md-sort="name"
md-sort-order="asc" @md-selected="onSelect">
<md-table-toolbar>
<div class="md-toolbar-section-start">
<h1 class="md-title">Manage Users</h1>
</div>

<md-field md-clearable class="md-toolbar-section-end">
<md-input placeholder="Search by display name..." v-model="search" @input="searchOnTable" />
</md-field>
<div class="md-layout-item md-size-50 md-xsmall-size-100 md-gutter u_margin-top-small">
<md-field>
<label for="last-name">Lastname</label>
<md-input v-model="selectedUser.surName" name="last-name" required />
</md-field>
</div>
</div>

<div class="contactus_radios-text">Roles:</div>
<ul class="contactus_radios">
<li>
<div class="form__radio-group">
<input type="radio" class="form__radio-input" v-model="roles" id="admin" value="isAdmin" required />
<label for="admin" class="form__radio-label">
<span class="form__radio-button"></span>
Admin
</label>
</div>
</li>
<li>
<div class="form__radio-group">
<input
type="radio" class="form__radio-input" v-model="roles" id="member" value="member" />
<label for="member" class="form__radio-label">
<span class="form__radio-button"></span>
Member
</label>
</div>
</li>
</ul>

<div style="order:100;align-items: center;" v-if="!!this.selected?.length"
class="viz-sample__header u_width--max u--layout-flex u--layout-flex-justify-sb">
<div class="u--color-alt md-body-1">{{ getAlternateLabel(this.selected.length) }}</div>
<div class="u--layout-flex">
<md-button v-if="this.selected.length === 1" class="md-icon-button">
<md-icon>edit</md-icon>
<md-tooltip md-direction="top">Update User</md-tooltip>
</md-button>
<md-button @click.prevent="openDialogBox" class="md-icon-button">
<md-icon>delete</md-icon>
<md-tooltip md-direction="top">Delete User</md-tooltip>
</md-button>
</div>
</div>
</md-table-toolbar>
<md-table-empty-state md-label="No users found"
:md-description="`No user found for this '${search}' query. Try a different search term or create a new user.`">
</md-table-empty-state>
<md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="multiple">
<md-table-cell md-label="Firstname" md-sort-by="givenName">{{ item.givenName }}</md-table-cell>
<md-table-cell md-label="Lastname" md-sort-by="surName">{{ item.surName }}</md-table-cell>
<md-table-cell md-label="Display name" md-sort-by="displayName">{{ item.displayName }}</md-table-cell>
<md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
</md-table-row>
</md-table>
<pagination :cpage="pageNumber || 1" :tpages="users.totalPages || 1"
@go-to-page="loadPrevNextUsers($event)" />
<div class="md-card-actions md-alignment-right">
<button class="md-button btn btn--tertiary btn--noradius" @click="closeUpdateForm">
CANCEL
</button>
<button class="md-button btn btn--primary btn--noradius ">
<span class="md-caption u--bg">Submit</span>
</button>
</div>
</div>
</form>
</div>

<div v-else>
<md-table v-if="!!Object.keys(users).length && !loading" v-model="tableData" md-sort="name"
md-sort-order="asc" @md-selected="onSelect">
<md-table-toolbar>
<div class="md-toolbar-section-start">
<h1 class="md-title">Manage Users</h1>
</div>

<md-field md-clearable class="md-toolbar-section-end">
<md-input placeholder="Search by display name..." v-model="search" @input="searchOnTable" />
</md-field>

<div style="order:100;align-items: center;" v-if="!!optionalChaining(() => selected.length)"
class="viz-sample__header u_width--max u--layout-flex u--layout-flex-justify-sb">
<div class="u--color-alt md-body-1">{{ getAlternateLabel(selected.length) }}</div>
<div class="u--layout-flex">
<md-button @click="showUpdateForm" v-if="selected.length === 1" class="md-icon-button">
<md-icon>edit</md-icon>
<md-tooltip md-direction="top">Update User</md-tooltip>
</md-button>
<md-button @click.prevent="openDialogBox" class="md-icon-button">
<md-icon>delete</md-icon>
<md-tooltip md-direction="top">Delete User</md-tooltip>
</md-button>
</div>
</div>
</md-table-toolbar>
<md-table-empty-state md-label="No users found"
:md-description="`No user found for this '${search}' query. Try a different search term or create a new user.`">
</md-table-empty-state>
<md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)" md-selectable="multiple">
<md-table-cell md-label="Firstname" md-sort-by="givenName">{{ item.givenName }}</md-table-cell>
<md-table-cell md-label="Lastname" md-sort-by="surName">{{ item.surName }}</md-table-cell>
<md-table-cell md-label="Display name" md-sort-by="displayName">{{ item.displayName }}</md-table-cell>
<md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
</md-table-row>
</md-table>
<pagination :cpage="pageNumber || 1" :tpages="users.totalPages || 1"
@go-to-page="loadPrevNextUsers($event)" />
</div>
</div>
</div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import { USERS_QUERY, DELETE_USERS_QUERY } from '@/modules/gql/user-gql'
import { USERS_QUERY, DELETE_USERS_QUERY, UPDATE_USER_QUERY } from '@/modules/gql/user-gql'
import optionalChainingUtil from '@/mixins/optional-chaining-util.js'
import pagination from '@/components/explorer/Pagination'
import dialogBox from '@/components/Dialog.vue'
import Spinner from '@/components/Spinner'
export default {
name: 'ManageUser',
mixins: [optionalChainingUtil],
components: {
pagination,
dialogBox,
Expand All @@ -82,16 +134,21 @@ export default {
data () {
return {
loading: false,
loadingText: 'Loading',
pageNumber: 1,
selected: null,
selected: [],
roles: null,
selectedUser: {},
updateMode: false,
search: null,
searched: [],
users: {}
}
},
computed: {
...mapGetters({
dialogBoxActive: 'dialogBox'
dialogBoxActive: 'dialogBox',
userId: 'auth/userId'
}),
tableData: {
get () {
Expand All @@ -112,6 +169,15 @@ export default {
closeDialogBox () {
this.toggleDialogBox()
},
showUpdateForm () {
this.updateMode = true
this.selectedUser = { ...this.selected[0] }
},
closeUpdateForm () {
this.updateMode = false
this.selectedUser = {}
this.selected = []
},
getClass ({ _id }) {
return _id === this.selected?._id ? 'u--bg' : ''
},
Expand All @@ -134,11 +200,18 @@ export default {
this.pageNumber = event
await this.$apollo.queries.users.refetch()
},
async deleteUsers () {
const id = []
for (let i = 0; i < this.selected.length; i++) {
id.push(this.selected[i]._id)
}
if (id.includes(this.userId)) {
return this.$store.commit('setSnackbar', {
message: "Can't Delete Current User",
duration: 3000
})
}
this.loading = true
try {
await this.$apollo.mutate({
Expand All @@ -162,6 +235,40 @@ export default {
} finally {
this.loading = false
}
},
async updateUser () {
this.loading = true
this.loadingText = 'Updating User'
const data = this.selectedUser
try {
await this.$apollo.mutate({
mutation: UPDATE_USER_QUERY,
variables: {
input: {
_id: data._id,
givenName: data.givenName,
surName: data.surName,
roles: this.roles
}
}
})
this.$store.commit('setSnackbar', {
message: 'User Updated successfully',
duration: 3000
})
await this.$apollo.queries.users.refetch()
this.closeUpdateForm()
} catch (error) {
this.$store.commit('setSnackbar', {
message: 'Something went wrong',
action: () => this.updateUser()
})
} finally {
this.loading = false
this.loadingText = 'Loading'
}
}
},
created () {
Expand Down
3 changes: 1 addition & 2 deletions app/src/pages/portal/chart/DeleteChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
<div class=" viz-u-mgup-sm utility-margin md-theme-default">
<div class="md-card-header contactus_radios md-card-header-flex">
<div class="md-card-header-text">
<div class="md-body-1">This task requires super admin priviledges, deploying unapproved changes will require a
rollback</div>
<div class="md-body-1">This task requires super admin priviledges, deploying unapproved changes will require a rollback</div>
</div>
</div>

Expand Down

0 comments on commit 3f6a04e

Please sign in to comment.