Skip to content

Commit

Permalink
added peoplepicker module
Browse files Browse the repository at this point in the history
  • Loading branch information
Ioannis committed Apr 2, 2024
1 parent 9b4f884 commit 2a69807
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 108 deletions.
127 changes: 127 additions & 0 deletions View/Elements/actAsPeopleAutocomplete.ctp
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<?php

// Get parameters
$baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
$path = '/grouper/grouperUi/app/UiV2Main.index';
$groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
$grouperUrlBase = $baseUrl . $path . $groupOperation;
$suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';


?>

<script type="module">
import Autocomplete from '<?= $this->webroot ?>grouper_lite_widget/js/autocomplete.js<?= $suffix ?>';
import Loader from '<?= $this->webroot ?>grouper_lite_widget/js/loader.js<?= $suffix ?>';

// XXX Probably move this to comanage.js
const provided = {
collapsed: <?= $vv_config['CoGrouperLiteWidget']['default_collapse'] == 'collapsed' ? 'true' : 'false' ?>,
optAction: "<?= $optAction ?? 'none' ?>",
owner: <?= $vv_is_user_owner ? 'true' : 'false' ?>,
url: "<?= $actionUrl ?? 'null' ?>",
grouperUrl: "<?= $grouperUrlBase ?>",
view: "<?= $this->action ?>",
txt: {
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: "<?= _txt('pl.grouperlite.value.descr.zerostate') ?>",
records: "<?= _txt('pl.grouperlite.groups.zero-state') ?>"
},
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') ?>",
getSubscriberError: "<?= _txt('pl.grouperlite.message.flash.group-detail-members-failed') ?>",
peoplePickerPlaceHolder: "<?= _txt('op.grm.add.placeholder') ?>",
memberships: "<?= _txt('pl.grouperlite.action.memberships') ?>",
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: "<?= _txt('pl.grouperlite.nav.memberships') ?>",
optin: "<?= _txt('pl.grouperlite.nav.groups-can-join') ?>",
owner: "<?= _txt('pl.grouperlite.nav.groups-presided') ?>",
manager: "<?= _txt('pl.grouperlite.nav.users-presided') ?>",
},
columns: <?= json_encode(['name' => _txt('pl.grouperlite.table.name'),
'role' => _txt('pl.grouperlite.table.role'),
'description' => _txt('pl.grouperlite.table.description'),
'status' => _txt('pl.grouperlite.table.status'),
'action' => _txt('pl.grouperlite.table.action')],
JSON_THROW_ON_ERROR) ?>,
},
api: {
co: <?= $vv_coid ?>,
glid: <?= $vv_config['CoGrouperLiteWidget']['id'] ?>,
mode: "<?= PeoplePickerModeEnum::All ?>",
base: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups",
find: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/findSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
join: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/joinGroup/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
leave: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/leaveGroup/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
remove: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/removeSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
add: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/addSubscriber/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
group: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupSubscribers/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
memberships: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupmemberapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
managing: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/usermanagerapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
optin: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupoptinapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
owner: "<?= $this->webroot ?>grouper_lite_widget/grouper_groups/groupownerapi/co:<?= $vv_coid ?>/glid:<?= $vv_config['CoGrouperLiteWidget']['id'] ?>",
},
}

const app = Vue.createApp({
provide: provided,
data() {
return {
loading: false,
search: '',
subscribers: [],
disabled: [],
}
},
components: {
Autocomplete,
Loader
},
inject: ['txt', 'api'],
methods: {
addUser({ name }) {
console.log('test add user')
},
}
});


app.config.unwrapInjectedRef = true;
// Mount the component and provide a global reference for this app instance.
app.mount("#<?= $htmlId ?>-container");
</script>

<div id="<?= $htmlId ?>-container" class="cm-autocomplete-container">
<Autocomplete @callback="(item) => addUser(item)"
icon="add"/>
<Loader :active="loading"/>
</div>
Empty file removed View/Elements/empty
Empty file.
40 changes: 21 additions & 19 deletions View/GrouperGroups/index.ctp
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ print $this->Html->script('GrouperLiteWidget.vue-router.js');
// Add Breadcrumb
$this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));


$baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
$path = '/grouper/grouperUi/app/UiV2Main.index';
$groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
$grouperUrlBase = $baseUrl . $path . $groupOperation;

$htmlId = 'act-as-picker';
$suffix = Configure::read('debug') > 0 ? '?time=' . time() : '';
?>
<!--/nocache-->
<div class="d-flex align-items-center mb-4">
Expand All @@ -16,20 +24,12 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
</div>

