feat(4ps): update create job template ui

mixcore · Jan 11, 2024 · 45b6ec4 · 45b6ec4
1 parent 035b70f
commit 45b6ec4
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 47 deletions.
diff --git a/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html
@@ -1,50 +1,48 @@
 <div class="mix-dialog h-full">
   <div class="container-fluid h-full">
     <div class="grid grid-cols-12 gap-4 h-full">
-      <div class="col-span-2 border-right"
+      <div class="col-span-3 border-right"
            style="background-color: #071a2b; color: #fff">
         <div class="flex flex-col items-center text-center p-3 py-5">
-          <img class="rounded-circle mt-5"
-               src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg"
-               width="150px"
-               height="150px">
+          <img class="rounded-full mt-5 min-w-40 min-h-40 max-w-40 max-h-40"
+               src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
           <span class="font-weight-bold text-l mt-2">Mr. User Name</span>
         </div>
       </div>
 
-      <div class="col-span-6 p-4 pb-2 border-right">
+      <div class="col-span-5 p-4 pb-2 border-right">
         <div class="p-3 flex flex-col h-full">
           <div class="flex justify-content-between items-center mb-3">
-            <h4 class="text-right">Profile Settings</h4>
+            <h4 class="text-right text-xl font-medium">Profile Settings</h4>
           </div>
           <div class="grid grid-cols-12 gap-4 mt-2">
             <div class="col-span-6">
-              <label class="text-sub text-500 mb-1">Name</label>
+              <label class="text-sub text-500 mb-2">Name</label>
               <mix-input placeHolder="first name"></mix-input>
             </div>
             <div class="col-span-6">
-              <label class="text-sub text-500 mb-1">Surname</label>
+              <label class="text-sub text-500 mb-2">Surname</label>
               <mix-input placeHolder="sur name"></mix-input>
             </div>
-            <div class="col-span-12 mt-3">
-              <label class="text-sub text-500 mb-1">Mobile Number</label>
+            <div class="col-span-12 mt-1">
+              <label class="text-sub text-500 mb-2">Mobile Number</label>
               <mix-input placeHolder="enter phone number"></mix-input>
             </div>
-            <div class="col-span-12 mt-3">
-              <label class="text-sub text-500 mb-1">Email ID</label>
+            <div class="col-span-12 mt-1">
+              <label class="text-sub text-500 mb-2">Email ID</label>
               <mix-input placeHolder="enter email id"></mix-input>
             </div>
-            <div class="col-span-12 mt-3">
-              <label class="text-sub text-500 mb-1">Education</label>
+            <div class="col-span-12 mt-1">
+              <label class="text-sub text-500 mb-2">Education</label>
               <mix-input placeHolder="education"></mix-input>
             </div>
-            <div class="col-span-6 mt-3">
-              <label class="text-sub text-500 mb-1">Country</label>
+            <div class="col-span-6 mt-1">
+              <label class="text-sub text-500 mb-2">Country</label>
               <mix-input placeHolder="country"
                          value> </mix-input>
             </div>
-            <div class="col-span-6 mt-3">
-              <label class="text-sub text-500 mb-1">State/Region</label>
+            <div class="col-span-6 mt-1">
+              <label class="text-sub text-500 mb-2">State/Region</label>
               <mix-input placeHolder="state"
                          value> </mix-input>
             </div>
@@ -62,12 +60,12 @@ <h4 class="text-right">Profile Settings</h4>
       <div class="col-span-4 p-4">
         <div class="p-3 pt-5">
           <div class="col-span-12">
-            <label class="text-sub text-500 mb-1">Experience in Designing</label>
+            <label class="text-sub text-500 mb-2">Experience in Designing</label>
             <mix-input placeHolder="experience"> </mix-input>
           </div>
           <br>
           <div class="col-span-12">
-            <label class="text-sub text-500 mb-1">Additional Details</label>
+            <label class="text-sub text-500 mb-2">Additional Details</label>
             <mix-input placeHolder="additional details"> </mix-input>
           </div>
         </div>

