E22 Change Request - Slick Dashboard

✅ Overview

TW/GEN/E22/2023 Changes in DB design & DB Summary screen. This document outlines the E22 Change Request for the Slick Dashboard in the tw-pages-client and shared-client projects. The implementation includes a new UI layout and feature set using existing backend APIs while enhancing filter control, chart interaction, and iframe integration.

• The platform supports Tender, Auction, and CMS modules. The specific module is determined based on provided IDs, which are used to differentiate the iframe URLs.

• The Dashboard layout remains the same across all three modules; only the API data varies depending on the selected module.

• http://localhost:8080/?user=TESTPWD&dbCompany=TESTPWD&buyer=TEST%20PUBLIC%20WORKS%20DEPARTMENT#/slickDashboard

---

🧩 API Usage (Same as Old Dashboard)

• getTopData
• getFilterData
• getIDs
• getDataByIDs
• saveFilterData
• getDetailIdsAndDisplay
• getDetailsData

API Structure Documentation

These are used for loading dashboard data, filters, chart values, and persisting user preferences.

---

🖼️ UI Changes – Four Icons (Right of Tab)

1️⃣ Show Legend Icon

Feature	Implementation
Default State	viewData.legendView = true
On Click	Toggles legendView and reloads chart
Behavior	Shows/hides the Legend section and either renders x-axis values inside bars or separately

Code:

evtClickFilter(_selectedTab) {

if (_selectedTab === 'legend') {

this.viewData.legendView = !this.viewData.legendView;

this.loadResults(this.viewData.filterValues, this.viewData.legendView);

}

}

---

2️⃣ View Icon (Eye)

Feature	Implementation
Default Tab	Chart View (selectedTab = 'chart')
MyToDoList	Loads saved filters (evtClickMyPreference())
DeptLevel	Loads 2nd card: this.viewData.filterValues.DATA_POINTS = [cardCountData[1].id]
Data View	Opens iframe via evtUpadteView()
Tender View	Opens detail schema: schema.details
Data Order	chart shows based on asc and descending

Code:

evtClickCallback(_evt, _val) {

if (_val.value == 1 || _val.value == "mytodolist") {

this.viewData.selectedTab = "chart";

this.evtClickMyPreference();

this.viewData.HidePlusIcon = false;

}

if (_val.value == 2) {

this.viewData.selectedTab = "update";

this.viewData.HidePlusIcon = true;

this.evtUpadteView();

}

if (_val.value == 3) {

this.viewData.selectedTab = "tenderView";

this.viewData.schema.tenderData = this.viewData.schema.details;

}

if (_val.value === 'deptlevel') {

this.evtDeptLevel();

}

if (_val.value == 'des' || _val.value == 'asc') {

this.viewData.sortValue = _val.value;

this.loadResults(this.viewData.filterValues, this.viewData.legendView, this.viewData.sortValue);

}

}

• For Tender view we are using two Apis

1) getDetailIdsAndDisplay

Description This API provides ids.

Request Details

• method: POST
• body:

{

"filterObj": {

"DATA_POINTS": [

]

},

"keys": {

},

"category": ''

}

Response

{

"idArr": [

1,2,3

],

"displayData": {

"tenderDescription": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"line": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"ageingofapproval": {

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"cot": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"region": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"tenderNum": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

},

"buyer": {

"colsTaken": "",

"sortNum": "",

"label": "",

"tableColWidth": ""

}

}

}

2) getDetailsData

Description This API provides data for tender view.

Request Details

• method: POST
• body:

{

"keys": {

},

"body": [ 1,2,3 ]

}

Response

{

"detailsArr": [

{

"tenderDescription": "",

"line": "",

"ageingofapproval": "",

"cot": "",

"id": "",

"region": "",

"tenderNum": "",

"url": "",

"buyer": ""

}

]

}

---

3️⃣ Preference Icon (Pencil)

Option	Action
My Preference	Loads saved filters
Print	Triggers browser print

Code:

evtClickMyPreference() {

this.viewData.filterValues = JSON.parse(JSON.stringify(this.savedData));

this.loadResults(this.savedData, this.viewData.legendView);

}

evtClickPrint() {

setTimeout(() => {

window.print();

}, 100);

}

---

4️⃣ Filter Icon (Funnel)

Button	Action
Show Chart	Renders chart with current filters
Clear Filters	Clears all selected values
Save Filters	Saves filters to DB via saveFilterData API

Code:

evtClickFilterButtons(_button) {

if (_button.id === 'showChart') {

this.loadResults(this.viewData.filterValues, this.viewData.legendView);

}

else if (_button.id === 'clearFilters') {

const clearObj = { selectedValues: [] };

this.viewData.filterSchemas[...].elmInstance.message(clearObj);

}

else if (_button.id === 'saveFilters') {

this.saveFilters(this.viewData.filterValues);

}

}

---