Last active
January 16, 2019 08:00
-
-
Save AaronMcCaughan/e5d9ce92dfee55eee8ca676ad8d63653 to your computer and use it in GitHub Desktop.
Barclays TECR Grid View
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .barclays-tecr { | |
| position: relative; | |
| } | |
| imdashboard .barclays-tecr-panel { | |
| border-width: 0; | |
| /*background-color: transparent;*/ | |
| } | |
| imdashboard .barclays-tecr-panel .panel-heading { | |
| border-bottom-width: 0; | |
| } | |
| imdashboard .barclays-tecr-panel .panel-heading h4 { | |
| font-size: 16px; | |
| line-height: 36px; | |
| } | |
| imdashboard .barclays-tecr-panel .panel-heading h4:before { | |
| content: ""; | |
| width: 5px; | |
| background-color: #46ade9; | |
| height: 35px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-right: 5px; | |
| } | |
| imdashboard .barclays-tecr table { | |
| font-size: 12px; | |
| table-layout: fixed; | |
| } | |
| imdashboard .barclays-tecr table tbody tr { | |
| cursor: pointer; | |
| } | |
| imdashboard .barclays-tecr table tbody tr:hover { | |
| background-color: #e5f5fa; | |
| } | |
| imdashboard .barclays-tecr table td { | |
| vertical-align: middle; | |
| border-width: 0; | |
| } | |
| imdashboard .barclays-tecr table.table > tr td:nth-child(2) { | |
| max-width: 250px; | |
| } | |
| imdashboard .barclays-tecr table.table > tr td:nth-child(3) { | |
| max-width: 100px; | |
| } | |
| imdashboard .barclays-tecr .table > thead tr th { | |
| border-bottom-width: 0; | |
| position: relative; | |
| width: 10%; | |
| } | |
| imdashboard .barclays-tecr .table > thead tr th:nth-child(2) { | |
| width: 20%; | |
| } | |
| imdashboard .barclays-tecr thead tr th > div:first-child { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| imdashboard .barclays-tecr thead tr th > div:first-child img { | |
| background: transparent url("/Content/cassete/overall/sort_asc_green.png") center center no-repeat; | |
| width: 16px; | |
| height: 16px; | |
| text-align: right; | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| imdashboard .barclays-tecr thead tr th > div:first-child img.sort-asc { | |
| background-image: url("/Content/cassete/overall/sort_asc_green.png"); | |
| } | |
| imdashboard .barclays-tecr thead tr th > div:first-child img.sort-desc { | |
| background-image: url("/Content/cassete/overall/sort_desc_green.png"); | |
| } | |
| imdashboard .barclays-tecr thead tr th > *:nth-child(2) { | |
| margin-left: -7px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .remove-filter { | |
| bottom: 11px; | |
| position: absolute; | |
| right: 16px; | |
| z-index: 3; | |
| } | |
| imdashboard .barclays-tecr thead tr th .remove-filter div { | |
| width: 15px; | |
| height: 15px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control { | |
| border-width: 0; | |
| background-color: transparent; | |
| box-shadow: none; | |
| /*margin-left: -7px;*/ | |
| border-radius: 2px; | |
| padding: 4px 7px; | |
| height: 27px; | |
| font-weight: normal; | |
| line-height: 18px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control[type=text] { | |
| padding-right: 20px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control.quick-filter { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| z-index: 1; | |
| background-color: #fff; | |
| } | |
| imdashboard .barclays-tecr thead tr th .input-group input.form-control { | |
| width: 50%; | |
| } | |
| imdashboard .barclays-tecr thead tr th .tecr-user { | |
| border-radius: 2px; | |
| height: 27px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .tecr-status, imdashboard .barclays-tecr thead tr th .tecr-type, imdashboard .barclays-tecr thead tr th .tecr-user { | |
| font-size: 12px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .tecr-user .btn { | |
| font-size: 12px; | |
| text-transform: none; | |
| } | |
| imdashboard .barclays-tecr thead tr th .tecr-user .btn:active { | |
| font-size: 12px; | |
| background-color: transparent; | |
| } | |
| imdashboard .barclays-tecr thead tr th .btn.ui-select-match-item { | |
| height: 20px; | |
| line-height: 18px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .btn.ui-select-match-item .close { | |
| opacity: 0.7; | |
| line-height: 0.9; | |
| } | |
| imdashboard .barclays-tecr thead tr th .btn.ui-select-match-item:hover { | |
| background-color: #a6c7ff; | |
| color: #000; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control::placeholder, imdashboard .barclays-tecr thead tr th .ui-select-search::placeholder { | |
| font-weight: normal; | |
| font-size: 12px; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control:hover:not(.btn), imdashboard .barclays-tecr thead tr th .form-control:focus:not(.btn), | |
| imdashboard .barclays-tecr thead tr th .tecr-user:hover, imdashboard .barclays-tecr thead tr th .tecr-user:focus { | |
| box-shadow: inset 0px 0px 0px 2px #a6c7ff; | |
| border-width: 0; | |
| } | |
| imdashboard .barclays-tecr thead tr th .btn-range { | |
| line-height: 19px; | |
| border-width: 0; | |
| padding: 4px 15px 4px 7px; | |
| border-radius: 2px; | |
| color: #777; | |
| text-align: left; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| imdashboard .barclays-tecr thead tr th .form-control.has-value, imdashboard .barclays-tecr thead tr th .tecr-user.has-value, imdashboard .barclays-tecr thead tr th .btn-range.has-value { | |
| /*border: 1px solid #73dd24;*/ | |
| box-shadow: inset 0px 0px 0px 1px #73dd24 !important; | |
| background-color: #f1ffe7; | |
| } | |
| imdashboard .barclays-tecr .input-number::-webkit-inner-spin-button, | |
| imdashboard .barclays-tecr .input-number::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| imdashboard .barclays-tecr .tecr .text-blue { | |
| color: #1B76CA; | |
| } | |
| imdashboard .barclays-tecr .tecr .text-bold { | |
| font-weight: bold; | |
| } | |
| imdashboard .barclays-tecr .tecr .status p { | |
| font-size: 11px; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| padding: 5px 7px; | |
| max-width: 100%; | |
| } | |
| imdashboard .barclays-tecr .tecr .badge { | |
| height: 25px; | |
| width: 25px; | |
| border-radius: 50%; | |
| background: linear-gradient(-45deg, rgba(73, 140, 255, 1) 3%, rgba(0, 178, 255, 1) 100%); | |
| display: inline-block; | |
| margin-right: 5px; | |
| line-height: 20px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| padding: 3px; | |
| font-weight: normal; | |
| } | |
| .barclays-tecr .pagination-sm { | |
| border-radius: 15px; | |
| background-color: #f1f3f6; | |
| box-shadow: inset 0 0 0 1px #ececec; | |
| margin-bottom: 10px; | |
| } | |
| .barclays-tecr .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { | |
| border-top-left-radius: 50%; | |
| border-bottom-left-radius: 50%; | |
| font-size: 15px; | |
| line-height: 20px; | |
| } | |
| .barclays-tecr .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { | |
| border-top-right-radius: 50%; | |
| border-bottom-right-radius: 50%; | |
| font-size: 15px; | |
| line-height: 20px; | |
| } | |
| .barclays-tecr .pagination-sm>li a, .barclays-tecr .pagination-sm>li a:hover { | |
| border-color: transparent; | |
| background-color: transparent; | |
| line-height: 23px; | |
| } | |
| .barclays-tecr .pagination-sm>li:first-child>a:hover, | |
| .barclays-tecr .pagination-sm>li:last-child>a:hover { | |
| line-height: 20px; | |
| } | |
| .barclays-tecr .pagination-sm>li:not(.disabled) a { | |
| color: #000; | |
| } | |
| .barclays-tecr .pagination-sm>li.active a { | |
| border-radius: 50%; | |
| color: #fff; | |
| background-color: #000; | |
| padding: 0px 8px; | |
| /*margin-left: 2px;*/ | |
| margin-top: 5px; | |
| font-weight: bold; | |
| } | |
| .barclays-tecr .multiple-select-custom { | |
| position: relative; | |
| } | |
| .barclays-tecr .multiple-select-custom ul { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| z-index: 10; | |
| float: left; | |
| width: 100%; | |
| max-height: 250px; | |
| overflow-y: auto; | |
| margin: 2px 0 0; | |
| list-style: none; | |
| background-color: #fff; | |
| border: 1px solid rgba(200,200,200,0.5); | |
| } | |
| .barclays-tecr .multiple-select-custom ul li { | |
| padding: 0 15px; | |
| line-height: 30px; | |
| } | |
| .barclays-tecr .multiple-select-custom ul li label { | |
| vertical-align: middle; | |
| } | |
| .barclays-tecr .multiple-select-custom ul li label input[type=checkbox] { | |
| vertical-align: text-bottom; | |
| } | |
| .barclays-tecr .multiple-select-custom ul li:hover { | |
| background-color: #e6f5fa; | |
| color: #1B76CA; | |
| } | |
| .barclays-tecr .multiple-select-custom ul li.action { | |
| line-height: 35px; | |
| } | |
| .barclays-tecr .multiple-select-custom ul li.action .btn-block { | |
| margin: 10px 0 0 0; | |
| } | |
| .barclays-tecr .daterange-backdrop { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 10; | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| .barclays-tecr .daterange-panel.panel.panel-default { | |
| width: auto; | |
| height: auto; | |
| position: absolute; | |
| left: 50%; | |
| top: 50px; | |
| z-index: 11; | |
| background-color: #fefefe; | |
| margin-left: -25%; | |
| } | |
| .barclays-tecr .daterange-panel .alert { | |
| padding: 10px; | |
| margin: 0 5px 5px; | |
| } | |
| .barclays-tecr .daterange-panel .datetime-picker-dropdown { | |
| position: relative; | |
| left: 0 !important; | |
| top: 0 !important; | |
| width: 292px; | |
| } | |
| .barclays-tecr .daterange-panel .datetime-picker-dropdown .pull-right.btn-group { | |
| display: none; | |
| } | |
| .barclays-tecr .daterange-panel .daterange-row { | |
| } | |
| .barclays-tecr .daterange-panel .daterange-col { | |
| display: inline-block; | |
| position: relative; | |
| margin: 0 5px; | |
| vertical-align: top; | |
| } | |
| .barclays-tecr .daterange-panel .daterange-col li { | |
| cursor: pointer; | |
| } | |
| .barclays-tecr .daterange-panel .daterange-col li .btn-group { | |
| margin: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="barclays-tecr" ng-controller="BarclaysWidgetTecr"> | |
| <div class="daterange-backdrop" ng-click="closeChangeStatusDropdown()" ng-if="model.showChangeStatusDropdown"></div> | |
| <button class="btn btn-sm btn-default hidden" ng-click="showDateRangeFilter()" zng-if="!model.showDateRangeFilter">show Date Range Filter</button> | |
| <div class="daterange-backdrop" ng-click="onDateRangeFilterClick($event, prop)" ng-if="model.showDateRangeFilter"></div> | |
| <div class="daterange-panel panel panel-default" ng-click="onDateRangeFilterClick($event, prop)" ng-if="model.showDateRangeFilter"> | |
| <div class="panel-body"> | |
| <div class="alert alert-info" role="alert" ng-if="!isDateRangeValid()">Hint: Select two dates, make sure that Start date is prior the End date, or equal</div> | |
| <div class="daterange-row"> | |
| <div class="daterange-col"><!--options--> | |
| <ul class="list-group"> | |
| <li class="list-group-item small" ng-click="selectDateRange('-7')">Past week</li> | |
| <li class="list-group-item small" ng-click="selectDateRange('-30')">Past month</li> | |
| <li class="list-group-item small" ng-click="selectDateRange('-90')">Past 3 month</li> | |
| <li class="list-group-item small" ng-click="selectDateRange('7')">Next 7 days</li> | |
| <li class="list-group-item small" ng-click="selectDateRange('30')">Next month</li> | |
| <li class="list-group-item small" ng-click="selectDateRange('90')">Next 3 month</li> | |
| </ul> | |
| </div> | |
| <div class="daterange-col"> | |
| <input type="text" readonly class="form-control input-sm" datetime-picker="{{model.dateTimeFormatPicker}}" ng-model="model.dateRangeFilterFrom" enable-time="false" close-on-date-selection="false" is-open="true" datepicker-options="model.dateOptions" re-open-default="date" ng-change="validateDateRange()" /> | |
| </div> | |
| <div class="daterange-col"> | |
| <input type="text" readonly class="form-control input-sm" datetime-picker="{{model.dateTimeFormatPicker}}" ng-model="model.dateRangeFilterTo" enable-time="false" close-on-date-selection="false" is-open="true" datepicker-options="model.dateOptions" re-open-default="date" ng-change="validateDateRange()" /> | |
| </div> | |
| </div> | |
| <button class="btn btn-sm btn-default" ng-click="dateRangeApply()" ng-disabled="!isDateRangeValid()" style="margin-top: 10px">Apply</button> | |
| <button class="btn btn-sm btn-default" ng-click="model.showDateRangeFilter = false" style="margin-top: 10px">Cancel</button> | |
| </div> | |
| </div> | |
| <table class="table table-hover table-condensed"> | |
| <thead> | |
| <tr> | |
| <th> | |
| <div ng-click="applySortField('number')">number <img ng-if="model.filter.sortField == 'RequestNumber'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <input type="number" ng-keypress="filterNumbersOnly($event)" class="form-control input-sm input-number" ng-class="{'has-value' : model.filter.numberValue != ''}" placeholder="Search" ng-model="model.filter.numberValue" ng-change="applyFilter('number')" ng-model-options="{updateOn : 'change blur'}" update-on-enter /> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.numberValue != ''" ng-click="model.filter.numberValue = ''; applyFilter('number')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('title')">title <img ng-if="model.filter.sortField == 'Title'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <input type="text" class="form-control input-sm" ng-class="{'has-value' : model.filter.titleValue != ''}" placeholder="Search" ng-model="model.filter.titleValue" ng-change="applyFilter('title')" ng-model-options="{updateOn : 'change blur'}" update-on-enter /> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.titleValue != ''" ng-click="model.filter.titleValue = ''; applyFilter('title')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('type')">type <img ng-if="model.filter.sortField == 'CRType'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <!--<ui-select ng-if="model.tecrTypes && model.tecrTypes.length" multiple class="tecr-type" ng-class="{'has-value' : model.filter.typeValue.length}" ng-model="model.filter.typeValue" on-select="applyFilter('type')" on-remove="applyFilter('type')" close-on-select="false"> | |
| <ui-select-match placeholder="Search">{{$item.Name}}</ui-select-match> | |
| <ui-select-choices repeat="crType in model.tecrTypes | filter: $select.search"> | |
| <div ng-bind-html="(crType.Name | highlight: $select.search)"></div> | |
| </ui-select-choices> | |
| </ui-select>--> | |
| <div ng-if="model.tecrTypes.length > 0"> | |
| <div deep-blur="model.typeFilterFocused = false; applyFilter('type')" tabindex="-1" class="multiple-select-custom"> | |
| <input class="form-control input-sm" placeholder="Search" ng-class="{'has-value': model.filter.typeValue.length}" | |
| ng-value="model.filter.typeValue.length ? model.filter.typeValue.length+' selected' : ''" | |
| ng-focus="model.typeFilterFocused = true" readonly="readonly" /> | |
| <input class="form-control input-sm quick-filter" placeholder="Search" ng-model="quickTypeFilter.Name" ng-show="model.typeFilterFocused == true" /> | |
| <ul ng-show="model.typeFilterFocused"> | |
| <li class="action" ng-if="(model.tecrTypes|filter:quickTypeFilter).length > 0"> | |
| <button type="button" class="btn btn-default btn-sm btn-block" ng-click="toggleTypeFilter()">{{(model.filter.typeValue.length) ? 'Deselect All' : 'Select All'}}</button> | |
| </li> | |
| <li ng-repeat="option in model.tecrTypes|filter: quickTypeFilter"> | |
| <label class=""> | |
| <input type="checkbox" ng-model="option.selected" ng-keyup="$event.keyCode === 13 && onEnterTypeClick()" /> {{option.Name}} | |
| </label> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.typeValue.length" ng-click="model.filter.typeValue = []; emptyTypeFilter(); applyFilter('type')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('raised')">raised on <img ng-if="model.filter.sortField == 'CreatedDate'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <button class="btn btn-sm btn-default btn-range btn-block" ng-class="{'has-value' : model.filter.raisedValueFrom}" ng-click="showDateRangeFilter('raised')"><span ng-if="model.filter.raisedValueFrom && model.filter.raisedValueTo">{{model.filter.raisedValueFrom | date : model.dateTimeFormatPicker}} : {{model.filter.raisedValueTo | date : model.dateTimeFormatPicker}}</span><span ng-if="!model.filter.raisedValueFrom || !model.filter.raisedValueTo">Set range</span></button> | |
| <div class="input-group hidden"> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.raisedValueFrom}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.raisedValueFrom" ng-click="openFilterCalendar($event, 'raisedFrom', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.raisedDateFromFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('raisedDateFrom')" datepicker-append-to-body="true" /> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.raisedValueTo}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.raisedValueTo" ng-click="openFilterCalendar($event, 'raisedTo', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.raisedDateToFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('raisedDateTo')" datepicker-append-to-body="true" /> | |
| </div> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.raisedValueFrom || model.filter.raisedValueTo" ng-click="model.filter.raisedValueFrom = ''; model.filter.raisedValueTo = ''; applyFilter('raisedDateFromToClean')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('start')">start date <img ng-if="model.filter.sortField == 'StartDate'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <button class="btn btn-sm btn-default btn-range btn-block" ng-class="{'has-value' : model.filter.startValueFrom}" ng-click="showDateRangeFilter('start')"><span ng-if="model.filter.startValueFrom && model.filter.startValueTo">{{model.filter.startValueFrom | date : model.dateTimeFormatPicker}} : {{model.filter.startValueTo | date : model.dateTimeFormatPicker}}</span><span ng-if="!model.filter.startValueFrom || !model.filter.startValueTo">Set range</span></button> | |
| <div class="input-group hidden"> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.startValueFrom}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.startValueFrom" ng-click="openFilterCalendar($event, 'startFrom', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.startDateFromFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('startDateFrom')" datepicker-append-to-body="true" /> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.startValueTo}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.startValueTo" ng-click="openFilterCalendar($event, 'startTo', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.startDateToFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('startDateTo')" datepicker-append-to-body="true" /> | |
| </div> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.startValueFrom || model.filter.startValueTo" ng-click="model.filter.startValueFrom = ''; model.filter.startValueTo = ''; applyFilter('startDateFromToClean')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('end')">end date <img ng-if="model.filter.sortField == 'DueDate'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <button class="btn btn-sm btn-default btn-range btn-block" ng-class="{'has-value' : model.filter.endValueFrom}" ng-click="showDateRangeFilter('end')"><span ng-if="model.filter.endValueFrom && model.filter.endValueTo">{{model.filter.endValueFrom | date : model.dateTimeFormatPicker}} : {{model.filter.endValueTo | date : model.dateTimeFormatPicker}}</span><span ng-if="!model.filter.endValueFrom || !model.filter.endValueTo">Set range</span></button> | |
| <div class="input-group hidden"> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.endValueFrom}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.endValueFrom" ng-click="openFilterCalendar($event, 'endFrom', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.endDateFromFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('endDateFrom')" datepicker-append-to-body="true" /> | |
| <input type="text" readonly class="form-control input-sm" ng-class="{'has-value' : model.filter.endValueTo}" placeholder="dd/mm/yyyy" | |
| ng-model="model.filter.endValueTo" ng-click="openFilterCalendar($event, 'endTo', prop)" datetime-picker="{{model.dateTimeFormatPicker}}" | |
| is-open="model.endDateToFilterOpen" datepicker-options="model.dateOptions" enable-time="false" ng-change="applyFilter('endDateTo')" datepicker-append-to-body="true" /> | |
| </div> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.endValueFrom || model.filter.endValueTo" ng-click="model.filter.endValueFrom = ''; model.filter.endValueTo = ''; applyFilter('endDateFromToClean')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('status')">status <img ng-if="model.filter.sortField == 'Status'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <!--<ui-select ng-if="model.tecrStatuses && model.tecrStatuses.length" multiple class="tecr-status" ng-class="{'has-value' : model.filter.statusValue.length}" ng-model="model.filter.statusValue" on-select="applyFilter('status')" on-remove="applyFilter('status')" close-on-select="false"> | |
| <ui-select-match placeholder="Search">{{$item.Name}}</ui-select-match> | |
| <ui-select-choices repeat="crStatus in model.tecrStatuses | filter: $select.search"> | |
| <div ng-bind-html="(crStatus.Name | highlight: $select.search)"></div> | |
| </ui-select-choices> | |
| </ui-select>--> | |
| <div ng-if="model.tecrStatuses.length > 0"> | |
| <div deep-blur="model.statusFilterFocused = false; applyFilter('status')" tabindex="-1" class="multiple-select-custom"> | |
| <input class="form-control input-sm" placeholder="Search" ng-class="{'has-value': model.filter.statusValue.length}" | |
| ng-value="model.filter.statusValue.length ? model.filter.statusValue.length+' selected' : ''" | |
| ng-focus="model.statusFilterFocused = true" readonly="readonly" /> | |
| <input class="form-control input-sm quick-filter" placeholder="Search" ng-model="quickStatusFilter.Name" ng-show="model.statusFilterFocused == true" /> | |
| <ul ng-show="model.statusFilterFocused"> | |
| <li class="action" ng-if="(model.tecrStatuses|filter:quickStatusFilter).length > 0"> | |
| <button type="button" class="btn btn-default btn-sm btn-block" ng-click="toggleStatusFilter()">{{(model.filter.statusValue.length) ? 'Deselect All' : 'Select All'}}</button> | |
| </li> | |
| <li ng-repeat="option in model.tecrStatuses|filter: quickStatusFilter"> | |
| <label class=""> | |
| <input type="checkbox" ng-model="option.selected" ng-keyup="$event.keyCode === 13 && onEnterStatusClick()" /> {{option.Name}} | |
| </label> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.statusValue.length" ng-click="model.filter.statusValue = []; emptyStatusFilter(); applyFilter('status')"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th> | |
| <div ng-click="applySortField('assignedTo')">assignee <img ng-if="model.filter.sortField == 'AssignedTo'" ng-class="{'sort-asc' : model.filter.sortDir == 'ASC', 'sort-desc' : model.filter.sortDir == 'DESC'}" src="/Content/images/1px.png" /></div> | |
| <ui-select ng-if="model.suggestions['ass'].list && model.suggestions['ass'].list.length" on-select="applyFilter('assignedTo')" class="tecr-user" ng-class="{'has-value' : model.filter.assigneeValue}" ng-model="model.filter.assigneeValue"> | |
| <ui-select-match placeholder="Search" allow-clear="false"> | |
| <i ng-show="$select.selected.Type == 'UserGroup'" class="glyphicon glyphicon-user" aria-hidden="true"></i> {{$select.selected.Value}} | |
| </ui-select-match> | |
| <ui-select-choices repeat="suggestion in model.suggestions['ass'].list | filter: $select.search"> | |
| <div> | |
| <i ng-if="suggestion.Type == 'UserGroup' " class="glyphicon glyphicon-user" aria-hidden="true"></i> <span ng-bind-html="(suggestion.Value| highlight: $select.search)"></span> | |
| </div> | |
| </ui-select-choices> | |
| </ui-select> | |
| <button type="button" class="remove-filter close" ng-if="model.filter.assigneeValue" ng-click="model.filter.assigneeValue = ''; applyFilter('assignedTo')" style="right: 26px;"><div class="x-form-clear-trigger"></div></button> | |
| </th> | |
| <th></th> | |
| <!-- <th> | |
| <div>requestor</div> | |
| <ui-select ng-if="model.suggestions['req'].list && model.suggestions['req'].list.length" on-select="applyFilter('lastModifiedBy')" class="tecr-user" ng-class="{'has-value' : model.filter.requestorValue}" ng-model="model.filter.requestorValue"> | |
| <ui-select-match placeholder="Search" allow-clear="true"> | |
| <i ng-show="$select.selected.Type == 'UserGroup'" class="glyphicon glyphicon-user" aria-hidden="true"></i> {{$select.selected.Value}} | |
| </ui-select-match> | |
| <ui-select-choices repeat="suggestion in model.suggestions['req'].list | filter: $select.search"> | |
| <div> | |
| <i ng-if="suggestion.Type == 'UserGroup' " class="glyphicon glyphicon-user" aria-hidden="true"></i> <span ng-bind-html="(suggestion.Value| highlight: $select.search)"></span> | |
| </div> | |
| </ui-select-choices> | |
| </ui-select> | |
| </th> --> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="item in model.items" class="tecr"> | |
| <td class="text-bold text-blue" ng-click="openTecr(item.ID)">{{item.RequestNumber}}</td> | |
| <td ng-bind="item.Title" data-qtip="{{item.Title}}" class="text-bold truncate" ng-click="openTecr(item.ID)"></td> | |
| <td ng-bind="item.CRType" class="truncate"></td> | |
| <td ng-bind="UtcToLocalTime(item.CreatedDate)"></td> | |
| <td ng-bind="UtcToLocalTime(item.StartDate)"></td> | |
| <td ng-bind="UtcToLocalTime(item.DueDate)"></td> | |
| <td class="status truncate" zzzclick-outside="item.statusFilterFocused = false"> | |
| <p style="background-color:{{item.bgcolor}};color:{{item.color}}" ng-bind="item.Status" zng-click="item.statusFilterFocused = true; model.showChangeStatusDropdown = true"></p> | |
| <div ng-if="model.tecrStatuses.length > 0"> | |
| <div tabindex="-1" class="multiple-select-custom"> | |
| <ul ng-show="item.statusFilterFocused"> | |
| <li ng-repeat="option in model.tecrStatuses" ng-click="changeTecrStatus(item, option)"> | |
| <label class="truncate"> | |
| {{option.Name}} | |
| </label> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </td> | |
| <td><div ng-if="item.asInitials" class="badge" ng-bind="item.asInitials"></div><span ng-bind="item.AssignedTo"></span></td> | |
| <td><button class="btn btn-sm" ng-click="broadcastEnvorinment(item)">View on schedule</button></td> | |
| <!--<td><div class="badge" ng-bind="item.reInitials"></div><span ng-bind="item.lastModifiedBy"></span></td>--> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <nav ng-if="model.filter.totalPagesCount > 1"> | |
| <ul class="pagination pagination-sm"> | |
| <li ng-class="{'disabled' : model.filter.pageNum <= 0 }"> | |
| <a href="#" aria-label="Previous" ng-click="gotoPrevPage()"> | |
| <span aria-hidden="true">←</span> | |
| </a> | |
| </li> | |
| <li ng-class="{'active' : model.filter.pageNum == 0}"> | |
| <a href="#" ng-click="gotoPage(0)">1</a> | |
| </li> | |
| <li ng-if="model.filter.totalPagesCount > 1" ng-class="{'hidden' : model.filter.pageNum < 4}"> | |
| <a href="#">...</a> | |
| </li> | |
| <!-- only pre-prev page --> | |
| <li ng-if="model.filter.pageNum-1 > 1 && model.filter.pageNum-1 < model.filter.totalPagesCount"> | |
| <a href="#" ng-click="gotoPage(model.filter.pageNum-2)">{{model.filter.pageNum-1}}</a> | |
| </li> | |
| <!-- only prev page --> | |
| <li ng-if="model.filter.pageNum > 1 && model.filter.pageNum < model.filter.totalPagesCount"> | |
| <a href="#" ng-click="gotoPage(model.filter.pageNum-1)">{{model.filter.pageNum}}</a> | |
| </li> | |
| <!-- only current page, if it is large then 2 and less than max --> | |
| <li class="active" ng-if="model.filter.pageNum+1 > 1 && model.filter.pageNum+1 < model.filter.totalPagesCount"> | |
| <a href="#" ng-click="gotoPage(model.filter.pageNum)">{{model.filter.pageNum+1}}</a> | |
| </li> | |
| <!-- only next page --> | |
| <li ng-if="model.filter.pageNum+2 > 1 && model.filter.pageNum+2 < model.filter.totalPagesCount"> | |
| <a href="#" ng-click="gotoPage(model.filter.pageNum+1)">{{model.filter.pageNum+2}}</a> | |
| </li> | |
| <!-- only after-next page --> | |
| <li ng-if="model.filter.pageNum+3 > 1 && model.filter.pageNum+3 < model.filter.totalPagesCount"> | |
| <a href="#" ng-click="gotoPage(model.filter.pageNum+2)">{{model.filter.pageNum+3}}</a> | |
| </li> | |
| <!--<li ng-if="model.filter.totalPagesCount > 1" ng-repeat="n in _.range(2, model.filter.totalPagesCount)" ng-class="{'active' : n == model.filter.pageNum + 1, 'hidden' : (n-1 > model.filter.pageNum+2) || (n-1 < model.filter.pageNum-2) }"> | |
| <a href="#" ng-click="gotoPage(n - 1)">{{n}}</a> | |
| </li>--> | |
| <li ng-if="model.filter.totalPagesCount > 1" ng-class="{'hidden' : model.filter.pageNum+4 > model.filter.totalPagesCount-1}"> | |
| <a href="#">...</a> | |
| </li> | |
| <li ng-if="model.filter.totalPagesCount > 1" ng-class="{'active' : model.filter.totalPagesCount == model.filter.pageNum + 1}"> | |
| <a href="#" ng-click="gotoPage(model.filter.totalPagesCount - 1)">{{model.filter.totalPagesCount}}</a> | |
| </li> | |
| <li ng-class="{'disabled' : model.filter.pageNum+1 > model.filter.totalPagesCount-1 }"> | |
| <a href="#" aria-label="Next" ng-click="gotoNextPage()"> | |
| <span aria-hidden="true">→</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('plutora.core').controller('BarclaysWidgetTecr',['$scope', 'localStorageService', 'suggestionService', '$rootScope', function($scope, localStorageService, suggestionService, $rootScope) { | |
| $('.barclays-tecr').closest('.panel').addClass('barclays-tecr-panel'); | |
| $scope._ = _; // provide lodash | |
| // pagination functions | |
| $scope.gotoPage = function(i) { | |
| if ($scope.model.filter.pageNum != i) { | |
| $scope.model.filter.pageNum = i; | |
| $scope.loadPagedTecrs(); | |
| } | |
| }; | |
| $scope.gotoPrevPage = function() { | |
| if ($scope.model.filter.pageNum > 0) { | |
| $scope.model.filter.pageNum = $scope.model.filter.pageNum - 1; | |
| $scope.loadPagedTecrs(); | |
| } | |
| }; | |
| $scope.gotoNextPage = function() { | |
| if ($scope.model.filter.pageNum+1 <= $scope.model.filter.totalPagesCount-1) { | |
| $scope.model.filter.pageNum = $scope.model.filter.pageNum + 1; | |
| $scope.loadPagedTecrs(); | |
| } | |
| }; | |
| $scope.model = { | |
| items: [], | |
| dateTimeFormat: 'DD/MM/YYYY', | |
| dateTimeFormatPicker: formatUtil.getDateFormat(PlutoraApp.DateFormat), | |
| startDateFromFilterOpen: false, | |
| startDateToFilterOpen: false, | |
| endDateFromFilterOpen: false, | |
| endDateToFilterOpen: false, | |
| RaisedDateFromFilterOpen: false, | |
| RaisedDateToFilterOpen: false, | |
| showDateRangeFilter: false, | |
| showChangeStatusDropdown: false, | |
| dateRangeFilterFrom: new Date(), | |
| dateRangeFilterTo: new Date(), | |
| dateRangeFilterFor: '', | |
| dateOptions: { | |
| showWeeks: false, | |
| }, | |
| tecrStatuses: null, | |
| tecrStatusColors: [], | |
| tecrTypes: null, | |
| typeFilterFocused: false, | |
| statusFilterFocused: false, | |
| filter: { | |
| numberValue: '', | |
| titleValue: '', | |
| typeValue: '', | |
| statusValue: '', | |
| assigneeValue: '', | |
| requestorValue: '', | |
| raisedValueFrom: '', | |
| raisedValueTo: '', | |
| startValueFrom: '', | |
| startValueTo: '', | |
| endValueFrom: '', | |
| endValueTo: '', | |
| searchFilters: [ | |
| //{ "property": "Title", "direction": "ASC", "value": "", "operator": "Contains" } | |
| ], | |
| pageNum: 0, | |
| recordsPerPage: 10, | |
| //returnCount: 0, | |
| totalCount: 0, | |
| totalPagesCount: 0, | |
| sortField: null, | |
| sortDir: null, | |
| }, | |
| suggestions: { | |
| 'ass': { | |
| list: [] | |
| }, | |
| 'req': { | |
| list: [] | |
| } | |
| } | |
| }; | |
| // fetch list of users and groups, alternatively we could use 'suggestion' service, however it was not deployed on devruby | |
| $scope.getUsersGroups = function (type) { | |
| var suggType = (type == 'ass') ? 'ass' : 'req'; | |
| var params = { | |
| parameters: { | |
| DataSource1CustomListID: 'Plutora.Domain.UserGroups.UserGroup', | |
| DataSource1Name: 'UserGroup', | |
| DataSource2CustomListID: 'Plutora.Domain.Users.User', | |
| DataSource2Name: 'User', | |
| MultiselectList: 'true' | |
| } | |
| }; | |
| $.ajax({ | |
| type: 'POST', | |
| data: JSON.stringify(params), | |
| url: '/QueryBuilder/GetListComboValueData?getterName=UserGroup', | |
| success: function(data, success) { | |
| data.data.LineList.map(function(group) { | |
| group.Type = 'UserGroup'; | |
| }); | |
| Array.prototype.push.apply($scope.model.suggestions[suggType].list, data.data.LineList); | |
| } | |
| }); | |
| $.ajax({ | |
| type: 'POST', | |
| data: JSON.stringify(params), | |
| url: '/QueryBuilder/GetListComboValueData?getterName=User', | |
| success: function(data, success) { | |
| data.data.LineList.map(function(group) { | |
| group.Type = 'User'; | |
| }); | |
| Array.prototype.push.apply($scope.model.suggestions[suggType].list, data.data.LineList); | |
| } | |
| }); | |
| }; | |
| var defaultKey = 'barclaysWidgetTecr'; | |
| var _getFilter = function(key) { | |
| var accessKey = key || defaultKey; | |
| return localStorageService.get(accessKey); | |
| }; | |
| var _setFilter = function(value, key) { | |
| var accessKey = key || defaultKey; | |
| localStorageService.set(accessKey, value); | |
| }; | |
| var _clearFilter = function (key) { | |
| var accessKey = key || defaultKey; | |
| localStorageService.remove(accessKey); | |
| }; | |
| // custom range date filter begin | |
| $scope.isDateRangeValid = function() { | |
| return $scope.model.dateRangeFilterFrom && $scope.model.dateRangeFilterTo && $scope.model.dateRangeFilterFrom <= $scope.model.dateRangeFilterTo; | |
| }; | |
| $scope.validateDateRange = function() { | |
| if ($scope.model.dateRangeFilterFrom && $scope.model.dateRangeFilterTo && $scope.model.dateRangeFilterFrom > $scope.model.dateRangeFilterTo) { | |
| $scope.model.dateRangeFilterTo = ''; | |
| highlight('End date can not be prior the Start date'); | |
| } | |
| if ($scope.model.dateRangeFilterFrom && !$scope.model.dateRangeFilterTo) { | |
| $scope.model.dateRangeFilterTo = new Date($scope.model.dateRangeFilterFrom.getTime()); | |
| $scope.model.dateRangeFilterTo.setTime($scope.model.dateRangeFilterTo.getTime() + 24*60*60*1000 - 1); | |
| } | |
| }; | |
| $scope.showDateRangeFilter = function(type) { | |
| $scope.model.showDateRangeFilter = true; | |
| $scope.model.dateRangeFilterFor = type; | |
| switch ($scope.model.dateRangeFilterFor) { | |
| case 'raised': | |
| $scope.model.dateRangeFilterFrom = $scope.model.filter.raisedValueFrom; | |
| $scope.model.dateRangeFilterTo = $scope.model.filter.raisedValueTo; | |
| break; | |
| case 'start': | |
| $scope.model.dateRangeFilterFrom = $scope.model.filter.startValueFrom; | |
| $scope.model.dateRangeFilterTo = $scope.model.filter.startValueTo; | |
| break; | |
| case 'end': | |
| $scope.model.dateRangeFilterFrom = $scope.model.filter.endValueFrom; | |
| $scope.model.dateRangeFilterTo = $scope.model.filter.endValueTo; | |
| break; | |
| } | |
| }; | |
| $scope.onDateRangeFilterClick = function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| }; | |
| $scope.dateRangeApply = function() { | |
| switch ($scope.model.dateRangeFilterFor) { | |
| case 'raised': | |
| $scope.model.filter.raisedValueFrom = $scope.model.dateRangeFilterFrom; | |
| $scope.model.filter.raisedValueTo = $scope.model.dateRangeFilterTo; | |
| $scope.applyFilter('raisedDateFrom', true); | |
| $scope.applyFilter('raisedDateTo', true); | |
| $scope.applyFilters(); | |
| break; | |
| case 'start': | |
| $scope.model.filter.startValueFrom = $scope.model.dateRangeFilterFrom; | |
| $scope.model.filter.startValueTo = $scope.model.dateRangeFilterTo; | |
| $scope.applyFilter('startDateFrom', true); | |
| $scope.applyFilter('startDateTo', true); | |
| $scope.applyFilters(); | |
| break; | |
| case 'end': | |
| $scope.model.filter.endValueFrom = $scope.model.dateRangeFilterFrom; | |
| $scope.model.filter.endValueTo = $scope.model.dateRangeFilterTo; | |
| $scope.applyFilter('endDateFrom', true); | |
| $scope.applyFilter('endDateTo', true); | |
| $scope.applyFilters(); | |
| break; | |
| } | |
| $scope.model.showDateRangeFilter = false; | |
| }; | |
| $scope.selectDateRange = function(type) { | |
| switch(type) { | |
| case '-90': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterFrom.setDate($scope.model.dateRangeFilterFrom.getDate() - 90); | |
| break; | |
| case '-30': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterFrom.setDate($scope.model.dateRangeFilterFrom.getDate() - 30); | |
| break; | |
| case '-7': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterFrom.setDate($scope.model.dateRangeFilterFrom.getDate() - 7); | |
| break; | |
| case '7': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterTo.setDate($scope.model.dateRangeFilterTo.getDate() + 7); | |
| break; | |
| case '30': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterTo.setDate($scope.model.dateRangeFilterTo.getDate() + 30); | |
| break; | |
| case '90': | |
| $scope.model.dateRangeFilterFrom = new Date(); | |
| $scope.model.dateRangeFilterTo = new Date(); | |
| $scope.model.dateRangeFilterTo.setDate($scope.model.dateRangeFilterTo.getDate() + 90); | |
| break; | |
| } | |
| }; | |
| // custom range date filter end | |
| $scope.openFilterCalendar = function(e, type) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| switch(type) { | |
| case 'raisedFrom': | |
| $scope.model.startDateFromFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = false; | |
| $scope.model.raisedDateFromFilterOpen = true; | |
| break; | |
| case 'raisedTo': | |
| $scope.model.startDateFromFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = false; | |
| $scope.model.raisedDateFromFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = true; | |
| break; | |
| case 'startFrom': | |
| $scope.model.raisedDateFromFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = false; | |
| $scope.model.startDateFromFilterOpen = true; | |
| break; | |
| case 'startTo': | |
| $scope.model.raisedDateFromFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = false; | |
| $scope.model.startDateFromFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = true; | |
| break; | |
| case 'endFrom': | |
| $scope.model.raisedDateFromFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = false; | |
| $scope.model.startDateFromFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = true; | |
| break; | |
| case 'endTo': | |
| $scope.model.raisedDateFromFilterOpen = false; | |
| $scope.model.raisedDateToFilterOpen = false; | |
| $scope.model.startDateFromFilterOpen = false; | |
| $scope.model.startDateToFilterOpen = false; | |
| $scope.model.endDateFromFilterOpen = false; | |
| $scope.model.endDateToFilterOpen = true; | |
| break; | |
| } | |
| }; | |
| $scope.getInitials = function (fullName) { | |
| if (! fullName) { | |
| return; | |
| } | |
| var names = fullName.split(' '); | |
| var result = names[0].charAt(0); | |
| if (names.length > 1 && names[1].charAt(0) !== ' ') { | |
| result += /*'.' +*/ names[1].charAt(0); | |
| } | |
| return result ? result : ''; | |
| }; | |
| $scope.UtcToLocalTime = function(time) { | |
| return time ? moment.utc(time).local().format($scope.model.dateTimeFormat) : ''; | |
| }; | |
| $scope.overlayColor = function(color){ | |
| //if only first half of color is defined, repeat it | |
| if(color.length < 5) { | |
| color += color.slice(1); | |
| } | |
| return (color.replace('#','0x')) > (0xffffff/2) ? '#333' : '#fff'; | |
| }; | |
| $scope.loadStatusesTypes = function(callback) { | |
| // tecr statuses | |
| $.ajax({ | |
| type: 'POST', | |
| data: { workItemType: 1, lookupIndex: EnumsManager.LookupFieldType.CRStatus }, | |
| url: '/Customisation/GetLookupValues', | |
| success: function(data, success) { | |
| if (success && data.success) { | |
| $scope.model.tecrStatuses = data.data; | |
| $scope.model.tecrStatuses.map(function(status) { | |
| status.Color = status.Color ? status.Color : generateRandomColor(); | |
| $scope.model.tecrStatusColors[status.Name] = status.Color; | |
| status.selected = ($scope.model.filter.statusValue) ? $scope.model.filter.statusValue.includes(status.ID) : false; | |
| }); | |
| } | |
| callback(); | |
| } | |
| }); | |
| // tecr types | |
| $.ajax({ | |
| type: 'POST', | |
| data: { workItemType: 1, lookupIndex: EnumsManager.LookupFieldType.CRType }, | |
| url: '/Customisation/GetLookupValues', | |
| success: function(data, success) { | |
| if (success && data.success) { | |
| $scope.model.tecrTypes = data.data; | |
| $scope.model.tecrTypes.map(function(type) { | |
| type.selected = ($scope.model.filter.typeValue) ? $scope.model.filter.typeValue.includes(type.ID) : false; | |
| }); | |
| } | |
| } | |
| }); | |
| //$scope.getUsersGroups('ass'); // get users for Assignee field | |
| //$scope.getUsersGroups('req'); | |
| }; | |
| $scope.loadTecrs = function(loadingTo, callback) { | |
| loadingIndicator(1); | |
| $('<div class="loading-spin" id="spinTecr"></div>').appendTo(loadingTo).fadeIn(300); | |
| let sortOrder = ($scope.model.filter.sortField && $scope.model.filter.sortDir) ? '&sort='+$scope.model.filter.sortField+'&dir='+$scope.model.filter.sortDir : ''; | |
| $.ajax({ | |
| type: 'GET', | |
| //url: '/proxy/api/TECRs/filter', // external API usage | |
| url: '/Requests/GetCompanyChangeRequestsGrid?page='+ ($scope.model.filter.pageNum+1) +'&start='+$scope.model.filter.pageNum*$scope.model.filter.recordsPerPage+'&limit='+$scope.model.filter.recordsPerPage + sortOrder, // internal api | |
| /*data: { | |
| "searchFilters": $scope.model.filter.searchFilters, | |
| "recordsPerPage": $scope.model.filter.recordsPerPage, "pageNum": $scope.model.filter.pageNum | |
| },*/ | |
| success: function(data, success) { | |
| if (success && data.success) { | |
| var parsedData = data; | |
| $scope.updateFilterPagination(parsedData); | |
| $scope.model.items = parsedData.data.Data; | |
| // define Assignee initials, status color and bgcolor | |
| $scope.model.items.map(function(item) { | |
| item.asInitials = $scope.getInitials(item.AssignedTo); | |
| item.bgcolor = $scope.model.tecrStatusColors[item.Status]; | |
| item.statusFilterFocused = false; | |
| if (item.bgcolor) { | |
| item.color = $scope.overlayColor(item.bgcolor); | |
| } else { | |
| console.log('Need investigate this case'); | |
| } | |
| return item; | |
| }); | |
| $scope.$apply(); | |
| callback(); | |
| } else { | |
| highlight('Unable to fetch TECRs'); | |
| } | |
| loadingIndicator(0); | |
| $('.loading-spin#spinTecr').fadeOut(300, function() { | |
| $(this).remove(); | |
| }); | |
| }, | |
| error: function (e) { | |
| var response = JSON.parse(e.responseText); | |
| highlight('Internal error: ' + response.modelState.internalServerValidationError.toString()); | |
| loadingIndicator(0); | |
| $('.loading-spin#spinTecr').fadeOut(300, function() { | |
| $(this).remove(); | |
| }); | |
| }, | |
| xhrFields: { | |
| withCredentials: true | |
| } | |
| }); | |
| }; | |
| $scope.openTecr = function(id) { | |
| var controller = PlutoraApp.app.getController('PlutoraApp.controller.requests.changeRequestController'); | |
| controller.openRequestWindow(id, function() { // onCloseCallback | |
| $scope.loadPagedTecrs(); | |
| }); | |
| }; | |
| $scope.broadcastEnvorinment = function(tecrObject) { | |
| $rootScope.$broadcast('barclays-envs-scheduler-trigger-tecr', { | |
| selectedTecr: tecrObject | |
| }); | |
| $('.barclays-envs').get(0).scrollIntoView(); | |
| }; | |
| $scope.closeChangeStatusDropdown = function() { | |
| $scope.model.items.map(function(element) { | |
| element.statusFilterFocused = false; | |
| }); | |
| $scope.model.showChangeStatusDropdown = false; | |
| }; | |
| $scope.changeTecrStatus = function(item, status) { | |
| item.Status = status.Name; | |
| /*$.ajax({ | |
| type: 'PUT', | |
| url: '/Requests/UpdateStatus/'+item.ID, | |
| data: status.ID, | |
| success: function(data, success) { | |
| console.log(data); | |
| }, | |
| xhrFields: { | |
| withCredentials: true | |
| } | |
| });*/ | |
| item.statusFilterFocused = false; | |
| $scope.model.showChangeStatusDropdown = false; | |
| }; | |
| $scope.updateFilterPagination = function(results) { | |
| $scope.model.filter.totalCount = results.total; //: 29635 | |
| $scope.model.filter.totalPagesCount = Math.ceil($scope.model.filter.totalCount / $scope.model.filter.recordsPerPage); | |
| }; | |
| $scope.emptyTypeFilter = function () { | |
| $scope.model.tecrTypes.map(function(type) { | |
| type.selected = false; | |
| }); | |
| }; | |
| $scope.emptyStatusFilter = function () { | |
| $scope.model.tecrStatuses.map(function(type) { | |
| type.selected = false; | |
| }); | |
| }; | |
| $scope.toggleTypeFilter = function () { | |
| if ($scope.model.filter.typeValue && $scope.model.filter.typeValue.length) { // deselect all | |
| $scope.model.tecrTypes.map(function(type) { | |
| type.selected = false; | |
| }); | |
| } else { // select all | |
| $scope.model.tecrTypes.map(function(type) { | |
| type.selected = true; | |
| }); | |
| } | |
| $scope.model.filter.typeValue = $scope.model.tecrTypes.filter(function(type) { return type.selected; }).map(function(type) { return type.ID; }); | |
| }; | |
| $scope.toggleStatusFilter = function () { | |
| if ($scope.model.filter.statusValue && $scope.model.filter.statusValue.length) { // deselect all | |
| $scope.model.tecrStatuses.map(function(status) { | |
| status.selected = false; | |
| }); | |
| } else { // select all | |
| $scope.model.tecrStatuses.map(function(status) { | |
| status.selected = true; | |
| }); | |
| } | |
| $scope.model.filter.statusValue = $scope.model.tecrStatuses.filter(function(status) { return status.selected; }).map(function(status) { return status.ID; }); | |
| }; | |
| $scope.onEnterTypeClick = function() { | |
| $scope.model.typeFilterFocused = false; | |
| $scope.applyFilter('type'); | |
| }; | |
| $scope.onEnterStatusClick = function() { | |
| $scope.model.statusFilterFocused = false; | |
| $scope.applyFilter('status'); | |
| }; | |
| $scope.applySortField = function (type) { | |
| let sortField = ''; | |
| switch (type) { | |
| case 'number': | |
| sortField = 'RequestNumber'; | |
| break; | |
| case 'title': | |
| sortField = 'Title'; | |
| break; | |
| case 'type': | |
| sortField = 'CRType'; | |
| break; | |
| case 'status': | |
| sortField = 'Status'; | |
| break; | |
| case 'assignedTo': | |
| sortField = 'AssignedTo'; | |
| break; | |
| case 'raised': | |
| sortField = 'CreatedDate'; | |
| break; | |
| case 'start': | |
| sortField = 'StartDate'; | |
| break; | |
| case 'end': | |
| sortField = 'DueDate'; | |
| break; | |
| } | |
| if (!$scope.model.filter.sortField) { | |
| $scope.model.filter.sortField = sortField; | |
| $scope.model.filter.sortDir = 'ASC'; | |
| } else { | |
| if ($scope.model.filter.sortField != sortField) { | |
| $scope.model.filter.sortField = sortField; | |
| $scope.model.filter.sortDir = 'ASC'; | |
| } else { | |
| $scope.model.filter.sortDir = ($scope.model.filter.sortDir == 'ASC') ? 'DESC' : 'ASC'; | |
| } | |
| } | |
| _setFilter($scope.model.filter); | |
| $scope.loadPagedTecrs(); | |
| }; | |
| $scope.filterNumbersOnly = function (event) { | |
| if (event.which != 13 && event.which != 8 && event.which != 0 && event.which < 48 || event.which > 57) { | |
| event.preventDefault(); | |
| } | |
| }; | |
| $scope.applyFilter = function (type, skipApply) { | |
| var newValue = null, operator = '6', systemType = 'System.String', concreteType = 'String'; | |
| var property = null, columnName = type; | |
| switch (type) { | |
| case 'number': | |
| newValue = $scope.model.filter.numberValue; | |
| systemType = 'System.Int32'; | |
| concreteType = 'Int32'; | |
| property = columnName = 'Number'; | |
| operator = '0'; | |
| break; | |
| case 'title': | |
| newValue = $scope.model.filter.titleValue; | |
| property = columnName = 'Title'; | |
| break; | |
| case 'type': | |
| $scope.model.filter.typeValue = $scope.model.tecrTypes.filter(function(type) { return type.selected; }).map(function(type) { return type.ID; }); | |
| newValue = $scope.model.filter.typeValue.join(','); | |
| systemType = 'System.GuidSetType'; | |
| concreteType = 'GuidSetType'; | |
| property = columnName = 'CRType'; | |
| break; | |
| case 'status': | |
| $scope.model.filter.statusValue = $scope.model.tecrStatuses.filter(function(status) { return status.selected; }).map(function(status) { return status.ID; }); | |
| newValue = $scope.model.filter.statusValue.join(','); | |
| systemType = 'System.GuidSetType'; | |
| concreteType = 'GuidSetType'; | |
| property = columnName = 'CRStatus'; | |
| break; | |
| case 'assignedTo': | |
| newValue = $scope.model.filter.assigneeValue ? $scope.model.filter.assigneeValue.ID : ''; | |
| systemType = 'System.GuidSetType'; | |
| concreteType = 'GuidSetType'; | |
| property = columnName = 'UserGroup&User'; | |
| break; | |
| /*case 'lastModifiedBy': | |
| newValue = $scope.model.filter.requestorValue ? $scope.model.filter.requestorValue.Value : ''; | |
| operator = 'Equals'; | |
| break;*/ | |
| case 'raisedDateFrom': // raised on date | |
| if ($scope.model.filter.raisedValueFrom) { | |
| newValue = moment($scope.model.filter.raisedValueFrom).format($scope.model.dateTimeFormat); | |
| //operator = 'Equals'; | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.DateTime'; | |
| concreteType = 'Nullable`1'; | |
| operator = '2'; | |
| columnName = 'CreatedDate'; | |
| property = 'raisedDateFrom'; | |
| break; | |
| case 'raisedDateTo': // raised on date | |
| if ($scope.model.filter.raisedValueTo) { | |
| newValue = moment($scope.model.filter.raisedValueTo).format($scope.model.dateTimeFormat); | |
| //operator = 'Equals'; | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.DateTime'; | |
| concreteType = 'Nullable`1'; | |
| operator = '3'; | |
| columnName = 'CreatedDate'; | |
| property = 'raisedDateTo'; | |
| break; | |
| case 'raisedDateFromToClean': | |
| var filterIndexFrom = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'raisedDateFrom'}); | |
| if (filterIndexFrom != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexFrom, 1); | |
| } | |
| var filterIndexTo = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'raisedDateTo'}); | |
| if (filterIndexTo != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexTo, 1); | |
| } | |
| $scope.applyFilters(); | |
| break; | |
| case 'startDateFromToClean': | |
| var filterIndexFrom = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'startDateFrom'}); | |
| if (filterIndexFrom != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexFrom, 1); | |
| } | |
| var filterIndexTo = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'startDateTo'}); | |
| if (filterIndexTo != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexTo, 1); | |
| } | |
| $scope.applyFilters(); | |
| break; | |
| case 'endDateFromToClean': | |
| var filterIndexFrom = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'endDateFrom'}); | |
| if (filterIndexFrom != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexFrom, 1); | |
| } | |
| var filterIndexTo = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == 'endDateTo'}); | |
| if (filterIndexTo != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndexTo, 1); | |
| } | |
| $scope.applyFilters(); | |
| break; | |
| case 'startDateFrom': | |
| if ($scope.model.filter.startValueFrom) { | |
| //newValue = $scope.model.filter.startValue.toJSON(); | |
| //newValue = newValue.substr(0, newValue.length-1); // example: 17/10/2018 13:34, this is for external api | |
| // for internal api we have another format: 01/10/2018 09:20 | |
| newValue = $scope.model.filter.startValueFrom; | |
| newValue = moment(newValue).format(getMomentDefaultDateFormat()); | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.FullDateTime'; | |
| concreteType = 'FullDateTime'; | |
| operator = '2'; // after date | |
| columnName = 'StartDate'; | |
| property = 'startDateFrom'; | |
| break; | |
| case 'startDateTo': | |
| if ($scope.model.filter.startValueTo) { | |
| //newValue = $scope.model.filter.startValue.toJSON(); | |
| //newValue = newValue.substr(0, newValue.length-1); // example: 17/10/2018 13:34, this is for external api | |
| // for internal api we have another format: 01/10/2018 09:20 | |
| newValue = $scope.model.filter.startValueTo; | |
| newValue = moment(newValue).format(getMomentDefaultDateFormat()); | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.FullDateTime'; | |
| concreteType = 'FullDateTime'; | |
| operator = '3'; // before date | |
| columnName = 'StartDate'; | |
| property = 'startDateTo'; | |
| break; | |
| case 'endDateFrom': | |
| if ($scope.model.filter.endValueFrom) { | |
| //newValue = $scope.model.filter.endValue.toJSON(); // external api | |
| //newValue = newValue.substr(0, newValue.length-1); // example: 17/10/2018 13:34 | |
| newValue = $scope.model.filter.endValueFrom; // internal api | |
| newValue = moment(newValue).format(getMomentDefaultDateFormat()); | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.FullDateTime'; | |
| concreteType = 'FullDateTime'; | |
| operator = '2'; // after | |
| columnName = 'EndDate'; | |
| property = 'endDateFrom'; | |
| break; | |
| case 'endDateTo': | |
| if ($scope.model.filter.endValueTo) { | |
| //newValue = $scope.model.filter.endValue.toJSON(); // external api | |
| //newValue = newValue.substr(0, newValue.length-1); // example: 17/10/2018 13:34 | |
| newValue = $scope.model.filter.endValueTo; // internal api | |
| newValue = moment(newValue).format(getMomentDefaultDateFormat()); | |
| } else { | |
| newValue = ''; | |
| } | |
| systemType = 'System.FullDateTime'; | |
| concreteType = 'FullDateTime'; | |
| operator = '3'; // before | |
| columnName = 'EndDate'; | |
| property = 'endDateTo'; | |
| break; | |
| } | |
| if (newValue != null) { | |
| var node = $scope.model.filter.searchFilters.filter(function(item) { return item.property == property; }); | |
| var filterModel = node[0]; | |
| if (!filterModel) { | |
| $scope.model.filter.searchFilters.push({ 'property': property, 'ColumnName': columnName, 'Value': '', 'Operator': operator, 'Type': systemType, 'ConcreteType': concreteType }); | |
| var node = $scope.model.filter.searchFilters.filter(function(item) { return item.property == property; }); | |
| filterModel = node[0]; | |
| } | |
| if (newValue) { | |
| filterModel.Value = newValue; | |
| } else { | |
| var filterIndex = $scope.model.filter.searchFilters.findIndex(function(o) { return o.property == property}); | |
| if (filterIndex != -1) { | |
| $scope.model.filter.searchFilters.splice(filterIndex, 1); | |
| } | |
| } | |
| if (! skipApply) { | |
| $scope.applyFilters(); | |
| } | |
| } | |
| }; | |
| $scope.applyFilters = function () { | |
| $scope.model.filter.pageNum = 0; | |
| $scope.model.filter.totalCount = 0; | |
| $scope.model.items = []; | |
| $scope.model.filter.totalPagesCount = 0; | |
| // remove all previous chaied qb conditions | |
| $scope.model.filter.searchFilters.map(function(filter) { | |
| filter.Condition = null; | |
| }); | |
| // set QB filter | |
| var newOperand = null, prevOperand = { | |
| ColumnName: '', | |
| ConcreteType: '', | |
| Condition: 'And', | |
| Operator: 1, | |
| Type: '', | |
| Value: '' | |
| }; | |
| var filterOperands = $scope.model.filter.searchFilters.slice(0); // clone the array as we don't need to override the existing array | |
| for (var i = 0; i < filterOperands.length; i ++) { // stupidity, overnesting | |
| var operand = filterOperands[i]; | |
| newOperand = operand; | |
| prevOperand.Condition = { | |
| Name: 'And', Right: newOperand | |
| }; | |
| prevOperand = newOperand; | |
| } | |
| $.ajax({ | |
| type: 'POST', | |
| url: '/QuerysBuilder/ApplyFilter', | |
| data: { | |
| parameters: [{ | |
| configurationName: 'ChangeRequest', | |
| qbOperand: null, | |
| gridOperand: filterOperands[0] | |
| }] | |
| }, | |
| success: function(data, success) { | |
| $scope.loadPagedTecrs(); | |
| } | |
| }); | |
| _setFilter($scope.model.filter); | |
| }; | |
| var loadingTecrs = false; | |
| $scope.loadPagedTecrs = function () { | |
| if (!loadingTecrs && $scope.model.filter.pageNum <= $scope.model.filter.totalPagesCount) { | |
| loadingTecrs = true; | |
| $scope.loadTecrs('.barclays-tecr', function() { | |
| loadingTecrs = false; | |
| }); | |
| } | |
| }; | |
| $scope.$on('barclays-update-grids-trigger', function(event, args) { | |
| // clear filter | |
| // _clearFilter(); | |
| var storedFilter = _getFilter(); | |
| if (storedFilter) { | |
| $scope.model.filter = storedFilter; | |
| if ($scope.model.filter.startValueFrom) { | |
| $scope.model.filter.startValueFrom = new Date($scope.model.filter.startValueFrom); | |
| } | |
| if ($scope.model.filter.startValueTo) { | |
| $scope.model.filter.startValueTo = new Date($scope.model.filter.startValueTo); | |
| } | |
| if ($scope.model.filter.endValueFrom) { | |
| $scope.model.filter.endValueFrom = new Date($scope.model.filter.endValueFrom); | |
| } | |
| if ($scope.model.filter.endValueTo) { | |
| $scope.model.filter.endValueTo = new Date($scope.model.filter.endValueTo); | |
| } | |
| if ($scope.model.filter.raisedValueFrom) { | |
| $scope.model.filter.raisedValueFrom = new Date($scope.model.filter.raisedValueFrom); | |
| } | |
| if ($scope.model.filter.raisedValueTo) { | |
| $scope.model.filter.raisedValueTo = new Date($scope.model.filter.raisedValueTo); | |
| } | |
| $scope.applyFilters(); | |
| } | |
| $scope.$on('barclays-common-usergroups-trigger', function(event, args) { | |
| if (args.list) { | |
| Array.prototype.push.apply($scope.model.suggestions['ass'].list, args.list); | |
| } | |
| }); | |
| $scope.$on('barclays-common-user-trigger', function(event, args) { | |
| if (args.list) { | |
| Array.prototype.push.apply($scope.model.suggestions['ass'].list, args.list); | |
| } | |
| }); | |
| $scope.loadStatusesTypes(function() { | |
| $scope.loadPagedTecrs(); | |
| }); | |
| }); | |
| }]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment