From 0388e02e51ef79cd7f765b57e5cba6ca2f6d818c Mon Sep 17 00:00:00 2001
From: Heber <Anthony.Heber@gmail.com>
Date: Sun, 3 Mar 2024 15:18:40 -0700
Subject: [PATCH] Update schedule style and details

---
 dlrs/main/classes/AsyncApexJobsSelector.cls   |   7 +-
 .../classSchedulerModal.html                  |  78 +++---
 .../classSchedulerModal.js                    |  76 ++++-
 dlrs/main/lwc/cronBuilder/cronBuilder.html    | 263 +++++++++---------
 dlrs/main/lwc/cronBuilder/cronBuilder.js      |  12 +-
 5 files changed, 266 insertions(+), 170 deletions(-)

diff --git a/dlrs/main/classes/AsyncApexJobsSelector.cls b/dlrs/main/classes/AsyncApexJobsSelector.cls
index 4491f143..cb7010b4 100644
--- a/dlrs/main/classes/AsyncApexJobsSelector.cls
+++ b/dlrs/main/classes/AsyncApexJobsSelector.cls
@@ -91,7 +91,8 @@ public class AsyncApexJobsSelector extends fflib_SObjectSelector {
         new List<String>{
           'ApexClass.Name',
           'CronTrigger.CronJobDetail.Name',
-          'CronTrigger.CronExpression'
+          'CronTrigger.CronExpression',
+          'CronTrigger.NextFireTime'
         }
       )
       .setCondition(
@@ -100,6 +101,10 @@ public class AsyncApexJobsSelector extends fflib_SObjectSelector {
           'ApexClass.Name = :className AND ' +
           'ApexClass.NamespacePrefix = :namespace'
       )
+      .addOrdering(
+        'CronTrigger.NextFireTime',
+        fflib_QueryFactory.SortOrder.ASCENDING
+      )
       .toSOQL();
     return Database.query(query);
   }
diff --git a/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.html b/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.html
index 80b9d7f8..75263304 100644
--- a/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.html
+++ b/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.html
@@ -3,39 +3,45 @@
   <lightning-modal-body>
     <lightning-layout multiple-rows>
       <lightning-layout-item size="12">
-        <p>
-          Total Scheduled Jobs in the Org
-          ({scheduledJobCount}/{totalAllowedScheduledJobs})
-        </p>
-        <lightning-progress-bar
-          aria-label="Used Scheduled Jobs"
-          value={scheduledJobCount}
-        ></lightning-progress-bar>
+        <div class="slds-section slds-is-open">
+          <h3 class="slds-section__title">
+            Total Scheduled Jobs in the Org
+            ({scheduledJobCount}/{totalAllowedScheduledJobs})
+          </h3>
+          <div class="slds-section__content">
+            <lightning-progress-bar
+              aria-label="Used Scheduled Jobs"
+              value={scheduledJobCount}
+            ></lightning-progress-bar>
+          </div>
+        </div>
       </lightning-layout-item>
       <lightning-layout-item size="12">
         <lightning-layout multiple-rows>
-          <lightning-layout-item size="12" lwc:if={currentSchedule.length}>
-            Existing Schedules of {className}
+          <lightning-layout-item
+            size="12"
+            lwc:if={currentSchedule.length}
+            class="slds-p-vertical_small"
+          >
+            <div class="slds-section slds-is-open">
+              <h3 class="slds-section__title">
+                Existing Schedules of {className}
+              </h3>
+              <div class="slds-section__content">
+                <lightning-datatable
+                  id="currentscheduledatatable"
+                  data={currentSchedule}
+                  columns={currentColumns}
+                  key-field="Id"
+                  onrowaction={handleRowAction}
+                  hide-checkbox-column
+                ></lightning-datatable>
+              </div>
+            </div>
           </lightning-layout-item>
-          <template for:each={currentSchedule} for:item="sched">
-            <lightning-layout-item key={sched.Id} size="12">
-              <lightning-layout>
-                <lightning-layout-item flexibility="grow">
-                  {sched.CronTrigger.CronExpression}
-                </lightning-layout-item>
-                <lightning-layout-item>
-                  <lightning-button-icon
-                    icon-name="utility:delete"
-                    data-jobid={sched.CronTrigger.Id}
-                    onclick={handleCancelJob}
-                  ></lightning-button-icon>
-                </lightning-layout-item>
-              </lightning-layout>
-            </lightning-layout-item>
-          </template>
         </lightning-layout>
       </lightning-layout-item>
-      <lightning-layout-item size="12">
+      <lightning-layout-item size="12" class="slds-p-vertical_medium">
         <c-cron-builder
           values={cronStrings}
           oncronupdate={handleOnCronUpdate}
