BizgazeUI/assets/js/list.index.js

/*Data  loading  start here*/
import {getCookie, isAuthenticated} from "./cookiehelper.js";
import {getData, getDataObj} from "./base.js";
import {_serverUrl} from "./setting.js";
export var connection;

export function dateTimeFormat(dateTime) {
  var date = moment.utc(dateTime).local();
  var difmonths = moment().diff(date, "months");
  if (difmonths == 0) {
    return moment(dateTime).fromNow();
  }
  return date.format("DD MMM, YYYY HH:mm");
}
function createLoad(data) {
  let html = "";
  if (data.length != 0) {
    for (var i = 0; i < data.length; i++) {
      html += `<li class="p-0">
        <a href="javascript:;" class="dropdown-item create-form-btn" data-AppConfigType="${data[i].AppConfigType}" data-AppPermissionId="${data[i].AppPermissionId}" data-AppConfigurationId="${data[i].AppConfigurationId}" data-formid="${data[i].FormId}" data-installedAppid="${data[i].InstalledAppId}">${data[i].AppTitle}</a>
      </li>`;
    }
  } else {
    html += `<li class="p-0">Apps are Not Installed</li>`;
  }
  $("#crte-btn-lst").html(html);
  $(".create-form-btn").on("click", function () {
    const date = new Date();
    let number = date.getTime();
    let serverUrl = _serverUrl();
    let appName = $(this).text();
    let formId = $(this).attr("data-formid");
    let installedAppId = $(this).attr("data-installedappid");
    let appConfigurationId = $(this).attr("data-appconfigurationid");
    let pk_id = 0;
    const cookie = getCookie("_idty");
    let fomrhtml = "";
    let width = iFrmeWdth();
    if (cookie) {
      const {unibaseId, tenantId, userId} = JSON.parse(cookie);

      fomrhtml = `<div>
                    <div class="frm-ifre frm-ifre-${number}" id="frm-ifre-${number}" style="right:${width}px">
                      <div>
                        <ul class="m-0 p-0">
                          <li class="frm-hdr d-none">
                            <div class="app-title-ifrm">${appName}</div>
                            <div class="ctrl">
                              <a href="javascript:;" class="minimize" data-unid="${number}" data-ispopup="true"><span><i class="la la-minus"></i></span></a>
                              <a href="javascript:;" class="maximum" data-unid="${number}"><span><i class="la la-expand"></i></span></a>
                              <a href="javascript:;" class="compress d-none" data-unid="${number}"><span><i class="las la-compress"></i></span></a>
                              <a href="javascript:;" class="close" data-unid="${number}"><span><i class="la la-times"></i></span></a>
                            </div>
                          </li>
                          <li class="frm-bdy">
                            <div class="ctrl-vrtl">
                              <a href="javascript:;" class="minimize" data-unid="${number}" data-ispopup="true"><span><i class="la la-minus"></i></span></a>
                              <a href="javascript:;" class="maximum" data-unid="${number}"><span><i class="la la-expand"></i></span></a>
                              <a href="javascript:;" class="compress d-none" data-unid="${number}"><span><i class="las la-compress"></i></span></a>
                              <a href="javascript:;" class="close" data-unid="${number}"><span><i class="la la-times"></i></span></a>
                            </div>
                            <iframe class="ld-frm-src" data-ispopup="false" src="${serverUrl}#/${unibaseId}/${tenantId}/${userId}/${installedAppId}/${formId}/${pk_id}/${appConfigurationId}/loadform"></iframe>
                          </li>
                          <li class="frm-ftr"></li>
                        </ul>
                      </div>
                    </div>
                  </div>`;
    }
    $("#list-page").parent("body").append(fomrhtml);
    window.window.postMessage("ld-frm-ifrme", "*");
    hdrCrtnClckEvnt(number);
  });
}

