|
36 | 36 | :containerHeight="containerHeight" |
37 | 37 | :disableOption="disableComponents" |
38 | 38 | :listItemCardStyle="listItemCardStyle" |
39 | | - :selectedFilterTaskVariable="selectedFilterTaskVariable" |
| 39 | + :filterList="filterList" |
40 | 40 | /> |
41 | 41 | </div> |
42 | 42 | <div |
|
87 | 87 | > <span class="mx-4">|</span>Application ID <strong>#{{ task.applicationId }}</strong> |
88 | 88 | </p> |
89 | 89 | </div> |
90 | | - <div class="d-flex justify-content-between mb-4"> |
| 90 | + <div class="d-flex justify-content-start mb-4"> |
91 | 91 | <section v-if="!hideTaskDetails.assignee" class="task-assignee"> |
92 | 92 | <label class="fw-bold">Task assignee</label> |
93 | 93 | <button |
|
112 | 112 | class="d-flex w-100 mt-1" |
113 | 113 | > |
114 | 114 | <v-select |
115 | | - :label="selectSearchType" |
| 115 | + :label="selectSearchType!=='email'?selectSearchType:'code'" |
116 | 116 | :options="reviewerUsersList" |
117 | 117 | :filterable="false" |
118 | 118 | v-model="userSelected" |
119 | 119 | :placeholder="`Search by ${selectSearchType}`" |
120 | 120 | @search="onUserSearch" |
121 | 121 | class="select-assignee" |
122 | | - /> |
| 122 | + > |
| 123 | + <template v-if="selectSearchType==='email' " v-slot:option="option"> |
| 124 | + <div>{{option.code}}</div> |
| 125 | + <div>({{option.email}})</div> |
| 126 | + </template> |
| 127 | + </v-select> |
123 | 128 | <div class="dropdown assignee-search-filter mx-2"> |
124 | 129 | <button |
125 | 130 | class="btn btn-secondary dropdown-toggle" |
|
194 | 199 | </button> |
195 | 200 | <div class="d-flex align-items-baseline group-name"> |
196 | 201 | <template v-if="groupListNames && groupListNames.length"> |
197 | | - {{ String(groupListNames) }} |
| 202 | + <p class="text-truncate"> {{ String(groupListNames) }}</p> |
198 | 203 | </template> |
199 | 204 | <button |
200 | 205 | v-else |
|
217 | 222 | <div class="modal-content"> |
218 | 223 | <div class="modal-header"> |
219 | 224 | <h5 class="modal-title">MANAGE GROUPS</h5> |
220 | | - <button |
| 225 | + <i |
221 | 226 | type="button" |
222 | | - class="btn-close mx-2" |
| 227 | + class="fa fa-times mx-2" |
223 | 228 | data-bs-dismiss="modal" |
224 | 229 | aria-label="Close" |
225 | | - ></button> |
| 230 | + title="cancel" |
| 231 | + ></i> |
226 | 232 | </div> |
227 | 233 | <div class="modal-body px-4 pb-5"> |
228 | 234 | <i class="fa fa-exclamation-circle"></i> |
|
291 | 297 | v-else |
292 | 298 | v-model="task.followUp" |
293 | 299 | :popover="{ visibility: 'click' }" |
| 300 | + @input="updateFollowUpDate" |
294 | 301 | > |
295 | 302 | <template v-slot="{ inputValue, inputEvents }"> |
296 | 303 | <div class="input-group"> |
297 | 304 | <input |
298 | 305 | class="form-control" |
299 | 306 | :value="inputValue" |
300 | 307 | v-on="inputEvents" |
301 | | - @input="updateFollowUpDate" |
302 | 308 | placeholder="mm/dd/yyyy" |
303 | 309 | /> |
304 | 310 | <i class="fa fa-calendar-alt"></i> |
|
329 | 335 | v-else |
330 | 336 | v-model="task.due" |
331 | 337 | :popover="{ visibility: 'click' }" |
| 338 | + @input="updateDueDate" |
332 | 339 | > |
333 | 340 | <template v-slot="{ inputValue, inputEvents }"> |
334 | 341 | <div class="input-group"> |
335 | 342 | <input |
336 | 343 | class="form-control" |
337 | 344 | :value="inputValue" |
338 | 345 | v-on="inputEvents" |
339 | | - @input="updateDueDate" |
340 | 346 | placeholder="mm/dd/yyyy" |
341 | 347 | /> |
342 | 348 | <i class="fa fa-calendar-alt"></i> |
|
455 | 461 | <span class="sr-only">Loading...</span> |
456 | 462 | </div> |
457 | 463 | </div> |
458 | | - <div |
459 | | - class="diagram-full-screen" |
460 | | - id="canvas" |
461 | | - ></div> |
| 464 | + <div |
| 465 | + v-show="!diagramLoading" |
| 466 | + class="cft-bpmn-viewer-container" |
| 467 | + > |
| 468 | + <div |
| 469 | + class="cft-bpm-container cft-grab-cursor" |
| 470 | + id="process-diagram-container" |
| 471 | + ></div> |
| 472 | + </div> |
462 | 473 | </div> |
463 | 474 | </div> |
464 | 475 | </div> |
|
511 | 522 | import "font-awesome/scss/font-awesome.scss"; |
512 | 523 | import "../styles/user-styles.css"; |
513 | 524 | import "../styles/camundaFormIOTasklist.scss"; |
| 525 | +import * as bootstrap from 'bootstrap'; |
514 | 526 | import { |
515 | 527 | ALL_FILTER, |
516 | 528 | CamundaRest, |
@@ -547,11 +559,11 @@ import { |
547 | 559 | UserPayload, |
548 | 560 | UserSearchListLabelPayload, |
549 | 561 | } from "../models"; |
550 | | -import bootstrap, { |
| 562 | +import { |
551 | 563 | Toast, |
552 | 564 | Tooltip |
553 | 565 | } from 'bootstrap'; |
554 | | -import BpmnViewer from "bpmn-js"; |
| 566 | +import BpmnViewer from "bpmn-js/dist/bpmn-navigated-viewer.production.min.js"; |
555 | 567 | import DatePicker from "v-calendar/lib/components/date-picker.umd"; |
556 | 568 | import ExpandContract from "./addons/ExpandContract.vue"; |
557 | 569 | import FormEdit from "./form/Edit.vue"; |
@@ -866,24 +878,23 @@ export default class Tasklist extends Mixins(TaskListMixin) { |
866 | 878 | ); |
867 | 879 | this.xmlData = getProcessResult.data.bpmn20Xml; |
868 | 880 | const activityList = getActivity.data.childActivityInstances; |
869 | | - const div = document.getElementById("canvas"); |
| 881 | + const div = document.getElementById("process-diagram-container"); |
870 | 882 | if (div) { |
871 | 883 | div.innerHTML = ""; |
872 | 884 | } |
| 885 | + this.diagramLoading = false; |
| 886 | +
|
873 | 887 | const viewer = new BpmnViewer({ |
874 | | - container: "#canvas", |
| 888 | + container: "#process-diagram-container", |
875 | 889 | }); |
876 | | -
|
877 | | - this.diagramLoading = false; |
878 | 890 | await viewer.importXML(this.xmlData); |
879 | | - viewer.get("canvas").zoom("fit-viewport"); |
880 | | - for (let i: number = 0; i < activityList.length; i++) { |
881 | | - viewer.get("canvas").addMarker({ |
882 | | - 'id': activityList[i].activityId |
883 | | - }, 'highlight'); |
884 | | - } |
885 | | -
|
886 | | -
|
| 891 | + viewer.get("canvas").addMarker( |
| 892 | + { |
| 893 | + id: activityList[0].activityId, |
| 894 | + }, |
| 895 | + "highlight" |
| 896 | + ); |
| 897 | + |
887 | 898 | } |
888 | 899 |
|
889 | 900 | async getDiagramDetails() { |
@@ -1094,7 +1105,7 @@ export default class Tasklist extends Mixins(TaskListMixin) { |
1094 | 1105 | const referenceobject = this.task; |
1095 | 1106 | try { |
1096 | 1107 | if (this.task?.due !== null) { |
1097 | | - referenceobject["due"] = getISODateTime(this.task?.due); |
| 1108 | + referenceobject.due = getISODateTime(this.task.due); |
1098 | 1109 | await this.updateTaskDatedetails(this.task.id!, referenceobject); |
1099 | 1110 | } |
1100 | 1111 | } catch { |
@@ -1226,21 +1237,7 @@ export default class Tasklist extends Mixins(TaskListMixin) { |
1226 | 1237 | } |
1227 | 1238 |
|
1228 | 1239 | if(this.filterList.length>0){ |
1229 | | - this.selectedfilterId = this.taskDefaultFilterListNames.length ? this.filterList[0].id : findFilterIdForDefaultFilterName(this.filterList, ALL_FILTER); |
1230 | | - this.filterList.forEach(filterListItem=>{ |
1231 | | - if(filterListItem.id===this.selectedfilterId){ |
1232 | | - const newFilterVaribale= { |
1233 | | -
|
1234 | | - }; |
1235 | | - filterListItem.properties?.variables?.forEach(item => { |
1236 | | - newFilterVaribale[item.name]=item.label; |
1237 | | - }); |
1238 | | - this.selectedFilterTaskVariable= newFilterVaribale; |
1239 | | -
|
1240 | | - } |
1241 | | - }); |
1242 | | - |
1243 | | - |
| 1240 | + this.selectedfilterId = this.taskDefaultFilterListNames.length ? this.filterList[0].id : findFilterIdForDefaultFilterName(this.filterList, ALL_FILTER); |
1244 | 1241 | } |
1245 | 1242 |
|
1246 | 1243 | else { |
@@ -1410,6 +1407,7 @@ export default class Tasklist extends Mixins(TaskListMixin) { |
1410 | 1407 | .task-groups { |
1411 | 1408 | .group-name { |
1412 | 1409 | white-space: normal; |
| 1410 | + max-width: 250px; |
1413 | 1411 | } |
1414 | 1412 | } |
1415 | 1413 | .task-groups-modal { |
@@ -1451,4 +1449,29 @@ export default class Tasklist extends Mixins(TaskListMixin) { |
1451 | 1449 | } |
1452 | 1450 | } |
1453 | 1451 | } |
| 1452 | +.cft-bpmn-viewer-container { |
| 1453 | + min-height: 400px; |
| 1454 | + position: relative; |
| 1455 | +} |
| 1456 | +.cft-bpm-container { |
| 1457 | + height: 100%; |
| 1458 | + position: absolute; |
| 1459 | + width: 100%; |
| 1460 | + overflow: hidden; |
| 1461 | +} |
| 1462 | +
|
| 1463 | +.cft-grab-cursor { |
| 1464 | + cursor: move; |
| 1465 | + cursor: grab; |
| 1466 | +} |
| 1467 | +.cft-btn_zoom{ |
| 1468 | + position: absolute; |
| 1469 | + bottom: 10em; |
| 1470 | + right:5%; |
| 1471 | +} |
| 1472 | +</style> |
| 1473 | +<style> |
| 1474 | +.highlight:not(.djs-connection) > .djs-visual > :nth-child(1) { |
| 1475 | + fill: rgb(56, 89, 138) !important; |
| 1476 | +} |
1454 | 1477 | </style> |
0 commit comments