Merge pull request #114 from rotem-hen-sf/main

replace svg image with actual component + localization
forcedotcom · Dec 21, 2023 · d759f86 · d759f86
2 parents f95fe31 + 6423a0d
commit d759f86
Show file tree

Hide file tree

Showing 50 changed files with 345 additions and 188 deletions.
diff --git a/projects/MobileDashboard/force-app/main/default/labels/CustomLabels.labels-meta.xml b/projects/MobileDashboard/force-app/main/default/labels/CustomLabels.labels-meta.xml
@@ -353,6 +353,65 @@
         <value
     >Uses more vertical space. Recommended for long field names.</value>
     </labels>
+    <labels>
+        <fullName>MobileDashboard_card_modal_design_tab_example_my_sa</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - My Service Appointments</shortDescription>
+        <value>My Service Appointments</value>
+    </labels>
+    <labels>
+        <fullName
+    >MobileDashboard_card_modal_design_tab_example_cannot_complete</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - Cannot Complete</shortDescription>
+        <value>Cannot Complete</value>
+    </labels>
+    <labels>
+        <fullName
+    >MobileDashboard_card_modal_design_tab_example_canceled</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - Canceled</shortDescription>
+        <value>Canceled</value>
+    </labels>
+    <labels>
+        <fullName
+    >MobileDashboard_card_modal_design_tab_example_completed</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - Completed</shortDescription>
+        <value>Completed</value>
+    </labels>
+    <labels>
+        <fullName
+    >MobileDashboard_card_modal_design_tab_example_scheduled</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - Scheduled</shortDescription>
+        <value>Scheduled</value>
+    </labels>
+    <labels>
+        <fullName
+    >MobileDashboard_card_modal_design_tab_example_in_progress</fullName>
+        <language>en_US</language>
+        <protected>true</protected>
+        <categories>MobileDashboard</categories>
+        <shortDescription
+    >Card modal - design tab - example cards - In Progress</shortDescription>
+        <value>In Progress</value>
+    </labels> 
     <labels>
         <fullName
     >MobileDashboard_card_modal_design_tab_card_data_title</fullName>

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.css b/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.css
@@ -34,6 +34,10 @@
   margin-right: 60px;
 }
 
+.layout-radio c-summary-component {
+  max-width: 350px;
+}
+
 .sub-filters-container {
   display: flex;
   flex-direction: column;

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.html b/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.html
@@ -131,14 +131,11 @@ <h1>
                     LABELS.MobileDashboard_card_modal_design_tab_layout_side_description
                     }
                   </p>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="342"
-                    height="216"
+                  <c-summary-component
+                    settings={sideExampleSettings}
+                    demo-mode="true"
                   >
-                    ;
-                    <use xlink:href={side_svg_url}></use>
-                  </svg>
+                  </c-summary-component>
                 </div>
                 <div class="layout-radio">
                   <lightning-input
@@ -155,14 +152,11 @@ <h1>
                     LABELS.MobileDashboard_card_modal_design_tab_layout_stack_description
                     }
                   </p>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="343"
-                    height="280"
+                  <c-summary-component
+                    settings={stackExampleSettings}
+                    demo-mode="true"
                   >
-                    ;
-                    <use xlink:href={stack_svg_url}></use>
-                  </svg>
+                  </c-summary-component>
                 </div>
               </div>
             </div>

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.js b/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/editCardModal.js
@@ -3,8 +3,6 @@ import { api } from "lwc";
 import LightningModal from "lightning/modal";
 import AlertMessage from "c/alertMessage";
 import getAllFields from "@salesforce/apex/DashboardSettingsService.getAllFields";
