Replace Toast messages with Alerts; create AlertsHelper; update color…

…s for new theme (CFM-172)
COmanage · Jul 8, 2022 · 2c6dc40 · 2c6dc40
2 parents cebe0bc + 513f927
commit 2c6dc40
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 199 deletions.
diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
@@ -37,13 +37,13 @@ msgid "cos.select"
 msgstr "Please select the collaboration (CO) you wish to manage."
 
 msgid "flash.default"
-msgstr "Notice"
+msgstr "Notice: "
 
 msgid "flash.error"
-msgstr "Error"
+msgstr "Error: "
 
 msgid "flash.success"
-msgstr "Success"
+msgstr "Success: "
 
 msgid "pagination.format"
 msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"

diff --git a/app/src/View/Helper/AlertHelper.php b/app/src/View/Helper/AlertHelper.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * COmanage Registry Alert Helper
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+declare(strict_types=1);
+
+namespace App\View\Helper;
+
+use \Cake\View\Helper;
+use phpDocumentor\Reflection\Types\Boolean;
+
+/**
+ * Helper which will produce Bootstrap based alert
+ *
+ * @param string $message          Alert message
+ * @param string $type             Define the type of Alert. The value should be one of
+ *                                 [success,warning,danger,info]. Defaults to 'warning'
+ * @param boolean $dismissable     Can the Alert be dismissed? Defaults to false.
+ * @param string|null $title       Title to display (typically "Success", "Error", or "Warning"). Defaults to null.
+ * @param boolean $dis_text_dark   Disable dark-text fonts for light|info color mode.
+ * @return mixed - a constructed HTML block
+ * @since  COmanage Registry v5.0.0
+ */
+class AlertHelper extends Helper {
+
+  public $helpers = ['Html'];
+
+  public function alert(
+    string $message,
+    string $type = 'warning',
+    bool $dismissable = false,
+    string $title = null ) {
+
+    $closeButton = '';
+    $dismissableClass = '';
+    if($dismissable) {
+      $closeButton = '
+        <span class="alert-button">
+          <button type="button" class="btn-close nospin" data-bs-dismiss="alert" aria-label="Close"></button>
+        </span>
+      ';
+      $dismissableClass = ' alert-dismissible';
+    }
+
+    $titleMarkup = '';
+    if(!empty($title)) {
+      $titleMarkup = '<span class="alert-title-text">' . $title . '</span>';
+    }
+
+    return '
+      <div class="alert alert-' . $type . $dismissableClass . ' co-alert" role="alert">
+        <div class="alert-body d-flex align-items-center">
+          <span class="alert-title d-flex align-items-center">
+            ' . $this->getAlertIcon($type) . $titleMarkup .  '
+          </span>
+          <span class="alert-message">        
+            ' . $message . '
+          </span>
+          ' . $closeButton . '
+        </div>
+      </div>
+    ';
+  }
+
+  public function getAlertIcon(string $type) {
+    switch($type) {
+      case('success'): return '<span class="material-icons-outlined alert-icon">check_circle</span>';
+      case('info'): return '<span class="material-icons-outlined alert-icon">info</span>';
+      default: return '<span class="material-icons-outlined alert-icon">report_problem</span>';
+    }
+  }
+
+}
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -34,7 +34,7 @@
 use Cake\View\Helper;
 
 class FieldHelper extends Helper {
-  public $helpers = ['Form', 'Html', 'Url'];
+  public $helpers = ['Form', 'Html', 'Url', 'Alert'];
 
   // Is this read-only or read-write?
   protected $editable = true;
@@ -57,10 +57,9 @@ class FieldHelper extends Helper {
    */
 
   public function banner(string $info) {
-    return '<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  ' . $info . '
-</div>';
+    return '<li class="alert-banner">' .
+      $this->Alert->alert($info, 'warning')
+    . '</li>';
   }
 
   /**

diff --git a/app/templates/Cos/select.php b/app/templates/Cos/select.php
@@ -35,10 +35,7 @@
 </div>
 
 <?php if(count($vv_available_cos) == 0): ?>
-  <div class="co-info-topbox">
-    <em class="material-icons">info</em>
-    <?= __d('information','cos.none'); ?>
-  </div>
+  <?=  $this->Alert->alert(__d('information','cos.none'), 'warning') ?>
 <?php else: // vv_available_cos ?>
   <p><?= __d('information', 'cos.select'); ?></p>
   <div id="fpList" class="co-grid co-grid-with-header container">

diff --git a/app/templates/Standard/add-edit-view.php b/app/templates/Standard/add-edit-view.php
@@ -77,19 +77,24 @@
     }
   ?>
 </div>
-<?php
-// XXX this doesn't work yet because we don't include fields.inc until later
-//     either create a second file to include earlier, or use a function to emit
-//     the fields (which would be more consistent with how Views render...)
-if(!empty($banners)) {
-  foreach($banners as $b): ?>  
-<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  <?php print $b; ?>
+
+<!-- Flash Messages and defined Info Banners -->
+<div class="alert-container" id="flash-messages">
+  <?= $this->Flash->render() ?>
+
+  <?php
+  // XXX this doesn't work yet because we don't include fields.inc until later
+  //     either create a second file to include earlier, or use a function to emit
+  //     the fields (which would be more consistent with how Views render...)
+  if(!empty($banners)) {
+    foreach($banners as $b) {
+      print $this->Alert->alert($b, 'warning');
+    }
+  }
+  ?>
 </div>
-<?php endforeach; // $banners
-}
 
+<?php
 // By default, the form will POST to the current controller
 // Note we need to open the form for view so Cake will autopopulate values
 print $this->Form->create($vv_obj);

diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
@@ -139,23 +139,23 @@ function _column_key($modelsName, $c, $tz=null) {
   }
   ?>
 </div>
-<?php if(!empty($indexBanners)): ?>
-  <?php foreach($indexBanners as $b): ?>
-    <div class="co-info-topbox">
-      <em class="material-icons">info</em>
-      <?= $b; ?>
-    </div>
-  <?php endforeach; // $indexBanners ?>
-<?php endif; // $indexBanners ?>
 
-<?php if(!empty($banners)): ?>
-  <?php foreach($banners as $b): ?>
-    <div class="co-info-topbox">
-      <em class="material-icons">info</em>
-      <?= $b; ?>
-    </div>
-  <?php endforeach; // $banners ?>
-<?php endif; // $banners ?>
+<!-- Flash Messages and defined Info Banners -->
+<div class="alert-container" id="flash-messages">
+  <?= $this->Flash->render() ?>
+
+  <?php if(!empty($indexBanners)): ?>
+    <?php foreach($indexBanners as $b): ?>
+      <?=  $this->Alert->alert($b, 'warning') ?>
+    <?php endforeach; // $indexBanners ?>
+  <?php endif; // $indexBanners ?>
+
+  <?php if(!empty($banners)): ?>
+    <?php foreach($banners as $b): ?>
+      <?=  $this->Alert->alert($b, 'warning') ?>
+    <?php endforeach; // $banners ?>
+  <?php endif; // $banners ?>
+</div>
 
 <!-- Search block -->
 <?php if(isset($vv_searchable_attributes)): ?>

diff --git a/app/templates/element/flash/default.php b/app/templates/element/flash/default.php
@@ -1,4 +1,5 @@
 <?php
+  // XXX are these classes set anywhere? Are they in use?
   $class = 'message';
   if (!empty($params['class'])) {
     $class .= ' ' . $params['class'];
@@ -7,30 +8,8 @@
     $message = h($message);
   }
 ?>
-<?php /*
-<div class="<?= h($class) ?>" onclick="this.classList.add('hidden');"><?= $message ?></div>
-*/ ?>
-
 
 <?php if(!empty($message)): ?>
-  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.default'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'warning', true, __d('information','flash.default')) ?>
 <?php endif; ?>
 
diff --git a/app/templates/element/flash/error.php b/app/templates/element/flash/error.php
@@ -8,23 +8,5 @@
 */ ?>
 
 <?php if(!empty($message)): ?>
-  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.error'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'danger', true, __d('information','flash.error')) ?>
 <?php endif; ?>
diff --git a/app/templates/element/flash/success.php b/app/templates/element/flash/success.php
@@ -3,28 +3,7 @@
     $message = h($message);
 }
 ?>
-<?php /*
-<div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
-*/ ?>
 
 <?php if(!empty($message)): ?>
-  <div class="toast success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.success'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'success', true, __d('information','flash.success')) ?>
 <?php endif; ?>
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
@@ -197,15 +197,6 @@
 
     <!-- loading animation -->
     <div id="co-loading"><span></span><span></span><span></span></div>
-
-    <!-- informational messages -->
-    <div 
-      class="toast-container" 
-      id="flash-messages" 
-      aria-live="polite" 
-      aria-atomic="true" >
-      <?= $this->Flash->render() ?>
-    </div>
 
     <!-- modal dialog box -->
     <?= $this->element('dialog') ?>