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 index e03e4ac7..3a0c38e6 100644 --- 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 @@
-
- + Mr. User Name
-
+
-

Profile Settings

+

Profile Settings

- +
- +
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
@@ -62,12 +60,12 @@

Profile Settings

- +

- +
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 index 88c873f5..140209d9 100644 --- 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 @@
- Add New Job + {{ mode() === 'Create' ? 'Create New Job' : 'Edit Job'}}
-
-
-
Name
+
+
+
Name
-
-
Description
+
+
Description
-
-
Repeat
- +
+
Job
+ +
+ +
+
Schedule Setting
+
Running on
+
-
- + +
+
Repeat Time
+
-
-
Start At
+ +
+
Start At
-
-
End At
+
+
End At
-
-
Setting Schedule
- +
+
Data to be send:
+
Edit as json object
+
@@ -48,8 +59,8 @@ Close -
Run now
+
Run immediately
Create Job + (click)="submit()"> {{ mode() === 'Create' ? 'Create Job' : 'Edit Job'}}
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 index accc4212..7bd1e07e 100644 --- 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 new file mode 100644 index 00000000..8bdab373 --- /dev/null +++ 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 index 84d349bb..8cc4ea31 100644 --- 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 }} - {{ job.jobName }} + {{ job.jobName | formatJobName }} +
+ + play_arrow + + + + play_circle + + + + edit + + + + delete + +
diff --git a/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.ts b/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.ts index 89fc470b..780f9325 100644 --- 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 index 0e68e0db..f0ac1426 100644 --- 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 index 61a5456d..7ab4d8e4 100644 --- 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 index 8c1c2d0d..f8b557de 100644 --- 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 index d6e5b4fb..af8fe67f 100644 --- 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;