Admin UI improvements

2021-09-18 17:34:07 +05:30 · 2021-09-18 17:34:07 +05:30 · 6546f1f93a
commit 6546f1f93a
parent 3a5e5ad7f6
4 changed files with 161 additions and 63 deletions
--- a/css/main.css
+++ b/css/main.css
@ -728,26 +728,58 @@ strip-option:last-of-type {
 }

 .activity-card--request,
-.activity-card--pending,
-.activity-card--admin {
+.activity-card--pending {
  grid-template-areas: "icon . amount" "icon time .";
 }
 .activity-card--request .activity-card__icon,
-.activity-card--pending .activity-card__icon,
-.activity-card--admin .activity-card__icon {
+.activity-card--pending .activity-card__icon {
  grid-area: icon;
 }
 .activity-card--request .activity-card__time,
-.activity-card--pending .activity-card__time,
-.activity-card--admin .activity-card__time {
+.activity-card--pending .activity-card__time {
  grid-area: time;
 }
 .activity-card--request .activity-card__amount,
-.activity-card--pending .activity-card__amount,
-.activity-card--admin .activity-card__amount {
+.activity-card--pending .activity-card__amount {
  grid-area: amount;
  text-align: end;
 }
+.activity-card--request sm-spinner,
+.activity-card--pending sm-spinner {
+  --height: 1rem;
+  --width: 1rem;
+}
+
+.activity-card--admin {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-areas: "icon . button" "icon time button";
+}
+.activity-card--admin .activity-card__icon {
+  grid-area: icon;
+}
+.activity-card--admin .activity-card__time {
+  grid-area: time;
+}
+.activity-card--admin .activity-card__action {
+  grid-area: button;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background-color: var(--accent-color--light);
+  color: var(--accent-color);
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.activity-card--admin sm-spinner {
+  --height: 1rem;
+  --width: 1rem;
+}

 #pending_transaction:not(:empty) {
  margin-bottom: 2rem;
@ -1255,12 +1287,8 @@ strip-option:last-of-type {
  grid-template-columns: minmax(0, 1fr);
 }

-#admin_request_selector {
-  margin: 1rem 0 1.5rem 0;
-  justify-self: flex-start;
-}
-
 #admin_requests_container {
+  margin-top: 1rem;
  padding-bottom: 3rem;
 }

@ -1311,6 +1339,15 @@ strip-option:last-of-type {
  #user_section {
    left: 0;
  }
+
+  #admin__header {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+    text-align: center;
+    justify-items: center;
+  }
 }
@media screen and (min-width: 640px) {
  #confirmation_popup {
@ -1381,6 +1418,18 @@ strip-option:last-of-type {
  #transaction_detail__icon {
    justify-self: flex-start;
  }
+
+  #admin__header {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
 }
@media screen and (max-width: 1024px) {
  #user_section {
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -632,8 +632,7 @@ strip-option {
  }
 }
 .activity-card--request,
-.activity-card--pending,
-.activity-card--admin {
+.activity-card--pending {
  grid-template-areas: "icon . amount" "icon time .";
  .activity-card__icon {
    grid-area: icon;
@ -645,6 +644,34 @@ strip-option {
    grid-area: amount;
    text-align: end;
  }
+  sm-spinner {
+    --height: 1rem;
+    --width: 1rem;
+  }
+}
+.activity-card--admin {
+  align-items: center;
+  grid-template-areas: "icon . button" "icon time button";
+  .activity-card__icon {
+    grid-area: icon;
+  }
+  .activity-card__time {
+    grid-area: time;
+  }
+  .activity-card__action {
+    grid-area: button;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background-color: var(--accent-color--light);
+    color: var(--accent-color);
+    justify-content: flex-end;
+    align-items: center;
+  }
+  sm-spinner {
+    --height: 1rem;
+    --width: 1rem;
+  }
 }
 #pending_transaction:not(:empty) {
  margin-bottom: 2rem;
@ -1044,11 +1071,8 @@ strip-option {
  padding: 0 1.5rem;
  grid-template-columns: minmax(0, 1fr);
 }
-#admin_request_selector {
-  margin: 1rem 0 1.5rem 0;
-  justify-self: flex-start;
-}
 #admin_requests_container {
+  margin-top: 1rem;
  padding-bottom: 3rem;
 }
@media screen and (max-width: 640px) {
@ -1085,6 +1109,14 @@ strip-option {
  #user_section {
    left: 0;
  }
+  #admin__header {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+    text-align: center;
+    justify-items: center;
+  }
 }
