Feat/265 link to service

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

@@ -108,6 +108,11 @@
     class="dynamic-width"
     >{{ 'Allow Event Modification' | transloco }}</mat-slide-toggle
   >
+  <df-link-service
+    [cache]="scriptForm.getRawValue().name"
+    [storageServiceId]="getControl('storageServiceId')"
+    [storagePath]="getControl('storagePath')"
+    [content]="getControl('content')"></df-link-service>
   <df-script-editor
     class="full-width"
     [cache]="scriptForm.getRawValue().name"

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

@@ -28,8 +28,10 @@ import { DfBaseCrudService } from 'src/app/shared/services/df-base-crud.service'
 import { Service } from 'src/app/shared/types/service';
 import { CommonModule } from '@angular/common';
 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',
@@ -50,6 +52,7 @@ import { camelToSnakeString } from 'src/app/shared/utilities/case';
     MatInputModule,
     AsyncPipe,
     CommonModule,
+    DfLinkServiceComponent,
   ],
 })
 export class DfScriptDetailsComponent implements OnInit {

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

@@ -0,0 +1,79 @@
+<form
+  [formGroup]="roleForm"
+  class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <mat-accordion>
+    <mat-expansion-panel [expanded]="true">
+      <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>

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

@@ -0,0 +1,18 @@
+.lnik-service-accordion {
+  padding: 16px 0;
+}
+
+.mat-column-actions {
+  max-width: 10%;
+}
+.mat-column-private {
+  max-width: 10%;
+}
+.mat-mdc-cell {
+  padding: 8px;
+}
+
+.form-field-gap {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,123 @@
+import { Component, Inject, OnInit, Input } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { TranslocoPipe } from '@ngneat/transloco';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe, CommonModule } from '@angular/common';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { DfBaseCrudService } from '../../services/df-base-crud.service';
+import {
+  BASE_SERVICE_TOKEN,
+  CACHE_SERVICE_TOKEN,
+  EVENT_SCRIPT_SERVICE_TOKEN,
+} from 'src/app/shared/constants/tokens';
+import { switchMap } from 'rxjs';
+import { readAsText } from '../../utilities/file';
+import { Service, ServiceType } from '../../types/service';
+
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'df-link-service',
+  templateUrl: './df-link-service.component.html',
+  styleUrls: ['./df-link-service.component.scss'],
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatButtonModule,
+    MatTableModule,
+    MatInputModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+    FontAwesomeModule,
+    MatExpansionModule,
+    TranslocoPipe,
+    AsyncPipe,
+    MatOptionModule,
+    ReactiveFormsModule,
+    CommonModule,
+  ],
+  providers: [DfBaseCrudService],
+})
+export class DfLinkServiceComponent implements OnInit {
+  @Input() cache: string;
+  @Input({ required: true }) storageServiceId: FormControl;
+  @Input({ required: true }) storagePath: FormControl;
+  @Input({ required: true }) content: FormControl;
+
+  roleForm: FormGroup;
+  storageServices: Array<Service> = [];
+
+  constructor(
+    private themeService: DfThemeService,
+    @Inject(CACHE_SERVICE_TOKEN) private cacheService: DfBaseCrudService,
+    @Inject(BASE_SERVICE_TOKEN) private baseService: DfBaseCrudService,
+    @Inject(EVENT_SCRIPT_SERVICE_TOKEN) private crudService: DfBaseCrudService
+  ) {
+    this.roleForm = new FormGroup({
+      serviceList: new FormControl(''),
+      repoInput: new FormControl(''),
+      branchInput: new FormControl(''),
+      pathInput: new FormControl(''),
+    });
+    this.baseService
+      .getAll<{
+        serviceTypes: Array<ServiceType>;
+        services: Array<Service>;
+      }>({
+        additionalParams: [
+          {
+            key: 'group',
+            value: 'source control,file',
+          },
+        ],
+      })
+      .subscribe(res => {
+        this.storageServices = res.services;
+      });
+  }
+  isDarkMode = this.themeService.darkMode$;
+  ngOnInit() {
+    this.updateDataSource();
+  }
+  updateDataSource() {
+    //
+  }
+  onViewLatest() {
+    const formValues = this.roleForm.getRawValue();
+    const service = formValues.serviceList ?? '';
+    const repo = formValues.repoInput ?? '';
+    const branch = formValues.branchInput ?? '';
+    const path = formValues.pathInput ?? '';
+
+    const filePath = `${service}/_repo/${repo}?branch=${branch}&content=1&path=${path}`;
+
+    if (filePath.endsWith('.json')) {
+      this.baseService
+        .downloadJson(filePath)
+        .subscribe(text => this.content.setValue(text));
+      return;
+    } else {
+      this.baseService
+        .downloadFile(filePath)
+        .pipe(switchMap(res => readAsText(res as Blob)))
+        .subscribe(text => this.content.setValue(text));
+    }
+  }
+
+  onDeleteCache() {
+    if (!this.cache) return;
+    this.cacheService
+      .delete(`_event/${this.cache}`, {
+        snackbarSuccess: 'scripts.deleteCacheSuccessMsg',
+      })
+      .subscribe();
+  }
+}