Allow several action buttons (#124)

If, instead of a dictionary, a list of dictionaries is defined, several buttons will be displayed.
gristlabs · Feb 21, 2024 · f3fbf6c · f3fbf6c
1 parent a1fb277
commit f3fbf6c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/actionbutton/actionbutton.css b/actionbutton/actionbutton.css
@@ -18,11 +18,18 @@ body {
 
 
 #app {
-  margin: 32px 16px;
+  margin: 8px;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .description, .result, .button {
-  margin: 16px 0;
+  margin: 4px 0;
 }
 
 .message {
@@ -33,6 +40,7 @@ body {
   border: none;
   border-radius: 6px;
   background-color: #1486ff;
+  margin: 4px;
   padding: 8px 16px;
   color: white;
   font-size: inherit;

diff --git a/actionbutton/actionbutton.js b/actionbutton/actionbutton.js
@@ -11,22 +11,23 @@ let app = undefined;
 let data = {
   status: 'waiting',
   result: null,
-  input: {
+  inputs: [{
     description: null,
     button: null,
     actions: null,
-  }
+  }],
+  desc: null
 }
 
 function handleError(err) {
   console.error('ERROR', err);
   data.status = String(err).replace(/^Error: /, '');
 }
 
-async function applyActions() {
+async function applyActions(actions) {
   data.results = "Working...";
   try {
-    await grist.docApi.applyUserActions(data.input.actions);
+    await grist.docApi.applyUserActions(actions);
     data.message = 'Done';
   } catch (e) {
     data.message = `Please grant full access for writing. (${e})`;
@@ -42,15 +43,22 @@ function onRecord(row, mappings) {
     if (!row.hasOwnProperty(column)) {
       throw new Error(`Need a visible column named "${column}". You can map a custom column in the Creator Panel.`);
     }
+    let btns = row[column]
+    // If only one action button is defined, put it within an Array
+    if (!Array.isArray(btns)) {
+      btns = [ btns ]
+    }
     const keys = ['button', 'description', 'actions'];
-    if (!row[column] || keys.some(k => !row[column][k])) {
-      const allKeys = keys.map(k => JSON.stringify(k)).join(", ");
-      const missing = keys.filter(k => !row[column]?.[k]).map(k => JSON.stringify(k)).join(", ");
-      const gristName = mappings?.[column] || column;
-      throw new Error(`"${gristName}" cells should contain an object with keys ${allKeys}. ` +
-        `Missing keys: ${missing}`);
+    for (btn of btns) {
+      if (!btn || keys.some(k => !btn[k])) {
+        const allKeys = keys.map(k => JSON.stringify(k)).join(", ");
+        const missing = keys.filter(k => !btn?.[k]).map(k => JSON.stringify(k)).join(", ");
+        const gristName = mappings?.[column] || column;
+        throw new Error(`"${gristName}" cells should contain an object with keys ${allKeys}. ` +
+          `Missing keys: ${missing}`);
+      }
     }
-    data.input = row[column];
+    data.inputs = btns;
   } catch (err) {
     handleError(err);
   }

diff --git a/actionbutton/index.html b/actionbutton/index.html
@@ -22,8 +22,12 @@
         </template>
       </div>
       <template v-else>
-        <div class="description">{{ input.description }}</div>
-        <button class="button" v-on:click="applyActions">{{ input.button }}</button>
+        <div class="container">
+          <button class="button" v-for="(input, idx) in inputs" v-on:click="applyActions(input.actions)" v-on:mouseover="desc = idx" v-on:mouseleave="desc = null">
+            {{ input.button }}
+          </button>
+        </div>
+        <div class="description" v-for="(input, idx) in inputs" v-if="desc === idx">{{ input.description }}</div>
         <div class="result" v-if="result">{{ input.result }}</div>
       </template>
     </div>