Merge pull request #76 from daniel94104/fsl-foundation-documents/GA-S…

…ampleCodes

Service documents GA sample codes

ServiceDocumentSampleComponents/.eslintignore

@@ -0,0 +1,16 @@
+**/lwc/**/*.css
+**/lwc/**/*.html
+**/lwc/**/*.json
+**/lwc/**/*.svg
+**/lwc/**/*.xml
+**/aura/**/*.auradoc
+**/aura/**/*.cmp
+**/aura/**/*.css
+**/aura/**/*.design
+**/aura/**/*.evt
+**/aura/**/*.json
+**/aura/**/*.svg
+**/aura/**/*.tokens
+**/aura/**/*.xml
+**/aura/**/*.app
+.sfdx

ServiceDocumentSampleComponents/.forceignore

@@ -0,0 +1,12 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+
+# LWC configuration files
+**/jsconfig.json
+**/.eslintrc.json
+
+# LWC Jest
+**/__tests__/**

ServiceDocumentSampleComponents/.gitignore

@@ -0,0 +1,45 @@
+# This file is used for Git repositories to specify intentionally untracked files that Git should ignore. 
+# If you are not using git, you can delete this file. For more information see: https://git-scm.com/docs/gitignore
+# For useful gitignore templates see: https://github.com/github/gitignore
+
+# Salesforce cache
+.sf/
+.sfdx/
+.localdevserver/
+deploy-options.json
+
+# LWC VSCode autocomplete
+**/lwc/jsconfig.json
+
+# LWC Jest coverage reports
+coverage/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Eslint cache
+.eslintcache
+
+# MacOS system files
+.DS_Store
+
+# Windows system files
+Thumbs.db
+ehthumbs.db
+[Dd]esktop.ini
+$RECYCLE.BIN/
+
+# Local environment variables
+.env
+
+# Python Salesforce Functions
+**/__pycache__/
+**/.venv/
+**/venv/

ServiceDocumentSampleComponents/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run precommit

ServiceDocumentSampleComponents/.prettierignore

@@ -0,0 +1,10 @@
+# List files or directories below to ignore them when running prettier
+# More information: https://prettier.io/docs/en/ignore.html
+#
+
+**/staticresources/**
+.localdevserver
+.sfdx
+.vscode
+
+coverage/

ServiceDocumentSampleComponents/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": "**/lwc/**/*.html",
+      "options": { "parser": "lwc" }
+    },
+    {
+      "files": "*.{cmp,page,component}",
+      "options": { "parser": "html" }
+    }
+  ]
+}

ServiceDocumentSampleComponents/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "salesforce.salesforcedx-vscode",
+    "redhat.vscode-xml",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "financialforce.lana"
+  ]
+}

ServiceDocumentSampleComponents/.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Apex Replay Debugger",
+      "type": "apex-replay",
+      "request": "launch",
+      "logFile": "${command:AskForLogFileName}",
+      "stopOnEntry": true,
+      "trace": true
+    }
+  ]
+}

ServiceDocumentSampleComponents/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/.sfdx": true
+  }
+}

ServiceDocumentSampleComponents/README.md

