saasufy-components 3.14.0 → 3.15.1

package/README.md

@@ -77,6 +77,7 @@ To use components, you just need to include them into your `.html` file inside y
 <script src="https://saasufy.com/node_modules/saasufy-components/collection-adder-group.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/confirm-modal.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/overlay-modal.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/download-link.js" type="module" defer></script>
 ```
 
 You should only add the script tags for the components which your page uses to avoid wasting bandwidth and unnecessarily delaying page load for your users.
@@ -100,7 +101,7 @@ This project does not impose any specific approach to styling components, howeve
 The following utility functions can be used anywhere inside template `{{expression}}` placeholders:
 
 - Generate a unique random ID in UUID format: `{{uuid.v4()}}`
-- Generate a deterministic ID in UUID-compatible format: `{{computeId('value1', 'value2')}}`
+- Generate a deterministic ID in UUID-compatible format derived from one or more values: `{{computeId('value1', 'value2')}}`
 - Convert text to a format suitable for use inside a URL: `{{url('This is a test')}}`
 - Convert text to lower case: `{{lowerCase('TEST')}}`
 - Convert text to upper case: `{{upperCase('test')}}`
@@ -895,3 +896,28 @@ A modal component to prompt the user for confirmation before performing sensitiv
 ### overlay-modal
 
 A general purpose modal component.
+
+### download-link
+
+A component to download a file from a model. The file must be stored on the model instance in base64 format.
+
+**Import**
+
+```html
+<script src="https://saasufy.com/node_modules/saasufy-components/download-link.js" type="module" defer></script>
+```
+
+**Example usage**
+
+```html
+<download-link model-type="Image" model-id="dce962f8-34f1-4a82-95b9-377e42b57e2d" model-field="src" file-name="my-image.png">
+  <a href="javascript: void(0)">Download image</a>
+</download-link>
+```
+
+**Attributes**
+
+- `model-type` (required): Specifies the type of model to download the file from. This should match a `Model` available in your Saasufy service.
+- `model-id` (required): The id of the model instance/record to download the file from.
+- `model-field` (required): The field of the model instance/record where the file is stored in base64 format (with content type).
+- `file-name` (required): The default name of the file to save as. The file extension is optional.

package/confirm-modal.js

@@ -24,7 +24,7 @@ class ConfirmModal extends HTMLElement {
   show(message, confirmCallback) {
     let overlayModal = this.querySelector('overlay-modal');
     if (overlayModal) {
-      overlayModal.classList.remove('hidden');
+      overlayModal.removeAttribute('style');
     }
     this.confirmCallback = confirmCallback;
     this.hidden = false;
@@ -38,7 +38,7 @@ class ConfirmModal extends HTMLElement {
     let cancelButtonLabel = this.getAttribute('cancel-button-label') || 'Cancel';
 
     this.innerHTML = `
-      <overlay-modal class="${this.hidden ? 'hidden' : 'visible'}">
+      <overlay-modal${this.hidden ? ' style="display: none;"' : ''}>
         <div slot="title">${title}</div>
         <div class="confirm-modal-content" slot="content">
           <div>${message}</div>
@@ -52,16 +52,16 @@ class ConfirmModal extends HTMLElement {
 
     let overlayModal = this.querySelector('overlay-modal');
     overlayModal.addEventListener('close', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
     });
     let cancelButton = this.querySelector('.modal-cancel-button');
     cancelButton.addEventListener('click', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
       this.dispatchEvent(new CustomEvent('cancel'));
     });
     let confirmButton = this.querySelector('.modal-confirm-button');
     confirmButton.addEventListener('click', () => {
-      overlayModal.classList.add('hidden');
+      overlayModal.style.display = 'none';
       this.dispatchEvent(new CustomEvent('confirm'));
       this.confirmCallback && this.confirmCallback();
     });

package/download-link.js

@@ -0,0 +1,94 @@
+import { SocketConsumer } from './socket.js';
+
+class DownloadLink extends SocketConsumer {
+  constructor() {
+    super();
+    let dataTypeRegExp = /data:([^;]+);base64,(.*)/;
+
+    this.handleLinkClickEvent = async (event) => {
+      let socket = this.getSocket();
+
+      let modelType = this.getAttribute('model-type');
+      let modelId = this.getAttribute('model-id');
+      let modelField = this.getAttribute('model-field');
+
+      this.setAttribute('is-loading', '');
+      this.removeAttribute('failed');
+
+      let data;
+      try {
+        data = await socket.invoke('crud', {
+          action: 'read',
+          type: modelType,
+          id: modelId,
+          field: modelField
+        });
+      } catch (error) {
+        this.setAttribute('failed', '');
+        if (!this.hasAttribute('hide-error-logs')) {
+          console.error(
+            `Failed to download file because of error: ${error.message}`
+          );
+        }
+      }
+
+      this.removeAttribute('is-loading');
+
+      if (typeof data !== 'string') {
+        this.setAttribute('failed', '');
+        if (!this.hasAttribute('hide-error-logs')) {
+          console.error(
+            'Failed to download file because it did not exist'
+          );
+        }
+        return;
+      };
+
+      let dataParts = data.match(dataTypeRegExp);
+      if (!dataParts) {
+        this.setAttribute('failed', '');
+        if (!this.hasAttribute('hide-error-logs')) {
+          console.error(
+            'Failed to process downloaded file because format was invalid'
+          );
+        }
+        return;
+      }
+
+      let contentType = dataParts[1];
+      let content = dataParts[2];
+
+      let binaryString = atob(content);
+      let length = binaryString.length;
+      let bytes = new Uint8Array(length);
+      for (let i = 0; i < length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      let blob = new Blob([ bytes ], { type: contentType });
+
+      let fileName = this.getAttribute('file-name');
+      let fileDataURL = URL.createObjectURL(blob);
+
+      let downloadElement = document.createElement('a');
+      downloadElement.style.display = 'none';
+      downloadElement.setAttribute('href', fileDataURL);
+      downloadElement.setAttribute('download', fileName);
+      document.body.appendChild(downloadElement);
+      downloadElement.click();
+      downloadElement.remove();
+      URL.revokeObjectURL(fileDataURL);
+    };
+  }
+
+  connectedCallback() {
+    this.removeAttribute('failed');
+    this.removeAttribute('is-loading');
+    this.addEventListener('click', this.handleLinkClickEvent);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.handleLinkClickEvent);
+  }
+}
+
+window.customElements.define('download-link', DownloadLink);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.14.0",
+  "version": "3.15.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {