BizgazeUI/assets/js/list.index.js

/*Data  loading  start here*/
import {getCookie} from "./cookiehelper.js";

import {getData, getDataObj} from "./base.js";
import {_serverUrl} from "./setting.js";

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">
                            <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">
                            <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").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-bdy`).toggleClass("d-none");
    if (isPopUpState == "true") {
      // popup large
      $(this).attr("data-ispopup", "false");
      $(`.frm-ifre-${id} .maximum`).addClass("d-none");
      $(`.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}`).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() {
  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-1 ">
                                            <input class="form-check-input mx-1" type="checkbox" value="" id="flexCheckDefault">
                                        </div>
                                        <div class="col-4 text-truncate">
                                            <span class="mx-1">${response[i].Subject}</span>
                                        </div>
                                        <div class="col-5 text-truncate">
                                            <span class="mx-1">${response[i].Message}</span>
                                        </div>
                                        <div class="col-2 text-truncate">
                                            <span class="mx-1">22 minutes ago</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);

      $(".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-1 ">
                                                <input class="form-check-input mx-1" type="checkbox" value="" id="flexCheckDefault">
                                            </div>
                                            <div class="col-4 text-truncate">
                                                <span class="mx-1">${response[i].Subject}</span>
                                            </div>
                                            <div class="col-5 text-truncate">
                                                <span class="mx-1">${response[i].Message}</span>
                                            </div>
                                            <div class="col-2 text-truncate">
                                                <span class="mx-1">2 seconds</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);
    });
  });
}
function iFrmeWdth() {
  let width = 0,
    erwdth = 20;
  $(".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 = 20;
  $(".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);
      debugger;
      $("#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 initListIndex() {
  let _userInfo = atob(document.cookie.split("=")[1]);
  let userInfo = " JSON.parse(_userInfo).result";
  let sessionId = "userInfo.sessionId";

  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);">Logoff</a></li>`;
  $(".icn-circle").text(userInfo?.name?.charAt(0)?.toUpperCase());
  $(".uindtls").html(usrinfoHTML);

  // List Page loading

  /*Data  loading  start here*/
  $(".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");
    });
  loadData();
}