Person_canvas_improvements

app/src/View/Helper/VueHelper.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * COmanage Registry Vue 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          https://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\I18n\FrozenTime;
+use Cake\Utility\Inflector;
+use Cake\View\Helper;
+use Cake\I18n\I18n;
+
+class VueHelper extends Helper {
+  private array $locales_list = [
+    'field' => [
+      'login',
+      'primary',
+      'datepicker.hour',
+      'unverified'
+    ],
+    'information' => [
+      'global.value.none',
+      'datepicker.hour'
+    ]
+  ];
+
+  /**
+   * Helper which will produce an array of configured locales
+   *
+   * @param   string  $lang  The language of the locale
+   *
+   * @return array []
+   * @since  COmanage Registry v5.0.0
+   */
+
+  public function locales(string $lang = 'en_US'): array {
+
+    I18n::setLocale($lang);
+
+    $locales = [];
+    foreach ($this->locales_list as $domain => $key_list) {
+      foreach ($key_list as $key) {
+        $locales[$key] = __d($domain, $key);
+      }
+    }
+
+    return $locales;
+  }
+
+}

app/templates/element/mveaJs.php

@@ -37,6 +37,9 @@
 
 // Get the CSRF Token in JavaScript  
 $token = $this->request->getAttribute('csrfToken');
+// Load my helper functions
+$vueHelper = $this->loadHelper('Vue');
+
 
 // Create an MVEA component - typically this is represented as a card on a canvas page
 ?>
@@ -59,14 +62,7 @@
           mveaController: '<?= $mveaController ?>',
           webroot: '<?= $this->request->getAttribute('webroot') ?>'
         },
-        txt: {
-          login: '<?= __d('field','login') ?>',
-          none: '<?= __d('information','global.value.none') ?>',
-          primary: '<?= __d('field', 'primary') ?>',
-          status: '<?= __d('field', 'datepicker.hour') ?>',
-          unverified: '<?= __d('field', 'unverified') ?>',
-          visit: '<?= __d('information', 'global.visit.link') ?>'
-        },
+        txt: JSON.parse('<?= json_encode($vueHelper->locales()) ?>'),
         isLoading: true
       }
     },

app/webroot/js/comanage/components/mvea/mvea-item.js

@@ -90,7 +90,7 @@ export default {
     <!-- Ad Hoc Attributes -->
     <li class="field-data-container" v-if="this.core.mveaType == 'ad_hoc_attributes'">
       <div class="field-data force-wrap">
-        <a href="#" class="nospin">{{ this.mvea.value != '' ? this.mvea.value : this.txt.none }}</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.value != '' ? this.mvea.value : this.txt["global.value.none"] }}</a>
       </div>
       <div v-if="this.mvea.tag != ''" class="field-data data-label">
         <span class="mr-1 badge bg-light ad-hoc">{{ this.mvea.tag }}</span>
@@ -126,7 +126,7 @@ export default {
     <li class="field-data-container" v-if="this.core.mveaType == 'urls'">
       <div class="field-data force-wrap">
         <a href="#">{{ this.mvea.description != '' ? this.mvea.description : this.mvea.url }}</a>   
-        <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt.visit"><span class="material-icons">north_east</span></a>                                      
+        <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt['global.visit.link']"><span class="material-icons">north_east</span></a>
       </div>
       <div class="field-data data-label">
         <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>

app/webroot/js/comanage/components/mvea/mveas.js

@@ -25,6 +25,9 @@
  */
 
 import MveaItem from './mvea-item.js';
+import {
+  camelize
+} from '../utils/helpers.js';
 
 export default {
   props: {
@@ -42,32 +45,7 @@ export default {
   },
   computed: {
     mveaModel: function() {
-      switch(this.core.mveaType) {
-        case 'names':
-          return this.mveas.Names;
-          break;
-        case 'email_addresses':
-          return this.mveas.EmailAddresses;
-          break;  
-        case 'identifiers':
-          return this.mveas.Identifiers;
-          break;
-        case 'ad_hoc_attributes':
-          return this.mveas.AdHocAttributes;
-          break;
-        case 'addresses':
-          return this.mveas.Addresses;
-          break;
-        case 'telephone_numbers':
-          return this.mveas.TelephoneNumbers;
-          break;
-        case 'urls':
-          return this.mveas.Urls;
-          break;
-        case 'pronouns':
-          return this.mveas.Pronouns;
-          break;
-      }
+      return this.mveas?.[camelize(this.core.mveaType)]
     }
   },
   template: `

app/webroot/js/comanage/components/utils/helpers.js

@@ -44,6 +44,12 @@ const constructLanguageString = (abbreviation) => {
   return `${regionNameEngish.of(abbreviation)} (${regionNameLocale.of(abbreviation)})`;
 }
 
+// Snake case to Camel case
+const camelize = (word) => {
+  return word.split("_").map(word => (word[0].toUpperCase() + word.slice(1))).join('')
+}
+
 export {
-  constructLanguageString
+  constructLanguageString,
+  camelize
 }