Skip to content

Commit 4a21d95

Browse files
sh16011993sh16011993
authored
#1757 - Create common container for content in tab (Institution) - Part 2 (#1826)
* Updated the Institution tabs in the Ministry portal to use the common TabContainer and the BodyHeaderContainer * Code updated with review comments
1 parent 7e084e3 commit 4a21d95

File tree

9 files changed

+537
-514
lines changed

9 files changed

+537
-514
lines changed

Diff for: ‎sources/packages/web/src/components/common/InstitutionUserSummary.vue

+168-164
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,180 @@
11
<!-- This component is shared between ministry and student users -->
22
<template>
3-
<body-header title="All users" :recordsCount="usersListAndCount.count">
4-
<template #subtitle>
5-
<ul>
6-
<li>
7-
Admin roles can access <strong>all features</strong
8-
><tooltip-icon
9-
>Admin's can setup and manage your users, institution profile,
10-
locations, designation, and offering uploads including performing
11-
user role duties.</tooltip-icon
12-
>
13-
</li>
14-
<li>
15-
User roles can access <strong>some features</strong
16-
><tooltip-icon
17-
>Users can only manage programs and offerings within their
18-
locations, program information requests, confirming enrolment, and
19-
reporting on scholastic standings.</tooltip-icon
20-
>
21-
</li>
22-
<li>
23-
Legal Signing Authority role is an admin with
24-
<strong>an additional feature</strong
25-
><tooltip-icon
26-
>This role is only to request a designation for your institution.
27-
The user must be an admin first to get assigned this
28-
role.</tooltip-icon
29-
>
30-
</li>
31-
</ul>
32-
</template>
3+
<body-header-container>
4+
<template #header>
5+
<body-header title="All users" :recordsCount="usersListAndCount.count">
6+
<template #subtitle>
7+
<ul>
8+
<li>
9+
Admin roles can access <strong>all features</strong
10+
><tooltip-icon
11+
>Admin's can setup and manage your users, institution profile,
12+
locations, designation, and offering uploads including
13+
performing user role duties.</tooltip-icon
14+
>
15+
</li>
16+
<li>
17+
User roles can access <strong>some features</strong
18+
><tooltip-icon
19+
>Users can only manage programs and offerings within their
20+
locations, program information requests, confirming enrolment,
21+
and reporting on scholastic standings.</tooltip-icon
22+
>
23+
</li>
24+
<li>
25+
Legal Signing Authority role is an admin with
26+
<strong>an additional feature</strong
27+
><tooltip-icon
28+
>This role is only to request a designation for your
29+
institution. The user must be an admin first to get assigned
30+
this role.</tooltip-icon
31+
>
32+
</li>
33+
</ul>
34+
</template>
3335

