Added group labels by using CSS classes

indigo-iam · Jul 19, 2021 · 7be2d03 · 7be2d03
1 parent 62fc2f5
commit 7be2d03
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/...webapp/resources/iam/apps/dashboard-app/components/user/groups/user.groups.component.html b/...webapp/resources/iam/apps/dashboard-app/components/user/groups/user.groups.component.html
@@ -29,14 +29,34 @@ <h3 class="box-title"><strong>Groups</strong></h3>
                 <span ng-if="!$ctrl.isVoAdmin()">{{group.display}}</span>
             </div>
 
+            <!--
             <style type="text/css">div.allinea { float:left; margin-left: .5em; margin-top: 10px }</style> 
             <div class="iam-user-group-labels col-xs-4 col-sm-4">
                 <div class="allinea" ng-repeat="label in $ctrl.userGroupLabels[group.value]">
-                    <span style="background-color:#bee1f4; padding: 4px 7.2px 4px 7.2px; font-size: 12px">
+                    <span style="background-color:#bee1f4; padding: 4px 7.2px 4px 7.2px; font-size: 12px" ng-if="!label.prefix">
                     <b><font color="#00659c">{{label.name}}</font></b>
                     </span>
+                    <span style="background-color:#bee1f4; padding: 4px 7.2px 4px 7.2px; font-size: 12px" ng-if="label.prefix">
+                        <b><font color="#00659c">{{label.prefix + "/" + label.name}}</font></b>
+                        </span>
+                    <span style="background-color:#7dc3e8; padding: 4px 7.2px 4px 7.2px; font-size: 12px" ng-if="label.value">
+                        <b><font color="#FFF">{{label.value}}</font></b>
+                    </span>
                 </div> 
             </div>
+            -->
+
+            <!-- By using CSS classes -->
+            <div class="iam-user-group-labels col-xs-4 col-sm-4">
+                <span class="label-pair" ng-repeat="label in $ctrl.userGroupLabels[group.value]">
+                    <span class="label-key label">
+                        {{$ctrl.labelName(label)}}
+                    </span>
+                    <span class="label-value label" ng-if="label.value">
+                        {{label.value}}
+                    </span>
+                </span>        
+            </div>
 
             <div class="iam-user-group-actions col-xs-2 col-sm-2 text-right">
                 <div class="btn-group">

diff --git a/...n/webapp/resources/iam/apps/dashboard-app/components/user/groups/user.groups.component.js b/...n/webapp/resources/iam/apps/dashboard-app/components/user/groups/user.groups.component.js
@@ -23,6 +23,7 @@
             console.log('UserGroupsController onInit');
             self.enabled = true;
             self.userGroupLabels = {};
+            self.labelName = labelName;
 
             angular.forEach(self.user.groups, function(g){
                 var gl = [];
@@ -45,7 +46,7 @@
             });
         };
 
-        // Knowing the group id I recover its labels calling the appropriate service
+        // By knowing the group id and by calling the appropriate service I can recover group labels
 
         self.groupLabels = function(groupId){
 
@@ -55,6 +56,13 @@
                    return labels;
             });
         };
+
+        function labelName(label) {
+            if (label.prefix) {
+                return label.prefix + "/" + label.name;
+            }
+            return label.name;
+        }
 
         self.openAddGroupDialog = function() {
             var modalInstance = $uibModal.open({