WIP changing layout, adding path

dlrs/main/classes/RollupEditorController.cls

@@ -27,9 +27,13 @@ public with sharing class RollupEditorController {
     @AuraEnabled
     public String type;
 
+    @AuraEnabled
+    public List<String> referencesTo;
+
     public SelectOption(String value, String label) {
       this.value = value;
       this.label = label;
+      this.referencesTo = new List<String>();
     }
   }
 
@@ -50,8 +54,16 @@ public with sharing class RollupEditorController {
       String fieldName = fr.getName();
       String label = fr.getLabel();
 
-      SelectOption option = new SelectOption(fieldName, label);
+      SelectOption option = new SelectOption(
+        fieldName,
+        String.format('{0} ({1})', new List<String>{ label, fieldName })
+      );
       option.type = String.valueof(fr.getType());
+      List<Schema.sObjectType> types = fr.getReferenceTo();
+      // if this fields points to a single SObject, pass that up
+      for (Schema.sObjectType t : types) {
+        option.referencesTo.add(types[0].getDescribe().getName());
+      }
       options.add(option);
     }
 

dlrs/main/lwc/flexiblePath/__tests__/flexiblePath.test.js

@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import FlexiblePath from 'c/flexiblePath';
+
+describe('c-flexible-path', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('TODO: test case generated by CLI command, please fill in test logic', () => {
+        // Arrange
+        const element = createElement('c-flexible-path', {
+            is: FlexiblePath
+        });
+
+        // Act
+        document.body.appendChild(element);
+
+        // Assert
+        // const div = element.shadowRoot.querySelector('div');
+        expect(1).toBe(1);
+    });
+});

dlrs/main/lwc/flexiblePath/flexiblePath.css

@@ -0,0 +1,3 @@
+* {
+  --slds-c-icon-color-foreground-default: white;
+}

dlrs/main/lwc/flexiblePath/flexiblePath.html

@@ -0,0 +1,105 @@
+<template>
+  <!-- using slot like carousel does, each item provides text and state, maybe a click action handler
+
+    We also need API props for "next action 'text', 'icon', and 'click action handler'"
+
+For "Scheduled" mode we should have Configure, Scheduled RollupCalculate Job, Deploy Child Trigger, and finally Activate -->
+  <div class="slds-path">
+    <div class="slds-grid slds-path__track">
+      <div class="slds-grid slds-path__scroller-container">
+        <div class="slds-path__scroller">
+          <div class="slds-path__scroller_inner">
+            <ul
+              class="slds-path__nav"
+              role="listbox"
+              aria-orientation="horizontal"
+              aria-labelledby="slds-path__stage-name"
+            >
+              <template for:each={steps} for:item="step">
+                <li
+                  class="slds-path__item slds-is-complete"
+                  role="presentation"
+                  lwc:if={step.isComplete}
+                  key={step.label}
+                >
+                  <a
+                    aria-selected="false"
+                    class="slds-path__link"
+                    href="#"
+                    role="option"
+                    tabindex="-1"
+                  >
+                    <span class="slds-path__stage">
+                      <lightning-icon
+                        icon-name="utility:check"
+                        size="x-small"
+                        alternative-text="Stage Complete"
+                      ></lightning-icon>
+                    </span>
+                    <span class="slds-path__title">{step.label}</span>
+                  </a>
+                </li>
+                <li
+                  class="slds-path__item slds-is-current slds-is-active"
+                  role="presentation"
+                  lwc:if={step.isCurrent}
+                  key={step.label}
+                >
+                  <a
+                    aria-selected="false"
+                    class="slds-path__link"
+                    href="#"
+                    role="option"
+                    tabindex="-1"
+                  >
+                    <span class="slds-path__stage">
+                      <lightning-icon
+                        icon-name="utility:check"
+                        size="x-small"
+                        alternative-text="Current Stage:"
+                      ></lightning-icon>
+                    </span>
+                    <span class="slds-path__title">{step.label}</span>
+                  </a>
+                </li>
+                <li
+                  class="slds-path__item slds-is-incomplete"
+                  role="presentation"
+                  lwc:elseif={step.isIncomplete}
+                  key={step.label}
+                >
+                  <a
+                    aria-selected="false"
+                    class="slds-path__link"
+                    href="#"
+                    role="option"
+                    tabindex="-1"
+                  >
+                    <span class="slds-path__stage">
+                      <lightning-icon
+                        icon-name="utility:check"
+                        size="x-small"
+                      ></lightning-icon>
+                    </span>
+                    <span class="slds-path__title">{step.label}</span>
+                  </a>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="slds-grid slds-path__action" lwc:if={nextActionLabel}>
+        <span id="slds-path__stage-name" class="slds-path__stage-name"
+          >Next Action: {nextActionLabel}</span
+        >
+        <button
+          class="slds-button slds-button_brand slds-path__mark-complete"
+          onclick={handleNextActionClick}
+        >
+          {nextActionLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

dlrs/main/lwc/flexiblePath/flexiblePath.js

@@ -0,0 +1,43 @@
+import { LightningElement, api } from "lwc";
+
+/**
+ * @typedef step
+ * @property {string} label
+ * @property {"complete"|"current"|"incomplete"|"failed"} status
+ */
+
+export default class FlexiblePath extends LightningElement {
+  /** @type {step[]} */
+  @api
+  get steps() {
+    return this._steps;
+  }
+
+  set steps(val) {
+    this._steps = val.map((v) => ({
+      ...v,
+      ["is" + v.status.charAt(0).toUpperCase() + v.status.slice(1)]: true
+    }));
+  }
+
+  get nextActionLabel() {
+    if (!this.steps) {
+      return "unknown";
+    }
+    let nextLabel = this.steps.find((s) => s.status === "current")?.label;
+    if (!nextLabel) {
+      nextLabel = this.steps.find((s) => s.status === "incomplete")?.label;
+    }
+    return nextLabel;
+  }
+
+  handleNextActionClick() {
+    this.dispatchEvent(
+      new CustomEvent("nextactionclick", {
+        detail: {
+          label: this.nextActionLabel
+        }
+      })
+    );
+  }
+}

dlrs/main/lwc/flexiblePath/flexiblePath.js-meta.xml

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

dlrs/main/lwc/manageRollups/manageRollups.css

@@ -0,0 +1,3 @@
+* {
+  transition: width 500ms;
+}

dlrs/main/lwc/manageRollups/manageRollups.html

@@ -1,7 +1,13 @@
 <template>
   <lightning-layout pull-to-boundary="small">
-    <lightning-layout-item size="6" padding="around-small">
+    <lightning-layout-item size={tableWidth} padding="around-small">
       <lightning-card title="Rollups">
+        <div slot="actions">
+          <lightning-button
+            label="New"
+            onclick={runCreateNew}
+          ></lightning-button>
+        </div>
         <div class="slds-card__body slds-card__body_inner">
           <div class="slds-p-bottom_small">
             <lightning-input
@@ -22,8 +28,15 @@
         </div>
       </lightning-card>
     </lightning-layout-item>
-    <lightning-layout-item size="6" padding="around-small">
-      <c-rollup-editor onrequestdelete={handleRequestDelete}></c-rollup-editor>
+    <lightning-layout-item
+      lwc:if={showEditor}
+      size={editorWidth}
+      padding="around-small"
+    >
+      <c-rollup-editor
+        onrequestdelete={handleRequestDelete}
+        oncancel={handleCancelRequest}
+      ></c-rollup-editor>
     </lightning-layout-item>
   </lightning-layout>
 </template>

dlrs/main/lwc/manageRollups/manageRollups.js

@@ -57,6 +57,10 @@ export default class ManageRollups extends LightningElement {
     }
   ];
 
