License updated to GPLv3

🧲 New features
Custom user role permissions
Employee edit form updated
Employee daily task list
Attendance and employee distribution charts on dashboard
Improvements to company structure and company assets module
Improved tables for displaying data in several modules
Faster data loading (specially for employee module)
Initials based profile pictures
Re-designed login page
Re-designed user profile page
Improvements to filtering
New REST endpoints for employee qualifications

🐛 Bug fixes
Fixed, issue with managers being able to create performance reviews for employees who are not their direct reports
Fixed, issues related to using full profile image instead of using smaller version of profile image
Changing third gender to other
Improvements and fixes for internal frontend data caching

web/api/AdapterBase.js

@@ -4,8 +4,10 @@
  Developer: Thilina Hasantha (http://lk.linkedin.com/in/thilinah | https://github.com/thilinah)
  */
 
+import IceApiClient from './IceApiClient';
 import ModuleBase from './ModuleBase';
 import RequestCache from '../api-common/RequestCache';
+import MasterDataReader from './MasterDataReader';
 
 class AdapterBase extends ModuleBase {
   constructor(endPoint, tab, filter, orderBy) {
@@ -48,6 +50,18 @@ class AdapterBase extends ModuleBase {
     this.requestCache = new RequestCache();
   }
 
+  initMasterDataReader() {
+    this.masterDataReader = new MasterDataReader(this);
+  }
+
+  setupApiClient(token) {
+    this.apiClient = new IceApiClient(this.apiUrl, token);
+  }
+
+  setApiUrl(apiUrl) {
+    this.apiUrl = apiUrl;
+  }
+
   setFilter(filter) {
     this.filter = filter;
   }
@@ -84,6 +98,19 @@ class AdapterBase extends ModuleBase {
     return this.orderBy;
   }
 
+  getFile(name) {
+    this.trackEvent('file', name);
+    return new Promise((resolve, reject) => {
+      $.getJSON(this.moduleRelativeURL, { a: 'file', name }, (data) => {
+        if (data.status === 'SUCCESS') {
+          resolve(data.data);
+        } else {
+          reject();
+        }
+      }).fail(() => reject());
+    });
+  }
+
   /**
      * @method add
      * @param object {Array} object data to be added to database
@@ -108,7 +135,13 @@ class AdapterBase extends ModuleBase {
       } else {
         that.addFailCallBack(getFunctionCallBackData, data.object);
       }
-    }, 'json').always(() => { that.hideLoader(); });
+    }, 'json')
+      .fail((e) => {
+        if (e.status === 403) {
+          that.showMessage('Access Forbidden', e.responseJSON.message);
+        }
+      })
+      .always(() => { that.hideLoader(); });
     this.trackEvent('add', this.tab, this.table);
   }
 
@@ -143,7 +176,13 @@ class AdapterBase extends ModuleBase {
       } else {
         that.deleteFailCallBack(callBackData, data.object);
       }
-    }, 'json').always(() => { that.hideLoader(); });
+    }, 'json')
+      .fail((e) => {
+        if (e.status === 403) {
+          that.showMessage('Access Forbidden', e.responseJSON.message);
+        }
+      })
+      .always(() => { that.hideLoader(); });
     this.trackEvent('delete', this.tab, this.table);
   }
 
@@ -192,7 +231,13 @@ class AdapterBase extends ModuleBase {
       } else {
         that.getFailCallBack(callBackData, data.object);
       }
-    }, 'json').always(() => { that.hideLoader(); });
+    }, 'json')
+      .fail((e) => {
+        if (e.status === 403) {
+          that.showMessage('Access Forbidden', e.responseJSON.message);
+        }
+      })
+      .always(() => { that.hideLoader(); });
 
     that.initFieldMasterData();
 
@@ -299,7 +344,13 @@ class AdapterBase extends ModuleBase {
       } else {
         that.getElementFailCallBack.apply(that, [callBackData, data.object]);
       }
-    }, 'json').always(() => { that.hideLoader(); });
+    }, 'json')
+      .fail((e) => {
+        if (e.status === 403) {
+          that.showMessage('Access Forbidden', e.responseJSON.message);
+        }
+      })
+      .always(() => { that.hideLoader(); });
     this.trackEvent('getElement', this.tab, this.table);
   }
 
@@ -357,30 +408,30 @@ class AdapterBase extends ModuleBase {
         }
         that.callFunction(callBackData.callBack, callBackData.callBackData);
       }
-    }
-
-    const callbackWraper = function (data) {
-      if (data.status === 'SUCCESS') {
-        that.requestCache.setData(this.success.key, data);
-        const localCallBackData = callBackData;
-        localCallBackData.callBackData = [callBackData.callBackData[0]];
-        localCallBackData.callBackData.push(data.data);
-        if (localCallBackData.callBackSuccess !== null && localCallBackData.callBackSuccess !== undefined) {
-          localCallBackData.callBackData.push(callBackData.callBackSuccess);
+    } else {
+      const callbackWraper = function (data) {
+        if (data.status === 'SUCCESS') {
+          that.requestCache.setData(this.success.key, data);
+          const localCallBackData = callBackData;
+          localCallBackData.callBackData = [callBackData.callBackData[0]];
+          localCallBackData.callBackData.push(data.data);
+          if (localCallBackData.callBackSuccess !== null && localCallBackData.callBackSuccess !== undefined) {
+            localCallBackData.callBackData.push(callBackData.callBackSuccess);
+          }
+          that.callFunction(localCallBackData.callBack, localCallBackData.callBackData);
+        } else if (data.message === 'Access violation') {
+          alert(`Error : ${callbackWraper.table} ${data.message}`);
         }
-        that.callFunction(localCallBackData.callBack, localCallBackData.callBackData);
-      } else if (data.message === 'Access violation') {
-        alert(`Error : ${callbackWraper.table} ${data.message}`);
-      }
-    };
+      };
 
-    callbackWraper.key = key;
-    // eslint-disable-next-line prefer-destructuring
-    callbackWraper.table = fieldMaster[0];
+      callbackWraper.key = key;
+      // eslint-disable-next-line prefer-destructuring
+      callbackWraper.table = fieldMaster[0];
 
-    $.post(this.moduleRelativeURL, {
-      t: fieldMaster[0], key: fieldMaster[1], value: fieldMaster[2], method, methodParams, a: 'getFieldValues',
-    }, callbackWraper, 'json');
+      $.post(this.moduleRelativeURL, {
+        t: fieldMaster[0], key: fieldMaster[1], value: fieldMaster[2], method, methodParams, a: 'getFieldValues',
+      }, callbackWraper, 'json');
+    }
   }
 
   setAdminProfile(empId) {

web/api/FormValidation.js

@@ -56,8 +56,6 @@ const ValidationRules = {
     }
     return false;
   },
-
-
 };
 
 class FormValidation {

web/api/IceApiClient.js

@@ -0,0 +1,18 @@
+const axios = require('axios');
+
+class IceApiClient {
+  constructor(baseUrl, token) {
+    this.baseUrl = baseUrl;
+    this.token = token;
+  }
+
+  get(endpoint) {
+    return axios.get(this.baseUrl + endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.token}`,
+      },
+    });
+  }
+}
+
+export default IceApiClient;

web/api/IceDataPipe.js

@@ -0,0 +1,114 @@
+const axios = require('axios');
+
+class IceDataPipe {
+  constructor(adapter, pageSize = 10) {
+    this.adapter = adapter;
+    this.pageSize = pageSize;
+  }
+
+  readMetaData() {
+    this.adapter.initFieldMasterData();
+  }
+
+  get({
+    page, search, sortField, sortOrder, filters, limit,
+  }) {
+    const pageSize = limit || this.pageSize;
+    const start = (page - 1) * pageSize;
+    const dataUrl = this.getDataUrl(
+      this.adapter.getDataMapping(),
+      search,
+      filters,
+    );
+    let url = `${dataUrl}&iDisplayStart=${start}&iDisplayLength=${pageSize}`;
+    url = this.applySortingData(this.adapter.getDataMapping(), url, sortField, sortOrder);
+    // $.post(url, (data) => {
+    //   that.getSuccessCallBack(callBackData, data);
+    // }, 'json').always(() => { that.hideLoader(); });
+    url = `${url}&version=v2`;
+    return axios.post(url, {})
+      .then((data) => {
+        const key = this.getRequestKey(page, search, sortField, sortOrder, filters, limit);
+        const response = {
+          items: data.data.objects,
+          total: data.data.totalRecords,
+        };
+        if (this.adapter.localStorageEnabled) {
+          window.localStorage.setItem(key, JSON.stringify(response));
+        }
+
+        return response;
+      });
+  }
+
+  getCachedResponse({
+    page, search, sortField, sortOrder, filters, limit,
+  }) {
+    const key = this.getRequestKey(page, search, sortField, sortOrder, filters, limit);
+    const cachedResponse = window.localStorage.getItem(key);
+    if (!cachedResponse) {
+      return null;
+    }
+
+    return JSON.parse(cachedResponse);
+  }
+
+  clearCachedResponse({
+    page, search, sortField, sortOrder, filters, limit,
+  }) {
+    const key = this.getRequestKey(page, search, sortField, sortOrder, filters, limit);
+    window.localStorage.setItem(key, null);
+  }
+
+  getRequestKey(page, search, sortField, sortOrder, filters, limit) {
+    return `${this.adapter.table}|${page}|${search}|${sortField}|${sortOrder}|${filters}|${limit}`;
+  }
+
+  applySortingData(columns, url, sortField, sortOrder) {
+    let orderBy = '';
+    if (sortField) {
+      url = `${url}&sorting=1`;
+      url = `${url}&iSortCol_0=${columns.indexOf(sortField)}`;
+      url = `${url}&sSortDir_0=${(sortOrder === 'descend') ? 'DESC' : 'ASC'}`;
+    } else if (this.adapter.getOrderBy() !== null) {
+      // Setting the fix ordering
+      orderBy = this.adapter.getOrderBy();
+      url = `${url}&ob=${orderBy}`;
+    }
+
+    return url;
+  }
+
+  getDataUrl(_columns, searchTerm, filters) {
+    const sourceMappingJson = JSON.stringify(this.adapter.getSourceMapping());
+
+    const columns = JSON.stringify(_columns);
+
+    let filterJson = '';
+    if (this.adapter.getFilter() !== null) {
+      filterJson = JSON.stringify(this.adapter.getFilter());
+    }
+
+    let url = this.adapter.moduleRelativeURL.replace('service.php', 'data.php');
+    url = `${url}?t=${this.adapter.table}`;
+    url = `${url}&sm=${sourceMappingJson}`;
+    url = `${url}&cl=${columns}`;
+    url = `${url}&ft=${filterJson}`;
+
+    if (searchTerm && searchTerm.trim() !== '') {
+      url += `&sSearch=${searchTerm}`;
+    }
+
+    if (this.adapter.isSubProfileTable()) {
+      url = `${url}&type=sub`;
+    }
+
+    if (this.adapter.remoteTableSkipProfileRestriction()) {
+      url = `${url}&skip=1`;
+    }
+
+    return url;
+  }
+}
+
+export default IceDataPipe;

web/api/MasterDataReader.js

@@ -0,0 +1,75 @@
+const axios = require('axios');
+
+class MasterDataReader {
+  constructor(adapter) {
+    this.adapter = adapter;
+    this.requestCache = this.adapter.requestCache;
+  }
+
+  fetchMasterData(fieldMaster) {
+    let method = '';
+    let methodParams = '';
+    if (fieldMaster[3] != null) {
+      method = fieldMaster[3];
+    }
+
+    if (fieldMaster[4] != null) {
+      methodParams = JSON.stringify(fieldMaster[4]);
+    }
+
+    const key = this.requestCache.getKey(this.adapter.moduleRelativeURL, {
+      t: fieldMaster[0], key: fieldMaster[1], value: fieldMaster[2], method, methodParams, a: 'getFieldValues',
+    });
+
+    const cacheData = this.requestCache.getData(key);
+    if (cacheData != null && cacheData.status === 'SUCCESS') {
+      return new Promise((resolve, reject) => resolve(cacheData.data));
+    }
+
+    const urlData = {
+      t: fieldMaster[0],
+      key: fieldMaster[1],
+      value: fieldMaster[2],
+      method,
+      methodParams,
+      a: 'getFieldValues',
+    };
+    let url = `${this.adapter.moduleRelativeURL}?_url=1`;
+    for (const index in urlData) {
+      url = `${url}&${index}=${encodeURIComponent(urlData[index])}`;
+    }
+    // TODO - Should be a get request
+    return axios.post(url, {})
+      .then((response) => {
+        if (response.data.status !== 'SUCCESS') {
+          throw Error(`Response for ${key} failed`);
+        }
+        this.requestCache.setData(key, response.data);
+
+        return response.data.data;
+      });
+  }
+
+  updateAllMasterData() {
+    const remoteSourceFields = this.adapter.getRemoteSourceFields();
+    const promiseList = [];
+    for (let i = 0; i < remoteSourceFields.length; i++) {
+      const fieldRemote = remoteSourceFields[i];
+      if (fieldRemote[1]['remote-source'] !== undefined && fieldRemote[1]['remote-source'] != null) {
+        let key = `${fieldRemote[1]['remote-source'][0]}_${fieldRemote[1]['remote-source'][1]}_${fieldRemote[1]['remote-source'][2]}`;
+        if (fieldRemote[1]['remote-source'].length === 4) {
+          key = `${key}_${fieldRemote[1]['remote-source'][3]}`;
+        }
+        const masterDataPromise = this.fetchMasterData(fieldRemote[1]['remote-source'])
+          .then((data) => {
+            this.adapter.fieldMasterData[key] = data;
+          });
+        promiseList.push(masterDataPromise);
+      }
+    }
+
+    return Promise.all(promiseList);
+  }
+}
+
+export default MasterDataReader;

web/api/ModuleBase.js

@@ -16,6 +16,7 @@ class ModuleBase {
     this.createRemoteTable = false;
     this.instanceId = 'None';
     this.ga = [];
+    this.showAddNew = true;
     this.showEdit = true;
     this.showDelete = true;
     this.showSave = true;
@@ -33,8 +34,8 @@ class ModuleBase {
     this.templates = null;
     this.customTemplates = null;
     this.emailTemplates = null;
-    this.fieldMasterData = null;
-    this.fieldMasterDataKeys = null;
+    this.fieldMasterData = {};
+    this.fieldMasterDataKeys = {};
     this.fieldMasterDataCallback = null;
     this.sourceMapping = null;
     this.currentId = null;
@@ -43,6 +44,7 @@ class ModuleBase {
     this.currentProfile = null;
     this.permissions = {};
     this.baseUrl = null;
+    this.that = this;
   }
 
   // eslint-disable-next-line no-unused-vars
@@ -50,6 +52,14 @@ class ModuleBase {
 
   }
 
+  initForm() {
+
+  }
+
+  setObjectTypeName(objectTypeName) {
+    this.objectTypeName = objectTypeName;
+  }
+
   /**
      * Some browsers do not support sending JSON in get parameters. Set this to true to avoid sending JSON
      * @method setNoJSONRequests
@@ -216,15 +226,58 @@ class ModuleBase {
      *  }
      */
   initFieldMasterData(callback, loadAllCallback, loadAllCallbackData) {
-    let values;
-    if (this.showAddNew === undefined || this.showAddNew == null) {
-      this.showAddNew = true;
-    }
     this.fieldMasterData = {};
     this.fieldMasterDataKeys = {};
     this.fieldMasterDataCallback = loadAllCallback;
     this.fieldMasterDataCallbackData = loadAllCallbackData;
+
+    const remoteSourceFields = this.getRemoteSourceFields();
+
+    for (let i = 0; i < remoteSourceFields.length; i++) {
+      const fieldRemote = remoteSourceFields[i];
+      if (fieldRemote[1]['remote-source'] !== undefined && fieldRemote[1]['remote-source'] != null) {
+        let key = `${fieldRemote[1]['remote-source'][0]}_${fieldRemote[1]['remote-source'][1]}_${fieldRemote[1]['remote-source'][2]}`;
+        if (fieldRemote[1]['remote-source'].length === 4) {
+          key = `${key}_${fieldRemote[1]['remote-source'][3]}`;
+        }
+        this.fieldMasterDataKeys[key] = false;
+
+        const callBackData = {};
+        callBackData.callBack = 'initFieldMasterDataResponse';
+        callBackData.callBackData = [key];
+        if (callback !== null && callback !== undefined) {
+          callBackData.callBackSuccess = callback;
+        }
+        this.getFieldValues(fieldRemote[1]['remote-source'], callBackData);
+      }
+    }
+  }
+
+
+  initSourceMappings() {
     this.sourceMapping = {};
+
+    const remoteSourceFields = this.getRemoteSourceFields();
+
+    for (let i = 0; i < remoteSourceFields.length; i++) {
+      const fieldRemote = remoteSourceFields[i];
+      if (fieldRemote[1]['remote-source'] !== undefined && fieldRemote[1]['remote-source'] != null) {
+        this.sourceMapping[fieldRemote[0]] = fieldRemote[1]['remote-source'];
+      }
+    }
+  }
+
+  getRemoteSourceKey(field) {
+    let key = `${field[1]['remote-source'][0]}_${field[1]['remote-source'][1]}_${field[1]['remote-source'][2]}`;
+    if (field[1]['remote-source'].length > 3) {
+      key = `${key}_${field[1]['remote-source'][3]}`;
+    }
+
+    return key;
+  }
+
+  getRemoteSourceFields() {
+    let values;
     const fields = this.getFormFields();
     const filterFields = this.getFilters();
 
@@ -237,7 +290,6 @@ class ModuleBase {
       }
     }
 
-
     const remoteSourceFields = [];
     const remoteSourceFieldKeys = [];
     let field = null;
@@ -245,16 +297,16 @@ class ModuleBase {
     for (let i = 0; i < fields.length; i++) {
       field = fields[i];
       if (field[1]['remote-source'] !== undefined && field[1]['remote-source'] !== null) {
-        const key = `${field[1]['remote-source'][0]}_${field[1]['remote-source'][1]}_${field[1]['remote-source'][2]}`;
-        // if(remoteSourceFieldKeys.indexOf(key) < 0){
-        remoteSourceFields.push(field);
-        remoteSourceFieldKeys.push(key);
-        // }
+        const key = this.getRemoteSourceKey(field);
+        if (remoteSourceFieldKeys.indexOf(key) < 0) {
+          remoteSourceFields.push(field);
+          remoteSourceFieldKeys.push(key);
+        }
       } else if (field[1].form !== undefined && field[1].form !== null) {
         for (let j = 0; j < field[1].form.length; j++) {
           fieldSub = field[1].form[j];
           if (fieldSub[1]['remote-source'] !== undefined && fieldSub[1]['remote-source'] !== null) {
-            const key = `${fieldSub[1]['remote-source'][0]}_${fieldSub[1]['remote-source'][1]}_${fieldSub[1]['remote-source'][2]}`;
+            const key = this.getRemoteSourceKey(fieldSub);
             if (remoteSourceFieldKeys.indexOf(key) < 0) {
               remoteSourceFields.push(fieldSub);
               remoteSourceFieldKeys.push(key);
@@ -264,22 +316,7 @@ class ModuleBase {
       }
     }
 
-    for (let i = 0; i < remoteSourceFields.length; i++) {
-      const fieldRemote = remoteSourceFields[i];
-      if (fieldRemote[1]['remote-source'] !== undefined && fieldRemote[1]['remote-source'] != null) {
-        const key = `${fieldRemote[1]['remote-source'][0]}_${fieldRemote[1]['remote-source'][1]}_${fieldRemote[1]['remote-source'][2]}`;
-        this.fieldMasterDataKeys[key] = false;
-        this.sourceMapping[fieldRemote[0]] = fieldRemote[1]['remote-source'];
-
-        const callBackData = {};
-        callBackData.callBack = 'initFieldMasterDataResponse';
-        callBackData.callBackData = [key];
-        if (callback !== null && callback !== undefined) {
-          callBackData.callBackSuccess = callback;
-        }
-        this.getFieldValues(fieldRemote[1]['remote-source'], callBackData);
-      }
-    }
+    return remoteSourceFields;
   }
 
   /**
@@ -761,6 +798,10 @@ class ModuleBase {
 
   }
 
+  getTableColumns() {
+    return [];
+  }
+
   getTableData() {
 
   }
@@ -1120,6 +1161,9 @@ class ModuleBase {
     for (const prop in filters) {
       if (filters.hasOwnProperty(prop)) {
         values = this.getMetaFieldValues(prop, filterFields);
+        if (!values) {
+          continue;
+        }
         value = '';
         valueOrig = null;
 
@@ -1622,7 +1666,7 @@ class ModuleBase {
     $(`#${field[0]}_div`).html('');
   }
 
-  showDataGroup(field, object) {
+  showDataGroup(field, object, callback) {
     let formHtml = this.templates.datagroupTemplate;
     let html = '';
     const fields = field[1].form;
@@ -1698,7 +1742,7 @@ class ModuleBase {
         e.preventDefault();
         e.stopPropagation();
         try {
-          modJs.editDataGroup();
+          modJs.editDataGroup(callback);
         } catch (err) {
           console.log(`Error editing data group: ${err.message}`);
         }
@@ -1709,7 +1753,7 @@ class ModuleBase {
         e.preventDefault();
         e.stopPropagation();
         try {
-          modJs.addDataGroup();
+          modJs.addDataGroup(callback);
         } catch (err) {
           console.log(`Error adding data group: ${err.message}`);
         }
@@ -1718,9 +1762,9 @@ class ModuleBase {
     }
   }
 
-  addDataGroup() {
-    const field = this.currentDataGroupField; let
-      tempParams;
+  addDataGroup(callback, existingData) {
+    const field = this.currentDataGroupField;
+    let tempParams;
     $(`#${this.getTableName()}_field_${field[0]}_error`).html('');
     $(`#${this.getTableName()}_field_${field[0]}_error`).hide();
     const validator = new FormValidation(`${this.getTableName()}_field_${field[0]}`, true, { ShowPopup: false, LabelErrorClass: 'error' });
@@ -1736,10 +1780,14 @@ class ModuleBase {
           return false;
         }
       }
-
-      let val = $(`#${field[0]}`).val();
-      if (val === '') {
-        val = '[]';
+      let val = '[]';
+      if (existingData) {
+        val = existingData;
+      } else {
+        val = $(`#${field[0]}`).val();
+        if (val === '' || val == null) {
+          val = '[]';
+        }
       }
       const data = JSON.parse(val);
 
@@ -1754,6 +1802,9 @@ class ModuleBase {
       val = JSON.stringify(data);
 
       const html = this.dataGroupToHtml(val, field);
+      if (callback) {
+        callback(val);
+      }
 
       $(`#${field[0]}_div`).html('');
       $(`#${field[0]}_div`).append(html);
@@ -1823,12 +1874,12 @@ class ModuleBase {
     });
   }
 
-  orderDataGroup(field) {
+  orderDataGroup(field, callback) {
     const newArr = []; let
       id;
     const list = $(`#${field[0]}_div_inner [fieldid='${field[0]}_div']`);
     let val = $(`#${field[0]}`).val();
-    if (val === '') {
+    if (val === '' || val == null) {
       val = '[]';
     }
     const data = JSON.parse(val);
@@ -1843,10 +1894,14 @@ class ModuleBase {
     });
 
     $(`#${field[0]}`).val(JSON.stringify(newArr));
+
+    if (callback != null) {
+      callback(newArr);
+    }
   }
 
 
-  editDataGroup() {
+  editDataGroup(callback, existingData) {
     const field = this.currentDataGroupField;
     const id = this.currentDataGroupItemId;
     const validator = new FormValidation(`${this.getTableName()}_field_${field[0]}`, true, { ShowPopup: false, LabelErrorClass: 'error' });
@@ -1866,9 +1921,14 @@ class ModuleBase {
 
 
       if (this.doCustomFilterValidation(params)) {
-        let val = $(`#${field[0]}`).val();
-        if (val === '') {
-          val = '[]';
+        let val = '[]';
+        if (existingData) {
+          val = existingData;
+        } else {
+          val = $(`#${field[0]}`).val();
+          if (val === '' || val == null) {
+            val = '[]';
+          }
         }
         const data = JSON.parse(val);
 
@@ -1897,6 +1957,10 @@ class ModuleBase {
 
         const html = this.dataGroupToHtml(val, field);
 
+        if (callback) {
+          callback(newVals);
+        }
+
         this.orderDataGroup(field);
 
         $(`#${field[0]}_div`).html('');
@@ -1914,10 +1978,15 @@ class ModuleBase {
     return true;
   }
 
-  editDataGroupItem(id) {
+  editDataGroupItem(id, existingData, field) {
     const fieldId = id.substring(0, id.lastIndexOf('_'));
 
-    const val = $(`#${fieldId}`).val();
+    let val;
+    if (existingData) {
+      val = decodeURI(existingData);
+    } else {
+      val = $(`#${fieldId}`).val();
+    }
     const data = JSON.parse(val);
 
     let editVal = {};
@@ -1929,7 +1998,13 @@ class ModuleBase {
       }
     }
 
-    this.showDataGroup($(`#${fieldId}`).data('field'), editVal);
+    if (field) {
+      field = JSON.parse(decodeURI(field));
+    } else {
+      field = $(`#${fieldId}`).data('field');
+    }
+
+    this.showDataGroup(field, editVal);
   }
 
   dataGroupGetNextAutoIncrementId(data) {
@@ -1950,10 +2025,15 @@ class ModuleBase {
   }
 
 
-  deleteDataGroupItem(id) {
+  deleteDataGroupItem(id, existingData) {
     const fieldId = id.substring(0, id.lastIndexOf('_'));
 
-    const val = $(`#${fieldId}`).val();
+    let val;
+    if (existingData) {
+      val = decodeURI(existingData);
+    } else {
+      val = $(`#${fieldId}`).val();
+    }
     const data = JSON.parse(val);
 
     const newVal = [];
@@ -2138,7 +2218,10 @@ class ModuleBase {
       if (field[1].source !== undefined && field[1].source != null) {
         t = t.replace('_options_', this.renderFormSelectOptions(field[1].source, field));
       } else if (field[1]['remote-source'] !== undefined && field[1]['remote-source'] != null) {
-        const key = `${field[1]['remote-source'][0]}_${field[1]['remote-source'][1]}_${field[1]['remote-source'][2]}`;
+        let key = `${field[1]['remote-source'][0]}_${field[1]['remote-source'][1]}_${field[1]['remote-source'][2]}`;
+        if (field[1]['remote-source'].length === 4) {
+          key = `${key}_${field[1]['remote-source'][3]}`;
+        }
         t = t.replace('_options_', this.renderFormSelectOptionsRemote(this.fieldMasterData[key], field));
       }
     } else if (field[1].type === 'colorpick') {
@@ -2576,6 +2659,20 @@ class ModuleBase {
 
     return fields;
   }
+
+  getImageUrlFromName(firstName, lastName) {
+    let seed = firstName.substring(0, 1);
+    if (!lastName && lastName.length > 0) {
+      seed += firstName.substring(firstName.length - 1, 1);
+    } else {
+      seed += lastName.substring(0, 1);
+    }
+
+    const arr = `${firstName}${lastName}`.split('');
+    seed += arr.reduce((acc, item) => parseInt(item.charCodeAt(0), 10) + acc, 0);
+
+    return `https://avatars.dicebear.com/api/initials/:${seed}.svg`;
+  }
 }
 
 export default ModuleBase;

web/api/ReactCustomFieldAdapter.js

@@ -0,0 +1,137 @@
+/*
+   Copyright (c) 2018 [Glacies UG, Berlin, Germany] (http://glacies.de)
+ Developer: Thilina Hasantha (http://lk.linkedin.com/in/thilinah | https://github.com/thilinah)
+ */
+import React from 'react';
+import { Space } from 'antd';
+import AdapterBase from './ReactModalAdapterBase';
+
+/*
+ * CustomFieldAdapter
+ */
+
+class ReactCustomFieldAdapter extends AdapterBase {
+  constructor(endPoint, tab, filter, orderBy) {
+    super(endPoint, tab, filter, orderBy);
+    this.tableType = '';
+  }
+
+  getDataMapping() {
+    return [
+      'id',
+      'name',
+      'display',
+      'display_order',
+    ];
+  }
+
+  getHeaders() {
+    return [
+      { sTitle: 'ID', bVisible: false },
+      { sTitle: 'Name' },
+      { sTitle: 'Display Status' },
+      { sTitle: 'Priority' },
+    ];
+  }
+
+  getTableColumns() {
+    return [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        sorter: true,
+        width: '25%',
+      },
+      {
+        title: 'Display Status',
+        dataIndex: 'display',
+        width: '35%',
+      },
+      {
+        title: 'Priority',
+        dataIndex: 'display_order',
+        width: '10%',
+      },
+    ];
+  }
+
+  getFormFields() {
+    return [
+      ['id', { label: 'ID', type: 'hidden' }],
+      ['name', { label: 'Name', type: 'text', validation: '' }],
+      ['display', { label: 'Display Status', type: 'select', source: [['Form', 'Show'], ['Hidden', 'Hidden']] }],
+      ['field_type', { label: 'Field Type', type: 'select', source: [['text', 'Text Field'], ['textarea', 'Text Area'], ['select', 'Select'], ['select2', 'Select2'], ['select2multi', 'Multi Select'], ['fileupload', 'File Upload'], ['date', 'Date'], ['datetime', 'Date Time'], ['time', 'Time']] }],
+      ['field_label', { label: 'Field Label', type: 'text', validation: '' }],
+      ['field_validation', {
+        label: 'Validation', type: 'select2', validation: 'none', sort: 'none', 'null-label': 'Required', 'allow-null': true, source: [['none', 'None'], ['number', 'Number'], ['numberOrEmpty', 'Number or Empty'], ['float', 'Decimal'], ['email', 'Email'], ['emailOrEmpty', 'Email or Empty']],
+      }],
+      ['field_options', {
+        label: 'Field Options',
+        type: 'datagroup',
+        form: [
+          ['label', { label: 'Label', type: 'text', validation: '' }],
+          ['value', { label: 'Value', type: 'text', validation: 'none' }],
+        ],
+        html: '<div id="#_id_#" class="panel panel-default"><div class="panel-body">#_delete_##_edit_#<span style="color:#999;font-size:13px;font-weight:bold">#_label_#</span>:#_value_#</div></div>',
+        columns: [
+          {
+            title: 'Label',
+            dataIndex: 'label',
+            key: 'label',
+          },
+          {
+            title: 'Option Value',
+            dataIndex: 'value',
+            key: 'value',
+          },
+        ],
+        validation: 'none',
+      }],
+      ['display_order', { label: 'Priority', type: 'text', validation: 'number' }],
+      ['display_section', { label: 'Display Section', type: 'text', validation: 'none' }],
+    ];
+  }
+
+  setTableType(type) {
+    this.tableType = type;
+  }
+
+  doCustomValidation(params) {
+    const validateName = function (str) {
+      const name = /^[a-z][a-z0-9._]+$/;
+      return str != null && name.test(str);
+    };
+
+    if (!validateName(params.name)) {
+      return 'Invalid name for custom field';
+    }
+
+
+    return null;
+  }
+
+  forceInjectValuesBeforeSave(params) {
+    const data = [params.name]; const options = []; let
+      optionsData;
+    data.push({});
+    data[1].label = params.field_label;
+    data[1].type = params.field_type;
+    data[1].validation = params.field_validation;
+    if (['select', 'select2', 'select2multi'].indexOf(params.field_type) >= 0) {
+      optionsData = (params.field_options === '' || params.field_options === undefined)
+        ? [] : JSON.parse(params.field_options);
+      for (const index in optionsData) {
+        options.push([optionsData[index].value, optionsData[index].label]);
+      }
+      data[1].source = options;
+    }
+    if (params.field_validation == null || params.field_validation === undefined) {
+      params.field_validation = '';
+    }
+    params.data = JSON.stringify(data);
+    params.type = this.tableType;
+    return params;
+  }
+}
+
+export default ReactCustomFieldAdapter;

web/api/ReactDrawerAdapterBase.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AdapterBase from './AdapterBase';
+import IceFormDrawer from '../components/IceFormDrawer';
+
+class ReactDrawerAdapterBase extends AdapterBase {
+  initForm() {
+    this.formContainer = React.createRef();
+    ReactDOM.render(
+      <IceFormDrawer
+        ref={this.formContainer}
+        fields={this.getFormFields()}
+        adapter={this}
+        formReference={this.formReference}
+      />,
+      document.getElementById(`${this.tab}FormReact`),
+    );
+  }
+
+  renderForm(object) {
+    this.initForm();
+    this.formContainer.current.show(object);
+  }
+}
+
+export default ReactDrawerAdapterBase;

web/api/ReactLegacyModalAdapterBase.js

@@ -0,0 +1,150 @@
+import ReactModalAdapterBase from './ReactModalAdapterBase';
+
+class ReactLegacyModalAdapterBase extends ReactModalAdapterBase {
+  // Due to having same method in ReactModalAdapterBase
+  get(callBackData) {
+    const that = this;
+
+    if (this.getRemoteTable()) {
+      this.createTableServer(this.getTableName());
+      $(`#${this.getTableName()}Form`).hide();
+      $(`#${this.getTableName()}`).show();
+      return;
+    }
+
+    let sourceMappingJson = JSON.stringify(this.getSourceMapping());
+
+    let filterJson = '';
+    if (this.getFilter() !== null) {
+      filterJson = JSON.stringify(this.getFilter());
+    }
+
+    let orderBy = '';
+    if (this.getOrderBy() !== null) {
+      orderBy = this.getOrderBy();
+    }
+
+    sourceMappingJson = this.fixJSON(sourceMappingJson);
+    filterJson = this.fixJSON(filterJson);
+
+    that.showLoader();
+    $.post(this.moduleRelativeURL, {
+      t: this.table, a: 'get', sm: sourceMappingJson, ft: filterJson, ob: orderBy,
+    }, (data) => {
+      if (data.status === 'SUCCESS') {
+        that.getSuccessCallBack(callBackData, data.object);
+      } else {
+        that.getFailCallBack(callBackData, data.object);
+      }
+    }, 'json')
+      .fail((e) => {
+        if (e.status === 403) {
+          that.showMessage('Access Forbidden', e.responseJSON.message);
+        }
+      })
+      .always(() => { that.hideLoader(); });
+
+    that.initFieldMasterData();
+
+    this.trackEvent('get', this.tab, this.table);
+    // var url = this.getDataUrl();
+    // console.log(url);
+  }
+
+  showFilters(object) {
+    let formHtml = this.templates.filterTemplate;
+    let html = '';
+    const fields = this.getFilters();
+
+    for (let i = 0; i < fields.length; i++) {
+      const metaField = this.getMetaFieldForRendering(fields[i][0]);
+      if (metaField === '' || metaField === undefined) {
+        html += this.renderFormField(fields[i]);
+      } else {
+        const metaVal = object[metaField];
+        if (metaVal !== '' && metaVal != null && metaVal !== undefined && metaVal.trim() !== '') {
+          html += this.renderFormField(JSON.parse(metaVal));
+        } else {
+          html += this.renderFormField(fields[i]);
+        }
+      }
+    }
+    formHtml = formHtml.replace(/_id_/g, `${this.getTableName()}_filter`);
+    formHtml = formHtml.replace(/_fields_/g, html);
+
+    const randomFormId = this.generateRandom(14);
+    const $tempDomObj = $('<div class="reviewBlock popupForm" data-content="Form"></div>');
+    $tempDomObj.attr('id', randomFormId);
+
+    $tempDomObj.html(formHtml);
+
+
+    $tempDomObj.find('.datefield').datepicker({ viewMode: 2 });
+    $tempDomObj.find('.timefield').datetimepicker({
+      language: 'en',
+      pickDate: false,
+    });
+    $tempDomObj.find('.datetimefield').datetimepicker({
+      language: 'en',
+    });
+
+    $tempDomObj.find('.colorpick').colorpicker();
+    tinymce.init({
+      selector: `#${$tempDomObj.attr('id')} .tinymce`,
+      height: '400',
+    });
+
+    $tempDomObj.find('.simplemde').each(function () {
+      const simplemde = new SimpleMDE({ element: $(this)[0] });
+      $(this).data('simplemde', simplemde);
+      // simplemde.value($(this).val());
+    });
+
+    // $tempDomObj.find('.select2Field').select2();
+    $tempDomObj.find('.select2Field').each(function () {
+      $(this).select2().select2('val', $(this).find('option:eq(0)').val());
+    });
+
+    $tempDomObj.find('.select2Multi').each(function () {
+      $(this).select2().on('change', function (e) {
+        const parentRow = $(this).parents('.row');
+        const height = parentRow.find('.select2-choices').height();
+        parentRow.height(parseInt(height, 10));
+      });
+    });
+
+    /*
+         $tempDomObj.find('.signatureField').each(function() {
+         $(this).data('signaturePad',new SignaturePad($(this)));
+         });
+         */
+
+    // var tHtml = $tempDomObj.wrap('<div>').parent().html();
+    this.showDomElement('Edit', $tempDomObj, null, null, true);
+    $('.filterBtn').off();
+    $('.filterBtn').on('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      try {
+        modJs.filterQuery();
+      } catch (err) {
+        // Do Nothing
+      }
+      return false;
+    });
+
+    if (this.filter !== undefined && this.filter != null && this.filter !== '') {
+      this.fillForm(this.filter, `#${this.getTableName()}_filter`, this.getFilters());
+    }
+  }
+
+  resetFilters() {
+    this.filter = this.origFilter;
+    this.filtersAlreadySet = false;
+    $(`#${this.getTableName()}_resetFilters`).hide();
+    this.currentFilterString = '';
+    this.get([]);
+  }
+}
+
+export default ReactLegacyModalAdapterBase;

web/api/ReactModalAdapterBase.js

@@ -0,0 +1,262 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Space, Tag } from 'antd';
+import {
+  EditOutlined, DeleteOutlined, CopyOutlined, MonitorOutlined,
+} from '@ant-design/icons';
+import AdapterBase from './AdapterBase';
+import IceFormModal from '../components/IceFormModal';
+import IceStepFormModal from '../components/IceStepFromModal';
+import IceTable from '../components/IceTable';
+import MasterDataReader from './MasterDataReader';
+
+
+class ReactModalAdapterBase extends AdapterBase {
+  static get MODAL_TYPE_NORMAL() { return 'Normal'; }
+
+  static get MODAL_TYPE_STEPS() { return 'Steps'; }
+
+  constructor(endPoint, tab, filter, orderBy) {
+    super(endPoint, tab, filter, orderBy);
+    this.modalType = this.MODAL_TYPE_NORMAL;
+    this.dataPipe = null;
+    this.formInitialized = false;
+    this.tableInitialized = false;
+    this.access = [];
+    this.localStorageEnabled = false;
+    this.isV2 = true;
+    this.masterDataReader = new MasterDataReader(this);
+  }
+
+  enableLocalStorage() {
+    this.localStorageEnabled = true;
+  }
+
+  setModalType(type) {
+    this.modalType = type;
+  }
+
+  setDataPipe(dataPipe) {
+    this.dataPipe = dataPipe;
+  }
+
+  setAccess(access) {
+    this.access = access;
+  }
+
+  hasAccess(type) {
+    return this.access.indexOf(type) > 0;
+  }
+
+  initTable() {
+    if (this.tableInitialized) {
+      return false;
+    }
+    const tableDom = document.getElementById(`${this.tab}Table`);
+    if (tableDom) {
+      this.tableContainer = React.createRef();
+      let columns = this.getTableColumns();
+      if (this.hasAccess('save') || this.hasAccess('delete') || this.hasAccess('element')) {
+        columns.push({
+          title: 'Actions',
+          key: 'actions',
+          render: this.getTableActionButtonJsx(this),
+        });
+      }
+
+      columns = columns.map((item) => {
+        item.title = this.gt(item.title);
+        return item;
+      });
+
+      ReactDOM.render(
+        <IceTable
+          ref={this.tableContainer}
+          reader={this.dataPipe}
+          columns={columns}
+          adapter={this}
+        >
+          {this.getTableChildComponents()}
+        </IceTable>,
+        tableDom,
+      );
+    }
+
+    this.tableInitialized = true;
+
+    return true;
+  }
+
+  initForm() {
+    if (this.formInitialized) {
+      return false;
+    }
+    this.formContainer = React.createRef();
+    if (this.modalType === this.MODAL_TYPE_NORMAL) {
+      ReactDOM.render(
+        <IceFormModal
+          ref={this.formContainer}
+          fields={this.getFormFields()}
+          adapter={this}
+          formReference={this.formReference}
+        />,
+        document.getElementById(`${this.tab}Form`),
+      );
+    } else {
+      ReactDOM.render(
+        <IceStepFormModal
+          ref={this.formContainer}
+          fields={this.getMappedFields()}
+          adapter={this}
+          formReference={this.formReference}
+        />,
+        document.getElementById(`${this.tab}Form`),
+      );
+    }
+
+    const filterDom = document.getElementById(`${this.tab}FilterForm`);
+    if (filterDom && this.getFilters()) {
+      this.filtersContainer = React.createRef();
+      ReactDOM.render(
+        <IceFormModal
+          ref={this.filtersContainer}
+          fields={this.getFilters()}
+          adapter={this}
+          saveCallback={(values, showError, closeModal) => {
+            this.setFilter(values);
+            this.filtersAlreadySet = true;
+            this.get([]);
+            this.tableContainer.current.setFilterData(values);
+            closeModal();
+          }}
+        />,
+        filterDom,
+      );
+    }
+
+    this.formInitialized = true;
+    return true;
+  }
+
+  getTableChildComponents() {
+    return false;
+  }
+
+  reloadCurrentElement() {
+    this.viewElement(this.currentId);
+  }
+
+  getTableActionButtonJsx(adapter) {
+    return (text, record) => (
+      <Space size="middle">
+        {adapter.hasAccess('save') && adapter.showEdit
+          && (
+          <Tag color="green" onClick={() => modJs.edit(record.id)} style={{ cursor: 'pointer' }}>
+            <EditOutlined />
+            {` ${adapter.gt('Edit')}`}
+          </Tag>
+          )}
+        {adapter.hasAccess('element')
+        && (
+          <Tag color="blue" onClick={() => modJs.viewElement(record.id)} style={{ cursor: 'pointer' }}>
+            <MonitorOutlined />
+            {` ${adapter.gt('View')}`}
+          </Tag>
+        )}
+        {adapter.hasAccess('delete') && adapter.showDelete
+        && (
+        <Tag color="volcano" onClick={() => modJs.deleteRow(record.id)} style={{ cursor: 'pointer' }}>
+          <DeleteOutlined />
+          {` ${adapter.gt('Delete')}`}
+        </Tag>
+        )}
+        {adapter.hasAccess('save')
+        && (
+        <Tag color="cyan" onClick={() => modJs.copyRow(record.id)} style={{ cursor: 'pointer' }}>
+          <CopyOutlined />
+          {` ${adapter.gt('Copy')}`}
+        </Tag>
+        )}
+      </Space>
+    );
+  }
+
+  setTableLoading(value) {
+    this.tableContainer.current.setLoading(value);
+  }
+
+  /**
+   * Show the view form for an item
+   * @method viewElement
+   * @param id {int} id of the item to view
+   */
+  viewElement(id) {
+    this.setTableLoading(true);
+    this.currentId = id;
+    this.getElement(id, {
+      noRender: true,
+      callBack: (element) => {
+        this.showElement(element);
+        this.setTableLoading(false);
+      },
+    });
+  }
+
+  showElement(element) {
+    this.renderForm(element, true);
+  }
+
+  /**
+   * Show the edit form for an item
+   * @method edit
+   * @param id {int} id of the item to edit
+   */
+  edit(id) {
+    this.setTableLoading(true);
+    this.currentId = id;
+    this.getElement(id, []);
+  }
+
+  renderForm(object = null, viewOnly = false) {
+    if (object == null) {
+      this.currentId = null;
+      this.currentElement = null;
+    }
+    this.setTableLoading(false);
+    this.initForm();
+    this.formContainer.current.setViewOnly(viewOnly);
+    this.formContainer.current.show(object);
+  }
+
+  showFilters() {
+    this.initForm();
+    this.filtersContainer.current.show(this.filter);
+  }
+
+  resetFilters() {
+    this.filter = this.origFilter;
+    this.filtersAlreadySet = false;
+    this.currentFilterString = '';
+    this.get([]);
+    this.tableContainer.current.setFilterData(this.filter);
+  }
+
+  get() {
+    if (this.tableContainer && this.tableContainer.current) {
+      this.tableContainer.current.setCurrentElement(null);
+    }
+    this.initTable();
+    this.masterDataReader.updateAllMasterData()
+      .then(() => {
+        this.tableContainer.current.reload();
+      });
+
+    this.trackEvent('get', this.tab, this.table);
+  }
+
+  showLoader() {
+    // $('#iceloader').show();
+  }
+}
+
+export default ReactModalAdapterBase;