Change styling, labels, add spinner

Also change preview size

Author: surajp

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+## [Unreleased]
+
+## 2020-6-20
+
+* Move buttons to the right and apply colors consistent with Salesforce styling guidelines
+* Show spinner during file upload
+* Change label from 'Version Details' to 'Version History'
+* Shrink preview size for faster loading and better visibility

force-app/main/default/lwc/fileUtils/fileUtils.js

@@ -9,7 +9,7 @@ const getDownloadUrl = (fileId) => {
 };
 
 const getPreviewUrl = (fileId) => {
-  return `${getDocBaseUrl()}/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=${fileId}&operationContext=CHATTER&page=0`;
+  return `${getDocBaseUrl()}/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB240BY180&versionId=${fileId}&operationContext=CHATTER&page=0`;
 };
 
 const getContentDocUrl = (fileId) => {

force-app/main/default/lwc/filesRelatedList/filesRelatedList.html

@@ -1,14 +1,16 @@
 <template>
-  <lightning-button label="New File" onclick={newFileUpload}></lightning-button>
-  <lightning-button label="Delete" onclick={deleteFiles}></lightning-button>
-  <c-custom-datatable
-    columns={columns}
-    key-field="id"
-    data={files}
-    onrowaction={handleRowAction}
-    data-tablename="filestable"
-    resize-column-disabled
-  ></c-custom-datatable>
+  <lightning-card>
+    <lightning-button slot="actions" label="Delete" onclick={deleteFiles}></lightning-button>
+    <lightning-button slot="actions" label="New File" onclick={newFileUpload} variant="brand"></lightning-button>
+    <c-custom-datatable
+      columns={columns}
+      key-field="id"
+      data={files}
+      onrowaction={handleRowAction}
+      data-tablename="filestable"
+      resize-column-disabled
+    ></c-custom-datatable>
+  </lightning-card>
   <template if:true={showModal}>
     <section class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
@@ -18,11 +20,14 @@
           </div>
         </header>
         <div class="slds-modal__content">
+          <template if:true={showSpinner}>
+            <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
+          </template>
           <template if:false={fileUpload}>
             <c-custom-datatable key-field="id" data={versionDetails} columns={versionColumns} data-tablename="versiontable"></c-custom-datatable>
           </template>
           <template if:true={fileUpload}>
-            <lightning-layout multiple-rows="true">
+            <lightning-layout multiple-rows="true" horizontal-align="end">
               <lightning-layout-item size="12" padding="around-small">
                 <input type="file" name="file" class="file" onchange={handleFileChange} />
               </lightning-layout-item>
@@ -40,7 +45,7 @@
                 <lightning-input type="text" class="reason" label="Reason for Change:"></lightning-input>
               </lightning-layout-item>
               <lightning-layout-item size="12" padding="around-small">
-                <lightning-button onclick={handleUpload} label="Submit"></lightning-button>
+                <lightning-button onclick={handleUpload} label="Submit" variant="brand" class="slds-float_right"></lightning-button>
               </lightning-layout-item>
             </lightning-layout>
           </template>

force-app/main/default/lwc/filesRelatedList/filesRelatedList.js

@@ -2,12 +2,12 @@ import { LightningElement, wire, api } from "lwc";
 import getRelatedFiles from "@salesforce/apex/GetFilesController.getFilesList";
 import getFileVersionDetails from "@salesforce/apex/GetFilesController.getFileVersionDetails";
 import createContentDocLink from "@salesforce/apex/GetFilesController.createContentDocLink";
-import { deleteRecord, getRecord, createRecord } from "lightning/uiRecordApi";
+import { deleteRecord, createRecord } from "lightning/uiRecordApi";
 import { ShowToastEvent } from "lightning/platformShowToastEvent";
 import { refreshApex } from "@salesforce/apex";
 
 const actions = [
-  { label: "Version Details", name: "show_details" },
+  { label: "Version History", name: "show_details" },
   { label: "Upload New Version", name: "upload_version" },
   { label: "Delete File", name: "delete" }
 ];
@@ -57,6 +57,7 @@ export default class FilesRelatedList extends LightningElement {
   _currentDocId = null;
   showPreview = false;
   currentPreviewFileId = null;
+  showSpinner = false;
 
   handleFileNameChange(event) {
     this.fileTitle = event.detail.value;
@@ -96,13 +97,13 @@ export default class FilesRelatedList extends LightningElement {
     const action = event.detail.action.name;
     const row = event.detail.row;
     this._currentDocId = row.id;
-    if (action == "show_details") {
+    if (action === "show_details") {
       this.fileUpload = false;
       this.showVersionDetails();
-    } else if (action == "upload_version") {
+    } else if (action === "upload_version") {
       this.fileUpload = true;
       this.showModal = true;
-    } else if (action == "delete") {
+    } else if (action === "delete") {
       this._deleteRecord([this._currentDocId]);
     }
   } //}}}
@@ -112,8 +113,9 @@ export default class FilesRelatedList extends LightningElement {
     const selectedRowIds = this.template
       .querySelector("c-custom-datatable[data-tablename='filestable']")
       .getSelectedRows()
-      .map(row => row.id);
+      .map((row) => row.id);
     if (selectedRowIds.length > 0) {
+      //eslint-disable-next-line
       let decision = confirm(
         `Are you sure you want to delete ${selectedRowIds.length} records?`
       );
@@ -125,7 +127,7 @@ export default class FilesRelatedList extends LightningElement {
 
   _deleteRecord(recordIds) {
     //{{{
-    Promise.all(recordIds.map(id => deleteRecord(id)))
+    Promise.all(recordIds.map((id) => deleteRecord(id)))
       .then(() => {
         refreshApex(this._filesList);
         this.dispatchEvent(
@@ -135,7 +137,7 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       })
-      .catch(err => {
+      .catch((err) => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",
@@ -157,30 +159,42 @@ export default class FilesRelatedList extends LightningElement {
     //{{{
     console.log(">> file version details");
     getFileVersionDetails({ fileId: this._currentDocId })
-      .then(result => {
+      .then((result) => {
         console.log(">> version details " + JSON.stringify(result));
         this.versionDetails = result;
         this.showModal = true;
       })
-      .catch(err => {
+      .catch((err) => {
         console.error(JSON.stringify(err));
       });
   } //}}}
 
   handleUpload(event) {
     //{{{
     event.preventDefault();
-    const file = this.template.querySelector("input.file").files[0];
-    const reasonForChange = this.template.querySelector(
-      "lightning-input.reason"
-    ).value;
-    const reader = new FileReader();
-    let fileData = "";
-    reader.onload = () => {
-      fileData = reader.result;
-      this._uploadFile(file, fileData, reasonForChange);
-    };
-    reader.readAsDataURL(file);
+    this.showSpinner = true;
+    try {
+      const file = this.template.querySelector("input.file").files[0];
+      const reasonForChange = this.template.querySelector(
+        "lightning-input.reason"
+      ).value;
+      const reader = new FileReader();
+      let fileData = "";
+      reader.onload = () => {
+        fileData = reader.result;
+        this._uploadFile(file, fileData, reasonForChange);
+      };
+      reader.readAsDataURL(file);
+    } catch (err) {
+      console.error(err);
+      this.dispatchEvent(
+        new ShowToastEvent({
+          variant: "error",
+          message: `File upload failed: ${err.body.message || err.body.error}`
+        })
+      );
+      this.showSpinner = false;
+    }
   } //}}}
 
   _uploadFile(file, fileData, reasonForChange) {
@@ -195,7 +209,8 @@ export default class FilesRelatedList extends LightningElement {
       payload.ContentDocumentId = this._currentDocId;
     }
     createRecord({ apiName: "ContentVersion", fields: payload })
-      .then(cVersion => {
+      .then((cVersion) => {
+        this.showSpinner = false;
         if (!this._currentDocId) {
           this._createContentDocLink(cVersion.id);
         } else {
@@ -208,13 +223,14 @@ export default class FilesRelatedList extends LightningElement {
           );
         }
       })
-      .catch(err => {
+      .catch((err) => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",
-            message: `An error occurred: ${err.body.message || err.body.error}`
+            message: `File upload failed: ${err.body.message || err.body.error}`
           })
         );
+        this.showSpinner = false;
       });
   } //}}}
 
@@ -224,7 +240,7 @@ export default class FilesRelatedList extends LightningElement {
       contentVersionId: cvId,
       recordId: this.recordId
     })
-      .then(cId => {
+      .then((cId) => {
         this.closeModal();
         this.dispatchEvent(
           new ShowToastEvent({
@@ -233,7 +249,7 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       })
-      .catch(err => {
+      .catch((err) => {
         this.dispatchEvent(
           new ShowToastEvent({
             variant: "error",