<script type="module">
<?php $suffix = Configure::read('debug') > 0 ? '?time=' . time() : '' ?>
import GrouperGroupsView from '<?= $this->webroot ?>grouper_lite_widget/js/grouper-groups-view.js<?= $suffix ?>';
import GroupMember from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupMember.js<?= $suffix ?>';
import GroupOptin from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupOptin.js<?= $suffix ?>';
import GroupOwner from '<?= $this->webroot ?>grouper_lite_widget/js/page/GroupOwner.js<?= $suffix ?>';
import UserManager from '<?= $this->webroot ?>grouper_lite_widget/js/page/UserManager.js<?= $suffix ?>';

<?php
$baseUrl = $vv_config['CoGrouperLiteWidget']['grouper_url'];
$path = '/grouper/grouperUi/app/UiV2Main.index';
$groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
$grouperUrlBase = $baseUrl . $path . $groupOperation;
?>

const { VueRouter } = window;

const routes = [
Expand Down Expand Up @@ -61,7 +61,6 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
history: VueRouter.createWebHistory("<?= $this->webroot ?>grouper_lite_widget/grouper_groups"),
routes,
})


const app = Vue.createApp({
provide: {
Expand All @@ -70,7 +69,7 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
owner: <?= $vv_is_user_owner ? 'true' : 'false' ?>,
url: "<?= $actionUrl ?? 'null' ?>",
grouperUrl: "<?= $grouperUrlBase ?>",
view: "<?= $this->action; ?>",
view: "<?= $this->action ?>",
txt: {
adhocHeading: "<?= $vv_config['CoGrouperLiteWidget']['adhoc_heading'] ?? 'Ad-hoc groups' ?>",
wgHeading: "<?= $vv_config['CoGrouperLiteWidget']['wg_heading'] ?? 'Working groups' ?>",
Expand Down Expand Up @@ -123,7 +122,6 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));
'action' => _txt('pl.grouperlite.table.action')],
JSON_THROW_ON_ERROR) ?>,
},

api: {
co: <?= $vv_coid ?>,
glid: <?= $vv_config['CoGrouperLiteWidget']['id'] ?>,
Expand All @@ -148,28 +146,32 @@ $this->Html->addCrumb(_txt('pl.grouperlite.title.dashboard'));

app.config.unwrapInjectedRef = true;
app.use(router);

app.mount('#grouper-lite-widget');
</script>

<!--https://materializecss.com/icons.html -->
<div class="grouper-table">
<div id="grouper-lite-widget">
<div id="content" class="with-sidebar">
<div id="grouper-lite-widget" class="mb-2 mb-lg-0">
<router-view></router-view>
</div>
<div id="right-sidebar">
<div class="sidebar-content">
<div class="font-weight-bold d-inline-flex align-items-center w-100">
<em class="material-icons lg" aria-hidden="true">transfer_within_a_station</em>
<span class="ml-1">Act As</span>
<a href="/registry/history_records/index/copersonid:3054"
class="spin ignore-invalid ml-auto order-2">
<a data-toggle="collapse"
href="#people-picker-container"
role="button"
aria-expanded="false"
aria-controls="people-picker-container"
class="ignore-invalid ml-auto order-2">
<span class="ui-icon ui-icon-search"></span>Find
</a>
</div>
<p class="text-muted">
John Doe
</p>
<div class="collapse" id="people-picker-container">
<div id="auto-complete-form">test</div>
</div>
<a href="<?= $this->webroot ?>co_people/canvas/3054" class="spin ignore-invalid">John Doe</a>
<hr>
</div>
</div>
Expand Down
8 changes: 1 addition & 7 deletions webroot/css/co-grouper-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@
--secondary: var(--darkteal)
}

.grouper_groups .grouper-table {
display: grid;
grid-template-columns: auto 20%;
grid-gap: 1em;
}

.text-grouper {
color: var(--primary);
}
Expand Down Expand Up @@ -148,4 +142,4 @@
to {
opacity: 1;
}
}
}
1 change: 0 additions & 1 deletion webroot/js/autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export default {
},
success: function (data) {
$("#grouper-search-container .co-loading-mini").hide();
// If i have more data from before append at the end
response( data );
},
error: function(data) {
Expand Down
81 changes: 0 additions & 81 deletions webroot/js/page/ActAsUser.js

This file was deleted.

0 comments on commit 2a69807

Please sign in to comment.