Task/267 rbac update

src/app/adf-config/df-system-info/df-system-info.component.html

@@ -32,6 +32,7 @@ <h2>DreamFactory {{ 'systemInfo.instance.instance' | transloco }}</h2>
           {{ 'version' | transloco }}:
           {{ environment.platform?.version }}
         </li>
+        <li>UI {{ 'version' | transloco }}: 1.3.6</li>
         <li *ngIf="environment.platform?.dbDriver">
           {{ 'systemInfo.instance.systemDatabase' | transloco }}:
           {{ environment.platform?.dbDriver }}

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

@@ -110,7 +110,7 @@
   >
   <df-link-service
     [cache]="scriptForm.getRawValue().name"
-    [storageServiceId]="getControl('storageServiceId')"
+    [storageServiceId]="selectedServiceItem"
     [storagePath]="getControl('storagePath')"
     [content]="getControl('content')"></df-link-service>
   <df-script-editor

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

@@ -31,7 +31,6 @@ import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 import { DfLinkServiceComponent } from 'src/app/shared/components/df-link-service/df-link-service.component';
 import { camelToSnakeString } from 'src/app/shared/utilities/case';
 
-
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-script-details',

src/app/adf-roles/df-roles-access/df-roles-access.component.html

@@ -53,12 +53,23 @@
                 <mat-label>{{
                   'roles.accessOverview.tableHeadings.component' | transloco
                 }}</mat-label>
-                <mat-select formControlName="component" panelWdith="null">
+                <mat-select
+                  (openedChange)="onSelectOpened(i)"
+                  panelClass="select-search-panel">
+                  <mat-option>
+                    <mat-form-field>
+                      <input
+                        matInput
+                        (click)="$event.stopPropagation()"
+                        (input)="filterOptions($event, i)"
+                        placeholder="Search" />
+                    </mat-form-field>
+                  </mat-option>
                   <mat-option
-                    *ngFor="let option of getComponentArray(i)"
-                    [value]="option"
-                    >{{ option }}</mat-option
-                  >
+                    *ngFor="let option of filteredComponentArray[i]"
+                    [value]="option">
+                    {{ option }}
+                  </mat-option>
                 </mat-select>
               </mat-form-field>
             </td>

src/app/adf-roles/df-roles-access/df-roles-access.component.scss

@@ -40,3 +40,8 @@ tr.element-row:not(.example-expanded-row):active {
 .detail-input {
   margin-right: 20px;
 }
+::ng-deep {
+  .cdk-overlay-pane {
+    width: max-content !important;
+  }
+}

src/app/adf-roles/df-roles-access/df-roles-access.component.ts

@@ -5,6 +5,7 @@ import {
   FormGroup,
   ReactiveFormsModule,
   Validators,
+  FormBuilder,
 } from '@angular/forms';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
@@ -19,6 +20,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
+
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { BehaviorSubject } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
@@ -112,13 +114,24 @@ export class DfRolesAccessComponent implements OnInit {
     { value: 'is null', label: 'is null' },
     { value: 'is not null', label: 'is not null' },
   ];
-
+  form: FormGroup;
   constructor(
     private activatedRoute: ActivatedRoute,
     @Inject(BASE_SERVICE_TOKEN)
-    private baseService: DfBaseCrudService
-  ) {}
-
+    private baseService: DfBaseCrudService,
+    private fb: FormBuilder
+  ) {
+    this.form = this.fb.group({
+      cFormArray: this.fb.array([this.createItem()]),
+    });
+  }
+  createItem(): FormGroup {
+    return this.fb.group({
+      service: [''],
+      component: [''],
+    });
+  }
+  filteredComponentArray: Array<Array<string>> = [];
   ngOnInit() {
     // get services options
     this.activatedRoute.data.subscribe((data: any) => {
@@ -165,10 +178,41 @@ export class DfRolesAccessComponent implements OnInit {
         });
       }
     });