+  editorWidth = 1;
+  tableWidth = 12;
+  showEditor = false;
+
   // We only want events for which we've been assigned as the recipient
   channelName = `/event/UserNotification__e?Recipient__c='${USER_ID.substring(
     1,
@@ -104,9 +108,15 @@ export default class ManageRollups extends LightningElement {
     const row = event.detail.row;
     switch (action.name) {
       case "rollup_select":
-        this.template
-          .querySelector("c-rollup-editor")
-          .loadRollup(row.DeveloperName);
+        this.showEditor = true;
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+          this.template
+            .querySelector("c-rollup-editor")
+            .loadRollup(row.DeveloperName);
+          this.tableWidth = 6;
+          this.editorWidth = 6;
+        }, 0);
         break;
       case "rollup_delete":
         this.requestDelete(row.DeveloperName);
@@ -134,6 +144,16 @@ export default class ManageRollups extends LightningElement {
     }
   }
 
+  runCreateNew() {
+    this.showEditor = true;
+    // eslint-disable-next-line @lwc/lwc/no-async-operation
+    setTimeout(() => {
+      this.template.querySelector("c-rollup-editor").loadRollup(null);
+      this.tableWidth = 6;
+      this.editorWidth = 6;
+    }, 0);
+  }
+
   handleInputChange() {
     this.searchFilter = this.template
       .querySelector("lightning-input")
@@ -145,6 +165,16 @@ export default class ManageRollups extends LightningElement {
     this.requestDelete(event.detail.rollupName);
   }
 
+  handleCancelRequest() {
+    this.tableWidth = 12;
+    this.editorWidth = 1;
+
+    // eslint-disable-next-line @lwc/lwc/no-async-operation
+    setTimeout(() => {
+      this.showEditor = false;
+    }, 500);
+  }
+
   disconnectedCallback() {
     this.handleUnsubscribe();
   }

dlrs/main/lwc/objectSelector/objectSelector.js

@@ -83,6 +83,10 @@ export default class ObjectSelector extends LightningElement {
           const matches = iconNameRegEx.exec(o.iconUrl);
           if (matches) {
             o.iconName = `${matches[1]}:${matches[2]}`;
+            // We just got a new icon for the selected image!
+            if (o.fullName === this._currentSelection) {
+              this.selectedRecordIconName = o.iconName;
+            }
           }
         }
       });