feat(4ps): add create job

apps/mix-database/src/app/shares/consts/app.menu.ts

@@ -81,7 +81,7 @@ export const APP_MENU: MenuItem[] = [
     children: [
       {
         icon: 'sort',
-        title: 'schedulers',
+        title: 'Schedulers',
         url: CMS_ROUTES.portal.schedulers.fullPath,
       },
     ],

apps/mix-database/tsconfig.json

@@ -21,7 +21,8 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "lib": ["es2020", "dom"]
+    "lib": ["es2020", "dom"],
+    "allowSyntheticDefaultImports": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

libs/mix-share/src/api-service/mix-api-facade.service.ts

@@ -7,7 +7,6 @@ import {
   MixPage,
   MixPermission,
   MixRole,
-  MixScheduler,
   MixSettings,
   MixTemplate,
 } from '@mixcore/lib/model';
@@ -23,6 +22,7 @@ import { MixModuleDataApi } from './mix-module-data-api.service';
 import { MixPostApi } from './mix-post-api.service';
 import { MixPostToPostApi } from './mix-post-post-api.service';
 import { MixSyncApi } from './mix-sync-api.service';
+import { MixSchedulerApi } from './scheduler-api.service';
 import { UploadApiService } from './upload-api.service';
 
 @Injectable({ providedIn: 'root' })
@@ -85,9 +85,7 @@ export class MixApiFacadeService {
   );
 
   // Scheduler Context
-  public schedulerApi = new MixRestfulApi<MixScheduler>(
-    MixSwagger.events.scheduler
-  );
+  public schedulerApi = new MixSchedulerApi(MixSwagger.events.scheduler);
 
   // Appsetting Api
   public appSettingApi = new MixRestfulApi<MixSettings>(

libs/mix-share/src/api-service/scheduler-api.service.ts

@@ -0,0 +1,15 @@
+import { MixScheduler } from '@mixcore/lib/model';
+import { Observable } from 'rxjs';
+import { MixRestfulApi } from './mix-crud-api.service';
+
+export class MixSchedulerApi extends MixRestfulApi<MixScheduler> {
+  public create(value: MixScheduler): Observable<MixScheduler> {
+    return this.post<MixScheduler, MixScheduler>(
+      `${this.restUrl}/create`,
+      value,
+      undefined,
+      undefined,
+      this.resultHandler
+    );
+  }
+}

libs/mix-share/src/bases/base-appconfig.ts

@@ -131,7 +131,7 @@ export const BaseAppProvider = [
     defaultVariation: 'tooltip',
     variations: {
       tooltip: tooltipVariation,
-      popper: { ...popperVariation, animation: 'scale' },
+      popper: { ...popperVariation, animation: 'scale', duration: 100 },
     },
   }),
   {

libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.html

@@ -1,16 +1,55 @@
-<div class="mix-dialog --default-padding">
+<div class="mix-dialog --default-padding"
+     [formGroup]="jobForm">
   <div class="mix-dialog__header">
-    New Job
+    Add New Job
   </div>
 
   <div class="mix-dialog__content">
-    asd
+    <div class="grid grid-cols-2 gap-3 w-full">
+      <div class="col-span-1">
+        <div class="mb-1 content-label">Job Name</div>
+        <mix-input formControlName="jobName"></mix-input>
+      </div>
+
+      <div class="col-span-1">
+        <div class="mb-1 content-label">Group</div>
+        <mix-input formControlName="groupName"></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>
+
+      <div class="col-span-1">
+        <div class="mb-1 content-label">Interval</div>
+        <mix-input-number formControlName="interval"></mix-input-number>
+      </div>
+
+      <div class="col-span-1">
+        <div class="mb-1 content-label">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>
+        <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>
+    </div>
   </div>
 
   <div class="mix-dialog__footer">
     <mix-button class="mr-auto"
-                type="outline">Close</mix-button>
-
-    <mix-button>Add</mix-button>
+                type="outline"
+                (click)="ref.close()">Close</mix-button>
+    <div class="flex items-center mr-2"><mix-toggle formControlName="isStartNow"></mix-toggle>Run now</div>
+    <mix-button [loading]="loadingState() === 'Loading'"
+                (click)="submit()">Create Job</mix-button>
   </div>
 </div>

libs/mix-share/src/modules/scheduler/components/job-form/job-form.component.ts

@@ -1,9 +1,18 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MixScheduler } from '@mixcore/lib/model';
+import { MixApiFacadeService } from '@mixcore/share/api';
+import { BaseComponent } from '@mixcore/share/base';
 import { MixButtonComponent } from '@mixcore/ui/button';
 import { MixDatePickerComponent } from '@mixcore/ui/date-picker';
+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 { MixToggleComponent } from '@mixcore/ui/toggle';
+import { DialogRef } from '@ngneat/dialog';
+import { HotToastService } from '@ngneat/hot-toast';
 
 @Component({
   selector: 'job-form',
@@ -14,15 +23,53 @@ import { MixInputComponent } from '@mixcore/ui/input';
     MixInputComponent,
     MixDatePickerComponent,
     MixButtonComponent,
+    MixInputCronComponent,
+    MixInputNumberComponent,
+    MixToggleComponent,
+    MixDateTimePickerComponent,
   ],
   templateUrl: './job-form.component.html',
   styleUrl: './job-form.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class JobFormComponent {
+export class JobFormComponent extends BaseComponent {
   public static dialogOption = {
     windowClass: 'mix-record-form-dialog top-align-modal interact-modal',
     minWidth: '800px',
     maxWidth: '95vw',
   };
+
+  public ref = inject(DialogRef);
+  public api = inject(MixApiFacadeService);
+  public toast = inject(HotToastService);
+
+  public jobForm = inject(FormBuilder).group({
+    cronExpression: ['5 * * * *'],
+    description: [''],
+    groupName: [''],
+    interval: [7],
+    intervalType: [],
+    isStartNow: [true],
+    jobData: [],
+    jobName: [''],
+    name: [''],
+    repeatCount: [7],
+    startAt: [null],
+    endAt: [null],
+  });
+
+  public submit() {
+    this.api.schedulerApi
+      .create(this.jobForm.value as unknown as MixScheduler)
+      .pipe(this.observerLoadingStateSignal())
+      .subscribe({
+        next: (result) => {
+          this.toast.success('Successfully create new job');
+          this.ref.close({ data: result });
+        },
+        error: (error) => {
+          this.toast.error('Something error, please try again later');
+        },
+      });
+  }
 }