logitude-dashboard-library 1.2.23 → 1.2.26

package/dist/assets/styles/dl-dashboard.scss

@@ -25,7 +25,7 @@ $dark-grey: #717585;
 
 .dl-dashboard-header {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row-reverse;
 
 }
 
@@ -264,4 +264,21 @@ $dark-grey: #717585;
 
 .hidden {
     display: none;
+}
+
+.dl-dashboard-add{
+    //height: 40px !important;
+    margin: 3px 3px 0px 8px !important;
+    //width: 40px !important ;
+}
+
+.dl-card{
+    border-radius: 19px;
+    background-color: #f5f6fb;
+    padding: 6px 0px 0px 0px;
+    margin: 0px 0px 10px 0px;
+}
+
+.dl-m-t-s{
+    margin-top: 10px;
 }

package/dist/features/Dashboard/dashboard-dialog/dashboard-dialog-component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type DashboardDialogProps = {
+    display: boolean;
+    onClose: () => void;
+};
+declare const DashboardDialogComponent: (props: DashboardDialogProps) => JSX.Element;
+export default DashboardDialogComponent;

package/dist/index.d.ts

@@ -2,6 +2,8 @@
 import "./styles.module.css";
 declare type DashboardProps = {
     token: string;
+    tenant: number;
+    userId: string;
 };
 declare const Dashboard: (props: DashboardProps) => JSX.Element;
 export default Dashboard;

package/dist/index.js

@@ -2,15 +2,16 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var button = require('primereact/button');
 var reactGridLayout = require('react-grid-layout');
 var _ = _interopDefault(require('lodash'));
 var dropdown = require('primereact/dropdown');
 var dialog = require('primereact/dialog');
 var inputtext = require('primereact/inputtext');
-var button = require('primereact/button');
 var axios = _interopDefault(require('axios'));
 var ReactApexChart = _interopDefault(require('react-apexcharts'));
 var overlaypanel = require('primereact/overlaypanel');