+    this.initializeFilteredComponents();
 
     this.updateDataSource();
   }
+  get cFormArray(): FormArray {
+    return this.form.get('formArray') as FormArray;
+  }
 
+  initializeFilteredComponents() {
+    this.filteredComponentArray = this.formArray.controls.map((_, i) =>
+      this.getComponentArray(i)
+    );
+  }
+  getComponentArray(index: number): Array<string> {
+    const serviceId = this.formArray.at(index).get('service')?.value;
+    const components = this.componentOptions.find(
+      option => option.serviceId === serviceId
+    )?.components;
+    return components || [];
+  }
+
+  filterOptions(event: Event, index: number) {
+    const input = (event.target as HTMLInputElement).value.toLowerCase();
+    const serviceId = this.formArray.at(index).get('service')?.value;
+    const components =
+      this.componentOptions.find(option => option.serviceId === serviceId)
+        ?.components || [];
+    this.filteredComponentArray[index] = components.filter(option =>
+      option.toLowerCase().includes(input)
+    );
+  }
+
+  onSelectOpened(index: number) {
+    this.filteredComponentArray[index] = this.getComponentArray(index);
+  }
   async getComponents(index: number) {
     const serviceId = this.formArray.controls[index].get('service')?.value;
     const service =
@@ -198,14 +242,6 @@ export class DfRolesAccessComponent implements OnInit {
     }
   }
 
-  getComponentArray(index: number) {
-    const serviceId = this.formArray.at(index).get('service')?.value;
-    const components = this.componentOptions.find(
-      option => option.serviceId === serviceId
-    )?.components;
-    return components || [];
-  }
-
   getExtendOperator(index: number) {
     const serviceId = this.serviceAccess.at(index).get('extend-operator')
       ?.value;

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -2,8 +2,8 @@
   [formGroup]="serviceForm"
   class="details-section"
   [class]="(isDarkMode | async) ? 'dark-theme' : ''"
-  (ngSubmit)="save(false)">
-  <ng-container *ngIf="this.isDatabase && !this.edit; else notDatabase">
+  (ngSubmit)="save()">
+  <ng-container *ngIf="this.isDatabase && !this.edit; else notDatabaseEdit">
     <mat-stepper linear #stepper>
       <mat-step errorMessage="Service Type is required." [editable]="true">
         <ng-template matStepLabel>
@@ -280,25 +280,47 @@ <h4 class="text-center" style="color: black !important">
       </ng-template>
     </mat-stepper>
   </ng-container>
-  <ng-template #notDatabase>
-    <mat-form-field
-      subscriptSizing="dynamic"
-      class="dynamic-width"
-      appearance="outline">
-      <mat-label>{{
-        'services.controls.serviceType.label' | transloco
-      }}</mat-label>
-      <mat-select formControlName="type">
-        <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
-          {{ type.label }}
-        </mat-option>
-      </mat-select>
-      <fa-icon
-        class="tool-tip-trigger"
-        matSuffix
-        [icon]="faCircleInfo"
-        [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
-    </mat-form-field>
+  <ng-template #notDatabaseEdit>
+    <ng-container *ngIf="this.isNetworkService; else notNetwork">
+      <mat-form-field
+        subscriptSizing="dynamic"
+        class="dynamic-width"
+        appearance="outline">
+        <mat-label>{{
+          'services.controls.serviceType.label' | transloco
+        }}</mat-label>
+        <mat-select formControlName="type">
+          <mat-option *ngFor="let type of serviceTypes" [value]="type.label">
+            {{ type.label }}
+          </mat-option>
+        </mat-select>
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+      </mat-form-field>
+    </ng-container>
+    <ng-template #notNetwork>
+      <mat-form-field
+        subscriptSizing="dynamic"
+        class="dynamic-width"
+        appearance="outline">
+        <mat-label>{{
+          'services.controls.serviceType.label' | transloco
+        }}</mat-label>
+        <mat-select formControlName="type">
+          <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+            {{ type.label }}
+          </mat-option>
+        </mat-select>
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+      </mat-form-field>
+    </ng-template>
     <mat-form-field
       subscriptSizing="dynamic"
       class="dynamic-width"
@@ -348,6 +370,28 @@ <h4 class="text-center" style="color: black !important">
       *ngIf="!subscriptionRequired"
       ><span>{{ 'active' | transloco }}</span></mat-slide-toggle
     >
+    <div class="full-width">
+      <ng-container *ngIf="this.edit">
+        <ng-container *ngIf="this.isDatabase; else notDatabase">
+          <button
+            type="button"
+            mat-flat-button
+            class="save-btn"
+            (click)="gotoSchema()">
+            {{ 'schema' | transloco }}
+          </button>
+        </ng-container>
+        <ng-template #notDatabase>
+          <button
+            type="button"
+            mat-flat-button
+            class="save-btn"
+            (click)="gotoAPIDocs()">
+            {{ 'apiDocs' | transloco }}
+          </button>
+        </ng-template>
+      </ng-container>
+    </div>
     <ng-container *ngIf="viewSchema && !subscriptionRequired">
       <ng-container formGroupName="config">
         <mat-accordion class="full-width">

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -463,7 +463,8 @@ export class DfServiceDetailsComponent implements OnInit {
           params
         )
         .subscribe(() => {
-          this.router.navigate(['../'], { relativeTo: this.activatedRoute });
+          this.router.navigate([`/api-connections/api-docs/${data.name}`]);
+          // this.router.navigate(['../'], { relativeTo: this.activatedRoute });
         });
     }
   }