function hdrCrtnClckEvnt(number) {
  $(`.frm-ifre-${number} .minimize`).on("click", function () {
    let id = $(this).attr("data-unid");
    let isPopUpState = $(this).attr("data-ispopup");
    let height = $(`.frm-ifre-${id}`).find(".frm-hdr").height();
    $(".list-page").css({filter: "unset", opacity: 1});
    $(`.frm-ifre-${id} .frm-hdr`).toggleClass("d-none");
    $(`.frm-ifre-${id} .frm-bdy`).toggleClass("d-none");
    if (isPopUpState == "true") {
      // popup large
      $(this).attr("data-ispopup", "false");
      $(`.frm-ifre-${id} .maximum`).addClass("d-none");
      $(`.frm-ifre-${id} .minimize`).attr("data-ispopup", "false");
      $(`.frm-ifre-${id}`).parent().removeClass("wrap-iframe");
      $(`.frm-ifre-${id}`).attr("data-ispop_up", "false");
      $(`.frm-ifre-${id}`).css({
        width: "20%",
        height: height,
        bottom: "0px",
      });
    } else {
      // popup small
      $(this).attr("data-ispopup", "true");
      $(`.frm-ifre-${id} .maximum`).removeClass("d-none");
      $(`.frm-ifre-${id} .minimize`).attr("data-ispopup", "true");
      $(`.frm-ifre-${id}`).attr("data-ispop_up", "true");
      $(`.frm-ifre-${id}`).css({
        width: "",
        height: "",
        bottom: "",
      });
    }
    resetwidth();
  });
  $(`.frm-ifre-${number} .maximum`).on("click", function () {
    let id = $(this).attr("data-unid");
    $(this).addClass("d-none");
    $(this).siblings(".compress").removeClass("d-none");
    $(`.frm-ifre-${id}`).find(".ld-frm-src").attr("data-ispopup", "true");
    $(`.frm-ifre-${id}`).parent().addClass("wrap-iframe");
    $(`.frm-ifre-${id}`).css({width: "75%", position: "unset"});
    $(`.frm-ifre-${id} .ld-frm-src`).css({width: "100%"});
    $(`.frm-ifre-${id} .frm-bdy`).removeClass("d-none");
    $("#list-page").css({filter: "blur(2px)", opacity: "0.5"});
    $(`.frm-ifre-${id}`).find(".minimize").toggleClass("d-none");
  });
  $(`.frm-ifre-${number} .compress`).on("click", function () {
    let id = $(this).attr("data-unid");
    $(this).addClass("d-none");
    $(this).siblings(".maximum").removeClass("d-none");
    $(`.frm-ifre-${id}`).parent().removeClass("wrap-iframe");
    $(`.frm-ifre-${id}`).css({width: "", position: ""});
    $(`.frm-ifre-${id} .ld-frm-src`).css({width: ""});
    $("#list-page").css({filter: "", opacity: ""});
    $(`.frm-ifre-${id}`).find(".minimize").toggleClass("d-none");
  });
  $(`.frm-ifre-${number} .close`).on("click", function () {
    let id = $(this).attr("data-unid");
    $("#list-page").css({filter: "unset", opacity: "1"});
    $(`.frm-ifre-${id}`).parent().remove();
    resetwidth();
  });
}
function loadData() {
  $(".bdy-ul").empty();
  $('[class="refrsh"]')
    .unbind()
    .on("click", function () {
      loadData();
    });
  $('[data-clck="ri-grid-fill"]').on("click", function () {
    $(".apps-list").toggleClass("d-flex");
  });
  getData("apis/v4/unibase/platform/apps/myapps").then(function (response) {
    let result = JSON.parse(response.result);
    let html = "";
    for (var i = 0; i < result.length; i++) {
      html += `<li class="appsBind" data-myappid="${result[i].MyAppId}"><img src="../imgs/${result[i].ImageUrl}" ><span class="appTitle">${result[i].AppTitle}</span></li>`;
    }
    $("#apps-list").html(html);
    $("li.appsBind").on("click", function () {
      $(".apps-list").removeClass("d-flex");
    });
  });
  getData(
    "apis/v4/unibase/reminders/platform/getunreadreminders/ReminderType/6/PageSize/20"
  ).then(function (result) {
    let response = JSON.parse(result.result);
    if (response.length != 0) {
      // Notifcations
      let bdyUI = '<div class="accordion" id="notifi-list">';
      for (var i = 0; i < response.length; i++) {
        bdyUI += `<li class="item-li" id="${
          response[i].ReminderId
        }" data-ref="${
          response[i].RedirectOptions.RefId
        }" data-installedAppId="${
          response[i].RedirectOptions.InstalledAppId
        }" data-formId="${response[i].RedirectOptions.CreateFormId}">
                            <div class="accordion-header" id="accHeader-${
                              response[i].ReminderId
                            }">
                                <div class="notifiListItms accordion-button collapsed" data-bs-toggle="collapse"  data-bs-target="#collapse-${
                                  response[i].ReminderId
                                }" aria-expanded="false" aria-controls="collapseOne">
                                    <div class="row m-0 w-100 p-0 ">
                                        <div class="col-3 px-0  d-flex flex-row text-truncate">
                                            <input class="form-check-input mr-2" type="checkbox" value="" id="flexCheckDefault">
                                            <div class="mx-3 w-75 text-truncate">
                                              <span class="mx-1">${
                                                response[i].Subject
                                              }</span>
                                            </div>
                                        </div>
                                        <div class="col-9 text-truncate d-flex justify-content-between">
                                            <span class="mx-1 w-mes">${
                                              response[i].Message
                                            }</span>
                                            <span class="mx-1 t-sec-min">${dateTimeFormat(
                                              response[i].ReminderDate
                                            )}</span>
                                        </div>
                                    </div>    
                                </div>
                                <div id="collapse-${
                                  response[i].ReminderId
                                }"  class="accordion-collapse collapse" aria-labelledby="accHeader-${
          response[i].ReminderId
        }" data-bs-parent="#notifi-list">
                                    <div class="accordion-body" id="accBody${
                                      response[i].ReminderId
                                    }">
                                        
                                    </div>
                                </div>
                            </div>
                        </li>`;
      }
      bdyUI += "</div>";
      $(".bdy-ul").append(bdyUI);
      $('.sub-nav-item[data-buttonType="inbox"] .length').remove();
      $('.sub-nav-item[data-buttonType="inbox"]').append(
        `<span class="length badge rounded-pill bg-light text-dark ml-auto"></span>`
      );
      $(".notifiListItms").on("click", function () {
        let _this = $(this).parents(".item-li");
        let obj = {
          FromDate: "2022/11/30",
          InstalledAppId: Number($(_this).attr("data-installedAppId")),
          RecordId: Number($(_this).attr("data-ref")),
          ToDate: "2022/11/30",
        };
        //let obj = { "FromDate": "2022/11/30", "InstalledAppId": 102530270000109, "RecordId": 102533490346298, "ToDate": "2022/11/30" };
        getDataObj(
          "apis/v4/unibase/platform/widgets/getdefaultwidget",
          obj,
          true,
          "POST"
        ).then(function (response) {
          let res = JSON.parse(response.result),
            html = "";
          if (response.message == "200" && response.errors == null) {
            html = `<ul class="p-0 m-0 d-flex flex-row">`;
            if (
              res.AppConfigurations != null &&
              res.AppConfigurations.length > 0
            ) {
              for (var k = 0; k < res.AppConfigurations.length; k++) {
                html += `<li class="mx-2 btn-outline-primary btn btn-sm">${res.AppConfigurations[k].SettingName}</li>`;
              }
            } else {
              html += `<li class="p-1 my-0 alert alert-danger" role="alert">
                                App Configurations Not configure
                            </li>`;
            }
            if (res.Stages != null) {
              for (var x = 0; x < res.Stages.length; x++) {
                if (res.Stages[x].IsDefault) {
                  html += `<li class="ml-auto">
                                                <a class="btn btn-sm btn-secondary dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                ${res.Stages[x].StageName}
                                                </a>
                                                <ul class="dropdown-menu">`;
                }
              }
              for (var i = 0; i < res.Stages.length; i++) {
                if (!res.Stages[i].IsDefault) {
                  html += `<li><a class="dropdown-item" href="javascript:void(0);">${res.Stages[i].StageName}</a></li>`;
                }
              }
              html += "</ul></li>";
            } else {
              html += `<li class="p-1 my-0 alert alert-danger ml-auto" role="alert">
                                    No Stages
                                </li>`;
            }
            html += `<li class="p-1 mx-2 my-0 btn-outline-info detailBtn btn btn-sm" data-appid="${Number(
              $(_this).attr("data-installedAppId")
            )}" data-recordid="${Number(
              $(_this).attr("data-ref")
            )}">Details-Page</li></ul>`;
          } else {
            html += `<div class="alert alert-danger" role="alert">
                                    ${response.message} ${response.errors}
                                </div>`;
          }
          $(_this).find(".accordion-body").html(html);
          detailClick();
        });
      });
    }
  });
  getData(
    "apis/v4/unibase/reminders/platform/getunreadreminders/ReminderType/1/PageSize/20"
  ).then(function (tskResp) {
    let response = JSON.parse(tskResp.result);
    if (response.length != 0) {
      let _tskhtml = '<div class="accordion" id="task-list">';
      for (var i = 0; i < response.length; i++) {
        _tskhtml += `<li class="item-li" id="${
          response[i].ReminderId
        }" data-ref="${
          response[i].RedirectOptions.RefId
        }" data-installedAppId="${
          response[i].RedirectOptions.InstalledAppId
        }" data-formId="${response[i].RedirectOptions.CreateFormId}">
                                <div class="accordion-header" id="accHeader-${
                                  response[i].ReminderId
                                }">
                                    <div class="tskListItms accordion-button collapsed" data-bs-toggle="collapse"  data-bs-target="#collapse-${
                                      response[i].ReminderId
                                    }" aria-expanded="false" aria-controls="collapseOne">
                                        <div class="row m-0 w-100 p-0 ">
                                            <div class="col-3 px-0  d-flex flex-row text-truncate">
                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                <div class="mx-3 w-75 text-truncat">
                                                  <span class="mx-1">${
                                                    response[i].Subject
                                                  }</span>
                                                </div>
                                            </div>
                                            <div class="col-9 text-truncate d-flex justify-content-between">
                                                <span class="mx-1 w-mes">${
                                                  response[i].Message
                                                }</span>
                                                <span class="mx-1 t-sec-min">${dateTimeFormat(
                                                  response[i].ReminderDate
                                                )}</span>
                                            </div>
                                        </div>    
                                    </div>
                                    <div id="collapse-${
                                      response[i].ReminderId
                                    }"  class="accordion-collapse collapse" aria-labelledby="accHeader-${
          response[i].ReminderId
        }" data-bs-parent="#notifi-list">
                                        <div class="accordion-body" id="accBody${
                                          response[i].ReminderId
                                        }">
                                            <ul class="p-0 m-0 d-flex flex-row justify-content-between">
                                                <li class="mx-2 btn-outline-success btn btn-sm">Confirm</li>
                                                <li class="mx-2 btn-outline-danger btn btn-sm">Reject</li>
                                                <li class="mx-2 btn-outline-primary btn btn-sm">Close</li>
                                                <li class="mx-2 btn-outline-info detailBtn btn btn-sm" data-appId="${
                                                  response[i].RedirectOptions
                                                    .InstalledAppId
                                                }" data-recordId="${
          response[i].RedirectOptions.RefId
        }">Details-Page</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>`;
      }
      _tskhtml += "</div>";
      $(".bdy-ul").append(_tskhtml);
      detailClick();
    }
  });

  // create button apps load
  let appName = [];
  getData("apis/v4/unibase/platform/apps/myapps").then(function (res) {
    let response = JSON.parse(res.result);
    jQuery.each(response, async function (index, item) {
      let installedAppId = Number(item.MyAppId);
      await getData(
        `apis/v4/unibase/platform/apps/listappconfigurations/installedappid/${installedAppId}`
      ).then(function (result) {
        if (
          result.result != null &&
          result.result != "" &&
          result.result != "[]"
        ) {
          let _data = JSON.parse(result.result);
          let data = _data.filter((x) => x.SettingUrlType == 1);
          if (data.length != 0) {
            appName.push({
              SettingUrlType: data[0].SettingUrlType,
              AppTitle: data[0].AppTitle,
              FormId: data[0].FormId,
              InstalledAppId: data[0].InstalledAppId,
              RoleSettingAppId: data[0].RoleSettingAppId,
              InstalledAppGuid: data[0].InstalledAppGuid,
              AppConfigurationId: data[0].AppConfigurationId,
              AppPermissionId: data[0].AppPermissionId,
              AppConfigType: data[0].AppConfigType,
            });
          }
        }
      });
      await createLoad(appName);
    });
  });

  getData("apis/v4/unibase/reminders/platform/getunreadreminderscount").then(
    function (response) {
      let result = JSON.parse(response.result);
      let count = Number(result.NotificationCount) + Number(result.TasksCount);
      $('[data-buttontype="inbox"] .length').text(count);
      $('[data-notification="count"]').text(count);
      if (count > 40) {
        $('[data-paggtn="true"]').text(`1-40`);
      } else {
        $(".li-pgn").empty();
      }
    }
  );
}
function iFrmeWdth() {
  let width = 0,
    erwdth = 32;
  $(".frm-ifre").each(function (i, e) {
    if ($(this).length == 0) {
      erwdth = 0;
    }
    if (window.innerWidth > width) {
      width = width + $(this).width() + erwdth;
    }
  });
  return width;
}
function resetwidth() {
  let width = 0,
    erwdth = 32;
  $(".frm-ifre").each(function (i, e) {
    if (i == 0) {
      $(this).css("right", width + "px");
    }
    if (i != 0) {
      $(this).css("right", width + "px");
    }
    if (window.innerWidth > width) {
      width = width + $(this).width() + erwdth;
    }
  });
}
export function detailClick() {
  $(".detailBtn").click(function () {
    let serverUrl = _serverUrl();
    $(".bdy-ul").addClass("d-none");
    let installedAppId = +$(this).attr("data-appId");
    let recordId = +$(this).attr("data-recordId");
    // Unibase.Themes.Compact.Components.Notification.Instance().loadReminderDetails(105013010001972,105010260000090,'Details','null',6,0,null)
    const cookie = getCookie("_idty");
    if (cookie) {
      const {unibaseId, tenantId, userId} = JSON.parse(cookie);
      $("#detailIframe").html(
        `<iframe width="100%" style="min-height:calc(100vh - ${$(
          ".tp-bar"
        ).height()}px)"  name="srcframe" id="srcframe" class="srcframe" src="${serverUrl}#/${unibaseId}/${tenantId}/${userId}/${recordId}/${installedAppId}/loadDetail"></iframe>`
      );
    }
  });
}
export function signaRInit() {
  var huburl = _serverUrl() + "notificationhub";
  connection = new window["signalR"].HubConnectionBuilder()
    .withUrl(huburl)
    .build();
  register();
}
export async function register() {
  connection.on("sendnotification", (obj) => {
    $(".ctr-lst-pge .bdy-ul").empty();
    loadData();
  });
  const cookie = getCookie("_idty");
  const {unibaseId, tenantId, userId, sessionId, name} = JSON.parse(cookie);
  let packet = {
    UserId: Number(userId),
    UserName: name,
    UnibaseId: unibaseId,
    TenantId: Number(tenantId),
    SessionId: sessionId,
  };
  try {
    const stringConnection = await connection.start();
    await connection.invoke("Connect", packet);
  } catch (error) {
    console.log(error);
  }
}