+var inputtextarea = require('primereact/inputtextarea');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1091,8 +1092,6 @@ var DashboardDesigner = function DashboardDesigner() {
 
   var renderPageHeader = function renderPageHeader() {
     return React__default.createElement("div", {
-      className: "dl-dashboard-header"
-    }, React__default.createElement("div", {
       className: "dl-heder-row"
     }, React__default.createElement("div", {
       style: {
@@ -1111,7 +1110,7 @@ var DashboardDesigner = function DashboardDesigner() {
         return option === null || option === void 0 ? void 0 : option.Disabled;
       },
       scrollHeight: "300px"
-    }))));
+    })));
   };
 
   function addComponent(componentType) {
@@ -1377,11 +1376,268 @@ var WidgetTypes = [{
   Disabled: true
 }];
 
+var ApiServices = /*#__PURE__*/function () {
+  function ApiServices() {
+    this._apiUrl = Tools.GetLogitudeURL();
+  }
+
+  var _proto = ApiServices.prototype;
+
+  _proto.getByFilters = function getByFilters(api, filters) {
+    var token = this.getTokenFromStorage();
+    var apiURL = "" + this._apiUrl + api;
+    apiURL = this.ConcatFiltersToURL(filters, apiURL);
+    return axios.get(apiURL, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Token': token
+      }
+    });
+  };
+
+  _proto.post = function post(api, date) {
+    var token = this.getTokenFromStorage();
+    var apiURL = "" + this._apiUrl + api;
+    return axios.post(apiURL, date, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Token': token
+      }
+    });
+  };
+
+  _proto.getTokenFromStorage = function getTokenFromStorage() {
+    return window.localStorage.getItem("token") || '';
+  };
+
+  _proto.ConcatFiltersToURL = function ConcatFiltersToURL(filters, urlparameters) {
+    var mykeys = Object.keys(filters);
+    var addtionalFiltersValues = null;
+
+    for (var i in mykeys) {
+      var propName = mykeys[i];
+      var propValue = filters[propName];
+      var ignoreFilter = propName.indexOf("Operator") > 0 && propValue == "Equals" || propName == "AdditionalFilters";
+
+      if (urlparameters != "?") {
+        urlparameters = urlparameters.concat('&');
+      }
+
+      if (!ignoreFilter) {
+        propValue = propValue ? encodeURIComponent(propValue) : '';
+        urlparameters = urlparameters.concat(propName.concat('=').concat(propValue));
+      }
+
+      if (propName == "AdditionalFilters" && propValue.length > 0) {
+        addtionalFiltersValues = JSON.stringify(propValue);
+      }
+    }
+
+    if (addtionalFiltersValues) {
+      urlparameters = urlparameters.concat("&AdditionalFilters=").concat(addtionalFiltersValues);
+    }
+
+    return urlparameters;
+  };
+
+  return ApiServices;
+}();
+
+var DashBoardService = /*#__PURE__*/function () {
+  function DashBoardService() {
+    this.tableName = 'DashBoard';
+    this._ApiServices = new ApiServices();
+  }
+
+  var _proto = DashBoardService.prototype;
+
+  _proto.getDataByFilters = function getDataByFilters(filters) {
+    return this._ApiServices.getByFilters("/api/" + this.tableName + "Views/getbyfilters?", filters);
+  };
+
+  _proto.add = function add(data) {
+    return this._ApiServices.post("/api/DashBoards", data);
+  };
+
+  return DashBoardService;
+}();
+
+var Session = function Session() {};
+
+var DashboardDialogComponent = function DashboardDialogComponent(props) {
+  var _useState = React.useState(''),
+      name = _useState[0],
+      setName = _useState[1];
+
+  var _useState2 = React.useState(''),
+      description = _useState2[0],
+      setDescription = _useState2[1];
+
+  var _useState3 = React.useState(props.display),
+      displayAddDashboard = _useState3[0],
+      setDisplayAddDashboard = _useState3[1];
+
+  var _useState4 = React.useState({}),
+      validation = _useState4[0],
+      setValidation = _useState4[1];
+
+  React.useEffect(function () {
+    setDisplayAddDashboard(props.display);
+  }, [props.display]);
+
+  var onSave = function onSave() {
+    if (!checkFormValidation()) return;
+    var dashBoardService = new DashBoardService();
+    var dasboard = {
+      Name: name,
+      Description: description,
+      Tenant: Session.Tenant,
+      UpdatedByUserId: Session.CurrentUserId,
+      CreatedByUserId: Session.CurrentUserId
+    };
+    dashBoardService.add(dasboard).then(function (e) {
+      onCancel();
+    });
+  };
+
+  var checkFormValidation = function checkFormValidation() {
+    var isValid = true;
+    var formValidation = {};
+
+    if ((name === null || name === void 0 ? void 0 : name.length) == 0) {
+      formValidation['name'] = true;
+      isValid = false;
+    } else {
+      formValidation['name'] = false;
+    }
+
+    console.log(formValidation['name']);
+    setValidation(formValidation);
+    return isValid;
+  };
+
+  var onCancel = function onCancel() {
+    setDisplayAddDashboard(false);
+    props.onClose();
+    clear();
+  };
+
+  var clear = function clear() {
+    setDescription('');
+    setName('');
+  };
+
+  return React__default.createElement(dialog.Dialog, {
+    header: "New Dashboard",
+    visible: displayAddDashboard,
+    style: {
+      width: 'auto'
+    },
+    onHide: onCancel
+  }, React__default.createElement("form", {
+    id: "dashboard-crd",
+    name: "dashboard-crd"
+  }, React__default.createElement("div", {
+    className: "form"
+  }, React__default.createElement("div", {
+    className: "form-field"
+  }, React__default.createElement("label", {
+    htmlFor: "dashboard-name"
+  }, "Name"), React__default.createElement(inputtext.InputText, {
+    id: "dashboard-name",
+    className: "p-inputtext-sm " + (validation['name'] ? 'p-invalid' : ''),
+    value: name,
+    required: true,
+    onChange: function onChange(e) {
+      setName(e.target.value);
+    }
+  })), React__default.createElement("div", {
+    className: "form-field"
+  }, React__default.createElement("label", {
+    htmlFor: "dashboard-description"
+  }, "Description"), React__default.createElement(inputtextarea.InputTextarea, {
+    id: "dashboard-description",
+    className: "p-inputtext-sm",
+    value: description,
+    onChange: function onChange(e) {
+      setDescription(e.target.value);
+    }
+  }))), React__default.createElement("div", {
+    className: "dialog-footer dl-m-t-s"
+  }, React__default.createElement(button.Button, {
+    label: "Cancel",
+    className: "p-button-text",
+    onClick: onCancel
+  }), React__default.createElement(button.Button, {
+    label: "Ok",
+    form: "frm",
+    onClick: onSave,
+    autoFocus: true
+  }))));
+};
+
 var Dashboard = function Dashboard(props) {
-  localStorage.setItem("token", props === null || props === void 0 ? void 0 : props.token);
-  return React.createElement("div", {
+  var _props$token;
+
+  var _useState = React.useState([]),
+      dashbords = _useState[0],
+      setDashbords = _useState[1];
+
+  var _useState2 = React.useState(false),
+      displayAddDashboard = _useState2[0],
+      setDisplayAddDashboard = _useState2[1];
+
+  var dashboardService = new DashBoardService();
+  React.useEffect(function () {
+    getDashboards();
+  }, []);
+  Session.CurrentUserId = props.userId;
+  Session.Tenant = props.tenant;
+  Session.Token = props.token;
+  if ((props === null || props === void 0 ? void 0 : (_props$token = props.token) === null || _props$token === void 0 ? void 0 : _props$token.length) > 0) localStorage.setItem("token", props === null || props === void 0 ? void 0 : props.token);
+
+  var onDashboardDialogClose = function onDashboardDialogClose() {
+    getDashboards();
+    setDisplayAddDashboard(false);
+  };
+
+  var getDashboards = function getDashboards() {
+    dashboardService.getDataByFilters(new ApiQueryFilters()).then(function (data) {
+      console.log(data);
+      setDashbords(data.data.Result);
+    });
+  };
+
+  return React.createElement("div", null, React.createElement("div", {
+    className: 'dl-dashboard-header dl-card'
+  }, React.createElement("div", null, React.createElement(button.Button, {
+    icon: "pi pi-plus",
+    onClick: function onClick() {
+      return setDisplayAddDashboard(true);
+    },
+    className: "dl-dashboard-add p-button-rounded p-button-success",
+    "aria-label": "Search"
+  })), React.createElement(DashboardDialogComponent, {
+    display: displayAddDashboard,
+    onClose: onDashboardDialogClose
+  }), React.createElement("div", {
+    style: {
+      width: "210px"
+    }
+  }, React.createElement(dropdown.Dropdown, {
+    value: [],
+    options: dashbords,
+    optionValue: "Id",
+    optionLabel: "Name",
+    onChange: function onChange(e) {},
+    placeholder: "Choose Dashboard",
+    optionDisabled: function optionDisabled(option) {
+      return option === null || option === void 0 ? void 0 : option.Disabled;
+    },
+    scrollHeight: "300px"
+  }))), React.createElement("div", {
     className: 'dl-dashboard-body'
-  }, React.createElement(DashboardDesigner, null));
+  }, React.createElement(DashboardDesigner, null)));
 };
 
 module.exports = Dashboard;