Update event scripting

src/app/adf-event-scripts/df-script-details/df-script-details.component.html

@@ -1,18 +1,53 @@
 <form [formGroup]="scriptForm" class="details-section" (ngSubmit)="submit()">
-  <mat-form-field class="dynamic-width" subscriptSizing="dynamic">
+  <mat-form-field class="full-width" subscriptSizing="dynamic">
+    <mat-label>{{ 'service' | transloco }}</mat-label>
+    <mat-select
+      [(value)]="selectedServiceItem"
+      (selectionChange)="selectedServiceItemEvent()">
+      <mat-option *ngFor="let service of storeServiceArray" [value]="service">
+        {{ service }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field class="half-width" subscriptSizing="dynamic">
     <mat-label>{{ 'scripts.scriptName' | transloco }}</mat-label>
-    <input matInput formControlName="name" [matAutocomplete]="autoGroup" />
-    <mat-autocomplete #autoGroup="matAutocomplete">
+    <mat-select
+      [(value)]="selectedEventItem"
+      (selectionChange)="selectedEventItemEvent()">
+      <mat-option *ngFor="let item of ungroupedEventItems" [value]="item">
+        {{ item }}
+      </mat-option>
+    </mat-select>
+    <!-- <input matInput formControlName="name" [matAutocomplete]="autoGroup" /> -->
+    <!-- <mat-autocomplete #autoGroup="matAutocomplete">
       <mat-optgroup
-        *ngFor="let group of scriptEventsOptions | async"
+        *ngFor="let group of ungroupedEventItems"
         [label]="group.name">
         <mat-option *ngFor="let event of group.endpoints" [value]="event">
           {{ event }}
         </mat-option>
       </mat-optgroup>
-    </mat-autocomplete>
+    </mat-autocomplete> -->
+  </mat-form-field>
+  <mat-form-field class="half-width" subscriptSizing="dynamic">
+    <mat-label>{{ 'scripts.scriptName' | transloco }}</mat-label>
+    <mat-select [(value)]="selectedRouteItem">
+      <mat-option *ngFor="let item of ungroupedRouteOptions" [value]="item">
+        {{ item }}
+      </mat-option>
+    </mat-select>
+    <!-- <mat-label>{{ 'scripts.scriptName' | transloco }}</mat-label>
+    <input matInput formControlName="name" [matAutocomplete]="autoGroup" />
+    <mat-autocomplete #autoGroup="matAutocomplete">
+      <mat-option
+        *ngFor="let event of ungroupedRouteOptions"
+        [value]="event"
+        [(value)]="selectedRouteItem">
+        {{ event }}
+      </mat-option>
+    </mat-autocomplete> -->
   </mat-form-field>
-  <mat-form-field class="dynamic-width" subscriptSizing="dynamic">
+  <mat-form-field class="full-width" subscriptSizing="dynamic">
     <mat-label>{{ 'scriptType' | transloco }}</mat-label>
     <mat-select formControlName="type">
       <mat-option *ngFor="let type of types" [value]="type.value">

src/app/adf-event-scripts/df-script-details/df-script-details.component.ts

@@ -23,8 +23,14 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { Observable, map, startWith } from 'rxjs';
 import { groupEvents } from 'src/app/shared/utilities/eventScripts';
-import { EVENT_SCRIPT_SERVICE_TOKEN } from 'src/app/shared/constants/tokens';
+import {
+  BASE_SERVICE_TOKEN,
+  EVENTS_SERVICE_TOKEN,
+  EVENT_SCRIPT_SERVICE_TOKEN,
+} from 'src/app/shared/constants/tokens';
 import { DfBaseCrudService } from 'src/app/shared/services/df-base-crud.service';
+import { Service, ServiceType } from 'src/app/shared/types/service';
+import { CommonModule } from '@angular/common';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -45,6 +51,7 @@ import { DfBaseCrudService } from 'src/app/shared/services/df-base-crud.service'
     MatAutocompleteModule,
     MatInputModule,
     AsyncPipe,
+    CommonModule,
   ],
 })
 export class DfScriptDetailsComponent implements OnInit {
@@ -54,6 +61,15 @@ export class DfScriptDetailsComponent implements OnInit {
   type: 'create' | 'edit' = 'create';
   scriptEvents: Array<ScriptEvent>;
   scriptEventsOptions: Observable<Array<ScriptEvent>>;
+  unGroupedEvents: ScriptEvent;
+  ungroupedEventItems: string[];
+  ungroupedEventOptions: ScriptEvent;
+  ungroupedRouteOptions: string[];
+  storeServiceArray: string[];
+  selectedStorageItem: string;
+  selectedServiceItem: string;
+  selectedEventItem: string;
+  selectedRouteItem: string;
   loaded = false;
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -62,6 +78,8 @@ export class DfScriptDetailsComponent implements OnInit {
     @Inject(EVENT_SCRIPT_SERVICE_TOKEN)
     private eventScriptService: DfBaseCrudService
   ) {
+    this.storeServiceArray = [];
+    this.ungroupedEventItems = [];
     this.scriptForm = this.fb.group({
       name: ['', [Validators.required]],
       type: ['nodejs', [Validators.required]],
@@ -70,8 +88,23 @@ export class DfScriptDetailsComponent implements OnInit {
       storagePath: [''],
       isActive: [false],
     });
+    // this.baseService
+    //   .getAll<{
+    //     serviceTypes: Array<ServiceType>;
+    //     services: Array<Service>;
+    //   }>({
+    //     additionalParams: [
+    //       {
+    //         key: 'group',
+    //         value:
+    //           'Database, Big Data, Script, Remote Service, File, Excel, Cache, Email, Notification, Log, Source Control, IoT, LDAP, SSO, OAuth, user, system',
+    //       },
+    //     ],
+    //   })
+    //   .subscribe();
   }
 
+  storageServices: Service;
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ data, type }) => {
       this.type = type;
@@ -81,6 +114,9 @@ export class DfScriptDetailsComponent implements OnInit {
         this.scriptForm.controls['name'].disable();
       } else {
         this.scriptEvents = groupEvents(data);
+        this.unGroupedEvents = data;
+        this.storageServices = data;
+        this.storeServiceArray = Object.keys(this.storageServices) as string[];
       }
     });
     this.scriptEventsOptions = this.scriptForm.controls[
@@ -89,6 +125,18 @@ export class DfScriptDetailsComponent implements OnInit {
       startWith(''),
       map(value => this.filterGroup(value))
     );
+    // this.scriptForm.controls['storageServiceId'].valueChanges.subscribe(res => {
+    //   let serviceType = res.name;
+    //   if (res.name === 'api_docs') {
+    //     serviceType = 'apiDocs';
+    //     this.ungroupedEventOptions = this.unGroupedEvents[serviceType];
+    //   }
+
+    //   this.ungroupedEventOptions = this.unGroupedEvents[serviceType];
+    //   Object.keys(this.ungroupedEventOptions).forEach(key => {
+    //     this.ungroupedEventItems.push(key);
+    //   });
+    // });
     this.loaded = true;
   }
 