@media screen and (min-width: 640px) {
  #confirmation_popup {
@ -1147,6 +1179,11 @@ strip-option {
  #transaction_detail__icon {
    justify-self: flex-start;
  }
+  #admin__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
@media screen and (max-width: 1024px) {
  #user_section {
--- a/index.html
+++ b/index.html
@ -350,14 +350,14 @@
                <sm-button id="sign_out_button" onclick="signOut()">Sign out</sm-button>
            </div>
            <div id="admin" class="sub-page hide-completely">
-                <h4>Requests</h4>
-                <strip-select id="admin_request_selector">
-                    <strip-option value="all" selected>All</strip-option>
-                    <strip-option value="openDeposit">Deposit</strip-option>
-                    <strip-option value="closeDeposit">Withdraw</strip-option>
-                    <strip-option value="openLoan">Loan</strip-option>
-                    <strip-option value="closeLoan">Repay</strip-option>
-                </strip-select>
+                <div id="admin__header">
+                    <h3 class="h3">Requests</h3>
+                    <strip-select id="admin_request_selector">
+                        <strip-option value="pending" selected>Pending</strip-option>
+                        <strip-option value="completed">Completed</strip-option>
+                        <strip-option value="failed">Failed</strip-option>
+                    </strip-select>
+                </div>
                <div id="admin_requests_container"></div>
            </div>
        </section>
@ -379,9 +379,6 @@
                        <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
                    </svg>
                    Account summary
-                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
-                        Refresh
-                    </button>
                </h4>
                <div id="account_chart_container">
                    <div id="chart_legend">
@ -418,7 +415,7 @@
                </div>
            </div>
            <div>
-                <h4 class="flex align-center">
+                <h4 class="flex align-center space-between">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
@ -426,6 +423,9 @@
                            clip-rule="evenodd" />
                    </svg>
                    My balance
+                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
+                        Refresh
+                    </button>
                </h4>
                <div class="balance-card">
                    <div class="balance-card__icon">
@ -573,9 +573,8 @@
        <li class="activity-card activity-card--admin">
            <div class="activity-card__icon"></div>
            <div class="activity-card__title"></div>
-            <h4 class="activity-card__amount"></h4>
            <time class="activity-card__time"></time>
-            <button class="activity-card__action">Process</button>
+            <button class="activity-card__action button">Process</button>
        </li>
    </template>
    <template id="request_template">
@ -1155,6 +1154,10 @@
                }
                return icon
            },