@@ -43,10 +49,20 @@
         ></c-cron-builder>
       </lightning-layout-item>
       <lightning-layout-item size="12">
-        <div>Planned New Scheduled Items</div>
-        <template for:each={cronStrings} for:item="cron">
-          <div key={cron}>{cron}</div>
-        </template>
+        <div class="slds-section slds-is-open">
+          <h3 class="slds-section__title">New schedule patterns</h3>
+          <div class="slds-section__content">
+            <lightning-layout>
+              <lightning-layout-item flexibility="shrink">
+                <ul class="slds-has-dividers_around-space">
+                  <template for:each={cronStrings} for:item="cron">
+                    <li key={cron} class="slds-item">{cron}</li>
+                  </template>
+                </ul>
+              </lightning-layout-item>
+            </lightning-layout>
+          </div>
+        </div>
       </lightning-layout-item>
     </lightning-layout>
   </lightning-modal-body>
diff --git a/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.js b/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.js
index f97a98a1..65e7d1b5 100644
--- a/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.js
+++ b/dlrs/main/lwc/classSchedulerModal/classSchedulerModal.js
@@ -1,5 +1,9 @@
 import { api } from "lwc";
 import LightningModal from "lightning/modal";
+
+import { ShowToastEvent } from "lightning/platformShowToastEvent";
+import LightningConfirm from "lightning/confirm";
+
 import getCurrentJobs from "@salesforce/apex/SchedulerController.getCurrentJobs";
 import getTotalScheduledJobs from "@salesforce/apex/SchedulerController.getAllScheduledJobs";
 import scheduleJobs from "@salesforce/apex/SchedulerController.scheduleJobs";
