beanbagdb-components 0.2.0 → 0.2.6

package/dist/app.js

@@ -1,14 +1,58 @@
-const initPage = async (params) => {
-  // 1. Check if "db" param exists, throw error if missing
+/**
+ * This method can be used in local html apps for initialization based on the params provided in the url.
+ * Accepted params: db, doc
+ * Each has a specific format
+ * 
+ * @param {*} params 
+ * @returns 
+ */
+
+const initPage = async (page_name,params) => {
+
   const urlParams = new URLSearchParams(params || window.location.search);
-  const dbParam = urlParams.get('db');
-  
-  if (!dbParam) {
-    throw new Error('Required "db" parameter is missing from URL');
+  let dbParam = urlParams.get("db");
+  const docParam = urlParams.get("doc");
+
+  let parsedDocCriteria = null;
+  let dbName = null;
+  if (dbParam) {
+    dbName = dbParam;
+  } else if (docParam) {
+    /**
+     * the doc parameter has a fixed format db_name.identifier1.value1.identifier2.value2...
+     */
+    const parts = docParam.split(".");
+
+    if (parts.length < 3 || parts.length % 2 === 0) {
+      throw new Error(
+        'Invalid "doc" parameter format. Expected: db_name.identifier1.value1.identifier2.value2...',
+      );
+    }
+
+    dbName = parts[0];
+    parsedDocCriteria = {}
+    // Parse identifier-value pairs
+    for (let i = 1; i < parts.length; i += 2) {
+      const identifier = parts[i];
+      const value = parts[i + 1];
+      parsedDocCriteria[identifier] = value;
+    }
+  } else {
+    throw new Error(
+      "No identifier params provided. Either specify db (database name) or doc (dbname.id1.val1) like test1._id.12345 or test1.link.12345 ",
+    );
+  }
+
+  // console.log(parsedDocCriteria)
+  // console.log(dbName)
+
+  // Now check if dbParam exists (either from URL or from doc)
+  if (!dbName) {
+    throw new Error("Required database name is not provided");
   }
 
   // 2. Get the bbdb-db-list array from localStorage
-  const dbListJson = localStorage.getItem('bbdb-db-list');
+  const dbListJson = localStorage.getItem("bbdb-db-list");
   if (!dbListJson) {
     throw new Error('No databases found in localStorage "bbdb-db-list"');
   }
@@ -16,59 +60,72 @@ const initPage = async (params) => {
   const dbList = JSON.parse(dbListJson); // [{name: ""}, {}]
 
   // 3. Find matching db object by name
-  const dbObj = dbList.find(db => db.name === dbParam);
-  
+  const dbObj = dbList.find((db) => db.name === dbName);
   if (!dbObj) {
     throw new Error(`Database "${dbParam}" not found in bbdb-db-list`);
   }
 
-  return dbObj;
+  let result = { dbObj, parsedDocCriteria }
+  if(page_name=="doc"){
+    //for the document page, if db is provided show search bar, if doc provided do not show the search bar
+    result["single_record"] = !(parsedDocCriteria==null)
+    result["new_record"] = parsedDocCriteria==null
+  }
+  return  result;
 };
 
 const showMessage = (type, message) => {
-  let messageEl = document.querySelector('#show-message');
-  
-  // Color mapping based on type
-  const colors = {
-    'error': '#dc3545',
-    'success': '#28a745', 
-    'warning': '#ffc107',
-    'info': '#17a2b8'
+  let messageEl = document.querySelector("#show-message");
+
+  // Bootstrap 5 alert type mapping
+  const alertTypes = {
+    error: "alert-danger",
+    success: "alert-success",
+    warning: "alert-warning",
+    info: "alert-info",
   };
-  
-  const color = colors[type] || '#6c757d';
-  
+
+  const alertType = alertTypes[type] || "alert-secondary";
+
   if (messageEl) {
-    // Replace existing content
-    messageEl.innerHTML = `${message} <button onclick="this.parentElement.remove()">X</button>`;
+    // Update existing alert
+    messageEl.className = `alert ${alertType} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x`;
+    messageEl.innerHTML = `<strong>${message}</strong> <button type="button" class="btn-close" onclick="this.parentElement.remove()" aria-label="Close"></button>`;
   } else {
-    // Create new div on top of body
-    messageEl = document.createElement('div');
-    messageEl.id = 'show-message';
-    messageEl.innerHTML = `${message} <button onclick="this.parentElement.remove()">X</button>`;
-    document.body.prepend(messageEl); // Adds dynamically on top of body
+    // Create new Bootstrap alert
+    messageEl = document.createElement("div");
+    messageEl.id = "show-message";
+    messageEl.className = `alert ${alertType} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x`;
+    messageEl.innerHTML = `<strong>${message}</strong> <button type="button" class="btn-close" onclick="this.parentElement.remove()" aria-label="Close"></button>`;
+    document.body.prepend(messageEl);
   }
-  
-  // Apply styling
+
+  // Position and size styling
   Object.assign(messageEl.style, {
-    color: color,
-    padding: '15px',
-    margin: '1',
-    boxShadow: `2px 10px 9px -5px rgba(0,0,0,0.2)`,
-    background: '#f8f9fa',
-    borderBottom: `4px solid ${color}`,
-    //boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-    position: 'relative'
-  });
-  
-  // Style the close button
-  const closeBtn = messageEl.querySelector('button');
-  Object.assign(closeBtn.style, {
-    float: 'right',
-    border: 'none',
-    background: 'none',
-    fontSize: '20px',
-    cursor: 'pointer',
-    fontWeight: 'bold'
+    zIndex: "9999",
+    width: "90%",
+    maxWidth: "500px",
+    marginTop: "20px",
   });
 };
+
+
+
+const handle_bbdb_action = (action_data)=>{
+  //console.log(action_data)
+  let action = action_data.detail
+  //console.log(action)
+  if(!action.name){
+    showMessage("error","No actions name provided")
+  }
+  const all_actions = {
+    "message":()=>{
+      showMessage(action.type,action.message)
+    },
+    "message_link":()=>{
+      let message = `${action.message} Doc Link : <a href='doc.html?doc=${action.link}' target='_blank'>View</a>`
+      showMessage(action.type,message)
+    }
+  }
+  all_actions[action.name]()
+}

package/dist/app.style.css

@@ -0,0 +1,51 @@
+.gutter {
+    background-color: #eee;
+
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+}
+
+
+ html, body {
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+        /* overflow: hidden; */
+      }
+      
+      #app {
+        height: 100vh;
+        padding-bottom: 0;
+      }
+      
+
+      
+      .tabulator {
+        height: 100% !important;
+        min-height: 400px;
+      }
+      
+      .gutter {
+        background-color: #444;
+        cursor: col-resize;
+      }
+      
+      .gutter.gutter-hover {
+        background-color: #666;
+      }
+
+.navbar-brand{
+  font-size: 16px;
+}
+
+.accordion-header{
+  font-size: 12px;
+}