import { LightningElement, wire, track, api } from "lwc";
import MyModalAddNew from 'c/clientHealthTaskAddNew'; import MyModalEdit from 'c/clientHealthTaskEdit'; import getList from '@salesforce/apex/ASI_RiskEventTaskController.getRiskEventTask'; import saveList from '@salesforce/apex/ASI_RiskEventTaskController.saveRiskEventTask';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from "@salesforce/apex";
export default class DataTableDragable extends LightningElement {
@api recordId; @api userMap; @api dragMap; users; tasklist; error; testId = 'a3Z8K000001fO7BUAU';
handleExpand(event) { let taskId = event.target.dataset.id; let taskFound = this.tasklist.find((task) => task.Id === taskId);
// toggle the value taskFound.isExpanded = !taskFound.isExpanded;
// set the icon name taskFound.iconName = taskFound.isExpanded ? "utility:chevrondown" : "utility:chevronright"; }
@track TaskData = JSON.parse('{"getTaskData": [{"Id": "111", "Phase": "Notification", "Task": "Client contacted & Meeting confirmed","Checklist": "Lorem ipsum dolor sit amet. Sit illo voluptas et fugit quibusdam qui omnis","index": 1},{"Id": "222","Phase": "Discovery", "Task": "Gather and document internal facts/history","Checklist": "Lorem ipsum dolor sit amet. Sit illo voluptas et fugit quibusdam qui omnis","index": 2},{"Id": "333","Phase": "Creation", "Task": "M and A Paperwork/Proposal created/sent to customer","Checklist": "Qui doloremque dolorem ut aperiam impedit et quidem praesentium","index": 3},{"Id": "444","Phase": "Present/Accept", "Task": "Proposal Presented","Checklist": "Ab internos consectetur aut soluta velit ut rerum quia","index": 4},{"Id": "555","Phase": "Delivery", "Task": "N/A","Checklist": "A consequuntur quaerat ea dolor necessitatibus rem voluptas modi quo expedita deleniti ea sunt facilis non modi","index": 5},{"Id": "666","Phase": "Post Plan Governance", "Task": "Update Client Health/Close Risk","Checklist": "Qui doloremque dolorem ut aperiam impedit et quidem praesentium","index": 6}]}');
@wire(getList, { retId: '$testId'}) //a3Z8K000001bxakUAA contactRec(result) { this.taskResult = result; if(result.error){ console.log('error is#'+result.error); this.error = result.error; } else if(result.data){ this.tasklist = result.data; } }
async addTask() { const result = await MyModalAddNew.open({ size: 'small', description: 'Accessible description of modal's purpose', content: 'Risk Event Task', }); console.log(result); refreshApex(this.taskResult) .then(result => this.processRowNumbers()) .catch(error => console.log('adTask: ' + error)); }
async editTask() { const result = await MyModalEdit.open({ size: 'small', description: 'Accessible description of modal's purpose', content: 'Edit Risk Event Task', }); console.log(result); refreshApex(this.taskResult) .then(result => this.processRowNumbers()) .catch(error => console.log('adTask: ' + error)); } updateRecordView(recordId) { updateRecord({fields: { Id: recordId }}); this.updateRecordView(this.recordId); }
// //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when pageimport isMyModalAddNew loadedfrom
/'c/ @trackclientHealthTaskAddNew';
import isModalOpenMyModalEdit =from false;
/'c/ openModal() {clientHealthTaskEdit';
// import getList from '@salesforce/apex/ to open modal set isModalOpen tarckASI_RiskEventTaskController.getRiskEventTask';
import valuesaveList asfrom true
'@salesforce/apex/ thisASI_RiskEventTaskController.isModalOpen = true;saveRiskEventTask';
// }
// closeModal()import {
// // to close modal set isModalOpen tarckupdateRecord value} asfrom false
/'lightning/ this.isModalOpen = false;uiRecordApi';
// }
// submitDetails()import {
// refreshApex } from /"@salesforce/ to close modalapex";
export setdefault isModalOpenclass tarckDataTableDragable valueextends asLightningElement false{
//
@api //AddrecordId;
your code@api touserMap;
call apex@api methoddragMap;
or dousers;
some processingtasklist;
// error;
this.isModalOpentestId = false;'a3Z8K000001fO7BUAU';
// }
renderedCallback() {
if
handleExpand(!!this.tasklistevent) {
this.userMaplet =taskId new= Map();event.target.dataset.id;
let tempArraytaskFound = JSON.parse(JSON.stringify(this.tasklist));
tempArray.forEachfind((arrayElement, indextask) => {
//arrayElement.index = index;
this.userMap.set(arrayElementtask.Id, arrayElement);
=== }taskId);
console.log(
// toggle ":the ------------------------------------------------------------"value
);
taskFound.isExpanded = console!taskFound.log(isExpanded;
"DataTableDragable// ->set renderedCallbackthe ->icon tempArray",name
taskFound.iconName = JSONtaskFound.stringify(tempArray)isExpanded
);
console.log(
? ""utility: ------------------------------------------------------------"chevrondown"
);
this.users = JSON.parse(JSON.stringify(tempArray));: "utility:chevronright";
}
}
// handleSubmit() { // console.log("in submit method"); // let data = this.users.data; // console.log(": ----------------------------------------------"); // console.log( // "DataTableDragable -> handleSubmit -> data", // JSON.stringify(data) // ); // console.log(": ----------------------------------------------"); // }
processRowNumbers() { console.log('PRN'); const trs = this.template.querySelectorAll(".myIndex"); const ids = this.template.querySelectorAll(".myId");
for (let i = 0; i < trs.length; i++) {
let currentRowId = ids[i].innerText;
let currentRowRef = this.userMap.get(currentRowId);
currentRowRef.Task__c = i + 1;
this.userMap.set(currentRowId, currentRowRef);
trs[i].innerText = i + 1;
}
this.users = Array.from(this.userMap.values());
this.tasklist = Array.from(this.userMap.values());
let data = this.users;
console.log(": ----------------------------------------------");
console.log(
"DataTableDragable -> handleSubmit -> data",
JSON.stringify(data)
);
console.log(": ----------------------------------------------");
saveList
@track TaskData = JSON.parse('{"getTaskData": retl[{"Id": this"111", "Phase": "Notification", "Task": "Client contacted & Meeting confirmed","Checklist": "Lorem ipsum dolor sit amet.tasklist Sit illo voluptas et fugit quibusdam qui omnis","index": 1})
,{"Id": "222","Phase": "Discovery", "Task": "Gather and document internal facts/history","Checklist": "Lorem ipsum dolor sit amet.then((result) =>Sit illo voluptas et fugit quibusdam qui omnis","index": 2},{
"Id": "333","Phase": console.log(result);
"Creation", "Task": this.error"M =and undefined;
A Paperwork/Proposal created/sent to customer","Checklist": "Qui doloremque dolorem ut aperiam impedit et quidem praesentium","index": 3})
.catch((error),{"Id": =>"444","Phase": "Present/Accept", "Task": "Proposal Presented","Checklist": "Ab internos consectetur aut soluta velit ut rerum quia","index": 4},{
"Id": "555","Phase": console.log(error);
"Delivery", "Task": this.error"N/A","Checklist": ="A error;
consequuntur quaerat ea dolor necessitatibus rem voluptas modi quo expedita deleniti ea sunt facilis non modi","index": 5},{"Id": "666","Phase": "Post Plan Governance", "Task": "Update Client Health/Close Risk","Checklist": "Qui doloremque dolorem ut aperiam impedit et quidem praesentium","index": 6}]}');
}
onDragStart(evt) { const inputs = this.template.querySelectorAll(".mychkbox"); this.dragMap = new Map();
if @wire(inputs)getList, {
retId: for'$testId'}) //a3Z8K000001bxakUAA
contactRec(letresult)
i ={
0; i < inputsthis.length;taskResult i++)= {result;
if (inputs[i]result.checkederror) {
let currentRow = inputs[i]console.parentNodelog('error is#'+result.parentNode;error);
let currentDragId this.error = currentRow.datasetresult.dragId;error;
}
this.dragMap.set(currentDragId, currentRow else if(result.data);{
//currentRowthis.classListtasklist = result.add("grabbed");data;
}
}
async addTask() {
const result = await MyModalAddNew.open({
size: 'small',
description: 'Accessible description of modal\'s purpose',
content: 'Risk Event Task',
});
console.log(result);
refreshApex(this.taskResult)
.then(result => this.processRowNumbers())
.catch(error => console.log('adTask: ' + error));
}
let eventRowDataId = evt.currentTarget.dataset.dragId;
evt.dataTransfer.setData("dragId", eventRowDataId);
evt.dataTransfer.setData("sy", evt.pageY);
evt.dataTransfer.effectAllowed = "move";
evt.currentTarget.classList.add("grabbed");
if async editTask(this.dragMap) {
const result = await MyModalEdit.hasopen(eventRowDataId){
size: 'small',
description: 'Accessible description of modal\'s purpose',
content: 'Edit Risk Event Task',
});
{ console.log(result);
refreshApex(this.dragMaptaskResult)
.forEachthen(result => this.processRowNumbers(value))
=> value .classListcatch(error => console.addlog("grabbed"'adTask: ' + error));
}
updateRecordView(recordId) {
updateRecord({fields: { Id: recordId }});
this.updateRecordView(this.recordId);
}
}
onDragOver(evt) { evt.preventDefault(); evt.dataTransfer.dropEffect = "move"; }
onDrop(evt) { evt.preventDefault(); let sourceId = evt.dataTransfer.getData("dragId");
const sy = evt.dataTransfer.getData("sy");
const cy = evt.pageY;
if (sy > cy) {
if (this.dragMap.has(sourceId)) {
Array// //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded
// @track isModalOpen = false;
// openModal() {
// // to open modal set isModalOpen tarck value as true
// this.fromisModalOpen = true;
// }
// closeModal() {
// // to close modal set isModalOpen tarck value as false
// this.dragMapisModalOpen = false;
// }
// submitDetails() {
// // to close modal set isModalOpen tarck value as false
// //Add your code to call apex method or do some processing
// this.reverseisModalOpen = false;
// }
renderedCallback() {
if (!!this.tasklist) {
this.userMap = new Map();
let tempArray = JSON.parse(JSON.stringify(this.tasklist));
tempArray.forEach((arrayElement, elementindex) => {
//arrayElement.index = index;
this.userMap.set(arrayElement.Id, arrayElement);
});
console.log(
": ------------------------------------------------------------"
);
console.log(
"DataTableDragable -> renderedCallback -> tempArray",
JSON.stringify(tempArray)
);
console.log(
": ------------------------------------------------------------"
);
this.users = JSON.parse(JSON.stringify(tempArray));
}
}
// handleSubmit() {
// console.log("in submit method");
// let keydata = element[0];this.users.data;
// console.log(": ----------------------------------------------");
// console.log(
// "DataTableDragable -> handleSubmit -> data",
// JSON.stringify(data)
// );
// console.log(": ----------------------------------------------");
// }
processRowNumbers() {
console.log('PRN');
const elmtrs = this.template.querySelectorquerySelectorAll(`[data".myIndex");
const ids = this.template.querySelectorAll(".myId");
for (let i = 0; i < trs.length; i++) {
let currentRowId = ids[i].innerText;
let currentRowRef = this.userMap.get(currentRowId);
currentRowRef.Task__c = i + 1;
this.userMap.set(currentRowId, currentRowRef);
trs[i].innerText = i + 1;
}
this.users = Array.from(this.userMap.values());
this.tasklist = Array.from(this.userMap.values());
let data = this.users;
console.log(": -drag-id="$--------------------------------------------");
console.log(
"DataTableDragable -> handleSubmit -> data",
JSON.stringify(data)
);
console.log(": ----------------------------------------------");
saveList({key retl: this.tasklist }"]`)
.then((result) => {
console.log(result);
this.error = undefined;
})
.catch((error) => {
console.log(error);
this.error = error;
});
}
onDragStart(evt) {
const inputs = this.template.querySelectorAll(".mychkbox");
this.dragMap = new Map();
if (!!elminputs) {
for (let elmi = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
let currentRow = inputs[i].parentNode.parentNode;
let currentDragId = currentRow.dataset.dragId;
this.dragMap.set(currentDragId, currentRow);
//currentRow.classList.removeadd("grabbed");
}
}
evt.currentTarget.parentElement.insertBefore(elm, evt.currentTarget);
});
} else {
const elm = this.template.querySelector(`[data-drag-id="${sourceId}"]`);
if (!!elm) {
elm.classList.remove("grabbed");
}
let eventRowDataId = evt.currentTarget.parentElementdataset.insertBeforedragId;
evt.dataTransfer.setData(elm"dragId", eventRowDataId);
evt.dataTransfer.setData("sy", evt.pageY);
evt.dataTransfer.effectAllowed = "move";
evt.currentTarget.classList.add("grabbed");
if (this.dragMap.has(eventRowDataId)) {
this.dragMap.forEach((value) => value.classList.add("grabbed"));
}
}
onDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = "move";
}
else onDrop(evt) {
evt.preventDefault();
let sourceId = evt.dataTransfer.getData("dragId");
const sy = evt.dataTransfer.getData("sy");
const cy = evt.pageY;
if (sy > cy) {
if (this.dragMap.has(sourceId)) {
Array.from(this.dragMap).forEachreverse().forEach(value, element => {
let key = element[0];
const elm = this.template.querySelector(`[data-drag-id="${key}"]`);
if (!!elm) {
elm.classList.remove("grabbed");
}
evt.currentTarget.parentElement.insertBefore(elm, mapevt.currentTarget);
});
=> } else {
const elm = this.template.querySelector(`[data-drag-id="${keysourceId}"]`);
if (!!elm) {
elm.classList.remove("grabbed");
}
evt.currentTarget.parentElement.insertBefore(elm, evt.currentTarget);
}
} else {
if (this.dragMap.has(sourceId)) {
this.dragMap.forEach((value, key, map) => {
const elm = this.template.querySelector(`[data-drag-id="${key}"]`);
if (!!elm) {
elm.classList.remove("grabbed");
}
evt.currentTarget.parentElement.insertBefore(
elm,
evt.currentTarget.nextElementSibling
);
});
} else {
const elm = this.template.querySelector(`[data-drag-id="${sourceId}"]`);
if (!!elm) {
elm.classList.remove("grabbed");
}
evt.currentTarget.parentElement.insertBefore(
elm,
evt.currentTarget.nextElementSibling
);
}
}
evt.currentTargetthis.parentElementprocessRowNumbers();
}
onRefresh() {
this.insertBeforedispatchEvent(new RefreshEvent());
console.log('Refresh Event');
elm,}
onSGHP() {
evt.currentTargetthis.nextElementSiblingtestId = 'a3Z8K000001fO7BUAU';
}
onSM(); {
this.testId = 'a3Z8K000001fO76UAE';
}
onIGHP() {
this.testId = 'a3Z8K000001fO7BUAU';
}
}
this.processRowNumbers();
} onRefresh() { this.dispatchEvent(new RefreshEvent()); console.log('Refresh Event'); }
onSGHP() { this.testId = 'a3Z8K000001fO7BUAU'; }
onSM() { this.testId = 'a3Z8K000001fO76UAE'; }
onIGHP() { this.testId = 'a3Z8K000001fO7BUAU'; }
}