+            isObjectEmpty(object) {
+                for (const key in object) return false;
+                return true;
+            },
            getLastTransaction() {
                const allRequests = bank_app.viewAllRequests()
                let key
@ -1167,9 +1170,10 @@
        }
        const render = {
            adminRequestCard(activityDetails = {}) {
-                const { requestID, amount, rtype, timestamp, status } = activityDetails
+                const { rtype, id, status } = activityDetails
                const card = getRef('admin_request_template').content.cloneNode(true).firstElementChild
                const icon = utils.getRelatedIcon(rtype)
+                const selectedStatus = getRef('admin_request_selector').value
                let action = ''
                switch (rtype) {
                    case 'openDeposit':
@ -1182,15 +1186,16 @@
                        action = 'Get loan'
                        break
                    case 'closeLoan':
-                        action = 'Repay loan'
+                        action = 'Loan repayment'
                        break
                }
                card.dataset.type = rtype
-                card.dataset.reqId = requestID
+                card.dataset.reqId = id
                card.querySelector('.activity-card__icon').innerHTML = icon
                card.querySelector('.activity-card__title').textContent = action
-                card.querySelector('.activity-card__time').textContent = getFormattedTime(timestamp)
-                card.querySelector('.activity-card__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                card.querySelector('.activity-card__time').textContent = getFormattedTime(id.split('_')[0])
+                if (selectedStatus !== 'pending')
+                    card.querySelector('.activity-card__action').remove()
                return card
            },
            requestCard(activityDetails = {}) {
@ -1504,8 +1509,8 @@
        })

        function getAccounts() {
-            const currentStatus = getRef('accounts_status_selector').value
-            return bank_app.getUserDetails(myFloID).accounts.filter(({ status }) => status === currentStatus).reverse()
+            const statusFilter = getRef('accounts_status_selector').value
+            return bank_app.getUserDetails(myFloID).accounts.filter(({ status }) => status === statusFilter).reverse()
        }

        function showAccountDetails(params) {
@ -1734,12 +1739,12 @@
        }

        function getAdminRequests() {
-            const allRequests = getRequests().filter(({ status }) => status !== 'completed')
-            const typeOfRequest = getRef('admin_request_selector').value
-            if (typeOfRequest !== 'all') {
-                return allRequests.filter(({ rtype }) => rtype === typeOfRequest)
+            const allRequests = utils.getArrayOfObj(bank_app.viewAllRequests()).reverse()
+            const selectedStatus = getRef('admin_request_selector').value
+            if (selectedStatus === 'failed') {
+                return allRequests.filter(({ status }) => status.includes(' '))
            } else {
-                return allRequests
+                return allRequests.filter(({ status }) => status === selectedStatus)
            }
        }
        getRef('admin_request_selector').addEventListener('change', e => {
@ -1751,6 +1756,7 @@
                const target = e.target.closest('button')
                const request = e.target.closest('.activity-card')
                const reqID = request.dataset.reqId
+                target.innerHTML = '<sm-spinner></sm-spinner>'
                try {
                    switch (request.dataset.type) {
                        case 'openDeposit':
@ -1771,10 +1777,11 @@
                            break
                    }
                    request.remove()
+                    refreshBalance()
                }
                catch (err) {
                    notify(err, 'error')
-
+                    target.textContent = 'Process'
                }
            }
        })
@ -1888,28 +1895,33 @@

        const reqCallback = (d, e) => {
            console.log(d)
-            if (isStartUpComplete) {
-                requestResponse.updateMap()
-            }
-            if (floGlobals.adminID === myFloID) {
-                if (adminRequestsLoader) {
-                    adminRequestsLoader.reset()
-                    notify('New request arrived')
+            if (!utils.isObjectEmpty(d)) {
+                if (isStartUpComplete) {
+                    requestResponse.updateMap()
+                }
+                if (floGlobals.adminID === myFloID) {
+                    if (adminRequestsLoader) {
+                        adminRequestsLoader.reset()
+                        notify('New request arrived')
+                    }
+                } else {
+                    // checkPendingTransaction()
                }
-            } else {
-                // checkPendingTransaction()
            }
        }

-        const responseCallback = (d, e) => {
+        const responseCallback = async (d, e) => {
            if (e) console.error("DummyCallback", e);
            console.log("response", d);
-            if (floGlobals.adminID === myFloID) {
-            } else {
-                checkPendingTransaction()
-            }
-            if (isStartUpComplete) {
-                requestResponse.updateMap()
+            if (!utils.isObjectEmpty(d)) {
+                if (isStartUpComplete) {
+                    requestResponse.updateMap()
+                }
+                if (floGlobals.adminID === myFloID) {
+                } else {
+                    await bank_app.refreshData()
+                    checkPendingTransaction()
+                }
            }
        }
    </script>