From 14fc963dd472e5eafb2e8cef8c760f4b83d4d340 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Fri, 18 Oct 2024 17:48:14 -0700
Subject: [PATCH] Show approval badges and lock in Dev Center

---
 src/dev-center/css/style.css    | 33 +++++++++++++++++++++++++++++++++
 src/dev-center/js/dev-center.js | 31 +++++++++++++++++--------------
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css
index d341071b..f3b4eace 100644
--- a/src/dev-center/css/style.css
+++ b/src/dev-center/css/style.css
@@ -1049,3 +1049,36 @@ dialog{
 .search-clear:hover {
     opacity: 1;
 }
+.approval-badge{
+    float:right;
+    padding: 4px;
+    font-size: 12px;
+    border-radius: 5px;
+    margin-top: 0; 
+    display: block;
+    width: 170px;
+    clear: both;
+    margin-bottom: 3px;
+}
+
+.approval-badge-lsiting{
+    color: green;
+    background: #c6f6c6;
+    border:1px solid green;
+}
+
+.approval-badge-incentive{
+    color: #0074ce;
+    background: #d8efff;
+    border:1px solid #0074ce;
+}
+
+.approval-badge-opening{
+    color: #bb00ff;
+    background: #ffeaff;
+    border:1px solid #bb00ff;
+}
+
+td .approval-badge:last-child{
+    margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 337aa972..9604c6f2 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -1220,9 +1220,9 @@ function generate_app_card(app) {
     h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}">`;
     // check box
     h += `<td style="height: 60px; width: 20px;">`;
-    h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
-    h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
-    h += `</div>`;
+        h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
+            h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
+        h += `</div>`;
     h += `</td>`;
     // App info
     h += `<td style="height: 60px; width: 450px; display: flex; flex-direction: row; overflow:hidden;">`;
@@ -1231,7 +1231,8 @@ function generate_app_card(app) {
     // Info
     h += `<div style="float:left; padding-left: 10px;">`;
     // Title
-    h += `<h3 class="got-to-edit-app app-card-title" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">${html_encode(app.title)}</h3>`;
+    h += `<h3 class="got-to-edit-app app-card-title" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">${html_encode(app.title)}${app.metadata?.locked ? '<svg style="width: 20px; height: 20px; margin-bottom: -5px; margin-left: 5px; opacity: 0.5;" width="59px" height="59px" stroke-width="1.9" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8" stroke="#000000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"></path></svg>' : ''}</h3>`;
+    // link
     h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank">${html_encode(applink(app))}</a>`;
 
     // toolbar
@@ -1270,16 +1271,18 @@ function generate_app_card(app) {
     h += `</td>`;
 
     h += `<td style="vertical-align:middle; min-width:200px;">`;
-
-    // "Approved for incentive program"
-    if (app.approved_for_incentive_program)
-        h += `<span style="float:right;
-                color: green;
-                background: #c6f6c6;
-                padding: 4px;
-                font-size: 12px;
-                border-radius: 5px;
-                margin-top: 0; border:1px solid green;">✔ Incentive Program</span>`;
+        h += `<div style="overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">`;
+            // "Approved for listing"
+            if(app.approved_for_listing){
+                h += `<span class="approval-badge approval-badge-lsiting">✔ Approved for Listing</span>`;
+            }        
+            // "Approved for opening items"
+            if (app.approved_for_opening_items)
+                h += `<span class="approval-badge approval-badge-opening">✔ Approved for Opening Items</span>`;
+            // "Approved for incentive program"
+            if (app.approved_for_incentive_program)
+                h += `<span class="approval-badge approval-badge-incentive">✔ Incentive Program</span>`;
+        h += `</div>`;
     h += `</td>`;
     h += `</tr>`;
     return h;