@@ -0,0 +1,26 @@
+# Service Document Sample Components
+
+This project contains sample components can be used on the service document template. Through Salesforce DX project, these sample components can be pushed to your org and used on service document templates.
+
+## Salesforce DX Project: Next Steps
+
+Now that you’ve created a Salesforce DX project, what’s next? Here are some documentation resources to get you started.
+
+## How Do You Plan to Deploy Your Changes?
+
+Do you want to deploy a set of changes, or create a self-contained application? Choose a [development model](https://developer.salesforce.com/tools/vscode/en/user-guide/development-models).
+
+## Configure Your Salesforce DX Project
+
+The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file.
+
+## How to use custom components when build a service document template
+
+- [Service Document Template Builder Documentation](https://help.salesforce.com/s/articleView?id=sf.fs_template_builder.htm&type=5)
+
+## Read All About It
+
+- [Salesforce Extensions Documentation](https://developer.salesforce.com/tools/vscode/)
+- [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)
+- [Salesforce DX Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm)
+- [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm)

ServiceDocumentSampleComponents/config/project-scratch-def.json

@@ -0,0 +1,13 @@
+{
+  "orgName": "giaoge.zheng company",
+  "edition": "Developer",
+  "features": ["EnableSetPasswordInApi"],
+  "settings": {
+    "lightningExperienceSettings": {
+      "enableS1DesktopEnabled": true
+    },
+    "mobileSettings": {
+      "enableS1EncryptedStoragePref2": false
+    }
+  }
+}

ServiceDocumentSampleComponents/force-app/main/default/aura/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": ["@salesforce/eslint-plugin-aura"],
+  "extends": ["plugin:@salesforce/eslint-plugin-aura/recommended"],
+  "rules": {
+    "vars-on-top": "off",
+    "no-unused-expressions": "off"
+  }
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["@salesforce/eslint-config-lwc/recommended"],
+  "overrides": [
+    {
+      "files": ["*.test.js"],
+      "rules": {
+        "@lwc/lwc/no-unexpected-wire-adapter-usages": "off"
+      },
+      "env": {
+        "node": true
+      }
+    }
+  ]
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkPlan/demoWorkPlan.css

@@ -0,0 +1,4 @@
+:host h4,
+h3 {
+  color: #009ad7;
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkPlan/demoWorkPlan.html

@@ -0,0 +1,29 @@
+<template>
+  <div class="slds-box slds-var-m-top_medium">
+    <h3 class="slds-text-heading_medium slds-var-m-bottom_small">
+      {workPlanRecord.Name.value}
+    </h3>
+    <p class="slds-var-p-bottom_small">{workPlanRecord.Description.value}</p>
+
+    <h4 class="slds-text-heading_small slds-var-p-bottom_medium">Work Steps</h4>
+    <table
+      class="slds-border_right slds-border_left slds-table slds-table_bordered slds-table_col-bordered"
+    >
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template for:each={_workStepRecords} for:item="workStepRecord">
+          <c-demo-work-step-presentation
+            key={workStepRecord.node.Id}
+            work-step-record={workStepRecord}
+          ></c-demo-work-step-presentation>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkPlan/demoWorkPlan.js

@@ -0,0 +1,86 @@
+import { LightningElement, api, wire, track } from "lwc";
+import { gql, graphql } from "lightning/uiGraphQLApi";
+
+export default class DemoWorkPlan extends LightningElement {
+  @api workPlanId;
+
+  @track _workStepRecords;
+
+  @api
+  get workPlanRecord() {
+    return this._workPlanRecord;
+  }
+  set workPlanRecord(val) {
+    if (val && val.errors && val.errors.length > 0) {
+      // ERROR
+    } else {
+      // val.node is like below
+      // {
+      //     "Id": "0gqRO0000000fw4YAA",
+      //     "ParentRecordId": {
+      //         "value": "0WORO000000CkXF4A0",
+      //         "displayValue": null
+      //     }
+      // }
+      this._workPlanRecord = val.node;
+    }
+  }
+
+  @wire(graphql, {
+    query: "$workStepQuery",
+    variables: "$workStepVariables"
+  })
+  handleWorkStepGql(val) {
+    if (val && val.errors && val.errors.length > 0) {
+      // ERROR
+    } else if (
+      val &&
+      val.data &&
+      val.data.uiapi.query.WorkStep &&
+      val.data.uiapi.query.WorkStep.edges.length > 0
+    ) {
+      this._workStepRecords = val.data.uiapi.query.WorkStep.edges;
+    }
+  }
+
+  get workStepQuery() {
+    return gql`
+      query workstep($parentId: ID = "") {
+        uiapi {
+          query {
+            WorkStep(where: { WorkPlanId: { eq: $parentId } }) {
+              edges {
+                node {
+                  Id
+                  WorkPlanId {
+                    value
+                    displayValue
+                  }
+                  Status {
+                    value
+                    displayValue
+                    label
+                  }
+                  Name {
+                    value
+                    displayValue
+                    label
+                  }
+                  Description {
+                    value
+                    displayValue
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    `;
+  }
+  get workStepVariables() {
+    return {
+      parentId: this.workPlanId
+    };
+  }
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkPlan/demoWorkPlan.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>

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkStepPresentation/demoWorkStepPresentation.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkStepPresentation/demoWorkStepPresentation.html

@@ -0,0 +1,7 @@
+<template>
+  <tr>
+    <td class="slds-cell-wrap">{workStepRecord.Name.value}</td>
+    <td class="slds-cell-wrap">{workStepRecord.Status.value}</td>
+    <td class="slds-cell-wrap">{workStepRecord.Description.value}</td>
+  </tr>
+</template>

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkStepPresentation/demoWorkStepPresentation.js

@@ -0,0 +1,23 @@
+import { LightningElement, api } from "lwc";
+
+export default class DemoWorkStepPresentation extends LightningElement {
+  @api
+  get workStepRecord() {
+    return this._workStepRecord;
+  }
+  set workStepRecord(val) {
+    if (val && val.errors && val.errors.length > 0) {
+      // ERROR
+    } else {
+      // val.node is like below
+      // {
+      //     "Id": "0gqRO0000000fw4YAA",
+      //     "ParentRecordId": {
+      //         "value": "0WORO000000CkXF4A0",
+      //         "displayValue": null
+      //     }
+      // }
+      this._workStepRecord = val.node;
+    }
+  }
+}

ServiceDocumentSampleComponents/force-app/main/default/lwc/demoWorkStepPresentation/demoWorkStepPresentation.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>

ServiceDocumentSampleComponents/force-app/main/default/lwc/mediumHeaderText/mediumHeaderText.html

@@ -0,0 +1,3 @@
+<template>
+  <h2 class="slds-text-heading_medium" style={inlineStyle}>{text}</h2>
+</template>

ServiceDocumentSampleComponents/force-app/main/default/lwc/mediumHeaderText/mediumHeaderText.js

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class MediumHeaderText extends LightningElement {
+  @api text;
+  @api colorhex;
+  @api topPadding;
+  @api leftPadding;
+  @api rightPadding;
+  @api bottomPadding;
+  get inlineStyle() {
+    return `color:#${this.colorhex}; padding:${this.topPadding}px ${this.rightPadding}px ${this.bottomPadding}px ${this.leftPadding}px`;
+  }
+}