34-
<template #actions>
35-
<v-row class="m-0 p-0">
36-
<v-text-field
37-
density="compact"
38-
label="Search name"
39-
variant="outlined"
40-
v-model="searchBox"
41-
data-cy="searchBox"
42-
@keyup.enter="searchUserTable"
43-
prepend-inner-icon="mdi-magnify"
44-
hide-details="auto"
45-
>
46-
</v-text-field>
47-
<check-permission-role :role="Role.InstitutionAddNewUser">
48-
<template #="{ notAllowed }">
49-
<v-btn
50-
v-if="hasBusinessGuid || allowBasicBCeIDCreation"
51-
class="ml-2"
52-
color="primary"
53-
:disabled="notAllowed"
54-
data-cy="addNewUser"
55-
@click="openNewUserModal"
56-
prepend-icon="fa:fa fa-plus-circle"
36+
<template #actions>
37+
<v-row class="m-0 p-0">
38+
<v-text-field
39+
density="compact"
40+
label="Search name"
41+
variant="outlined"
42+
v-model="searchBox"
43+
data-cy="searchBox"
44+
@keyup.enter="searchUserTable"
45+
prepend-inner-icon="mdi-magnify"
46+
hide-details="auto"
5747
>
58-
Add new user
59-
</v-btn>
60-
</template>
61-
</check-permission-role>
62-
</v-row>
48+
</v-text-field>
49+
<check-permission-role :role="Role.InstitutionAddNewUser">
50+
<template #="{ notAllowed }">
51+
<v-btn
52+
v-if="hasBusinessGuid || allowBasicBCeIDCreation"
53+
class="ml-2"
54+
color="primary"
55+
:disabled="notAllowed"
56+
data-cy="addNewUser"
57+
@click="openNewUserModal"
58+
prepend-icon="fa:fa fa-plus-circle"
59+
>
60+
Add new user
61+
</v-btn>
62+
</template>
63+
</check-permission-role>
64+
</v-row>
65+
</template>
66+
</body-header>
6367
</template>
64-
</body-header>
65-
<content-group>
66-
<DataTable
67-
:value="usersListAndCount.results"
68-
:lazy="true"
69-
:paginator="true"
70-
:rows="DEFAULT_PAGE_LIMIT"
71-
:rowsPerPageOptions="PAGINATION_LIST"
72-
:totalRecords="usersListAndCount.count"
73-
@page="paginationAndSortEvent($event)"
74-
@sort="paginationAndSortEvent($event)"
75-
:loading="loading"
76-
breakpoint="1250px"
77-
data-cy="usersList"
78-
>
79-
<template #empty>
80-
<p class="text-center font-weight-bold">No records found.</p>
81-
</template>
82-
<Column
83-
:field="UserFields.DisplayName"
84-
header="Name"
85-
:sortable="true"
86-
></Column>
87-
<Column
88-
:field="UserFields.Email"
89-
header="Email"
90-
:sortable="true"
91-
data-cy="userEmail"
92-
></Column>
93-
<Column :field="UserFields.UserType" header="User Type">
94-
<template #body="slotProps">
95-
<span data-cy="userType" class="text-capitalize">{{
96-
slotProps.data.userType
97-
}}</span>
98-
</template></Column
68+
<content-group>
69+
<DataTable
70+
:value="usersListAndCount.results"
71+
:lazy="true"
72+
:paginator="true"
73+
:rows="DEFAULT_PAGE_LIMIT"
74+
:rowsPerPageOptions="PAGINATION_LIST"
75+
:totalRecords="usersListAndCount.count"
76+
@page="paginationAndSortEvent($event)"
77+
@sort="paginationAndSortEvent($event)"
78+
:loading="loading"
79+
breakpoint="1250px"
80+
data-cy="usersList"
9981
>
100-
<Column :field="UserFields.Roles" header="Role">
101-
<template #body="slotProps">
102-
<span class="text-capitalize"
103-
>{{ institutionUserRoleToDisplay(slotProps.data.roles[0]) }}
104-
</span>
82+
<template #empty>
83+
<p class="text-center font-weight-bold">No records found.</p>
10584
</template>
106-
</Column>
107-
<Column :field="UserFields.Locations" header="Locations"
108-
><template #body="slotProps">
109-
<ul v-for="location in slotProps.data.locations" :key="location">
110-
<li>{{ location }}</li>
111-
</ul></template
112-
></Column
113-
>
114-
<Column :field="UserFields.IsActive" header="Status"
115-
><template #body="slotProps">
116-
<status-chip-active-user
117-
:is-active="slotProps.data.isActive"
118-
data-cy="userStatus"
119-
/> </template
120-
></Column>
121-
<Column header="Action"
122-
><template #body="slotProps">
123-
<check-permission-role :role="Role.InstitutionEditUser">
124-
<template #="{ notAllowed }">
125-
<v-btn
126-
:disabled="!slotProps.data.isActive || notAllowed"
127-
@click="openEditUserModal(slotProps.data)"
128-
variant="text"
129-
color="primary"
130-
append-icon="mdi-pencil-outline"
131-
data-cy="editUser"
132-
>
133-
<span class="text-decoration-underline"
134-
><strong>Edit</strong></span
85+
<Column
86+
:field="UserFields.DisplayName"
87+
header="Name"
88+
:sortable="true"
89+
></Column>
90+
<Column
91+
:field="UserFields.Email"
92+
header="Email"
93+
:sortable="true"
94+
data-cy="userEmail"
95+
></Column>
96+
<Column :field="UserFields.UserType" header="User Type">
97+
<template #body="slotProps">
98+
<span data-cy="userType" class="text-capitalize">{{
99+
slotProps.data.userType
100+
}}</span>
101+
</template></Column
102+
>
103+
<Column :field="UserFields.Roles" header="Role">
104+
<template #body="slotProps">
105+
<span class="text-capitalize"
106+
>{{ institutionUserRoleToDisplay(slotProps.data.roles[0]) }}
107+
</span>
108+
</template>
109+
</Column>
110+
<Column :field="UserFields.Locations" header="Locations"
111+
><template #body="slotProps">
112+
<ul v-for="location in slotProps.data.locations" :key="location">
113+
<li>{{ location }}</li>
114+
</ul></template
115+
></Column
116+
>
117+
<Column :field="UserFields.IsActive" header="Status"
118+
><template #body="slotProps">
119+
<status-chip-active-user
120+
:is-active="slotProps.data.isActive"
121+
data-cy="userStatus"
122+
/> </template
123+
></Column>
124+
<Column header="Action"
125+
><template #body="slotProps">
126+
<check-permission-role :role="Role.InstitutionEditUser">
127+
<template #="{ notAllowed }">
128+
<v-btn
129+
:disabled="!slotProps.data.isActive || notAllowed"
130+
@click="openEditUserModal(slotProps.data)"
131+
variant="text"
132+
color="primary"
133+
append-icon="mdi-pencil-outline"
134+
data-cy="editUser"
135135
>
136-
</v-btn>
137-
</template>
138-
</check-permission-role>
139-
<check-permission-role :role="Role.InstitutionEnableDisableUser">
140-
<template #="{ notAllowed }">
141-
<v-btn
142-
:disabled="slotProps.data.disableRemove || notAllowed"
143-
@click="updateUserStatus(slotProps.data)"
144-
variant="text"
145-
color="primary"
146-
append-icon="fa:far fa-user"
147-
data-cy="disableUser"
148-
>
149-
<span class="text-decoration-underline"
150-
><strong>{{
151-
slotProps.data.isActive ? "Disable" : "Enable"
152-
}}</strong></span
136+
<span class="text-decoration-underline"
137+
><strong>Edit</strong></span
138+
>
139+
</v-btn>
140+
</template>
141+
</check-permission-role>
142+
<check-permission-role :role="Role.InstitutionEnableDisableUser">
143+
<template #="{ notAllowed }">
144+
<v-btn
145+
:disabled="slotProps.data.disableRemove || notAllowed"
146+
@click="updateUserStatus(slotProps.data)"
147+
variant="text"
148+
color="primary"
149+
append-icon="fa:far fa-user"
150+
data-cy="disableUser"
153151
>
154-
</v-btn>
155-
</template>
156-
</check-permission-role>
157-
</template>
158-
</Column>
159-
</DataTable>
160-
</content-group>
161-
<!-- Add user. -->
162-
<add-institution-user
163-
ref="addInstitutionUserModal"
164-
:institutionId="institutionId"
165-
:hasBusinessGuid="hasBusinessGuid"
166-
:canSearchBCeIDUsers="canSearchBCeIDUsers"
167-
/>
168-
<!-- Edit user. -->
169-
<edit-institution-user
170-
ref="editInstitutionUserModal"
171-
:institutionId="institutionId"
172-
:hasBusinessGuid="hasBusinessGuid"
173-
/>
152+
<span class="text-decoration-underline"
153+
><strong>{{
154+
slotProps.data.isActive ? "Disable" : "Enable"
155+
}}</strong></span
156+
>
157+
</v-btn>
158+
</template>
159+
</check-permission-role>
160+
</template>
161+
</Column>
162+
</DataTable>
163+
</content-group>
164+
<!-- Add user. -->
165+
<add-institution-user
166+
ref="addInstitutionUserModal"
167+
:institutionId="institutionId"
168+
:hasBusinessGuid="hasBusinessGuid"
169+
:canSearchBCeIDUsers="canSearchBCeIDUsers"
170+
/>
171+
<!-- Edit user. -->
172+
<edit-institution-user
173+
ref="editInstitutionUserModal"
174+
:institutionId="institutionId"
175+
:hasBusinessGuid="hasBusinessGuid"
176+
/>
177+
</body-header-container>
174178
</template>
175179

176180
<script lang="ts">

0 commit comments

Comments
 (0)