diff --git a/libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.html b/libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.html
@@ -1,45 +1,56 @@
 <div class="mix-dialog --default-padding"
      [formGroup]="jobForm">
   <div class="mix-dialog__header">
-    Add New Job
+    {{ mode() === 'Create' ? 'Create New Job' : 'Edit Job'}}
   </div>
 
   <div class="mix-dialog__content">
-    <div class="grid grid-cols-2 gap-3 w-full">
-      <div class="col-span-1">
-        <div class="mb-1 content-label">Name</div>
+    <div class="grid grid-cols-6 gap-3 w-full">
+      <div class="col-span-3">
+        <div class="mb-1 text-sub">Name</div>
         <mix-input formControlName="name"></mix-input>
       </div>
 
-      <div class="col-span-1">
-        <div class="mb-1 content-label">Description</div>
+      <div class="col-span-3">
+        <div class="mb-1 text-sub">Description</div>
         <mix-input formControlName="description"></mix-input>
       </div>
 
-      <div class="col-span-1">
-        <div class="mb-1 content-label">Repeat</div>
-        <mix-input-number formControlName="repeatCount"></mix-input-number>
+      <div class="col-span-3">
+        <div class="mb-1 text-sub">Job</div>
+        <mix-select [items]="jobNameOptions"
+                    [labelProcess]="jobNameStringify"
+                    formControlName="jobName"></mix-select>
+      </div>
+
+      <div class="col-span-6 mt-3">
+        <div class="mb-2 content-label text-xl">Schedule Setting</div>
+        <div class="mb-1 text-sub">Running on</div>
+        <mix-input-cron [cron]="jobForm.value.cronExpression ?? ''"
+                        (cronChange)="jobForm.controls.cronExpression.patchValue($event)"></mix-input-cron>
       </div>
 
-      <div class="col-span-1">
-        <!-- <div class="mb-1 content-label">Interval</div>
-        <mix-input-number formControlName="interval"></mix-input-number> -->
+
+      <div class="col-span-2">
+        <div class="mb-1 text-sub">Repeat Time</div>
+        <mix-input-number formControlName="repeatCount"></mix-input-number>
       </div>
 
-      <div class="col-span-1">
-        <div class="mb-1 content-label">Start At</div>
+
+      <div class="col-span-2">
+        <div class="mb-1 text-sub">Start At</div>
         <mix-date-time-picker formControlName="startAt"></mix-date-time-picker>
       </div>
 
-      <div class="col-span-1">
-        <div class="mb-1 content-label">End At</div>
+      <div class="col-span-2">
+        <div class="mb-1 text-sub">End At</div>
         <mix-date-time-picker formControlName="endAt"></mix-date-time-picker>
       </div>
 
-      <div class="col-span-2 mt-2">
-        <div class="mb-1 content-label">Setting Schedule</div>
-        <mix-input-cron [cron]="jobForm.value.cronExpression ?? ''"
-                        (cronChange)="jobForm.controls.cronExpression.patchValue($event)"></mix-input-cron>
+      <div class="col-span-6 mt-3">
+        <div class="mb-2 content-label text-xl">Data to be send:</div>
+        <div class="mb-1 text-sub">Edit as json object</div>
+        <mix-json-editor formControlName="data"></mix-json-editor>
       </div>
     </div>
   </div>
@@ -48,8 +59,8 @@
     <mix-button class="mr-auto"
                 type="outline"
                 (click)="ref.close()">Close</mix-button>
-    <div class="flex items-center mr-2"><mix-toggle formControlName="isStartNow"></mix-toggle>Run now</div>
+    <div class="flex items-center mr-2"><mix-toggle formControlName="isStartNow"></mix-toggle>Run immediately</div>
     <mix-button [loading]="loadingState() === 'Loading'"
-                (click)="submit()">Create Job</mix-button>
+                (click)="submit()"> {{ mode() === 'Create' ? 'Create Job' : 'Edit Job'}} </mix-button>
   </div>
 </div>
diff --git a/libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.ts b/libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.ts
@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MixScheduler } from '@mixcore/lib/model';
 import { MixApiFacadeService } from '@mixcore/share/api';
@@ -10,9 +15,12 @@ import { MixDateTimePickerComponent } from '@mixcore/ui/date-time-picker';
 import { MixInputComponent } from '@mixcore/ui/input';
 import { MixInputCronComponent } from '@mixcore/ui/input-cron';
 import { MixInputNumberComponent } from '@mixcore/ui/input-number';
+import { MixJsonEditorComponent } from '@mixcore/ui/json';
+import { MixSelectComponent } from '@mixcore/ui/select';
 import { MixToggleComponent } from '@mixcore/ui/toggle';
 import { DialogRef } from '@ngneat/dialog';
 import { HotToastService } from '@ngneat/hot-toast';
+import { FormatJobNamePipe } from '../../helper';
 
 @Component({
   selector: 'job-form',
@@ -27,21 +35,48 @@ import { HotToastService } from '@ngneat/hot-toast';
     MixInputNumberComponent,
     MixToggleComponent,
     MixDateTimePickerComponent,
+    MixJsonEditorComponent,
+    MixSelectComponent,
   ],
   templateUrl: './job-form.component.html',
   styleUrl: './job-form.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [FormatJobNamePipe],
 })
 export class JobFormComponent extends BaseComponent {
   public static dialogOption = {
     windowClass: 'mix-record-form-dialog top-align-modal interact-modal',
-    minWidth: '800px',
+    minWidth: '1024px',
     maxWidth: '95vw',
   };
 
   public ref = inject(DialogRef);
   public api = inject(MixApiFacadeService);
   public toast = inject(HotToastService);
+  public mode = signal<'Edit' | 'Create'>('Create');
+  public defaultData = {
+    data: {
+      type: 'Info',
+      from: {
+        connectionId: '',
+        userName: '',
+        avatar: '',
+      },
+      title: 'value',
+      message: 'content',
+      data: {},
+    },
+  };
+
+  public jobNameTransform = inject(FormatJobNamePipe);
+  public jobNameOptions = [
+    'Mix.Scheduler.Domain.Jobs.KeepPoolAliveJob',
+    'Mix.Scheduler.Domain.Jobs.PublishScheduledPostsJob',
+    'Mix.Scheduler.Domain.Jobs.SendMessageQueueJob',
+    'Mix.Scheduler.Domain.Jobs.SendPortalMessageJob',
+  ];
+  public jobNameStringify = (job: string) =>
+    this.jobNameTransform.transform(job);
 
   public jobForm = inject(FormBuilder).group({
     cronExpression: ['5 * * * *'],
@@ -56,8 +91,18 @@ export class JobFormComponent extends BaseComponent {
     repeatCount: [null],
     startAt: [null],
     endAt: [null],
+    data: [this.defaultData],
   });
 
+  ngOnInit() {
+    if (this.ref.data?.job) {
+      this.mode.set('Edit');
+      this.jobForm.patchValue(this.ref.data.job);
+      const dataString = this.ref.data.job.trigger.jobDataMap.data;
+      this.jobForm.controls.data.patchValue(JSON.parse(dataString));
+    }
+  }
+
   public submit() {
     this.api.schedulerApi
       .create(this.jobForm.value as unknown as MixScheduler)

diff --git a/libs/mix-share/src/modules/scheduler/helper.ts b/libs/mix-share/src/modules/scheduler/helper.ts
@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'formatJobName',
+  pure: true,
+  standalone: true,
+})
+export class FormatJobNamePipe implements PipeTransform {
+  transform(inputString: string) {
+    let formattedString = inputString.replace('Mix.Scheduler.Domain.Jobs.', '');
+    formattedString = formattedString
+      .split(/(?=[A-Z])/)
+      .join(' ')
+      .toLowerCase();
+    formattedString = formattedString.replace(/^\w|\s\w/g, function (match) {
+      return match.toUpperCase();
+    });
+
+    return formattedString;
+  }
+}
diff --git a/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.html b/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.html
@@ -59,13 +59,34 @@
                 {{ job.name }}
               </th>
               <td class="px-6 py-4">
-                {{ job.jobName }}
+                {{ job.jobName | formatJobName }}
               </td>
               <td class="px-6 py-4">
               </td>
               <td class="px-6 py-4">
               </td>
               <td class="px-6 py-4">
+                <div class="flex gap-2">
+                  <mix-button title="Run immediately"
+                              [iconBtn]="true">
+                    <span class="mix-icon">play_arrow</span>
+                  </mix-button>
+
+                  <mix-button title="Toggle Run/Pause"
+                              [iconBtn]="true">
+                    <span class="mix-icon">play_circle</span>
+                  </mix-button>
+
+                  <mix-button [iconBtn]="true"
+                              (click)="editJob(job)">
+                    <span class="mix-icon">edit</span>
+                  </mix-button>
+
+                  <mix-button type="danger"
+                              [iconBtn]="true">
+                    <span class="mix-icon">delete</span>
+                  </mix-button>
+                </div>
               </td>
             </tr>
           </tbody>

diff --git a/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.ts b/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.ts
@@ -8,6 +8,7 @@ import { MixButtonComponent } from '@mixcore/ui/button';
 import { MixDataTableModule, TableContextMenu } from '@mixcore/ui/table';
 import { DialogService } from '@ngneat/dialog';
 import { JobFormComponent } from '../components/job-form/job-form.component';
+import { FormatJobNamePipe } from '../helper';
 import { SchedulerStore } from '../stores/schedulers.store';
 
 @Component({
@@ -20,6 +21,7 @@ import { SchedulerStore } from '../stores/schedulers.store';
     MixButtonComponent,
     MixBreadcrumbsModule,
     JobFormComponent,
+    FormatJobNamePipe,
   ],
   templateUrl: './schedulers.component.html',
   styleUrl: './schedulers.component.scss',
@@ -47,4 +49,13 @@ export class SchedulersComponent extends BasePageComponent {
       ...JobFormComponent.dialogOption,
     });
   }