@@ -101,19 +149,31 @@ export class DfScriptDetailsComponent implements OnInit {
   }
 
   submit(): void {
-    if (!this.scriptForm.valid) {
-      return;
-    }
+    // if (!this.scriptForm.valid) {
+    //   return;
+    // }
     const script = this.scriptForm.getRawValue();
+    const scriptItem = {
+      ...script,
+      storageServiceId:
+        script.storageServiceId?.type === 'local_file'
+          ? script.storageServiceId?.id
+          : null,
+      storage_path:
+        script.storageServiceId?.type === 'local_file'
+          ? script.storagePath
+          : null,
+      name: this.selectedRouteItem,
+    };
     if (this.type === 'edit') {
-      this.scriptDetails = { ...this.scriptDetails, ...script };
+      this.scriptDetails = { ...this.scriptDetails, ...scriptItem };
       this.eventScriptService
         .update(script.name, script)
         .subscribe(() => this.goBack());
     } else {
       this.scriptDetails = script;
       this.eventScriptService
-        .create(script, undefined, script.name)
+        .create(scriptItem, undefined, scriptItem.name)
         .subscribe(() => this.goBack());
     }
   }
@@ -131,4 +191,22 @@ export class DfScriptDetailsComponent implements OnInit {
     }
     return this.scriptEvents;
   }
+
+  selectedServiceItemEvent() {
+    let serviceType: string = this.selectedServiceItem;
+    if (serviceType === 'api_docs') {
+      serviceType = 'apiDocs';
+    }
+    this.ungroupedEventOptions = this.unGroupedEvents[serviceType];
+    this.ungroupedEventItems = this.ungroupedEventItems || [];
+    Object.keys(this.ungroupedEventOptions).forEach(key => {
+      this.ungroupedEventItems.push(key);
+    });
+  }
+
+  selectedEventItemEvent() {
+    this.ungroupedRouteOptions = [
+      ...this.ungroupedEventOptions[this.selectedEventItem].endpoints,
+    ];
+  }
 }

