Merge pull request #12 from shliachtx/picklist

Picklist

README.md

@@ -2,9 +2,11 @@
 
 _No warranty is provided, express or implied_
 
-[Install unlocked package](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6g000003hxs6AAA) version 0.3.0-0
+[Install unlocked package](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6g000004Nw0mAAC) version 0.4.0-1
 
 ## Release Notes
+### 0.4.0-1
+- Picklist fields! The options need to be manually set on the field JSON using the `options` property. Accepts an array of strings or `{label, value}` objects
 ### 0.3.0-0
 - Allow custom label on datatable columns
 - Fix issue in related list that prevented using a filter string if there was no parent-child relationship set.

force-app/main/default/lwc/datatable/README.md

@@ -11,8 +11,10 @@ Takes as input an sObject and an array of fields and populates a datatable with
         sortable (defaults to true),
         visible (defaults to true),
         editable (defaults to table setting),
+        options (array of options for picklist - Array of strings or objects with `label` and `value`)
     }
 
+
 #### Example:
 
     [

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

@@ -1,7 +1,7 @@
 <template>
   <template if:true={showSoql}>{query}</template>
   <div if:true={data} class="slds-is-relative" style="height: 100%">
-    <lightning-datatable
+    <c-datatable-base
       hide-checkbox-column={hideCheckboxColumn}
       data={data}
       columns={_columns}
@@ -16,8 +16,9 @@
       onrowaction={handleRowAction}
       onsave={handleSave}
       draft-values={draftValues}
+      oninlineedit={handleFieldEdit}
       >
-    </lightning-datatable>
+    </c-datatable-base>
     <div if:true={isLoading}>
       <lightning-spinner size="large" variant="brand" alternative-text="Loading data..."></lightning-spinner>
     </div>

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

@@ -139,7 +139,7 @@ export default class Datatable extends LightningElement {
         value = value.split(',')
           .map(field => {
             return {
-              fieldName: field
+              fieldName: field.trim()
             };
           });
       }
@@ -152,8 +152,16 @@ export default class Datatable extends LightningElement {
         else field.visible = !!field.visible; // convert to boolean
         if (typeof field.sortable === 'undefined') field.sortable = true; // default true
         else field.sortable = !!field.sortable; // convert to boolean
-        if (typeof field.editable === 'undefined') field.editable = !field.fieldName.endsWith('Name') && !field.fieldName.endsWith('Link') && !field.fieldName.endsWith('Id') && this.editable; // default to global setting
+        if (typeof field.editable === 'undefined') field.editable = (
+          field.fieldName === 'StageName' ||
+          !field.fieldName.endsWith('Name') // &&
+          // !field.fieldName.endsWith('Link') &&
+          // !field.fieldName.endsWith('Id')
+          ) && this.editable; // default to global setting
         else field.editable = !!field.editable; // convert to boolean
+        if (field.options && Array.isArray(field.options) && field.options.every(opt=> typeof opt === 'string')) {
+          field.options = field.options.map(opt => {return {label: opt, value: opt}});
+        }
       });
     } else {
       this.error('`fields` is required');
@@ -358,6 +366,9 @@ export default class Datatable extends LightningElement {
           col.visible = field.visible;
           col.editable = field.editable;
           if (typeof field.label !== 'undefined') col.label = field.label;
+          if (typeof col.typeAttributes === 'undefined') col.typeAttributes = {};
+          col.typeAttributes.editable = field.editable;
+          col.typeAttributes.options = field.options;
         }
         return col;
       })
@@ -444,6 +455,20 @@ export default class Datatable extends LightningElement {
     console.log(event);
   }
 
