From 95639bf1cb5ee8e544d68bddd6043050aa6a8578 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Wed, 18 Nov 2020 21:24:47 +0100
Subject: [PATCH] #1669 Normalize the fields used to update objects

---
 frontend/app/index.html                       |  2 +
 frontend/app/styles/custom-fields.css         | 10 ++++
 frontend/app/styles/main.css                  |  7 ++-
 frontend/app/styles/updatable.css             | 38 +++++++++++++++
 .../common/custom-field-input.component.html  | 36 +++++++-------
 .../views/directives/updatable-boolean.html   | 27 +++++------
 .../app/views/directives/updatable-date.html  | 48 +++++++++----------
 .../views/directives/updatable-select.html    | 27 +++++------
 .../directives/updatable-simple-text.html     | 29 +++++------
 .../app/views/directives/updatable-tags.html  | 43 ++++++++++++++++-
 10 files changed, 180 insertions(+), 87 deletions(-)
 create mode 100644 frontend/app/styles/custom-fields.css
 create mode 100644 frontend/app/styles/updatable.css

diff --git a/frontend/app/index.html b/frontend/app/index.html
index 5460192e47..800b08a1ae 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -43,12 +43,14 @@
     <link rel="stylesheet" href="styles/case.css"/>
     <link rel="stylesheet" href="styles/flow.css"/>
     <link rel="stylesheet" href="styles/label.css"/>
+    <link rel="stylesheet" href="styles/updatable.css"/>
     <link rel="stylesheet" href="styles/flex-table.css"/>
     <link rel="stylesheet" href="styles/search.css"/>
     <link rel="stylesheet" href="styles/filters.css"/>
     <link rel="stylesheet" href="styles/dashboard.css"/>
     <link rel="stylesheet" href="styles/case-item.css"/>
     <link rel="stylesheet" href="styles/case-template.css"/>
+    <link rel="stylesheet" href="styles/custom-fields.css"/>
     <link rel="stylesheet" href="styles/directives/page-sizer.css"/>
     <link rel="stylesheet" href="styles/directives/user.css"/>
     <!-- endbuild -->
