Skip to content

Commit 8fcadfe

Browse files
authored
Feature/multi select (#2474)
* Add README for MultiSelect widget in portal * Add multi-select component for complaints This script implements a multi-select component for complaints, allowing users to search, select, and paginate through incidents.
1 parent f92aa64 commit 8fcadfe

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
The custom widget that enables you to select multiple incidents in the portal page.
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
//HTML code that displays the incidents to select multiple at once.
2+
<div class="panel panel-default m-t">
3+
<div class="panel-heading">
4+
<h3 class="m-b-md">Complaints</h3>
5+
6+
<div class="form-inline"
7+
style="display:flex; align-items:center; flex-wrap:wrap; gap:12px;">
8+
<!-- Search -->
9+
<div class="form-group" style="margin-left:auto;">
10+
<div class="input-group">
11+
<input type="text"
12+
class="form-control"
13+
placeholder="Search complaints..."
14+
ng-model="c.searchText"
15+
ng-keypress="$event.keyCode==13 && c.searchIncidents()"
16+
style="min-width:250px;">
17+
<span class="input-group-addon" ng-click="c.searchIncidents()">
18+
<i class="fa fa-search"></i>
19+
</span>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
25+
<div class="panel-body">
26+
<!-- Selected Count Indicator -->
27+
<div class="text-right text-muted" ng-if="c.getSelectedCount() > 0" style="margin-bottom: 8px;">
28+
<span class="label label-info" style="font-size: 13px; padding: 6px 10px;">
29+
{{c.getSelectedCount()}} complaint<span ng-if="c.getSelectedCount() > 1">s</span> selected
30+
(across pages)
31+
</span>
32+
</div>
33+
34+
<table id="incidentsList"
35+
class="table table-hover table-striped table-bordered"
36+
role="table">
37+
<thead>
38+
<tr>
39+
<th>
40+
<input type="checkbox"
41+
ng-checked="c.isAllSelectedOnPage()"
42+
ng-click="c.toggleSelectAll($event)"
43+
title="Select all on this page" />
44+
</th>
45+
<th>
46+
<a href="javascript:void(0)" ng-click="sortType='batchno'; sortReverse=!sortReverse">
47+
Run Date
48+
<span ng-show="sortType=='number' && !sortReverse" class="fa fa-caret-down"></span>
49+
<span ng-show="sortType=='number' && sortReverse" class="fa fa-caret-up"></span>
50+
</a>
51+
</th>
52+
<th><a href="javascript:void(0)" ng-click="sortType='caseid'; sortReverse=!sortReverse">
53+
Case ID
54+
<span ng-show="sortType == 'caller_id' && !sortReverse" class="fa fa-caret-down"></span>
55+
<span ng-show="sortType == 'caller_id' && sortReverse" class="fa fa-caret-up"></span>
56+
</a></th>
57+
<th><a href="javascript:void(0)" ng-click="sortType = 'policyid'; sortReverse = !sortReverse">
58+
Policy ID
59+
<span ng-show="sortType == 'short_description' && !sortReverse" class="fa fa-caret-down"></span>
60+
<span ng-show="sortType == 'short_description' && sortReverse" class="fa fa-caret-up"></span>
61+
</a></th>
62+
63+
</tr>
64+
</thead>
65+
66+
<tbody>
67+
<tr ng-repeat="item in c.incidentsList | orderBy:sortType:sortReverse">
68+
<td>
69+
<input type="checkbox"
70+
ng-checked="c.isChecked(item.sys_id)"
71+
ng-click="c.toggleCheckbox(item.sys_id, $event)" />
72+
</td>
73+
<td><a href="{{item.url}}">{{item.batchno}}</a></td>
74+
<td>{{item.caseid}}</td>
75+
<td>{{item.policyid}}</td>
76+
</tr>
77+
<tr ng-if="!c.complaintsList.length">
78+
<td colspan="9" class="text-center text-muted">No incidents found.</td>
79+
</tr>
80+
</tbody>
81+
</table>
82+
83+
<!-- Pagination Controls -->
84+
<div class="pagination-controls text-center" style="margin-top:10px;">
85+
<button class="btn btn-default" ng-disabled="c.pageNumber===1" ng-click="c.prevPage()">Prev</button>
86+
<span> Page {{c.pageNumber}} of {{c.totalPages}} </span>
87+
<button class="btn btn-default" ng-disabled="c.pageNumber===c.totalPages" ng-click="c.nextPage()">Next</button>
88+
</div>
89+
</div>
90+
</div>

0 commit comments

Comments
 (0)