+
+  public editJob(job: MixScheduler) {
+    this.dialog.open(JobFormComponent, {
+      ...JobFormComponent.dialogOption,
+      data: {
+        job: job,
+      },
+    });
+  }
 }
diff --git a/libs/mix-ui/src/input/input.component.scss b/libs/mix-ui/src/input/input.component.scss
@@ -11,4 +11,17 @@ mix-input {
   .input-primary {
     @apply block w-full bg-gray-50 p-2.5 outline-none border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary focus:ring-1;
   }
+
+  [tuiWrapper][data-appearance='textfield'] {
+    @apply bg-gray-50;
+    box-shadow: unset !important;
+  }
+
+  [tuiWrapper][data-appearance='textfield']:after {
+    @apply text-gray-300;
+  }
+
+  [tuiWrapper][data-appearance='textfield']._focused:after {
+    color: var(--primary-color) !important;
+  }
 }
diff --git a/libs/mix-ui/src/json-editor/json-editor.component.scss b/libs/mix-ui/src/json-editor/json-editor.component.scss
@@ -21,3 +21,7 @@
 div.jsoneditor-tree {
   border-radius: var(--element-rounded) !important;
 }
+
+.jsoneditor-field {
+  white-space: nowrap !important;
+}
diff --git a/libs/mix-ui/src/json-editor/json-editor.component.ts b/libs/mix-ui/src/json-editor/json-editor.component.ts
@@ -47,5 +47,6 @@ export class MixJsonEditorComponent
     this.editorOptions.mode = 'tree';
     this.editorOptions.enableTransform = false;
     this.editorOptions.enableSort = false;
+    this.editorOptions.expandAll = true;
   }
 }
diff --git a/libs/share-styles/src/styles/tippy.scss b/libs/share-styles/src/styles/tippy.scss
@@ -38,7 +38,7 @@
 }
 
 .mix-menu-item {
-  @apply text-gray-900 font-medium p-2.5 text-sm flex items-center;
+  @apply text-gray-900 font-medium p-2.5 px-6 text-sm flex items-center;
   cursor: pointer;
   gap: 6px;
   min-width: 13.5rem;