Indiquer, pour chaque globale, son nombre d'utilisations en module/in…

…stance #329 avec issue #782
sncf-connect-tech · Dec 12, 2019 · 80d8aed · 80d8aed
1 parent 7a6ac75
commit 80d8aed
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 23 deletions.
diff --git a/src/app/i18n/label_en.json b/src/app/i18n/label_en.json
@@ -341,7 +341,7 @@
   "platform.properties.modal.columnHeaders.propertyName": "Property name",
   "platform.properties.modal.columnHeaders.nbUsages": "Number of modules where it is defined",
   "platform.properties.modal.columnHeaders.finalValue": "Final value",
-  "platform.properties.modal.columnHeaders.globalValue": "Global value",
+  "platform.properties.modal.columnHeaders.global": "Global properties usage",
   "platform.properties.modal.columnHeaders.moduleValue": "Stored value",
   "platform.properties.modal.columnHeaders.annotations": "Associated annotations",
   "platform.properties.modal.title": "Properties list of the platform: {{platformName}}",

diff --git a/src/app/i18n/label_fr.json b/src/app/i18n/label_fr.json
@@ -341,7 +341,7 @@
   "platform.properties.modal.columnHeaders.propertyName": "Nom de la propriété",
   "platform.properties.modal.columnHeaders.nbUsages": "Nombre de modules où elle est définie",
   "platform.properties.modal.columnHeaders.finalValue": "Valeur finale",
-  "platform.properties.modal.columnHeaders.globalValue": "Valeur globale",
+  "platform.properties.modal.columnHeaders.global": "Usages des propriétés globale",
   "platform.properties.modal.columnHeaders.moduleValue": "Valeur stockée",
   "platform.properties.modal.columnHeaders.annotations": "Annotations associées",
   "platform.properties.modal.title": "Liste des propriétés de la plateforme: {{platformName}}",

diff --git a/src/app/module/properties-list/properties-list-modal.html b/src/app/module/properties-list/properties-list-modal.html
@@ -32,7 +32,7 @@ <h3 flex="50"> {{'platform.properties.modal.title' | translate : {platformName:p
                         {{ 'platform.properties.modal.columnHeaders.finalValue' | translate }}
                    </th>
                    <th class="col-tab-titles">
-                        {{ 'platform.properties.modal.columnHeaders.globalValue' | translate }}
+                        {{ 'platform.properties.modal.columnHeaders.global' | translate }}
                    </th>
                    <th class="col-tab-titles">
                         {{ 'platform.properties.modal.columnHeaders.moduleValue' | translate }}
@@ -45,14 +45,17 @@ <h3 flex="50"> {{'platform.properties.modal.title' | translate : {platformName:p
             <tbody>
                 <tr ng-repeat="property in properties.key_value_properties | filter: propertyWIthBlankFinalValueFilter | filter: {'name': propertiesKeyFilter}">
                     <td class="col-tab-properties-datas">
-                        <div
-                            ng-attr-class="{{isGlobalValuationIsDiffrentWithModuleValuation(property) && 'fa-colored' || 'fa-not-colored' }}"
-                            class="properties-values properties-name">
-                            {{property.name}}
+                        <div  ng-attr-class="{{isGlobalValuationIsDiffrentWithModuleValuation(property) && 'fa-colored' || 'fa-not-colored' }}">                      
+                            <div class="text-container">
+                                <label class="property-label-class"> {{property.name}}</label>
+                                <md-tooltip md-direction="left">
+                                    {{property.name}}
+                                </md-tooltip>
+                            </div>
                         </div>
                     </td>
                     <td class="col-tab-properties-datas">
-                        <div class="properties-values">
+                        <div class="properties-values" >
                             {{getModulesWherePropertyUsed(property)}}
                         </div>
                     </td>
@@ -64,15 +67,46 @@ <h3 flex="50"> {{'platform.properties.modal.title' | translate : {platformName:p
                         </div>
                     </td>
                     <td class="col-tab-properties-datas">
-                        <div class="properties-values">
-                            {{property.globalValue}}
+                        <div layout="column">
+                            <div flex="60">
+                                <div class="text-container" ng-if="(platform.globalPropertyUsages[property.name] | filter : {inModel:'true'}).length">
+                                    <label class="property-label-class">{{property.name}}</label>
+                                    <md-tooltip md-direction="left">
+                                        {{property.name}}
+                                    </md-tooltip>
+                                </div>
+                            </div>
+                            <div flex="10" ng-init="zoomInGlobalProperties = false">
+                                <div layout="column" layout-wrap>
+                                    <span id="properties-globales_zoom-{{property.name}}" flex class="ng-scope zoom-in-property-icon"
+                                          ng-class="zoomInGlobalProperties ? 'fa fa-compress' : 'fa fa-expand'"
+                                          ng-click="zoomInGlobalProperties = !zoomInGlobalProperties"
+                                          ng-show="(platform.globalPropertyUsages[property.name] | filter : {inModel:'true'}).length">
+                                    </span>
+                                </div>
+                            </div>
+                            <div flex="30">
+                                <span ng-show="zoomInGlobalProperties" ng-bind="'properties.platform.globalProperties.used_in' | translate"></span>
+                            </div>
+                            <div ng-show="zoomInGlobalProperties && (platform.globalPropertyUsages[property.name] | filter : {inModel:'true'}).length">
+                                <md-list flex="auto"class="global-property-usage">
+                                    <md-list-item ng-repeat="usage in (platform.globalPropertyUsages[property.name] | filter : {inModel:'true'}) track by $index">
+                                        <div class="text-container">
+                                            <label id="properties-globales_platform-prettyfy-path-label-{{property.name}}" class="global-property-usage-label">{{platform.prettify_path(usage.path)}}</label>
+                                        </div>
+                                    </md-list-item>
+                                </md-list>
+                            </div>
                         </div>
                     </td>
                     <td class="col-tab-properties-datas">
-                        <div
-                            ng-attr-class="{{isGlobalValuationIsDiffrentWithModuleValuation(property) && 'fa-colored' || 'fa-not-colored' }}"
-                            class="properties-values">
-                            {{property.storedValue}}
+                        <div ng-attr-class="{{isGlobalValuationIsDiffrentWithModuleValuation(property) && 'fa-colored' || 'fa-not-colored' }}">
+                            <div class="text-container">
+                                <label class="properties-values">{{property.storedValue}}</label>
+                                <md-tooltip md-direction="left">
+                                    {{property.storedValue}}
+                                </md-tooltip>
+                            </div>
                         </div>
                     </td>
                     <td class= "col-tab-properties-datas">

diff --git a/src/app/module/properties-list/properties-list.css b/src/app/module/properties-list/properties-list.css
@@ -1,10 +1,3 @@
-.properties-values {
-    margin-top: 5px;
-}
-
-.properties-name {
-    font-weight: bold;
-}
 
 .fa-colored {
     color: red;
@@ -47,7 +40,7 @@
     bottom: 0;
     width: 100%;
     height: 60px;
-    background-color: #f5f5f5;
+    background-color: #F5F5F5;
 }
 
 .table-properties-list {
@@ -79,4 +72,25 @@
 
 .dialog-tab {
     overflow-x: hidden;
-}
+}
+
+.property-label-class {
+    text-align: left;
+    font-weight: bold;
+    border: 0px !important;
+    width: 100%;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.text-container {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.text-container > label {
+    display: table-cell;
+    overflow: hidden;
+    word-wrap: break-word;
+  }