Skip to content
Jump to bottom

Add special "Start" button to Enrollment Flow views (CFM-428) #251

Merged
merged 7 commits into from
Nov 21, 2024
+79 −47
Merged

Add special "Start" button to Enrollment Flow views (CFM-428) #251

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9ced736
Add special "Start" and "Copy" (flow url) buttons to Enrollment Flow …
arlen Nov 19, 2024
17af5a7
Improve "Cannot copy" message for javascript clipboard (CFM-428)
arlen Nov 20, 2024
6820a17
Make upper buttons more generic (CFM-428)
arlen Nov 20, 2024
7a6b66f
Shorten test block for applying upper buttons (CFM-428)
arlen Nov 20, 2024
4ff470c
De-emphasize "Copy URL" and move it to the left of "Start" (CFM-428)
arlen Nov 21, 2024
50f7aa4
Remove "Copy URL" button (CFM-428)
arlen Nov 21, 2024
06a0bc1
Trivial clean up to comment (CFM-428)
arlen Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/plugins/CoreEnroller/templates/EnrollmentAttributes/columns.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ $action_args['vv_attr_id'] = $vv_user['username'];
$action_args['vv_actions_type'] = 'mvea-add-menu';
$action_args['vv_actions_title'] = __d('operation', 'add.attribute');
$action_args['vv_actions_icon'] = 'add_circle';
$action_args['vv_actions_icon_class'] = 'material-symbols-outlined';
$action_args['vv_actions_class'] = 'mvea-add-menu';
$actionOrderDefault = $this->Menu->getMenuOrder('Default');
foreach ($attributes as $attr => $hr_name) {
Expand Down
3 changes: 3 additions & 0 deletions app/resources/locales/en_US/operation.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ msgstr "Continue"
msgid "copy"
msgstr "Copy"

msgid "copy.flowUrl"
msgstr "Copy Enrollment Flow URL"

msgid "copy.value"
msgstr "Copy value"

Expand Down
42 changes: 0 additions & 42 deletions app/templates/EnrollmentFlows/fields-nav.inc
View file
Open in desktop

This file was deleted.

43 changes: 43 additions & 0 deletions app/templates/element/subnavigation/navBar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,49 @@
<?= $this->element('subnavigation/supertitle') ?>
<?= $this->element('subnavigation/statusBadge') ?>
</div>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you move this into its own element under the sub-navigation directory. Or if it could be used in other places under the element directory.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered that, but I don't believe it will be used anywhere else - it's very much a one off. But, there's certainly no harm in moving it into its own element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok - I've improved this and made it more generic (in case we do find we want to reuse this idea). The new element is "upperButtons.php" and the css has been modified similarly.

<?php
// Special "Start" and "Copy" buttons for Enrollment Flow configuration views
if(
$vv_controller == 'EnrollmentFlows' ||
$vv_controller == 'EnrollmentFlowSteps' ||
$vv_controller == 'Petitions'
):

$enrollmentFlowId = $vv_obj->id;
if($vv_controller != 'EnrollmentFlows') {
$enrollmentFlowId = $vv_primary_link_obj->id;
}

$startButtonUrl = $this->Url->build(
['controller' => 'enrollment_flows',
'action' => 'start',
$enrollmentFlowId
],
['fullBase' => true]
);
?>
<div class="enrollment-flow-top-buttons">
<a href="<?= $startButtonUrl ?>" class="btn btn-sm btn-tertiary">
<em class="material-symbols">play_arrow</em>
<?= __d('operation', 'EnrollmentFlows.start') ?>
</a>

<button
aria-label="<?= __d('operation','copy.flowUrl') ?>"
onclick="copyValStatic(
'<?= $startButtonUrl ?>',
this,
'<?= __d('operation','copy.flowUrl') ?>',
'<?= __d('information','value.copied') ?>',
'<?= __d('error','copy.error') ?>')"
class="btn btn-sm btn-primary"
>
<em class="material-symbols-outlined">content_copy</em>
<?= __d('operation','copy') ?>
</button>
</div>
<?php endif; ?>
</div>

<!-- Flash Messages are placed below supertitle when subnavigation exists. -->
Expand Down
10 changes: 9 additions & 1 deletion app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

/* HTML, BODY, HEADINGS, ANCHORS, FONTS */
@import url("fonts/opensans/stylesheet.css");
@import url("fonts.material-symbols.material-symbols.css");
@import url("fonts/material-symbols/stylesheet.css");

html * {
Expand Down Expand Up @@ -1781,6 +1780,15 @@ li[data-pc-section="emptymessage"] {
color: var(--cmg-color-txt-soft);
background-color: unset;
}
/* ENROLLMENT FLOWS */
.enrollment-flow-top-buttons {
display: flex;
gap: 0.5em;
font-size: 0.9em;
}
.enrollment-flow-top-buttons a {
padding: 0.5em 1em;
}
/* ENROLLMENT FLOWS: ATTRIBUTE COLLECTOR */
body.attributecollectors main,
body.basicattributecollectors main {
Expand Down
32 changes: 32 additions & 0 deletions app/webroot/js/comanage/comanage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,38 @@ function clearTopSearch(formObj) {
formObj.submit();
}

/**
* COmanage Registry Copy to Clipboard (for static, non-vuejs buttons)
* @param val {string} String to copy
* @param clickedObj {object} DOM object clicked, typically a button containing both text and an icon
* @param copyTxt {string} aria-label describing what to copy
* @param successTxt {string} aria-label success message after copy
* @param errorTxt {string} error message if browser can't copy
*/
async function copyValStatic(
val,
clickedObj,
copyTxt,
successTxt,
errorTxt
) {
try {
// remove extra white spaces and trim the value
let valWithNormalizedSpaces = val.replace(/\s+/g, ' ').trim();
// copy to clipboard
await navigator.clipboard.writeText(valWithNormalizedSpaces);
// provide feedback
$(clickedObj).find('em').text('thumb_up');
$(clickedObj).attr('aria-label', successTxt);
// reset feedback
setTimeout(() => $(clickedObj).find('em').text('content_copy'), 1200);
setTimeout(() => $(clickedObj).attr('aria-label', copyTxt), 3000);
} catch($e) {
// this will be rendered if browser is not on HTTPS
alert(errorTxt + "\n" + $e);
}
}

/**
* COmanage Registry API AJAX Calls: general function for making an ajax call to Registry API v.2
* @param url {string} API Url
Expand Down