Skip to content

Commit

Permalink
#1669 Normalize the fields used to update objects
Browse files Browse the repository at this point in the history
  • Loading branch information
nadouani committed Nov 18, 2020
1 parent ec7739d commit 95639bf
Show file tree
Hide file tree
Showing 10 changed files with 180 additions and 87 deletions.
2 changes: 2 additions & 0 deletions frontend/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
10 changes: 10 additions & 0 deletions frontend/app/styles/custom-fields.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* .custom-field-input dd {
overflow: hidden;
}
div.custom-field-input-wrapper {
max-width: 100%;
text-overflow: ellipsis;
}
*/
7 changes: 6 additions & 1 deletion frontend/app/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ pre.clearpre {
/***************************/

.flexwrap {
display: flex;
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
Expand Down Expand Up @@ -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;
Expand Down
38 changes: 38 additions & 0 deletions frontend/app/styles/updatable.css
Original file line number Diff line number Diff line change
@@ -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 {

}
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
Expand Down
27 changes: 13 additions & 14 deletions frontend/app/views/directives/updatable-boolean.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
48 changes: 23 additions & 25 deletions frontend/app/views/directives/updatable-date.html
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 13 additions & 14 deletions frontend/app/views/directives/updatable-select.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
29 changes: 15 additions & 14 deletions frontend/app/views/directives/updatable-simple-text.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
<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>
</button>
<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>
43 changes: 41 additions & 2 deletions frontend/app/views/directives/updatable-tags.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -28,3 +66,4 @@
</span>
</div>
</span>
-->

0 comments on commit 95639bf

Please sign in to comment.