@@ -472,6 +473,16 @@ export class DfServiceDetailsComponent implements OnInit {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
 
+  gotoSchema() {
+    const data = this.serviceForm.getRawValue();
+    this.router.navigate([`/admin-settings/schema/${data.name}`]);
+  }
+
+  gotoAPIDocs() {
+    const data = this.serviceForm.getRawValue();
+    this.router.navigate([`/api-connections/api-docs/${data.name}`]);
+  }
+
   getBackgroundImage(typeLabel: string) {
     const image = this.images?.find(img => img.label == typeLabel);
     if (!image) {

src/app/shared/components/df-link-service/df-link-service.component.html

@@ -1,3 +1,85 @@
+<ng-container *ngIf="selectType">
+  <form
+    [formGroup]="roleForm"
+    class="details-section"
+    [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+    <mat-accordion>
+      <mat-expansion-panel [expanded]="false">
+        <mat-expansion-panel-header>
+          <mat-panel-title> Link to Service </mat-panel-title>
+          <mat-panel-description> </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-form-field
+          appearance="outline"
+          class="full-width form-field-gap"
+          subscriptSizing="dynamic">
+          <mat-label>Select Service</mat-label>
+          <mat-select formControlName="serviceList">
+            <mat-option
+              *ngFor="let service of storageServices"
+              [value]="service.label">
+              {{ service.label }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Repository: </mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="repoInput" />
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Branch/Tag: </mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="branchInput" />
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width form-field-gap">
+          <mat-label>Path</mat-label>
+          <input
+            matInput
+            type="text"
+            placeholder="path"
+            formControlName="pathInput" />
+        </mat-form-field>
+        <div class="full-width action-bar">
+          <button
+            class="save-btn"
+            mat-flat-button
+            type="button"
+            (click)="onViewLatest()"
+            color="primary">
+            <i class="fa fa-refresh"></i>
+            View Latest
+          </button>
+          <button
+            class="save-btn"
+            mat-flat-button
+            type="button"
+            (click)="onDeleteCache()"
+            color="primary">
+            <i class="fa fa-refresh"></i>
+            Delete Cache
+          </button>
+        </div>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </form>
+</ng-container>
+=======
 <form
   [formGroup]="roleForm"
   class="details-section"