@@ -9,9 +13,32 @@ export default class ClassSchedulerModal extends LightningModal {
   cronStrings = [];
   // async apex jobs
   currentSchedule = [];
+  currentColumns = [
+    { label: "Name", fieldName: "name" },
+    {
+      label: "Next Run At",
+      fieldName: "nextRunAt",
+      type: "date",
+      typeAttributes: {
+        month: "short",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit"
+      },
+      hideDefaultActions: true
+    },
+    { label: "Cron String", fieldName: "cronString", hideDefaultActions: true },
+    {
+      type: "action",
+      typeAttributes: { rowActions: [{ label: "Delete", name: "delete" }] },
+      hideDefaultActions: true
+    }
+  ];
+
   // using the configured Cron strings stub new instances to be scheduled
   proposedSchedule = [];
   scheduledJobCount = 0;
+  // Can this be changes for some customers? Is there a place we can get this from?
   totalAllowedScheduledJobs = 100;
 
   @api
@@ -26,24 +53,52 @@ export default class ClassSchedulerModal extends LightningModal {
   @api
   templates;
 
-  async connectedCallback() {
-    this.currentSchedule = await getCurrentJobs({ className: this.className });
-    this.scheduledJobCount = (await getTotalScheduledJobs()).length;
+  connectedCallback() {
+    this.updateScheduledData();
   }
 
   handleOnCronUpdate(event) {
     this.cronStrings = event.detail.value;
   }
 
-  async handleCancelJob(event) {
+  handleRowAction(event) {
+    this.handleCancelJob(event.detail.row.id);
+  }
+
+  async handleCancelJob(jobId) {
+    const confirmed = await LightningConfirm.open({
+      label: "Delete Scheduled Job",
+      message: `Are you sure you want to remove the scheduled job?`,
+      theme: "warning"
+    });
+
+    if (!confirmed) {
+      return;
+    }
     // get the job id, send to the server to cancel
     await cancelScheduledJob({
-      jobId: event.currentTarget.dataset.jobid
+      jobId
     });
 
-    // refresh current jobs list
-    this.currentSchedule = await getCurrentJobs({ className: this.className });
-    this.scheduledJobCount = (await getTotalScheduledJobs()).length;
+    this.updateScheduledData();
+  }
+
+  updateScheduledData() {
+    getCurrentJobs({
+      className: this.className
+    }).then((jobs) => {
+      this.currentSchedule = jobs.map((j) => ({
+        id: j.CronTrigger.Id,
+        name: j.CronTrigger.CronJobDetail.Name,
+        nextRunAt: j.CronTrigger.NextFireTime,
+        cronString: j.CronTrigger.CronExpression
+      }));
+      console.log(this.currentSchedule);
+    });
+
+    getTotalScheduledJobs().then((jobs) => {
+      this.scheduledJobCount = jobs.length;
+    });
   }
 
   async handleSchedule() {
@@ -52,6 +107,11 @@ export default class ClassSchedulerModal extends LightningModal {
         className: this.className,
         newSchedules: this.cronStrings
       });
+      const evt = new ShowToastEvent({
+        title: "Succesfully Added Jobs",
+        variant: "success"
+      });
+      this.dispatchEvent(evt);
       this.close();
     } catch (error) {
       // TODO: handle the error better
diff --git a/dlrs/main/lwc/cronBuilder/cronBuilder.html b/dlrs/main/lwc/cronBuilder/cronBuilder.html
index 7d216678..700e070a 100644
--- a/dlrs/main/lwc/cronBuilder/cronBuilder.html
+++ b/dlrs/main/lwc/cronBuilder/cronBuilder.html
@@ -1,130 +1,143 @@
 <template>
-  <p>Configure when the process should run</p>
-  <lightning-tabset>
-    <lightning-tab
-      label="Templates"
-      value="templates"
-      onactive={handeTabActivate}
-      lwc:if={templates}
-    >
-      <lightning-layout multiple-rows>
-        <lightning-layout-item size="12" medium-device-size="6">
-          <lightning-combobox
-            label="Template"
-            value={selectedTemplate}
-            options={templates}
-            onchange={handleTemplateChange}
-          ></lightning-combobox>
+  <div class="slds-section slds-is-open">
+    <h3 class="slds-section__title">Configure when the process should run</h3>
+    <div class="slds-section__content">
+      <lightning-tabset>
+        <lightning-tab
+          label="Templates"
+          value="templates"
+          onactive={handeTabActivate}
+          lwc:if={templates}
+        >
+          <lightning-layout multiple-rows>
+            <lightning-layout-item size="12" medium-device-size="6">
+              <lightning-combobox
+                label="Template"
+                value={selectedTemplate}
+                options={templates}
+                onchange={handleTemplateChange}
+              ></lightning-combobox>
 
-          <lightning-combobox
-            label="Hour of the day"
-            options={hours}
-            value={selectedHourOfDay}
-            onchange={handleSingleHourChange}
-            lwc:if={shouldDisplaySingleHourSelector}
-          ></lightning-combobox>
+              <lightning-combobox
+                label="Hour of the day"
+                options={hours}
+                value={selectedHourOfDay}
+                onchange={handleSingleHourChange}
+                lwc:if={shouldDisplaySingleHourSelector}
+              ></lightning-combobox>
 
-          <lightning-combobox
-            label="Minute of the Hour"
-            options={minutes}
-            value={selectedMinuteOfTheHour}
-            onchange={handleSingleMinuteChange}
-            lwc:if={shouldDisplaySingleMinuteSelector}
-          ></lightning-combobox>
-        </lightning-layout-item>
-      </lightning-layout>
-    </lightning-tab>
-    <lightning-tab label="Custom" value="custom" onactive={handeTabActivate}>
-      <lightning-layout multiple-rows>
-        <lightning-layout-item size="12">
-          <p>
-            The process will run when the current time matches at least one
-            chosen value from each column
-          </p>
-        </lightning-layout-item>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
-        >
-          <!-- intentionally blank to align header-->
-        </lightning-layout-item>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
-        >
-          <lightning-radio-group
-            type="button"
-            options={dayTypes}
-            value={dayType}
-            onchange={handleDayTypeChange}
-          ></lightning-radio-group>
-        </lightning-layout-item>
-      </lightning-layout>
-      <lightning-layout multiple-rows>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
-        >
-          <lightning-datatable
-            data={months}
-            columns={monthCols}
-            key-field="value"
-            selected-rows={selectedMonths}
-            onrowselection={handleMonthChange}
-          ></lightning-datatable>
-        </lightning-layout-item>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
-        >
-          <lightning-datatable
-            lwc:if={isWeekDayType}
-            data={weekdays}
-            columns={dayCols}
-            key-field="value"
-            selected-rows={selectedWeekdays}
-            onrowselection={handleWeekdayChange}
-          ></lightning-datatable>
-          <lightning-datatable
-            lwc:else
-            data={days}
-            columns={dayCols}
-            key-field="value"
-            selected-rows={selectedDays}
-            onrowselection={handleDayChange}
-          ></lightning-datatable>
-        </lightning-layout-item>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
-        >
-          <lightning-datatable
-            data={hours}
-            columns={hourCols}
-            key-field="value"
-            selected-rows={selectedHours}
-            onrowselection={handleHourChange}
-          ></lightning-datatable>
-        </lightning-layout-item>
-        <lightning-layout-item
-          size="6"
-          medium-device-size="3"
-          padding="around-small"
+              <lightning-combobox
+                label="Minute of the Hour"
+                options={minutes}
+                value={selectedMinuteOfTheHour}
+                onchange={handleSingleMinuteChange}
+                lwc:if={shouldDisplaySingleMinuteSelector}
+              ></lightning-combobox>
+            </lightning-layout-item>
+          </lightning-layout>
+        </lightning-tab>
+        <lightning-tab
+          label="Custom"
+          value="custom"
+          onactive={handeTabActivate}
         >
-          <lightning-datatable
-            data={minutes}
-            columns={minuteCols}
-            key-field="value"
-            selected-rows={selectedMinutes}
-            onrowselection={handleMinuteChange}
-          ></lightning-datatable>
-        </lightning-layout-item>
-      </lightning-layout>
-    </lightning-tab>
-  </lightning-tabset>
+          <lightning-layout multiple-rows horizontal-align="center">
+            <lightning-layout-item size="12">
+              <p>
+                The process will run when the current time matches at least one
+                chosen value from each column
+              </p>
+            </lightning-layout-item>
+            <lightning-layout-item padding="around-small">
+              <lightning-radio-group
+                type="button"
+                options={dayTypes}
+                value={dayType}
+                onchange={handleDayTypeChange}
+              ></lightning-radio-group>
+            </lightning-layout-item>
+          </lightning-layout>
+          <lightning-layout multiple-rows>
+            <lightning-layout-item
+              size="6"
+              medium-device-size="3"
+              padding="around-small"
+            >
+              <label class="slds-form-element__label" for="monthsdatatable"
+                >Months</label
+              >
+              <lightning-datatable
+                id="monthsdatatable"
+                data={months}
+                columns={columns}
+                key-field="value"
+                selected-rows={selectedMonths}
+                onrowselection={handleMonthChange}
+              ></lightning-datatable>
+            </lightning-layout-item>
+            <lightning-layout-item
+              size="6"
+              medium-device-size="3"
+              padding="around-small"
+            >
+              <label class="slds-form-element__label" for="daysdatatable"
+                >Days</label
+              >
+              <lightning-datatable
+                id="daysdatatable"
+                lwc:if={isWeekDayType}
+                data={weekdays}
+                columns={columns}
+                key-field="value"
+                selected-rows={selectedWeekdays}
+                onrowselection={handleWeekdayChange}
+              ></lightning-datatable>
+              <lightning-datatable
+                lwc:else
+                data={days}
+                columns={columns}
+                key-field="value"
+                selected-rows={selectedDays}
+                onrowselection={handleDayChange}
+              ></lightning-datatable>
+            </lightning-layout-item>
+            <lightning-layout-item
+              size="6"
+              medium-device-size="3"
+              padding="around-small"
+            >
+              <label class="slds-form-element__label" for="hoursdatatable"
+                >Hours</label
+              >
+              <lightning-datatable
+                id="hoursdatatable"
+                data={hours}
+                columns={columns}
+                key-field="value"
+                selected-rows={selectedHours}
+                onrowselection={handleHourChange}
+              ></lightning-datatable>
+            </lightning-layout-item>
+            <lightning-layout-item
+              size="6"
+              medium-device-size="3"
+              padding="around-small"
+            >
+              <label class="slds-form-element__label" for="minutesdatatable"
+                >Minutes</label
+              >
+              <lightning-datatable
+                id="minutesdatatable"
+                data={minutes}
+                columns={columns}
+                key-field="value"
+                selected-rows={selectedMinutes}
+                onrowselection={handleMinuteChange}
+              ></lightning-datatable>
+            </lightning-layout-item>
+          </lightning-layout>
+        </lightning-tab>
+      </lightning-tabset>
+    </div>
+  </div>
 </template>
diff --git a/dlrs/main/lwc/cronBuilder/cronBuilder.js b/dlrs/main/lwc/cronBuilder/cronBuilder.js
index b38c9a29..3f5d94df 100644
--- a/dlrs/main/lwc/cronBuilder/cronBuilder.js
+++ b/dlrs/main/lwc/cronBuilder/cronBuilder.js
@@ -21,16 +21,18 @@ export default class CronBuilder extends LightningElement {
   }
 
   dayTypes = [
-    { label: "Month", value: DAY_TYPE.daysOfMonth },
-    { label: "Week", value: DAY_TYPE.daysOfWeek }
+    { label: "Days of the Month", value: DAY_TYPE.daysOfMonth },
+    { label: "Days of the Week", value: DAY_TYPE.daysOfWeek }
   ];
 
   dayType = DAY_TYPE.daysOfMonth;
 
-  monthCols = [
+  columns = [
     {
-      label: "Month",
-      fieldName: "label"
+      label: "All",
+      fieldName: "label",
+      wrapText: true,
+      hideDefaultActions: true
     }
   ];