diff --git a/frontend/app/styles/custom-fields.css b/frontend/app/styles/custom-fields.css
new file mode 100644
index 0000000000..39513cef4c
--- /dev/null
+++ b/frontend/app/styles/custom-fields.css
@@ -0,0 +1,10 @@
+/* .custom-field-input dd {
+    overflow: hidden;
+}
+
+
+div.custom-field-input-wrapper {
+    max-width: 100%;
+    text-overflow: ellipsis;
+}
+ */
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 3b328dba34..0425ebbcd9 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -160,7 +160,7 @@ pre.clearpre {
 /***************************/
 
 .flexwrap {
-    display: flex;
+    display: flex !important;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
@@ -340,6 +340,11 @@ ul.observable-reports-summary li {
     width: 200px !important;
 }
 
+.case-details dd,
+.case-custom-fields dd {
+    margin-left: 200px !important;
+}
+
 .case-custom-fields dt {
     background-color: #f9f9f9;
     padding-left: 5px;
diff --git a/frontend/app/styles/updatable.css b/frontend/app/styles/updatable.css
new file mode 100644
index 0000000000..4ef2fabbbc
--- /dev/null
+++ b/frontend/app/styles/updatable.css
@@ -0,0 +1,38 @@
+.updatable-input {
+    /* border: 1px solid green; */
+}
+
+.updatable-input .updatable-value {
+    vertical-align: top;
+    white-space: pre-wrap
+}
+
+.updatable-input .updatable-input-value-wrapper {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px solid #fff;
+}
+
+.updatable-input .updatable-input-value-wrapper:hover{
+    border-bottom: 1px solid #337ab7;
+    cursor: pointer;
+}
+
+.updatable-input .updatable-input-value-wrapper .updatable-input-icon {
+    display: none;
+    float: right;
+    margin-left: 10px;
+    color: #337ab7;
+}
+
+.updatable-input .updatable-input-value-wrapper .updatable-input-icon.lg {
+    line-height: 18px;
+}
+
+.updatable-input .updatable-input-value-wrapper:hover .updatable-input-icon {
+    display: block;
+}
+
+.updatable-input.updatable-input-tags {
+
+}
diff --git a/frontend/app/views/components/common/custom-field-input.component.html b/frontend/app/views/components/common/custom-field-input.component.html
index cde52043e6..6d62361643 100644
--- a/frontend/app/views/components/common/custom-field-input.component.html
+++ b/frontend/app/views/components/common/custom-field-input.component.html
@@ -1,4 +1,4 @@
-<dl class="dl-horizontal">
+<dl class="dl-horizontal custom-field-input">
     <dt class="pull-left" uib-tooltip="{{$ctrl.field.description}}">{{$ctrl.field.name}}</dt>
     <dd ng-if="$ctrl.editable && $ctrl.field.options.length > 0">
         <updatable-select
@@ -7,27 +7,29 @@
             value="$ctrl.value"></updatable-select>
     </dd>
     <dd ng-if="$ctrl.editable && $ctrl.field.options.length === 0" ng-switch="$ctrl.field.type">
-        <updatable-simple-text ng-switch-when="string"
-            input-type="text" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-simple-text>
+        <div class="custom-field-input-wrapper">
+            <updatable-simple-text ng-switch-when="string"
+                input-type="text" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-simple-text>
 
-        <updatable-date ng-switch-when="date" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-date>
+            <updatable-date ng-switch-when="date" on-update="$ctrl.updateField(newValue)" value="$ctrl.value"></updatable-date>
 
-        <updatable-simple-text ng-switch-when="integer"
-            input-type="integer"
-            on-update="$ctrl.updateField(newValue)"
-            value="$ctrl.value"></updatable-simple-text>
+            <updatable-simple-text ng-switch-when="integer"
+                input-type="integer"
+                on-update="$ctrl.updateField(newValue)"
+                value="$ctrl.value"></updatable-simple-text>
 
-        <updatable-simple-text ng-switch-when="float"
-           input-type="float"
-           on-update="$ctrl.updateField(newValue)"
-           value="$ctrl.value"></updatable-simple-text>
+            <updatable-simple-text ng-switch-when="float"
+               input-type="float"
+               on-update="$ctrl.updateField(newValue)"
+               value="$ctrl.value"></updatable-simple-text>
 
-        <updatable-boolean ng-switch-when="boolean"
-            input-type="number"
-            on-update="$ctrl.updateField(newValue)"
-            value="$ctrl.value"></updatable-boolean>
+            <updatable-boolean ng-switch-when="boolean"
+                input-type="number"
+                on-update="$ctrl.updateField(newValue)"
+                value="$ctrl.value"></updatable-boolean>
 
-        <span ng-switch-default>Not Editable</span>
+            <span ng-switch-default>Not Editable</span>
+        </div>
     </dd>
     <dd ng-if="!$ctrl.editable" ng-switch="$ctrl.field.type">
         <span ng-switch-when="date">{{$ctrl.value | shortDate}}</span>
diff --git a/frontend/app/views/directives/updatable-boolean.html b/frontend/app/views/directives/updatable-boolean.html
index 0c9c7e6e16..f2eb94ab1b 100644
--- a/frontend/app/views/directives/updatable-boolean.html
+++ b/frontend/app/views/directives/updatable-boolean.html
@@ -1,15 +1,14 @@
-<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-	<span ng-if="value!==null && value !==''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value">{{value ? trueText || 'True' : falseText || 'False'}}</span>
-	<span ng-if="value === null || value === undefined" style="vertical-align: top;" class="updatable-value text-warning"><em>Not Specified</em></span>
-	<small ng-show="active">
-		<a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
-			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
-		</a>
-	</small>
-	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
-</span>
-<span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
-	<form ng-submit="update()">
+<div class="updatable-input updatable-input-boolean">
+	<span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()">
+		<span ng-if="value!==null && value !==''" class="updatable-value">{{value ? trueText || 'True' : falseText || 'False'}}</span>
+		<span ng-if="value === null || value === undefined" class="updatable-value text-warning"><em>Not Specified</em></span>
+
+		<small class="updatable-input-icon">
+			<i class="glyphicon glyphicon-pencil"></i>
+		</small>
+	</span>
+
+	<form ng-submit="update()" ng-show="updatable.updating">
 		<div class="input-group input-group-sm">
 			<select class="form-control input-sm" ng-model="value" ng-options="v for v in [true, false]" ng-change="update()"></select>
 			<span class="input-group-btn">
@@ -19,7 +18,7 @@
 				<button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
 					<i class="text-danger glyphicon glyphicon-remove"></i>
 				</button>
-            </span>
+	        </span>
 		</div>
 	</form>
-</span>
+</div>
diff --git a/frontend/app/views/directives/updatable-date.html b/frontend/app/views/directives/updatable-date.html
index 3e4a1e2964..6dc9c05410 100644
--- a/frontend/app/views/directives/updatable-date.html
+++ b/frontend/app/views/directives/updatable-date.html
@@ -1,29 +1,27 @@
-<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-    <span ng-if="value!==null && value !==''" style="vertical-align:top" class="updatable-value">{{value | shortDate}}</span>
-    <span ng-if="value===null || value ===''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value text-warning"><em>Not Specified</em></span>
-    <small ng-show="active">
-        <a style="cursor: pointer;" target="_self" tooltip-popup-delay='500' uib-tooltip="edit">
-            <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
-        </a>
-    </small>
-    <small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
-</span>
-<span ng-init="updatable.dropdownOpen=false" ng-show="updatable.updating">
+<div class="updatable-input updatable-input-date">
+    <span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()">
+        <span ng-if="value!==null && value !==''" class="updatable-value">{{value | shortDate}}</span>
+        <span ng-if="value===null || value ===''" class="updatable-value text-warning"><em>Not Specified</em></span>
 
-    <form ng-submit="update()">
-		<div class="input-group input-group-sm">
-			<input class="input-datetime form-control input-sm" ng-click="dateNow=false" ng-model="humanDate" type="datetime"/>
-			<span class="input-group-btn">
+        <small class="updatable-input-icon">
+            <i class="glyphicon glyphicon-pencil"></i>
+        </small>
+    </span>
+
+    <form ng-submit="update()" ng-show="updatable.updating">
+    	<div class="input-group input-group-sm">
+    		<input class="input-datetime form-control input-sm" ng-click="dateNow=false" ng-model="humanDate" type="datetime"/>
+    		<span class="input-group-btn">
                 <span uib-btn-checkbox="" class="btn btn-sm btn-primary" ng-model="dateNow">
-					Now
-				</span>
-				<button class="btn btn-sm btn-default" type="submit">
-					<i class="text-success glyphicon glyphicon-ok"></i>
-				</button>
+    				Now
+    			</span>
+    			<button class="btn btn-sm btn-default" type="submit">
+    				<i class="text-success glyphicon glyphicon-ok"></i>
+    			</button>
                 <button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
-					<i class="text-danger glyphicon glyphicon-remove"></i>
-				</button>
+    				<i class="text-danger glyphicon glyphicon-remove"></i>
+    			</button>
             </span>
-		</div>
-	</form>
-</span>
+    	</div>
+    </form>
+</div>
diff --git a/frontend/app/views/directives/updatable-select.html b/frontend/app/views/directives/updatable-select.html
index 4fc1d7a403..e901a03d06 100644
--- a/frontend/app/views/directives/updatable-select.html
+++ b/frontend/app/views/directives/updatable-select.html
@@ -1,15 +1,14 @@
-<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-	<span ng-if="value!==null && value !==''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value">{{value}}</span>
-	<span ng-if="value === null || value === undefined || value === ''" style="vertical-align: top;" class="updatable-value text-warning"><em>Not Specified</em></span>
-	<small ng-show="active">
-		<a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
-			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
-		</a>
-	</small>
-	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
-</span>
-<span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
-	<form ng-submit="update()">
+<div class="updatable-input updatable-input-select">
+	<span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()">
+		<span ng-if="value!==null && value !==''" class="updatable-value">{{value}}</span>
+		<span ng-if="value === null || value === undefined || value === ''" class="updatable-value text-warning"><em>Not Specified</em></span>
+
+		<small class="updatable-input-icon">
+			<i class="glyphicon glyphicon-pencil"></i>
+		</small>
+	</span>
+
+	<form ng-submit="update()" ng-show="updatable.updating">
 		<div class="input-group input-group-sm">
 			<select class="form-control input-sm" ng-model="value" ng-options="v for v in options" ng-change="update()"></select>
 			<span class="input-group-btn">
@@ -19,7 +18,7 @@
 				<button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
 					<i class="text-danger glyphicon glyphicon-remove"></i>
 				</button>
-            </span>
+	        </span>
 		</div>
 	</form>
-</span>
+</div>
diff --git a/frontend/app/views/directives/updatable-simple-text.html b/frontend/app/views/directives/updatable-simple-text.html
index ddabf16bbc..21cd440100 100644
--- a/frontend/app/views/directives/updatable-simple-text.html
+++ b/frontend/app/views/directives/updatable-simple-text.html
@@ -1,17 +1,18 @@
-<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-	<span ng-if="value!==null && value !==''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value">{{value}}</span>
-	<span ng-if="value===null || value ===''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value text-warning"><em>Not Specified</em></span>
-	<small ng-show="active">
-		<a tooltip-popup-delay='500' uib-tooltip="edit" target="_self" style="cursor: pointer;">
-			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
-		</a>
-	</small>
-	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
-</span>
-<span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
-	<form ng-submit="update()">
+<div class="updatable-input updatable-input-text">
+	<span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()">
+		<span ng-if="value!==null && value !==''" class="updatable-value">{{value}}</span>
+		<span ng-if="value===null || value ===''" class="updatable-value text-warning"><em>Not Specified</em></span>
+
+		<small class="updatable-input-icon">
+			<i class="glyphicon glyphicon-pencil"></i>
+		</small>
+	</span>
+
+	<form ng-submit="update()" ng-show="updatable.updating">
 		<div class="input-group input-group-sm">
+
 			<input type="{{ {'float': 'number', 'integer': 'number', 'text': 'text'}[inputType] }}" step="{{ {'float':'.01', 'integer': '1'}[inputType] }}" class="form-control input-sm" placeholder="{{placeholder}}" ng-model="value" autofocus="autofocus">
+
 			<span class="input-group-btn">
 				<button class="btn btn-sm btn-default" type="submit">
 					<i class="text-success glyphicon glyphicon-ok"></i>
@@ -19,7 +20,7 @@
 				<button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
 					<i class="text-danger glyphicon glyphicon-remove"></i>
 				</button>
-            </span>
+	        </span>
 		</div>
 	</form>
-</span>
+</div>
diff --git a/frontend/app/views/directives/updatable-tags.html b/frontend/app/views/directives/updatable-tags.html
index 46ceceb402..d388b77f09 100644
--- a/frontend/app/views/directives/updatable-tags.html
+++ b/frontend/app/views/directives/updatable-tags.html
@@ -1,16 +1,54 @@
+<div class="updatable-input updatable-input-tags">
+    <span class="updatable-input-value-wrapper" ng-hide="updatable.updating" ng-click="edit()"
+        ng-class="{'tags-list flexwrap': value.length > 0}">
+        <span class="updatable-value text-warning" ng-show="!value || value.length === 0"><em>Not Specified</em></span>
+
+        <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span>
+
+        <small class="updatable-input-icon" ng-class="{'lg': value.length > 0}">
+            <i class="glyphicon glyphicon-pencil"></i>
+        </small>
+
+
+        <!-- <span class="tags-list flexwrap" ng-if="value.length > 0">
+
+
+            <small class="updatable-input-icon" style="line-height:18px;">
+                <i class="glyphicon glyphicon-pencil"></i>
+            </small>
+        </span> -->
+    </span>
+
+    <span ng-show="updatable.updating">
+        <div class="form-group">
+            <tags-input class="ti-input-sm" min-length="2" ng-model="value" placeholder="Add labels" replace-spaces-with-dashes="false">
+                <auto-complete ng-if="source" min-length="3" debounce-delay="400" source="source($query)"></auto-complete>
+            </tags-input>
+        </div>
+        <div class="btn-group btn-group-sm">
+            <button type="button" class="btn btn-sm btn-default" ng-click='update()'>
+                <i class="text-success glyphicon glyphicon-ok"></i>
+            </button>
+            <button type="button" class="btn btn-sm btn-default" ng-click='cancel()'>
+                <i class="text-danger glyphicon glyphicon-remove"></i>
+            </button>
+        </div>
+    </span>
+</div>
+
+<!--
 <span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
     <span class="updatable-value" ng-show="!value || value.length === 0" style="vertical-align:top; white-space: pre-wrap"><span class="text-warning"><em>Not Specified</em></span></span>
 
     <span class="tags-list flexwrap">
         <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span>
-        <!-- -->
+
         <small ng-show="active" style="line-height:18px;" class="mb-xxxs mr-xxxs">
             <a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
                 <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
             </a>
         </small>
     </span>
-
 </span>
 
 <span ng-show="updatable.updating">
@@ -28,3 +66,4 @@
         </span>
     </div>
 </span>
+-->