upload and create carbon list

valtimo-platform · Nov 27, 2024 · 226297e · 226297e
1 parent 7fe070f
commit 226297e
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 107 deletions.
diff --git a/...agement/src/lib/components/process-management-list/process-management-list.component.html b/...agement/src/lib/components/process-management-list/process-management-list.component.html
@@ -14,18 +14,22 @@
   ~ limitations under the License.
   -->
 
-<valtimo-widget>
-  <valtimo-list
-    [items]="processDefinitions"
-    [fields]="fields"
-    (rowClicked)="editProcessDefinition($event)"
-    [header]="true"
-    [viewMode]="true"
-    [isSearchable]="true"
-  >
-    <div header>
-      <h3 class="list-header-title">{{ 'Processes' | translate }}</h3>
-      <h5 class="list-header-description">{{ 'Overview of all Processes' | translate }}</h5>
-    </div>
-  </valtimo-list>
-</valtimo-widget>
+<valtimo-carbon-list
+  [items]="(processDefinitions$ | async) || []"
+  [loading]="loading$ | async"
+  [fields]="FIELDS"
+  (rowClicked)="editProcessDefinition($event)"
+  [isSearchable]="true"
+>
+  <ng-container carbonToolbarContent>
+    <button cdsButton="ghost" [iconOnly]="true" (click)="openModal()">
+      <svg class="cds--btn__icon" cdsIcon="upload" size="16"></svg>
+    </button>
+
+    <button cdsButton="primary" [routerLink]="'create'">
+      {{ 'Create new Process' | translate }}
+
+      <svg class="cds--btn__icon" cdsIcon="add" size="16"></svg>
+    </button>
+  </ng-container>
+</valtimo-carbon-list>
diff --git a/...anagement/src/lib/components/process-management-list/process-management-list.component.ts b/...anagement/src/lib/components/process-management-list/process-management-list.component.ts
@@ -14,39 +14,52 @@
  * limitations under the License.
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {ProcessDefinition, ProcessService} from '@valtimo/process';
 import {Router} from '@angular/router';
+import {ColumnConfig} from '@valtimo/components';
+import {BehaviorSubject, startWith, switchMap, tap} from 'rxjs';
+import {IconService} from 'carbon-components-angular';
+import {Upload16} from '@carbon/icons';
+import {ProcessManagementStateService} from '../../services';
 
 @Component({
   selector: 'valtimo-process-management-list',
   templateUrl: './process-management-list.component.html',
   styleUrls: ['./process-management-list.component.scss'],
 })
