Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial pass at templates for each LWC. #49

Merged
merged 1 commit into from
Nov 8, 2023
Merged

Initial pass at templates for each LWC. #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions resources/templates/createRecord/createRecord.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'c/commonStyles';
32 changes: 32 additions & 0 deletions resources/templates/createRecord/createRecord.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
26 changes: 26 additions & 0 deletions resources/templates/createRecord/createRecord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
}
17 changes: 17 additions & 0 deletions resources/templates/createRecord/createRecord.js-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions resources/templates/editRecord/editRecord.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import 'c/commonStyles';

34 changes: 34 additions & 0 deletions resources/templates/editRecord/editRecord.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions resources/templates/editRecord/editRecord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
}
16 changes: 16 additions & 0 deletions resources/templates/editRecord/editRecord.js-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions resources/templates/viewRecord/viewRecord.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'c/commonStyles';
20 changes: 20 additions & 0 deletions resources/templates/viewRecord/viewRecord.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
23 changes: 23 additions & 0 deletions resources/templates/viewRecord/viewRecord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ?? "";
}
}
16 changes: 16 additions & 0 deletions resources/templates/viewRecord/viewRecord.js-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>