export function resetClckEvnt() {
  $(".ChtAppIfrme").remove();
  $(".lft-nav-bar .lft-nav-bar-2").removeClass("d-none");
  $(".ctr-lst-pge, .rtr-nav-bar").removeClass("d-none");
  $(".lft-nav-bar").css("width", "");
}

export function initListIndex() {
  let _userInfo = atob(document.cookie.split("=")[1]);
  let userInfo = " JSON.parse(_userInfo).result";
  let sessionId = "userInfo.sessionId";
  signaRInit();
  let usrinfoHTML = `<li><a class="dropdown-item" href="javascript:void(0);">${userInfo.name}</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Cloud Settings</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Help</a></li>
                    <li><a class="dropdown-item" href="javascript:void(0);" data-btn="logoff">Logoff</a></li>`;
  $(".icn-circle").text(userInfo?.name?.charAt(0)?.toUpperCase());
  $(".uindtls").html(usrinfoHTML);
  $('[data-btn="logoff"]').on("click", function () {
    document.cookie = "_idty=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    window.location = "../login";
  });
  // List Page loading

  /*Data  loading  start here*/
  $(".nav-lft-item").on("click", function () {
    $(".nav-lft-item").removeClass("active");
    $(this).addClass("active");
    if ($(this).attr("data-application") != "Chat Application") {
      resetClckEvnt();
    }
  });
  $(".nav-lft-item[data-application='Chat Application']").on(
    "click",
    function () {
      const serverUrl = _serverUrl();
      const cookie = getCookie("_idty");
      const {unibaseId, tenantId, userId} = JSON.parse(cookie);
      $(".lft-nav-bar .lft-nav-bar-2").addClass("d-none");
      $(".ctr-lst-pge, .rtr-nav-bar").addClass("d-none");
      $(".lft-nav-bar").css("width", "var(--rtrWidth)");
      $(".btm-bar .ChtAppIfrme").remove();
      $(".btm-bar").append(`<div class="ChtAppIfrme w-100">
                  <iframe class="" style="height:100%; width:100%" data-ispopup="false" src="${serverUrl}#/${unibaseId}/${tenantId}/${userId}/loadChat"></iframe>
                </div>`);
    }
  );
  $(".mnNvIcn").click(function () {
    $(".lft-nav-bar").toggleClass("lft-nav-bar-Wrap");
    $(".ctr-lst-pge").toggleClass("lft-nav-bar-Wrap");
  });
  $(".mre-drp a.sub-nav-item.more").on("click", function () {
    $(".sub-nav-item").removeClass("active");
    if ($(this)[0].className.includes("active")) {
      $(this).find("i").css("transform", "rotate(0deg)");
      $(this).removeClass("active");
    } else {
      $(this).find("i").css("transform", "rotate(180deg)");
      $(this).addClass("active");
    }
    $(this).siblings(".ul-drpdown").toggleClass("d-none");
  });
  $("a.sub-nav-item")
    .not(".more.active")
    .on("click", function () {
      $(".sub-nav-item").not(".more.active").removeClass("active");
      $(this).addClass("active");
    });

  try {
    loadData();
  } catch (error) {
    console.log("LoadData Method is not loading, and getting error");
  }
}