API's Notifications, tasks list Loading

assets/css/list.page.css

@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 :root {
     --topNavHeight: 75px;
-    --rtrWidth: 60px;
-    --lftWidth: 300px;
+    --rtrWidth: 50px;
+    --lftWidth: 275px;
     --tpMenuPad: 30px;
     --icnPadng: 10px 0px;
     --prmBgColor: rgb(244, 244, 221);
@@ -135,6 +135,7 @@ li.logo-li {
 
 .ctr-lst-pge {
     position: fixed;
+    z-index: 2;
     left: var(--lftWidth);
     right: var(--rtrWidth);
     height: inherit;
@@ -261,4 +262,23 @@ a.badge {
 }
 
 
-/* Scroll bar End Here */
+/* Scroll bar End Here */
+
+.accordion-button::after {
+    background-size: 0.9rem !important;
+    ;
+}
+
+a[role="button"]:focus {
+    box-shadow: none !important;
+}
+
+#notifi-list .item-li:first .accordion-button:not(.collapsed) {
+    border-top-left-radius: var(--lstPgArc);
+    border-top-right-radius: var(--lstPgArc);
+}
+
+input[type="checkbox"] {
+    box-shadow: none !important;
+    border-radius: 2px;
+}

assets/js/base.js

@@ -1,4 +1,4 @@
-const serverUrl = 'https://test.bizgaze.app/';
+const serverUrl = 'https://c01.bizgaze.app/';
 let _baseUserInfo = atob(document.cookie.split('=')[1]);
 let baseUserInfo = JSON.parse(_baseUserInfo).result;
 let baseSessionId = baseUserInfo.sessionId;
@@ -25,12 +25,50 @@ function getData(url) {
     });
 }
 
-function formatLocal(dateTime) {
-    var date = moment.utc(dateTime).local();
-    var difmonths = moment().diff(date, 'months');
+function getDataObj(url, data, async, type) { //url, data, true, "POST"
+
+    let serviceurl = serverUrl + url;
+    return $.ajax({
+        type: type,
+        url: serviceurl,
+        data: JSON.stringify(data),
+        contentType: 'application/json',
+        traditional: true,
+        crossDomain: true,
+        async: async,
+        beforeSend: function(xhr) {
+            if (baseUserInfo != undefined && baseUserInfo != null) {
+                xhr.setRequestHeader('Authorization', 'Basic ' + baseSessionId);
+                xhr.setRequestHeader('geoposition', 0 + ':' + 0);
+            }
+        }
+    });
+}
 
-    if (difmonths == 0) {
-        return this.formatPeriod(date);
+function formatLocal(dateTime) {
+    var hou = new Date(dateTime).getHours(),
+        sec, min, day, month, years;
+    if (hou < 24) {
+        min = new Date(dateTime).getMinutes();
+        if (min < 60) {
+            sec = new Date(dateTime).getSeconds();
+            if (sec < 60) {
+                return sec + ' Seconds';
+            }
+        } else {
+            return min + ' Minutes';
+        }
+        return hou + ' Hours';
+    } else { //24 >
+        day = new Date(dateTime).getHours();
+        if (day > 31) { // 31 day
+            month = new Date(dateTime).getMonth();
+            if (month > 12) { // 12 months
+                years = new Date(dateTime).getFullYear();
+                return years + ' Years';
+            }
+            return month + ' month';
+        }
+        return day + ' day';
     }
-    return date.format("DD MMM, YYYY HH:mm");
 }

assets/js/list.index.js

@@ -14,27 +14,126 @@ $('.uindtls').html(usrinfoHTML)
 // List Page loading
 getData('apis/v4/unibase/reminders/platform/getunreadreminders/ReminderType/6/PageSize/20').then(function(result) {
     let response = JSON.parse(result.result);
-    let bdyUI = '';
-    for (var i = 0; i < response.length; i++) {
-        bdyUI += `<li class="d-flex flex-row m-0 p-0 bg-white border-bottom" data-installedAppId="${response[i].RedirectOptions.InstalledAppId}" data-formId="${response[i].RedirectOptions.CreateFormId}">
-                    <img src="../assets/imgs/notification.png" class="img-fluid h-75 p-1" >
-                    <div class="d-flex flex-column">
-                        <div class="d-flex justify-content-between">
-                            <div class="d-flex flex-column">
-                                <span>${response[i].Subject}</span>
-                                <span>${response[i].Message}</span>
+    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">${formatLocal(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>
-                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-                        </div>
-                        <div class="d-flex justify-content-between mt-2">
-                            <span>21 days</span>
-                            <span>Mark as read</span>
                         </div>
-                    </div>
-                </li>`;
+                    </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 += `</ul>`;
+                } else {
+                    html += `<div class="alert alert-danger" role="alert">
+                                ${response.message} ${response.errors}
+                            </div>`
+                }
+                $(_this).find('.accordion-body').html(html);
+            });
+        })
     }
-    $('.bdy-ul').html(bdyUI);
 })
+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">${formatLocal(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>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>`;
+        }
+        _tskhtml += '</div>'
+        $('.bdy-ul').append(_tskhtml);
+    }
+});
 
 /*Data  loading  start here*/
 $('.mnNvIcn').click(function() {

authentication/index.html

@@ -68,36 +68,7 @@
             <div class="ctr-lst-pge">
 
                 <ul class="m-0 p-0 bdy-ul">
-                    <li class="row m-0 bdy">
-                        <div class="col-2">TS10875</div>
-                        <div class="col-3">
-                            Bizgaze Pvt Limited
-                        </div>
-                        <div class="col-4 text-truncate">Lorem Ipsum is simply dummy text of the printing industry.</div>
-                        <div class="col-2">
-                            <a class="badge badge-soft-green" href="javascript:;" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Draft
-                            </a>
-
-                            <ul class="dropdown-menu">
-                                <li><a href="javascript:;" class="dropdown-item">Confirmed</a></li>
-                                <li><a href="javascript:;" class="dropdown-item">Cancelled</a></li>
-                                <li><a href="javascript:;" class="dropdown-item">Active</a></li>
-                            </ul>
-                        </div>
-                        <div class="col-1 d-flex justify-content-end">
-                            <a class="" href="javascript:;" aria-expanded="false">
-                                <i class="la la-ellipsis-v"></i>
-                            </a>
-
-                            <ul class="dropdown-menu">
-                                <li><a href="javascript:;" class="dropdown-item">Confirmed</a></li>
-                                <li><a href="javascript:;" class="dropdown-item">Cancelled</a></li>
-                                <li><a href="javascript:;" class="dropdown-item">Active</a></li>
-                            </ul>
-
-                        </div>
-                    </li>
+                    <!-- binding -->
                 </ul>
             </div>
             <div class="rtr-nav-bar">
@@ -112,7 +83,7 @@
 </body>
 <script src="../assets/js/jquery/jquery-3.6.1.min.js"></script>
 <script src="../assets/js/bootstrap/bootstrap.bundle.min.js"></script>
-<script src="../assets/js/base.js"></script>
-<script src="../assets/js/list.index.js"></script>
+<script src="../assets/js/base.js" async></script>
+<script src="../assets/js/list.index.js" async></script>
 
 </html>