-export class ProcessManagementListComponent implements OnInit {
-  public processDefinitions: ProcessDefinition[] = [];
-  public fields = [
-    {key: 'key', label: 'Key'},
+export class ProcessManagementListComponent {
+  public readonly loading$ = new BehaviorSubject<boolean>(true);
+
+  public readonly reloadDefinitions$ = this.processManagementStateService.reloadDefinitions$;
+
+  public readonly processDefinitions$ = this.reloadDefinitions$.pipe(
+    startWith(null),
+    switchMap(() =>
+      this.processService.getProcessDefinitions().pipe(tap(() => this.loading$.next(false)))
+    )
+  );
+
+  public readonly FIELDS = [
     {key: 'name', label: 'Name'},
+    {key: 'key', label: 'Key'},
     {key: 'readOnly', label: 'Read-only'},
-  ];
+  ] as ColumnConfig[];
 
   constructor(
-    private processService: ProcessService,
-    private router: Router
-  ) {}
-
-  ngOnInit() {
-    this.loadProcessDefinitions();
+    private readonly processService: ProcessService,
+    private readonly router: Router,
+    private readonly iconService: IconService,
+    private readonly processManagementStateService: ProcessManagementStateService
+  ) {
+    this.iconService.registerAll([Upload16]);
   }
 
-  loadProcessDefinitions() {
-    this.processService.getProcessDefinitions().subscribe((processDefs: ProcessDefinition[]) => {
-      this.processDefinitions = processDefs;
-    });
+  public editProcessDefinition(processDefinition: ProcessDefinition): void {
+    this.router.navigate(['/processes/process', processDefinition.key]);
   }
 
-  editProcessDefinition(processDefinition: ProcessDefinition) {
-    this.router.navigate(['/processes/process', processDefinition.key]);
+  public openModal(): void {
+    this.processManagementStateService.openModal();
   }
 }
diff --git a/...ent/src/lib/components/process-management-upload/process-management-upload.component.html b/...ent/src/lib/components/process-management-upload/process-management-upload.component.html
@@ -14,45 +14,28 @@
   ~ limitations under the License.
   -->
 
-<div
-  class="modal fade"
-  id="uploadProcess"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="uploadProcessLabel"
-  aria-hidden="true"
->
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title" id="uploadProcessLabel">Upload process</h3>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <h5>BPMN Model</h5>
-        <input
-          #bpmnFile
-          type="file"
-          id="file"
-          accept=".bpmn"
-          (change)="onChange($event.target.files)"
-        />
-      </div>
-      <div class="modal-footer">
-        <div class="btn-group">
-          <button
-            type="button"
-            class="btn btn-primary btn-space"
-            (click)="uploadProcessBpmn()"
-            [disabled]="!bpmn"
-            data-dismiss="modal"
-          >
-            Upload
-          </button>
-        </div>
-      </div>
+<cds-modal valtimoCdsModal [open]="modalOpen$ | async" size="sm">
+  <cds-modal-header showCloseButton="true" (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading>
+      <h3 class="modal-title">Upload process</h3>
+    </h3>
+  </cds-modal-header>
+
+  <h5>BPMN Model</h5>
+
+  <input #bpmnFile type="file" id="file" accept=".bpmn" (change)="onChange($event.target.files)" />
+
+  <cds-modal-footer>
+    <div class="btn-group">
+      <button
+        type="button"
+        class="btn btn-primary btn-space"
+        (click)="uploadProcessBpmn()"
+        [disabled]="!bpmn"
+        data-dismiss="modal"
+      >
+        Upload
+      </button>
     </div>
-  </div>
-</div>
+  </cds-modal-footer>
+</cds-modal>
diff --git a/...ement/src/lib/components/process-management-upload/process-management-upload.component.ts b/...ement/src/lib/components/process-management-upload/process-management-upload.component.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import {Component, ElementRef, EventEmitter, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ProcessManagementService} from '../../process-management.service';
 import {AlertService} from '@valtimo/components';
+import {ProcessManagementStateService} from '../../services';
 
 @Component({
   selector: 'valtimo-process-management-upload',
@@ -25,25 +26,32 @@ import {AlertService} from '@valtimo/components';
 })
 export class ProcessManagementUploadComponent {
   public bpmn: File | null = null;
-  @Output() reload = new EventEmitter();
   @ViewChild('bpmnFile') bpmnFile: ElementRef;
 
+  public readonly modalOpen$ = this.processManagementStateService.openModal$;
+
   constructor(
-    private processManagementService: ProcessManagementService,
-    private alertService: AlertService
+    private readonly processManagementService: ProcessManagementService,
+    private readonly alertService: AlertService,
+    private readonly processManagementStateService: ProcessManagementStateService
   ) {}
 
-  onChange(files: FileList): void {
+  public closeModal(): void {
+    this.processManagementStateService.closeModal();
+  }
+
+  public onChange(files: FileList): void {
     this.bpmn = files.item(0);
   }
 
-  uploadProcessBpmn() {
+  public uploadProcessBpmn() {
     this.processManagementService.deployBpmn(this.bpmn).subscribe(
       () => {
         this.bpmn = null;
         this.bpmnFile.nativeElement.value = '';
         this.alertService.success('Deployment successful');
-        this.reload.emit();
+        this.processManagementStateService.closeModal();
+        this.processManagementStateService.reloadDefinitions();
       },
       error => {
         this.bpmn = null;

diff --git a/...rocess-management/src/lib/components/process-management/process-management.component.html b/...rocess-management/src/lib/components/process-management/process-management.component.html
@@ -14,27 +14,6 @@
   ~ limitations under the License.
   -->
 
-<div class="main-content pt-0">
-  <div class="container-fluid">
-    <div class="text-right">
-      <div class="btn-group mt-m3px mb-3">
-        <button
-          class="btn btn-secondary btn-space"
-          data-toggle="modal"
-          data-target="#uploadProcess"
-        >
-          <i class="icon mdi mdi-upload mr-1"></i>
-          {{ 'Upload process' | translate }}
-        </button>
-        <button class="btn btn-primary btn-space mr-0" [routerLink]="'create'">
-          <i class="icon mdi mdi-plus mr-1"></i>
-          {{ 'Create new Process' | translate }}
-        </button>
-      </div>
-    </div>
-    <valtimo-process-management-upload
-      (reload)="processManagementList.loadProcessDefinitions()"
-    ></valtimo-process-management-upload>
-    <valtimo-process-management-list #processManagementList></valtimo-process-management-list>
-  </div>
-</div>
+<valtimo-process-management-list #processManagementList></valtimo-process-management-list>
+
+<valtimo-process-management-upload></valtimo-process-management-upload>
diff --git a/.../process-management/src/lib/components/process-management/process-management.component.ts b/.../process-management/src/lib/components/process-management/process-management.component.ts
@@ -16,11 +16,13 @@
 
 import {Component, ViewChild} from '@angular/core';
 import {ProcessManagementListComponent} from '../process-management-list/process-management-list.component';
+import {ProcessManagementStateService} from '../../services';
 
 @Component({
   selector: 'valtimo-process-management',
   templateUrl: './process-management.component.html',
   styleUrls: ['./process-management.component.scss'],
+  providers: [ProcessManagementStateService],
 })
 export class ProcessManagementComponent {
   @ViewChild('processManagementList') processManagementList: ProcessManagementListComponent;

diff --git a/projects/valtimo/process-management/src/lib/process-management.module.ts b/projects/valtimo/process-management/src/lib/process-management.module.ts
@@ -17,8 +17,8 @@
 import {NgModule} from '@angular/core';
 import {ProcessManagementRoutingModule} from './process-management-routing';
 import {CommonModule} from '@angular/common';
-import {ListModule, WidgetModule} from '@valtimo/components';
-import {FormsModule} from '@angular/forms';
+import {CarbonListModule, ListModule, WidgetModule} from '@valtimo/components';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TranslateModule} from '@ngx-translate/core';
 import {ProcessLinkModule} from '@valtimo/process-link';
 import {
@@ -28,6 +28,14 @@ import {
   ProcessManagementListComponent,
   ProcessManagementUploadComponent,
 } from './components';
+import {
+  ButtonModule,
+  DropdownModule,
+  IconModule,
+  ModalModule,
+  NotificationModule,
+  RadioModule,
+} from 'carbon-components-angular';
 
 @NgModule({
   declarations: [
@@ -45,6 +53,15 @@ import {
     TranslateModule,
     ProcessLinkModule,
     ProcessManagementEditorComponent,
+    CarbonListModule,
+    ButtonModule,
+    IconModule,
+    DropdownModule,
+    ModalModule,
+    NotificationModule,
+    RadioModule,
+    ReactiveFormsModule,
+    ModalModule,
   ],
   exports: [ProcessManagementComponent],
 })

diff --git a/projects/valtimo/process-management/src/lib/services/index.ts b/projects/valtimo/process-management/src/lib/services/index.ts
@@ -15,3 +15,4 @@
  */
 
 export * from './process-management-editor.service';
+export * from './process-management-state.service';
diff --git a/projects/valtimo/process-management/src/lib/services/process-management-state.service.ts b/projects/valtimo/process-management/src/lib/services/process-management-state.service.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Injectable} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+
+@Injectable()
+export class ProcessManagementStateService {
+  private readonly _openModal$ = new Subject<boolean>();
+  private readonly _reloadDefinitions$ = new Subject<null>();
+
+  public get openModal$(): Observable<boolean> {
+    return this._openModal$.asObservable();
+  }
+
+  public get reloadDefinitions$(): Observable<null> {
+    return this._reloadDefinitions$.asObservable();
+  }
+
+  public openModal(): void {
+    this._openModal$.next(true);
+  }
+
+  public closeModal(): void {
+    this._openModal$.next(false);
+  }
+
+  public reloadDefinitions(): void {
+    this._reloadDefinitions$.next(null);
+  }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@
		*/

		export * from './process-management-editor.service';
		export * from './process-management-state.service';