-import SIDE_EXAMPLE_SVG from "@salesforce/resourceUrl/side_example";
-import STACK_EXAMPLE_SVG from "@salesforce/resourceUrl/stack_example";
 import customLabels from "./labels";
 
 export default class EditCardModal extends LightningModal {
@@ -32,9 +30,6 @@ export default class EditCardModal extends LightningModal {
     color: "#747474"
   };
 
-  side_svg_url = `${SIDE_EXAMPLE_SVG}#side_example`;
-  stack_svg_url = `${STACK_EXAMPLE_SVG}#stack_example`;
-
   connectedCallback() {
     this.tempCard = { ...this.card };
     this.refreshFieldsOptions(this.tempCard.object?.value);
@@ -245,6 +240,64 @@ export default class EditCardModal extends LightningModal {
     return !this.tempCard.object?.value || !this.tempCard.filter.conditionLogic;
   }
 
+  get exampleSettings() {
+    return {
+      Title__c: this.LABELS.MobileDashboard_card_modal_design_tab_example_my_sa,
+      subQueriesData: [
+        {
+          index: 0,
+          count: 1,
+          label:
+            this.LABELS
+              .MobileDashboard_card_modal_design_tab_example_cannot_complete,
+          icon: "utility:error",
+          color: "#B72020"
+        },
+        {
+          index: 1,
+          count: 2,
+          label:
+            this.LABELS.MobileDashboard_card_modal_design_tab_example_canceled,
+          icon: "utility:warning",
+          color: "#8C4B02"
+        },
+        {
+          index: 2,
+          count: 5,
+          label:
+            this.LABELS.MobileDashboard_card_modal_design_tab_example_completed,
+          icon: "utility:success",
+          color: "#2E844A"
+        },
+        {
+          index: 3,
+          count: 6,
+          label:
+            this.LABELS.MobileDashboard_card_modal_design_tab_example_scheduled,
+          icon: "utility:clock",
+          color: "#747474"
+        },
+        {
+          index: 4,
+          count: 4,
+          label:
+            this.LABELS
+              .MobileDashboard_card_modal_design_tab_example_in_progress,
+          icon: "utility:event",
+          color: "#747474"
+        }
+      ]
+    };
+  }
+
+  get sideExampleSettings() {
+    return { ...this.exampleSettings, Layout__c: "SIDE" };
+  }
+
+  get stackExampleSettings() {
+    return { ...this.exampleSettings, Layout__c: "STACK" };
+  }
+
   detectSubFilterDrag = async () => {
     const filters = this.template.querySelectorAll("c-sub-filter-card");
     if (filters.length !== this.tempCard.subFilters.length) {

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/labels.js b/projects/MobileDashboard/force-app/main/default/lwc/editCardModal/labels.js
@@ -17,6 +17,12 @@ import MobileDashboard_card_modal_design_tab_layout_side_title from "@salesforce
 import MobileDashboard_card_modal_design_tab_layout_side_description from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_layout_side_description";
 import MobileDashboard_card_modal_design_tab_layout_stack_title from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_layout_stack_title";
 import MobileDashboard_card_modal_design_tab_layout_stack_description from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_layout_stack_description";
+import MobileDashboard_card_modal_design_tab_example_my_sa from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_my_sa";
+import MobileDashboard_card_modal_design_tab_example_cannot_complete from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_cannot_complete";
+import MobileDashboard_card_modal_design_tab_example_canceled from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_canceled";
+import MobileDashboard_card_modal_design_tab_example_completed from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_completed";
+import MobileDashboard_card_modal_design_tab_example_scheduled from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_scheduled";
+import MobileDashboard_card_modal_design_tab_example_in_progress from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_example_in_progress";
 import MobileDashboard_card_modal_design_tab_card_data_title from "@salesforce/label/c.MobileDashboard_card_modal_design_tab_card_data_title";
 import MobileDashboard_settings_delete_sub_filter_warning_title from "@salesforce/label/c.MobileDashboard_settings_delete_sub_filter_warning_title";
 import MobileDashboard_settings_delete_sub_filter_warning_body from "@salesforce/label/c.MobileDashboard_settings_delete_sub_filter_warning_body";
@@ -48,6 +54,12 @@ const customLabels = {
   MobileDashboard_card_modal_design_tab_layout_side_description,
   MobileDashboard_card_modal_design_tab_layout_stack_title,
   MobileDashboard_card_modal_design_tab_layout_stack_description,
+  MobileDashboard_card_modal_design_tab_example_my_sa,
+  MobileDashboard_card_modal_design_tab_example_cannot_complete,
+  MobileDashboard_card_modal_design_tab_example_canceled,
+  MobileDashboard_card_modal_design_tab_example_completed,
+  MobileDashboard_card_modal_design_tab_example_scheduled,
+  MobileDashboard_card_modal_design_tab_example_in_progress,
   MobileDashboard_card_modal_design_tab_card_data_title,
   MobileDashboard_settings_delete_sub_filter_warning_title,
   MobileDashboard_settings_delete_sub_filter_warning_body,

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/subFilterCard/subFilterCard.css b/projects/MobileDashboard/force-app/main/default/lwc/subFilterCard/subFilterCard.css
@@ -67,6 +67,7 @@ c-basic-filter {
 }
 
 .preview {
+  max-width: 200px;
   margin-right: 24px;
   display: flex;
   flex-direction: column;

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/subFilterCard/subFilterCard.html b/projects/MobileDashboard/force-app/main/default/lwc/subFilterCard/subFilterCard.html
@@ -55,7 +55,7 @@
             </lightning-input>
           </div>
         </div>
-        <div class="preview" style="max-width: 200px">
+        <div class="preview">
           <label class="slds-form-element__label">
             { LABELS.MobileDashboard_preview_title }
             <lightning-helptext

diff --git a/projects/MobileDashboard/force-app/main/default/lwc/summaryComponent/summaryComponent.js b/projects/MobileDashboard/force-app/main/default/lwc/summaryComponent/summaryComponent.js
@@ -15,7 +15,9 @@ export default class SummaryComponent extends LightningElement {
 
   renderedCallback() {
     if (this.isDemoMode) {
-      const subCounter = this.settings.subQueriesData.length;
+      const subCounter = this.settings.subQueriesData.reduce((acc, s) => {
+        return acc + s.count;
+      }, 0);
       this.recordsCount = subCounter === 0 ? 1 : subCounter;
       this.subQueriesData = this.settings.subQueriesData;
     }

diff --git a/...ult/objectTranslations/Mobile_Dashboard_Setting__c-fr/Layout__c.fieldTranslation-meta.xml b/...ult/objectTranslations/Mobile_Dashboard_Setting__c-fr/Layout__c.fieldTranslation-meta.xml
@@ -4,10 +4,10 @@
     <label>Présentation</label>
     <picklistValues>
         <masterLabel>SIDE</masterLabel>
-        <translation>CÔTÉ</translation>
+        <translation>SIDE</translation>
     </picklistValues>
     <picklistValues>
         <masterLabel>STACK</masterLabel>
-        <translation>EMPILÉ</translation>
+        <translation>STACK</translation>
     </picklistValues>
 </CustomFieldTranslation>
diff --git a/...ranslations/Mobile_Dashboard_Setting__c-fr/Main_Filter_Logic__c.fieldTranslation-meta.xml b/...ranslations/Mobile_Dashboard_Setting__c-fr/Main_Filter_Logic__c.fieldTranslation-meta.xml
@@ -12,6 +12,6 @@
     </picklistValues>
     <picklistValues>
         <masterLabel>CUSTOM</masterLabel>
-        <translation>PERSONNALISÉE</translation>
+        <translation>CUSTOM</translation>
     </picklistValues>
 </CustomFieldTranslation>
diff --git a/.../Mobile_Dashboard_Setting__c-hu/Mobile_Dashboard_Setting__c-hu.objectTranslation-meta.xml b/.../Mobile_Dashboard_Setting__c-hu/Mobile_Dashboard_Setting__c-hu.objectTranslation-meta.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <CustomObjectTranslation xmlns="http://soap.sforce.com/2006/04/metadata">
-    <nameFieldLabel>Mobilműszerfal-beállításnév</nameFieldLabel>
+    <nameFieldLabel>Mobilvezérlőpult-beállításnév</nameFieldLabel>
     <standardFields>
         <name>Name</name>
-        <label>Mobilműszerfal-beállításnév</label>
+        <label>Mobilvezérlőpult-beállításnév</label>
     </standardFields>
     <startsWith>Consonant</startsWith>
     <caseValues>

diff --git a/...ult/objectTranslations/Mobile_Dashboard_Setting__c-sk/Layout__c.fieldTranslation-meta.xml b/...ult/objectTranslations/Mobile_Dashboard_Setting__c-sk/Layout__c.fieldTranslation-meta.xml
@@ -4,10 +4,10 @@
     <label>Rozloženie</label>
     <picklistValues>
         <masterLabel>SIDE</masterLabel>
-        <translation>VEDĽA SEBA</translation>
+        <translation>SIDE</translation>
     </picklistValues>
     <picklistValues>
         <masterLabel>STACK</masterLabel>
-        <translation>NAD SEBOU</translation>
+        <translation>STACK</translation>
     </picklistValues>
 </CustomFieldTranslation>
diff --git a/...ranslations/Mobile_Dashboard_Setting__c-sk/Main_Filter_Logic__c.fieldTranslation-meta.xml b/...ranslations/Mobile_Dashboard_Setting__c-sk/Main_Filter_Logic__c.fieldTranslation-meta.xml
@@ -12,6 +12,6 @@
     </picklistValues>
     <picklistValues>
         <masterLabel>CUSTOM</masterLabel>
-        <translation>VLASTNÉ</translation>
+        <translation>CUSTOM</translation>
     </picklistValues>
 </CustomFieldTranslation>
diff --git a/...cts/MobileDashboard/force-app/main/default/staticresources/side_example.resource-meta.xml b/...cts/MobileDashboard/force-app/main/default/staticresources/side_example.resource-meta.xml