Skip to content

Commit

Permalink
Present data in table.Add and test action.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ioannis
Ioannis committed Mar 14, 2024
1 parent 6af044c commit 060b668
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 20 deletions.
8 changes: 8 additions & 0 deletions webroot/css/co-grouper-plugin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,4 +327,12 @@ a.list-group-item-action:hover .fa {
right: 38px;
bottom: 10px;
margin-right: -26px;
}

.grouper_groups #co-loading span,
.grouper_groups #co-loading-redirect span,
.grouper_groups .co-loading-mini span {
animation: 1.2s linear infinite both loading;
background-color: var(--teal);
display: inline-block;
}
29 changes: 23 additions & 6 deletions webroot/js/groups-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ export default {
Table
],
data() {},
computed: {
methods: {
groupStatus(status) {
return status === 'T' ? 'Enabled' : 'Disabled'
}
},
created() {},
template: /*html*/`
Expand All @@ -25,9 +28,10 @@ export default {
</td>
<td v-if="columns.indexOf('role') > -1">&mdash;</td>
<td v-if="columns.indexOf('description') > -1">{{ group.description || txt.descrZeroState }}</td>
<td v-if="columns.indexOf('status') > -1">{{ group.enabled && group.enabled === 'T' ? 'Enabled' : 'Disabled' }}</td>
<td v-if="columns.indexOf('status') > -1">{{ groupStatus(group?.enabled) }}</td>
<td>
<span class="d-flex flex-row justify-content-center align-items-center" v-if="!group.loading">
<!-- My memberships view(Join or leave Group) -->
<template v-if="showOptAction(group)">
<button
v-if="$attrs.onJoinGroup"
Expand All @@ -43,19 +47,32 @@ export default {
@click="$emit('leaveGroup', group)"
class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
:disabled="group.loading">
{{ txt.leave }}
&nbsp;
<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
{{ txt.leave }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
</button>
</template>
<!-- Show group members -->
<button
v-if="$attrs.onShowSubscribers"
class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
@click="$emit('showSubscribers', group)"
:data-id="encodeURIComponent(group.name)"
:data-name="group.displayExtension">{{ txt.members }}<em class="material-icons mt-0 ml-1" aria-hidden="true">group</em>
</button>
<a v-if="grouper && owner" :href="grouperUrl + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
<!-- Remove from Group i manage -->
<button
v-if="$attrs.onRemoveUser"
class="btn btn-sm btn-block text-nowrap m-1 btn-danger" type="button"
@click="$emit('removeUser', group)"
:disabled="group.loading"
:data-id="encodeURIComponent(group.name)"
:data-name="group.displayExtension">
{{ txt.remove }}<em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
</button>
<!-- -->
<a v-if="grouper && owner" :href="grouperUrl + group.uuid"
target="_blank"
class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap"
role="button">
{{ txt.grouper }} &nbsp;
<em class="material-icons mt-0 ml-1" aria-hidden="true">link</em>
</a>
Expand Down
64 changes: 51 additions & 13 deletions webroot/js/page/UserManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,49 +17,87 @@ export default {
data() {
return {
loading: false,
result: [],
results: [],
user: {},
rowLoading: false,
searched: false
}
},
inject: ['api', 'txt'],
methods: {
dummy() {
console.log('hi from dummy')
reset() {
this.searched = false
// If you are in the middle of a row action we do not want to clear
// the results because we are breaking the user experience
if(!this.rowLoading) {
this.results = []
}
},
async removeUser(group) {
const {name, displayExtension} = group;
const { identifier: id, label: username, email } = this.user;
// This will trigger the inline loader
group.loading = true;
this.rowLoading = true;
const resp = await fetch(`${this.api.remove}?group=${(name)}&userId=${id}`, {
method: "DELETE",
headers: {
"Accept": "application/json"
}
});
if (resp.ok) {
this.subscribers = [];
await this.findGroupsForManagedUser(this.user);
generateFlash(`${username ?? email} ${this.txt.removeSubscriberSuccess} ${(displayExtension)}`, 'success');
} else {
this.disabled = [ ...this.disabled, id ];
generateFlash(this.txt.removeSubscriberError, 'error');
let errorResponse = await resp.json();
generateFlash(`${errorResponse.message}`, 'error');
}
},
async findManagedUsers(user) {
const { identifier: id, label } = user;
this.loading = true;
async findGroupsForManagedUser(user) {
this.user = user
// Reset
this.reset()
const { identifier: id } = user;
this.loading = !this.rowLoading && true;
const resp = await fetch(`${this.api.managing}?memberid=${id}`, {
headers: {
"Accept": "application/json",
},
method: "GET"
});
if (resp.ok) {
this.result = await resp.json();
console.log('result', this.result)
generateFlash(`${id} has ${this.result.length} ${this.txt.memberships}`, 'success');
this.results = await resp.json();
generateFlash(`${id} has ${this.results.length} ${this.txt.memberships}`, 'success');
} else {
let errorResponse = await resp.json();
generateFlash(`${errorResponse.message}`, 'error');
}

this.searched = true;
this.loading = false;
}
},
template: /*html*/`
<autocomplete @callback="(item) => findManagedUsers(item)"
<autocomplete @callback="(item) => findGroupsForManagedUser(item)"
icon="search"
action="findManagedUsers"
action="findGroupsForManagedUser"
:activeBtn="loading"
/>
<loader :active="loading"></loader>
<pagination :records="results">
<template v-slot:paginated="paginated">
<page-count :first="paginated.start" :last="paginated.end" :total="paginated.total"></page-count>
<page-count :first="paginated.start"
:last="paginated.end"
:searched="searched"
:total="paginated.total"></page-count>
<groups-table
:groups="paginated.records"
:columns="['name', 'description', 'action']"
@remove-group="dummy()"></groups-table>
@remove-user="removeUser">
</groups-table>
</template>
</pagination>
`
Expand Down
6 changes: 5 additions & 1 deletion webroot/js/pagecount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@ export default {
total: {
type: Number,
default: 100
},
searched: {
type: Boolean,
default: true
}
},
inject: ['txt'],
template: /*html*/`
<div class="counter d-flex justify-content-start align-items-center rounded-0">
<div class="pagination-element pagination-counter muted">
<div v-if="searched" class="pagination-element pagination-counter muted">
<template v-if="total > 0">
Viewing {{first}}-{{last}} of {{total}}
</template>
Expand Down

0 comments on commit 060b668

Please sign in to comment.