+  handleFieldEdit(event) {
+    const {value, rowKeyValue, colKeyValue} = event.detail;
+    const draftValues = this.template.querySelector('c-datatable-base').draftValues;
+    if (rowKeyValue) {
+      let currentRow = draftValues && draftValues.find(row => row.Id === rowKeyValue);
+      if (!currentRow) {
+        currentRow = {Id: rowKeyValue};
+        draftValues.push(currentRow);
+      }
+      currentRow[colKeyValue.split('-')[0]] = value;
+      this.draftValues = [...draftValues];
+    }
+  }
+
   // based on https://stackoverflow.com/a/31536517
   createCsv(columns, rows) {
     const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here

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

@@ -0,0 +1,11 @@
+import LightningDatatable from 'lightning/datatable';
+import picklistField from './picklistField.html';
+
+export default class DatatableBase extends LightningDatatable {
+    static customTypes = {
+        picklist: {
+            template: picklistField,
+            typeAttributes: ['options','editable']
+        }
+    }
+}

force-app/main/default/lwc/datatableBase/datatableBase.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>47.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/datatableBase/picklistField.html

@@ -0,0 +1,9 @@
+<template>
+    <c-datatable-picklist-field
+        row-key-value={rowKeyValue}
+        col-key-value={colKeyValue}
+        value={value}
+        editable={typeAttributes.editable}
+        options={typeAttributes.options}
+    ></c-datatable-picklist-field>
+</template>

force-app/main/default/lwc/datatablePicklistField/datatablePicklistField.css

@@ -0,0 +1,39 @@
+:host>div {
+    display: block;
+    padding: var(--lwc-spacingXxSmall);
+    margin: 1px;
+}
+
+.editable:hover {
+    background-color: white;
+}
+
+.edit-button {
+    visibility: hidden;
+}
+
+:host:hover .edit-button {
+    visibility: visible;
+    opacity: .5;
+}
+
+:host:focus .editable .edit-button {
+    visibility: visible;
+    opacity: 1;
+}
+
+.editor {
+    position: absolute !important;
+    min-width: 100%;
+    z-index: 1; 
+    top: -1px;
+    left: -1px;
+    display:block; 
+    background-color:white;
+    border: 1px solid lightgray;
+    padding: var(--lwc-spacingXxSmall);
+}
+
+lightning-combobox {
+    min-width: 100%;
+}

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

@@ -0,0 +1,28 @@
+<template>
+    <div class={editClass}>
+        <div class="slds-grid slds-grid_align-spread">
+            <span>{displayValue}</span>
+            <template if:true={editable}>
+                <lightning-button-icon
+                    class="slds-m-left_x-small edit-button"
+                    icon-class="slds-icon-text-default" 
+                    variant="bare"
+                    icon-name="utility:edit" 
+                    onclick={handleEdit}
+                    >
+                </lightning-button-icon
+                >
+            </template>
+        </div>
+    </div>
+    <div class="editor" if:true={editing}>
+        <lightning-combobox 
+            name="picklist"
+            variant="label-hidden"
+            value={value}
+            options={options}
+            onchange={handleChange}
+            onblur={handleFocusout}>
+        </lightning-combobox>
+    </div>
+</template>

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

@@ -0,0 +1,77 @@
+import { LightningElement, api, track, wire } from 'lwc';
+// import displayTemplate from './display.html';
+// import editTemplate from './edit.html'
+
+export default class DatatablePicklistField extends LightningElement {
+    @api rowKeyValue;
+    @api colKeyValue;
+    @api 
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        this._editedValue = val;
+    }
+    @api 
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = value;
+        this.valueToLabelMap = value.reduce((acc,opt) => {
+            acc[opt.value] = opt.label;
+            return acc;
+        }, {});
+    }
+    @api editable;
+
+    @track editing;
+    @track _options;
+    _editedValue;
+    valueToLabelMap={};
+    editRendered;
+
+    renderedCallback() {
+        const combobox = this.template.querySelector('lightning-combobox');
+        if (!combobox) {
+            this.editRendered = false; 
+        } else if (!this.editRendered ) {
+            combobox.focus();
+            this.editRendered = true;
+        }
+    }
+    handleFocusout() {
+        if (this._editedValue !== this._value) {
+            this.dispatchEvent(new CustomEvent('inlineedit', {
+                detail: {
+                    value: this._editedValue,
+                    rowKeyValue: this.rowKeyValue,
+                    colKeyValue: this.colKeyValue
+                },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        this.editing=false;
+    }
+
+    handleEdit() {
+        this.editing=true;
+
+    }
+
+    handleChange(event) {
+        this._editedValue = event.detail.value;
+        // this.template.focus();
+    }
+
+    get editClass() {
+        return this.editable ? 'editable ' : '';
+    }
+
+    get displayValue() {
+        return this.valueToLabelMap[this.value] || this.value;
+    }
+
+}

force-app/main/default/lwc/datatablePicklistField/datatablePicklistField.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>47.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/datatablePicklistField/display.html

@@ -0,0 +1,18 @@
+<template>
+    <div class={editClass}>
+        <div class="slds-grid slds-grid_align-spread">
+            {value}
+            <template if:true={editable}>
+                <lightning-button-icon
+                    class="slds-m-left_x-small edit-button"
+                    icon-class="slds-icon-text-default" 
+                    variant="bare"
+                    icon-name="utility:edit" 
+                    onclick={handleEdit}
+                    >
+                </lightning-button-icon
+                >
+            </template>
+        </div>
+    </div>
+</template>

force-app/main/default/lwc/datatablePicklistField/edit.css

@@ -0,0 +1,16 @@
+:host {
+    position: absolute !important;
+    min-width: 100%;
+    z-index: 1; 
+    top: 0; 
+    display:block; 
+    background-color:white;
+    border: 1px solid lightgray;
+    padding: var(--lwc-spacingXxSmall);
+}
+
+.label-hideen
+
+lightning-combobox {
+    min-width: 100%;
+}

force-app/main/default/lwc/datatablePicklistField/edit.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-combobox 
+        name="picklist"
+        variant="label-hidden"
+        value={value}
+        options={myoptions}
+        onchange={handleChange}
+        onblur={handleFocusout}>
+    </lightning-combobox>
+</template>

force-app/main/default/lwc/jsconfig.json

@@ -32,8 +32,11 @@
             "c/tableServiceUtils": [
                 "../../lwc-utils/lwc/tableServiceUtils/tableServiceUtils.js"
             ],
-            "c/modal": [
-                "modal/modal.js"
+            "c/datatableBase": [
+                "datatableBase/datatableBase.js"
+            ],
+            "c/datatablePicklistField": [
+                "datatablePicklistField/datatablePicklistField.js"
             ]
         },
         "experimentalDecorators": true

force-app/main/lwc-utils/classes/DataTableService.cls

@@ -32,7 +32,7 @@ public with sharing class DataTableService {
     Schema.DisplayType.MultiPicklist  => 'text',
     Schema.DisplayType.Percent        => 'percent',
     Schema.DisplayType.Phone          => 'phone',
-    Schema.DisplayType.Picklist       => 'text',
+    Schema.DisplayType.Picklist       => 'picklist',
     Schema.DisplayType.Reference      => 'url',
     Schema.DisplayType.String         => 'text',
     Schema.DisplayType.TextArea       => 'text',

force-app/main/lwc-utils/lwc/jsconfig.json

@@ -32,8 +32,11 @@
             "c/tableServiceUtils": [
                 "tableServiceUtils/tableServiceUtils.js"
             ],
-            "c/modal": [
-                "../../default/lwc/modal/modal.js"
+            "c/datatableBase": [
+                "../../default/lwc/datatableBase/datatableBase.js"
+            ],
+            "c/datatablePicklistField": [
+                "../../default/lwc/datatablePicklistField/datatablePicklistField.js"
             ]
         },
         "experimentalDecorators": true

sfdx-project.json

@@ -4,8 +4,7 @@
             "path": "force-app",
             "default": true,
             "package": "lwc",
-            "versionName": "ver 0.2",
-            "versionNumber": "0.2.0.NEXT"
+            "versionNumber": "0.4.0.NEXT"
         }
     ],
     "namespace": "",
@@ -17,6 +16,7 @@
         "lwc@0.1.0-2": "04t6g000003flJHAAY",
         "lwc@0.1.0-3": "04t6g000003fpyTAAQ",
         "lwc@0.2.0-0": "04t6g000003fpyYAAQ",
-        "lwc@0.3.0-0": "04t6g000003hxs6AAA"
+        "lwc@0.3.0-0": "04t6g000003hxs6AAA",
+        "lwc@0.4.0-1": "04t6g000004Nw0mAAC"
     }
 }