src/app/adf-services/df-service-details/df-paywall-modal.html

@@ -28,9 +28,9 @@ <h3 class="paywall-contact">
         >{{ 'phone' | transloco }}: +1 415-993-5877</a
       >
       |
-      <a href="mailto:info@dreamfactory.com"
-        >{{ 'email' | transloco }}: info&#64;dreamfactory.com</a
-      >
+      <a href="mailto:info@dreamfactory.com">
+        {{ 'email' | transloco }}: info\&#64;dreamfactory.com
+      </a>
     </h3>
     <div #calendlyWidget class="calendly-inline-widget"></div>
   </mat-dialog-content>

src/app/routes.ts

@@ -229,7 +229,9 @@ export const routes: Routes = [
               import(
                 './adf-event-scripts/df-manage-scripts/df-manage-scripts.component'
               ).then(m => m.DfManageScriptsComponent),
-            resolve: { data: eventScriptsResolver },
+            resolve: {
+              data: eventScriptsResolver,
+            },
           },
           {
             path: ROUTES.CREATE,

src/app/shared/components/df-ace-editor/df-ace-editor.component.ts

@@ -67,7 +67,7 @@ export class DfAceEditorComponent
       showGutter: true,
       highlightActiveLine: true,
       tabSize: 2,
-      readOnly: this.readonly,
+      readOnly: false,
       maxLines: 50,
     });
     this.editor.renderer.attachToShadowRoot();
@@ -90,10 +90,11 @@ export class DfAceEditorComponent
     this.onTouched = fn;
   }
 
-  setDisabledState(isDisabled: boolean): void {
-    if (!this.editor) return;
-    isDisabled ? this.editor.setReadOnly(true) : this.editor.setReadOnly(false);
-  }
+  // setDisabledState(isDisabled: boolean): void {
+  //   this.editor.setReadOnly(false);
+  // if (!this.editor) return;
+  // isDisabled ? this.editor.setReadOnly(true) : this.editor.setReadOnly(false);
+  // }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (!this.editor) return;
@@ -105,9 +106,9 @@ export class DfAceEditorComponent
     if (changes['value']) {
       this.setValue(changes['value'].currentValue);
     }
-    if (changes['readonly']) {
-      this.setDisabledState(changes['readonly'].currentValue);
-    }
+    // if (changes['readonly']) {
+    //   this.setDisabledState(changes['readonly'].currentValue);
+    // }
   }
 
   setValue(value: string): void {

src/app/shared/components/df-script-editor/df-script-editor.component.html

@@ -23,15 +23,15 @@
       {{ 'githubFile' | transloco }}
     </button>
   </div>
-  <mat-form-field class="dynamic-width" subscriptSizing="dynamic">
+  <!-- <mat-form-field class="dynamic-width" subscriptSizing="dynamic">
     <mat-label>{{ 'service' | transloco }}</mat-label>
     <mat-select [formControl]="storageServiceId">
       <mat-option></mat-option>
       <mat-option *ngFor="let service of storageServices" [value]="service.id">
         {{ service.label }}
       </mat-option>
     </mat-select>
-  </mat-form-field>
+  </mat-form-field> -->
   <mat-form-field
     *ngIf="!!storageServiceId.getRawValue()"
     class="dynamic-width"
@@ -61,6 +61,5 @@
   <df-ace-editor
     class="full-width"
     [formControl]="content"
-    [readonly]="!!storageServiceId.getRawValue()"
     [mode]="type.getRawValue()"></df-ace-editor>
 </div>

src/app/shared/components/df-script-editor/df-script-editor.component.ts

@@ -61,7 +61,7 @@ export class DfScriptEditorComponent implements OnInit {
         additionalParams: [
           {
             key: 'group',
-            value: 'source control,file,database',
+            value: 'source control,file,database, email,notification,log,iot',
           },
         ],
       })
@@ -78,11 +78,11 @@ export class DfScriptEditorComponent implements OnInit {
       this.storagePath.reset();
       if (value) {
         this.storagePath.addValidators([Validators.required]);
-        this.content.reset();
-        this.content.disable();
+        // this.content.reset();
+        // this.content.disable();
       } else {
         if (this.storagePath.hasValidator(Validators.required)) {
-          this.content.enable();
+          // this.content.enable();
           this.storagePath.removeValidators([Validators.required]);
         }
       }

src/app/shared/types/scripts.ts

@@ -45,6 +45,7 @@ export enum AceEditorMode {
 export interface ScriptEvent {
   name: string;
   endpoints: Array<string>;
+  [key: string]: any;
 }
 
 export interface ScriptEventResponse {