Skip to content

Commit

Permalink
Add people picker spinner. Fix people picker add button alignment.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ioannis
Ioannis committed Feb 22, 2024
1 parent ddfccf7 commit ee6bc31
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 62 deletions.
1 change: 0 additions & 1 deletion Controller/GrouperGroupsController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,6 @@ public function addSubscriber(): void

public function findSubscriber(): void
{
$this->autoRender = false;
$this->request->allowMethod('ajax');
$this->layout = 'ajax';

Expand Down
10 changes: 3 additions & 7 deletions Model/GrouperGroup.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,15 +217,11 @@ public function findForPicker(int $coId, string $mode, ?string $term): array

// Iterate over the email array
if(!empty($emailArr) && !empty($pickerEmailType)) {
if(!empty($pickerDisplayTypes)) {
$emailLabel = _txt('fd.extended_type.generic.label', array(_txt('fd.email_address.mail'), $pickerEmailType));
}
else {
$emailLabel = _txt('fd.email_address.mail') . ': ';
}
$emailLabel = !empty($pickerDisplayTypes) ? _txt('fd.extended_type.generic.label', array(_txt('fd.email_address.mail'), $pickerEmailType))
: _txt('fd.email_address.mail') . ': ';
foreach($emailArr as $e) {
if($e['type'] == $pickerEmailType) {
$email = $e['mail'] . ' ' . $pickerDisplayTypes;
$email = $e['mail'];
break;
}
}
Expand Down
2 changes: 0 additions & 2 deletions View/Elements/Components/subscriberList.ctp
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div id="subscriber-picker" class="ui-front">


<div class="modal modal-members modal-primary fade" tabindex="-1" id="subscribers" aria-labelledby="modal-title">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
Expand Down
2 changes: 1 addition & 1 deletion View/GrouperGroups/base.ctp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ echo $this->Html->meta(
);

print $this->element('GrouperLiteWidget.base-styles');
print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . "\n ";
print $this->Html->css('GrouperLiteWidget.co-grouper-plugin') . PHP_EOL;


?>
Expand Down
91 changes: 46 additions & 45 deletions View/GrouperGroups/index.ctp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!--/nocache-->
<div class="d-flex align-items-center mb-4">
<?php print $this->Html->image('GrouperLiteWidget.Grouper.jpg', array('class' => 'img-fluid mr-2', 'style' => 'height: 50px')); ?>
<h1 class="h2"><?php echo $title; ?></h1>
<h1 class="h2"><?= $title; ?></h1>
</div>

<script type="module">
Expand Down Expand Up @@ -47,60 +47,61 @@
];

const router = VueRouter.createRouter({
history: VueRouter.createWebHistory("<?php echo $this->webroot ?>grouper_lite_widget/grouper_groups"),
history: VueRouter.createWebHistory("<?= $this->webroot ?>grouper_lite_widget/grouper_groups"),
routes,
})


const app = Vue.createApp({
provide: {
collapsed: <?php echo $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false'; ?>,
optAction: "<?php echo isset($optAction) ? $optAction : 'none'; ?>",
owner: <?php echo $treatAsOwner ? 'true' : 'false'; ?>,
url: "<?php echo isset($actionUrl) ? $actionUrl : 'null'; ?>",
grouperUrl: "<?php echo $grouperUrlBase ?>",
view: "<?php echo $this->action; ?>",
collapsed: <?= $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false' ?>,
optAction: "<?= $optAction ?? 'none' ?>",
owner: <?= $treatAsOwner ? 'true' : 'false' ?>,
url: "<?= $actionUrl ?? 'null' ?>",
grouperUrl: "<?= $grouperUrlBase ?>",
view: "<?= $this->action; ?>",
txt: {
adhocHeading: "<?php echo $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ; ?>",
wgHeading: "<?php echo $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ; ?>",
search: "<?php echo _txt('pl.grouperlite.title.search'); ?>",
searchForGroups: "<?php echo _txt('pl.grouperlite.action.search'); ?>",
display: "<?php echo _txt('fd.page.limit.display'); ?>",
records: "<?php echo _txt('fd.page.limit.records'); ?>",
first: "<?php echo _txt('op.first'); ?>",
last: "<?php echo _txt('op.last'); ?>",
previous: "<?php echo _txt('op.previous'); ?>",
next: "<?php echo _txt('op.next'); ?>",
groups: "<?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?>",
grouper: "<?php echo _txt('pl.grouperlite.action.grouper'); ?>",
leave: "<?php echo _txt('pl.grouperlite.action.leave') ?>",
adhocHeading: "<?= $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ?>",
wgHeading: "<?= $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ?>",
search: "<?= _txt('pl.grouperlite.title.search') ?>",
searchForGroups: "<?= _txt('pl.grouperlite.action.search') ?>",
display: "<?= _txt('fd.page.limit.display') ?>",
records: "<?= _txt('fd.page.limit.records') ?>",
first: "<?= _txt('op.first') ?>",
last: "<?= _txt('op.last') ?>",
previous: "<?= _txt('op.previous') ?>",
next: "<?= _txt('op.next') ?>",
groups: "<?= _txt('pl.grouperlite.dashboard.heading.groups') ?>",
grouper: "<?= _txt('pl.grouperlite.action.grouper') ?>",
leave: "<?= _txt('pl.grouperlite.action.leave') ?>",
zero: {
description: "<?php echo _txt('pl.grouperlite.value.descr.zerostate') ?>",
records: "<?php echo _txt('pl.grouperlite.groups.zero-state'); ?>"
description: "<?= _txt('pl.grouperlite.value.descr.zerostate') ?>",
records: "<?= _txt('pl.grouperlite.groups.zero-state') ?>"
},
members: "<?php echo _txt('pl.grouperlite.action.members') ?>",
email: "<?php echo _txt('pl.grouperlite.value.email') ?>",
close: "<?php echo _txt('pl.grouperlite.action.close') ?>",
remove: "<?php echo _txt('pl.grouperlite.action.remove-user') ?>",
addUser: "<?php echo _txt('pl.grouperlite.action.add-user') ?>",
addSubscriberError: "<?php echo _txt('pl.grouperlite.message.flash.add-subscriber-failed') ?>",
addSubscriberSuccess: "<?php echo _txt('pl.grouperlite.message.flash.add-subscriber-success') ?>",
removeSubscriberError: "<?php echo _txt('pl.grouperlite.message.flash.remove-subscriber-failed') ?>",
removeSubscriberSuccess: "<?php echo _txt('pl.grouperlite.message.flash.remove-subscriber-success') ?>",
search: "<?php echo _txt('pl.grouperlite.search.tags.text') ?>",
noaccess: "<?php echo _txt('pl.grouperlite.members.noaccess') ?>",
empty: "<?php echo _txt('pl.grouperlite.members.empty') ?>",
join: "<?php echo _txt('pl.grouperlite.action.join') ?>",
joinSuccess: "<?php echo _txt('pl.grouperlite.message.flash.join-group-success'); ?>",
joinFailure: "<?php echo _txt('pl.grouperlite.message.flash.join-group-failed'); ?>",
joinError: "<?php echo _txt('pl.grouperlite.message.flash.join-group-error'); ?>",
leaveSuccess: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-success'); ?>",
leaveFailure: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-failure'); ?>",
leaveError: "<?php echo _txt('pl.grouperlite.message.flash.leave-group-error'); ?>",
members: "<?= _txt('pl.grouperlite.action.members') ?>",
email: "<?= _txt('pl.grouperlite.value.email') ?>",
close: "<?= _txt('pl.grouperlite.action.close') ?>",
remove: "<?= _txt('pl.grouperlite.action.remove-user') ?>",
addUser: "<?= _txt('pl.grouperlite.action.add-user') ?>",
addSubscriberError: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-failed') ?>",
addSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.add-subscriber-success') ?>",
removeSubscriberError: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-failed') ?>",
removeSubscriberSuccess: "<?= _txt('pl.grouperlite.message.flash.remove-subscriber-success') ?>",
searchTag: "<?= _txt('pl.grouperlite.search.tags.text') ?>",
peoplePickerPlaceHolder: "<?= _txt('op.grm.add.placeholder') ?>",
noaccess: "<?= _txt('pl.grouperlite.members.noaccess') ?>",
empty: "<?= _txt('pl.grouperlite.members.empty') ?>",
join: "<?= _txt('pl.grouperlite.action.join') ?>",
joinSuccess: "<?= _txt('pl.grouperlite.message.flash.join-group-success') ?>",
joinFailure: "<?= _txt('pl.grouperlite.message.flash.join-group-failed') ?>",
joinError: "<?= _txt('pl.grouperlite.message.flash.join-group-error') ?>",
leaveSuccess: "<?= _txt('pl.grouperlite.message.flash.leave-group-success') ?>",
leaveFailure: "<?= _txt('pl.grouperlite.message.flash.leave-group-failure') ?>",
leaveError: "<?= _txt('pl.grouperlite.message.flash.leave-group-error') ?>",
tabs: {
memberships: "<?php echo _txt('pl.grouperlite.nav.memberships') ?>",
optin: "<?php echo _txt('pl.grouperlite.nav.groups-can-join') ?>",
owner: "<?php echo _txt('pl.grouperlite.nav.groups-presided') ?>",
memberships: "<?= _txt('pl.grouperlite.nav.memberships') ?>",
optin: "<?= _txt('pl.grouperlite.nav.groups-can-join') ?>",
owner: "<?= _txt('pl.grouperlite.nav.groups-presided') ?>",
},
columns: <?php print_r(json_encode(array(
'name' => _txt('pl.grouperlite.table.name'),
Expand Down
12 changes: 12 additions & 0 deletions webroot/css/co-grouper-plugin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,4 +315,16 @@ a.list-group-item-action:hover .fa {
background-color: #ececec;
border-bottom: 1px solid #FFF !important;
margin-bottom: 1px;
}

.co-loading-mini-input-container {
flex-grow: 1;
}

.co-loading-mini-input-container .co-loading-mini {
display: none;
position: absolute;
right: 38px;
bottom: 10px;
margin-right: -26px;
}
32 changes: 26 additions & 6 deletions webroot/js/autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,46 @@ export default {
minLength: 3,
maxShowItems: 10,
focus: function( event, ui ) {
this.search = ui.item.label;
$("#grouper-add-member-search-container .co-loading-mini").hide();
console.log('ui item', ui.item)
this.search = `${ui.item.label} (${ui.item.value})`;
this.val = ui.item.identifier;
this.item = ui.item;
return false;
},
select: (event, ui) => {
open: function (event, ui) {
$("#grouper-add-member-search-container .co-loading-mini").hide();
},
close: function (event, ui) {
$("#grouper-add-member-search-container .co-loading-mini").hide();
},
search: function (event, ui) {
$("#grouper-add-member-search-container .co-loading-mini").show();
},
select: function (event, ui) {
this.val = ui.item.identifier;
this.search = ui.item.label;
this.search = `${ui.item.label} (${ui.item.value})`;
this.item = ui.item;
$("#addUserbutton").prop('disabled', false).focus();
return false;
},
}).autocomplete( "instance" )._renderItem = formatCoPersonAutoselectItem;
},
template: /*html*/`
<div class="input-group">
<div id="grouper-add-member-search-container" class="input-group">
<input id="add-user-value" type="hidden" name="addUser" class="form-control" v-model="val" />
<input id="add-user-input" type="text" name="display" class="form-control" v-model="search" />
<span class="co-loading-mini-input-container">
<input id="add-user-input"
type="text"
name="display"
class="form-control"
v-model="search"
:placeholder="[[ txt.peoplePickerPlaceHolder ]]"
autofocus/>
<span class="co-loading-mini"><span></span><span></span><span></span></span>
</span>
<div class="input-group-append">
<button id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="button" @click="addUser(val)" :disabled="!uten">
<button id="addUserbutton" class="btn btn-grouper btn-primary px-4 border-0" type="button" @click="addUser(val)" :disabled="!uten">
<em class="material-icons lg" aria-hidden="true">add</em>
<span class="ml-2">{{ txt.addUser }}</span>
</button>
Expand Down

0 comments on commit ee6bc31

Please sign in to comment.