Merge pull request #49 from dbreese/lwc_template_files

Initial pass at templates for each LWC.
salesforce · Nov 8, 2023 · c81967d · c81967d
2 parents d3fb7fb + 632f37a
commit c81967d
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 0 deletions.
diff --git a/resources/templates/createRecord/createRecord.css b/resources/templates/createRecord/createRecord.css
@@ -0,0 +1 @@
+@import 'c/commonStyles';
diff --git a/resources/templates/createRecord/createRecord.html b/resources/templates/createRecord/createRecord.html
@@ -0,0 +1,32 @@
+<template>
+    <div class="component-background">
+        <lightning-record-edit-form object-api-name="///TEMPLATE_OBJECT_API_NAME///" onsuccess={onSuccess}>
+
+            <div class="header-slot">
+                <!-- cancel and submit buttons-->
+                <lightning-layout horizontal-align="spread" class="slds-var-p-horizontal_xx-small">
+                    <lightning-layout-item>
+                        <lightning-button variant="base" data-id="cancel" label="Cancel" type="button" onclick={dismiss}
+                            class="button"></lightning-button>
+                    </lightning-layout-item>
+
+                    <lightning-layout-item>
+                        <lightning-button variant="base" data-id="submit" label="Create" type="submit"
+                            class="button-primary"></lightning-button>
+                    </lightning-layout-item>
+                </lightning-layout>
+            </div>
+
+            <div class="header-offset slds-var-p-horizontal_small slds-var-p-bottom_medium">
+
+                <!-- show any error messages or alerts -->
+                <lightning-messages></lightning-messages>
+
+                <!-- input fields -->
+                ///TEMPLATE_LIGHTNING_INPUT_CREATE_FIELDS_HTML///
+
+            </div>
+
+        </lightning-record-edit-form>
+    </div>
+</template>
diff --git a/resources/templates/createRecord/createRecord.js b/resources/templates/createRecord/createRecord.js
@@ -0,0 +1,26 @@
+import { LightningElement, api } from "lwc";
+
+///TEMPLATE_IMPORTS///
+
+export default class Create///TEMPLATE_OBJECT_API_NAME///Record
+extends LightningElement {
+  @api recordId;
+  @api objectApiName;
+
+  ///TEMPLATE_VARIABLES///
+
+  ///TEMPLATE_VARIABLE_ASSIGNMENTS///
+
+  onSuccess(event) {
+    console.log("Created record", event.detail);
+    // Dismiss modal on success
+    this.dismiss(event);
+  }
+
+  dismiss(event) {
+    console.log("Dismissing modal", event.detail);
+    // TODO: Can we use window.history.back() here?
+    // eslint-disable-next-line no-restricted-globals
+    history.back();
+  }
+}
diff --git a/resources/templates/createRecord/createRecord.js-meta.xml b/resources/templates/createRecord/createRecord.js-meta.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>///TEMPLATE_CREATE_LWC_LABEL///</masterLabel>
+    <description>Creates a new ///TEMPLATE_OBJECT_API_NAME/// record.</description>
+    <targets>
+        <target>lightning__GlobalAction</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__RecordAction</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__RecordAction">
+            <actionType>ScreenAction</actionType>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>
diff --git a/resources/templates/editRecord/editRecord.css b/resources/templates/editRecord/editRecord.css
@@ -0,0 +1,2 @@
+@import 'c/commonStyles';
+
diff --git a/resources/templates/editRecord/editRecord.html b/resources/templates/editRecord/editRecord.html
@@ -0,0 +1,34 @@
+<template>
+    <div class="component-background">
+        <lightning-record-edit-form object-api-name="///TEMPLATE_OBJECT_API_NAME///" record-id={recordId} onsuccess={onSuccess}>
+            <div class="header-slot">
+                <!-- cancel and submit buttons-->
+                <lightning-layout horizontal-align="spread" class="slds-var-p-horizontal_xx-small">
+                    <lightning-layout-item>
+                        <lightning-button variant="base" data-id="cancel" label="Cancel" type="button" onclick={dismiss}
+                            class="button"></lightning-button>
+                    </lightning-layout-item>
+
+                    <lightning-layout-item data-id="name" class="record-name slds-align_absolute-center">
+                        <p style="word-break: break-all;">{name}</p>
+                    </lightning-layout-item>
+
+                    <lightning-layout-item>
+                        <lightning-button variant="base" data-id="submit" label="Save" type="submit"
+                            class="button-primary"></lightning-button>
+                    </lightning-layout-item>
+                </lightning-layout>
+            </div>
+
+            <div class="header-offset slds-var-p-horizontal_small slds-var-p-bottom_medium">
+
+                <!-- show any error messages or alerts -->
+                <lightning-messages></lightning-messages>
+
+                <!-- input fields -->
+                ///TEMPLATE_LIGHTNING_INPUT_EDIT_FIELDS_HTML///
+            </div>
+
+        </lightning-record-edit-form>
+    </div>
+</template>
diff --git a/resources/templates/editRecord/editRecord.js b/resources/templates/editRecord/editRecord.js
@@ -0,0 +1,32 @@
+import { LightningElement, api, wire } from "lwc";
+import { getRecord } from "lightning/uiRecordApi";
+
+///TEMPLATE_IMPORTS///
+
+export default class Edit///TEMPLATE_OBJECT_API_NAME///Record 
+extends LightningElement {
+  @api recordId;
+  @api objectApiName;
+
+  ///TEMPLATE_VARIABLES///
+
+  @wire(getRecord, { recordId: "$recordId", fields: [NAME_FIELD] })
+  record;
+
+  get name() {
+    return this.record?.data?.fields?.Name?.value || "";
+  }
+
+  onSuccess(event) {
+    console.log("Updated record", event.detail);
+    // Dismiss modal on success
+    this.dismiss(event);
+  }
+
+  dismiss(event) {
+    console.log("Dismissing modal", event.detail);
+    // TODO: Can we use window.history.back() here?
+    // eslint-disable-next-line no-restricted-globals
+    history.back();
+  }
+}
diff --git a/resources/templates/editRecord/editRecord.js-meta.xml b/resources/templates/editRecord/editRecord.js-meta.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>///TEMPLATE_EDIT_LWC_LABEL///</masterLabel>
+    <description>Edits a ///TEMPLATE_OBJECT_API_NAME/// record.</description>
+    <targets>
+        <target>lightning__RecordPage</target>
+        <target>lightning__RecordAction</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__RecordAction">
+            <actionType>ScreenAction</actionType>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>
diff --git a/resources/templates/viewRecord/viewRecord.css b/resources/templates/viewRecord/viewRecord.css
@@ -0,0 +1 @@
+@import 'c/commonStyles';
diff --git a/resources/templates/viewRecord/viewRecord.html b/resources/templates/viewRecord/viewRecord.html
@@ -0,0 +1,20 @@
+<template>
+    <div class="component-background">
+        <template if:true={record}>
+            <div class="card-container">
+
+                <div class="title-slot">
+                    <c-record-header record-name={name} object-api-name={objectApiName}></c-record-header>
+                </div>
+
+                <div class="body-slot">
+                    <!-- use lightning-record-form to show the selected fields. here, we use 'view' as the mode which allows edits too -->
+                    <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields}
+                        columns="1" mode="readonly">
+                    </lightning-record-form>
+                </div>
+
+            </div>
+        </template>
+    </div>
+</template>
diff --git a/resources/templates/viewRecord/viewRecord.js b/resources/templates/viewRecord/viewRecord.js
@@ -0,0 +1,23 @@
+import { LightningElement, api, wire } from "lwc";
+import { getRecord } from "lightning/uiRecordApi";
+
+///TEMPLATE_IMPORTS///
+
+export default class View///TEMPLATE_OBJECT_API_NAME///Record 
+extends LightningElement {
+  @api recordId;
+  @api objectApiName;
+
+  get fields() {
+    return [
+      ///TEMPLATE_FIELDS///
+    ];
+  }
+
+  @wire(getRecord, { recordId: "$recordId", fields: "$fields" })
+  record;
+
+  get name() {
+    return this.record?.data?.fields?.Name?.value ?? "";
+  }
+}
diff --git a/resources/templates/viewRecord/viewRecord.js-meta.xml b/resources/templates/viewRecord/viewRecord.js-meta.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>///TEMPLATE_VIEW_LWC_LABEL///</masterLabel>
+    <description>Component to view a single ///TEMPLATE_OBJECT_API_NAME///.</description>
+    <targets>
+        <target>lightning__RecordPage</target>
+        <target>lightning__RecordAction</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__RecordAction">
+            <actionType>ScreenAction</actionType>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>