8 |
9 |
10 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/force-app/main/default/lwc/caseItem/caseItem.js:
--------------------------------------------------------------------------------
1 | import { LightningElement, api } from 'lwc';
2 |
3 | export default class CaseItem extends LightningElement {
4 | @api caseRecord;
5 |
6 | //Property to track the original status of the DRAG target
7 | originalStatus;
8 |
9 | //DRAG SOURCE dragstart event handler
10 | itemDragStart(evt) {
11 |
12 | console.log('Handling DragStart for item: ' + this.caseRecord.Id);
13 |
14 | //Store the original status
15 | this.originalStatus = this.caseRecord.Status;
16 |
17 | //Fetch the element to set the style
18 | let draggableElement = this.template.querySelector('[data-id="' + this.caseRecord.Id + '"]');
19 | draggableElement.classList.add('drag');
20 |
21 | //Dispatch the custom event and pass the record Id and Status
22 | const event = new CustomEvent('itemdrag', {
23 | detail: {
24 | dragTargetId: this.caseRecord.Id,
25 | dragTargetStatus: this.originalStatus
26 | }
27 | });
28 | this.dispatchEvent(event);
29 | }
30 |
31 | //DRAG SOURCE dragend event handler
32 | itemDragEnd(evt) {
33 |
34 | console.log('Handling DragEnd for item: ' + this.caseRecord.Id);
35 |
36 | //Reset the style
37 | let draggableElement = this.template.querySelector('[data-id="' + this.caseRecord.Id + '"]');
38 | draggableElement.classList.remove('drag');
39 | }
40 |
41 | }
--------------------------------------------------------------------------------
/force-app/main/default/lwc/caseItem/caseItem.js-meta.xml:
--------------------------------------------------------------------------------
1 |
2 |
11 |
15 | Status: {caseRecord.Status}
12 |Priority: {caseRecord.Priority}
13 |Id: {caseRecord.Id}
14 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/force-app/main/default/lwc/caseList/caseList.js:
--------------------------------------------------------------------------------
1 | import { LightningElement, api, track } from 'lwc';
2 |
3 | export default class CaseList extends LightningElement {
4 |
5 | @api caseList;
6 | @api caseStatus;
7 |
8 | //Getter indicates if any items in the list
9 | get areCases() {
10 | if(this.caseList) {
11 | return this.caseList.length>0;
12 | } else {
13 | return false;
14 | }
15 | }
16 |
17 | //Function to cancel drag n drop events
18 | cancel(evt) {
19 | if (evt.stopPropagation) evt.stopPropagation();
20 | if (evt.preventDefault) evt.preventDefault();
21 | return false;
22 | };
23 |
24 | //DRAG SOURCE drag event handler dispatched from the child component
25 | handleItemDrag(evt) {
26 |
27 | console.log('Drag event from the drag target: ' + evt.detailinto + ' for drop target: ' + this.caseStatus);
28 | this.cancel(evt);
29 |
30 | //Dispatch the custom event to raise the detail payload up one level
31 | const event = new CustomEvent('listitemdrag', {
32 | detail: evt.detail
33 | });
34 | this.dispatchEvent(event);
35 | }
36 |
37 | //DROP TARGET dragenter event handler
38 | handleDragEnter(evt) {
39 |
40 | console.log('Drag Enter event for ' + this.caseStatus);
41 |
42 | //Cancel the event
43 | this.cancel(evt);
44 |
45 | }
46 |
47 | //DROP TARGET dragover event handler
48 | handleDragOver(evt) {
49 |
50 | console.log('Drag Over event for ' + this.caseStatus);
51 |
52 | //Cancel the event
53 | this.cancel(evt);
54 |
55 | this.addDragOverStyle()
56 |
57 | }
58 |
59 | //DROP TARGET dragleave event handler
60 | handleDragLeave(evt) {
61 |
62 | console.log('Drag Leave event for ' + this.caseStatus);
63 |
64 | //Cancel the event
65 | this.cancel(evt);
66 |
67 | this.removeDragOverStyle();
68 |
69 | }
70 |
71 | //DROP TARGET drop event handler
72 | handleDrop(evt) {
73 |
74 | console.log('Handling Drop into drop tagert for status: ' + this.caseStatus);
75 |
76 | //Cancel the event
77 | this.cancel(evt);
78 |
79 | //Dispatch the custom event to raise the detail payload up one level
80 | const event = new CustomEvent('itemdrop', {
81 | detail: this.caseStatus
82 | });
83 | this.dispatchEvent(event);
84 |
85 | this.removeDragOverStyle();
86 |
87 | }
88 |
89 | //Set the style to indicate the element is being dragged over
90 | addDragOverStyle() {
91 | let draggableElement = this.template.querySelector('[data-role="drop-target"]');
92 | draggableElement.classList.add('over');
93 | }
94 |
95 | //Reset the style
96 | removeDragOverStyle() {
97 | let draggableElement = this.template.querySelector('[data-role="drop-target"]');
98 | draggableElement.classList.remove('over');
99 | }
100 |
101 | }
--------------------------------------------------------------------------------
/force-app/main/default/lwc/caseList/caseList.js-meta.xml:
--------------------------------------------------------------------------------
1 |
2 |
23 | No {caseStatus} Cases
24 |
25 |
26 |
27 |
4 |
5 |
6 |
22 |
23 |
24 |
25 |
27 |
28 |
32 |
33 |
34 |
35 |
36 |
38 |
39 |
43 |
44 |
45 |
46 |
47 |
49 |
50 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/force-app/main/default/lwc/casePicker/casePicker.js:
--------------------------------------------------------------------------------
1 | import { LightningElement, track, wire } from 'lwc';
2 | import getAllCases from '@salesforce/apex/CasePicker.getAllCases';
3 | import resetAllCasesNew from '@salesforce/apex/CasePicker.resetAllCasesNew';
4 | import { updateRecord} from 'lightning/uiRecordApi';
5 | import { refreshApex } from '@salesforce/apex';
6 | import { ShowToastEvent } from 'lightning/platformShowToastEvent';
7 |
8 | //The fields required for the update of the Drag target record
9 | import FIELD_CASE_ID from '@salesforce/schema/Case.Id';
10 | import FIELD_CASE_STATUS from '@salesforce/schema/Case.Status';
11 |
12 | //Constants for the status picklist
13 | const STATUS_NEW = 'New';
14 | const STATUS_WORKING = 'Working';
15 | const STATUS_ESCALATED = 'Escalated';
16 |
17 | export default class CasePicker extends LightningElement {
18 |
19 | //A list of all cases for all status
20 | @track caseListAll;
21 |
22 | //Filtered arrays
23 | @track caseListNew;
24 | @track caseListWorking;
25 | @track caseListEscalated;
26 |
27 | //Status values for the lists
28 | @track newStatus = STATUS_NEW;
29 | @track workingStatus = STATUS_WORKING;
30 | @track escalatedStatus = STATUS_ESCALATED;
31 |
32 | //Vars to track the DRAG COURSE data
33 | @track draggingId = "";
34 | @track draggingStatus = "";
35 |
36 | //Wired Apex method to fetch all records
37 | @wire( getAllCases )
38 | wired_getAllCases(result) {
39 |
40 | //Capture the returned data and any errors
41 | this.caseListAll = result;
42 |
43 | //Build filtered arrays if data returned
44 | //These lists are bound to the DROP TARGET components
45 | if(this.caseListAll.data) {
46 |
47 | this.caseListNew =
48 | this.caseListAll.data.filter(
49 | (caseItem) => {
50 | return caseItem.Status === this.newStatus;
51 | });
52 |
53 | this.caseListWorking =
54 | this.caseListAll.data.filter(
55 | (caseItem) => {
56 | return caseItem.Status === this.workingStatus;
57 | });
58 |
59 | this.caseListEscalated =
60 | this.caseListAll.data.filter(
61 | (caseItem) => {
62 | return caseItem.Status === this.escalatedStatus;
63 | });
64 |
65 | }
66 | }
67 |
68 | //Manually reset all Cases to New
69 | resetData() {
70 | resetAllCasesNew()
71 | .then( () => {
72 | this.refreshData();
73 | })
74 | .catch(error => {
75 | //Notify any error
76 | this.showToast(this,'Error Resetting Data', error.body.message, 'error');
77 | });
78 | }
79 |
80 | //Manually refresh the data and the reactive DROP TARGET lists
81 | refreshData() {
82 | refreshApex(this.caseListAll);
83 | }
84 |
85 | //Handle the custom event dispatched originally from a DRAG SOURCE
86 | //and proxied from a DROP TARGET
87 | handleListItemDrag(evt) {
88 |
89 | console.log('Setting draggingId to: ' + evt.detail);
90 |
91 | //Capture the detail passed with the event from the DRAG target
92 | this.draggingId = evt.detail.dragTargetId;
93 | this.draggingStatus = evt.detail.dragTargetStatus;
94 |
95 | }
96 |
97 | //Handle the custom event dispatched from a DROP TARGET
98 | handleItemDrop(evt) {
99 |
100 | //Set the DRAG SOURCE Id and new DROP TARGET Status for the update
101 | let draggedId = this.draggingId;
102 | let updatedStatus = evt.detail;
103 |
104 | console.log('Dropped - Id is: ' + draggedId + ', new Status is ' + updatedStatus);
105 |
106 | //Handle custom validations before allowing an update
107 | if (updatedStatus === this.draggingStatus) {
108 |
109 | //DO NOTHING if the DRAG status is NOT the DROP target Status
110 |
111 | } else if (updatedStatus == this.newStatus) {
112 |
113 | //Don't allow any record to be assigned to the New list
114 | this.showToast(this,'Drop Not Allowed','Case may not be reset as New!', 'error');
115 |
116 | } else {
117 |
118 | //Update the DRAG SOURCE record with its new status
119 | let fieldsToSave = {};
120 | fieldsToSave[FIELD_CASE_ID.fieldApiName] = draggedId;
121 | fieldsToSave[FIELD_CASE_STATUS.fieldApiName] = updatedStatus;
122 | const recordInput = { fields:fieldsToSave}
123 |
124 | updateRecord(recordInput)
125 | .then(() => {
126 | //Force a refresh of all bound lists
127 | refreshApex(this.caseListAll);
128 | })
129 | .catch(error => {
130 | //Notify any error
131 | this.showToast(this,'Error Updating Record', error.body.message, 'error');
132 | });
133 | }
134 | }
135 |
136 | //Notification utility function
137 | showToast = (firingComponent, toastTitle, toastBody, variant) => {
138 | const evt = new ShowToastEvent({
139 | title: toastTitle,
140 | message: toastBody,
141 | variant: variant
142 | });
143 | firingComponent.dispatchEvent(evt);
144 | }
145 |
146 | }
--------------------------------------------------------------------------------
/force-app/main/default/lwc/casePicker/casePicker.js-meta.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 |
12 |
13 |
14 |
19 |
20 |
21 |
32 |
33 | 34 |
39 |
40 |
41 | New
33 | 34 |
43 |
44 | 45 |
46 |
47 | Working
44 | 45 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
165 |
166 |
167 |
168 | Escalated
50 | 51 |