AAE-21566 Handling new form event - show spinner

lib/core/src/lib/auth/guard/auth-guard-base.ts

@@ -17,20 +17,15 @@
 
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, UrlTree } from '@angular/router';
 import { AuthenticationService } from '../services/authentication.service';
-import {
-    AppConfigService,
-    AppConfigValues
-} from '../../app-config/app-config.service';
+import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
 import { OauthConfigModel } from '../models/oauth-config.model';
 import { MatDialog } from '@angular/material/dialog';
 import { StorageService } from '../../common/services/storage.service';
 import { Observable } from 'rxjs';
 import { BasicAlfrescoAuthService } from '../basic-auth/basic-alfresco-auth.service';
 import { OidcAuthenticationService } from '../services/oidc-authentication.service';
 
-
 export abstract class AuthGuardBase implements CanActivate, CanActivateChild {
-
     protected get withCredentials(): boolean {
         return this.appConfigService.get<boolean>('auth.withCredentials', false);
     }
@@ -43,8 +38,7 @@ export abstract class AuthGuardBase implements CanActivate, CanActivateChild {
         protected appConfigService: AppConfigService,
         protected dialog: MatDialog,
         private storageService: StorageService
-    ) {
-    }
+    ) {}
 
     abstract checkLogin(
         activeRoute: ActivatedRouteSnapshot,
@@ -96,7 +90,7 @@ export abstract class AuthGuardBase implements CanActivate, CanActivateChild {
 
             urlToRedirect = `${urlToRedirect}?redirectUrl=${url}`;
             return this.navigate(urlToRedirect);
-       } else if (this.getOauthConfig().silentLogin && !this.oidcAuthenticationService.isPublicUrl()) {
+        } else if (this.getOauthConfig().silentLogin && !this.oidcAuthenticationService.isPublicUrl()) {
             if (!this.oidcAuthenticationService.hasValidIdToken() || !this.oidcAuthenticationService.hasValidAccessToken()) {
                 this.oidcAuthenticationService.ssoLogin(url);
             }
@@ -114,13 +108,7 @@ export abstract class AuthGuardBase implements CanActivate, CanActivateChild {
     }
 
     protected getOauthConfig(): OauthConfigModel {
-        return (
-            this.appConfigService &&
-            this.appConfigService.get<OauthConfigModel>(
-                AppConfigValues.OAUTHCONFIG,
-                null
-            )
-        );
+        return this.appConfigService && this.appConfigService.get<OauthConfigModel>(AppConfigValues.OAUTHCONFIG, null);
     }
 
     protected getLoginRoute(): string {
@@ -132,20 +120,12 @@ export abstract class AuthGuardBase implements CanActivate, CanActivateChild {
     }
 
     protected isOAuthWithoutSilentLogin(): boolean {
-        const oauth = this.appConfigService.get<OauthConfigModel>(
-            AppConfigValues.OAUTHCONFIG,
-            null
-        );
-        return (
-            this.authenticationService.isOauth() && !!oauth && !oauth.silentLogin
-        );
+        const oauth = this.appConfigService.get<OauthConfigModel>(AppConfigValues.OAUTHCONFIG, null);
+        return this.authenticationService.isOauth() && !!oauth && !oauth.silentLogin;
     }
 
     protected isSilentLogin(): boolean {
-        const oauth = this.appConfigService.get<OauthConfigModel>(
-            AppConfigValues.OAUTHCONFIG,
-            null
-        );
+        const oauth = this.appConfigService.get<OauthConfigModel>(AppConfigValues.OAUTHCONFIG, null);
 
         return this.authenticationService.isOauth() && oauth && oauth.silentLogin;
     }

lib/core/src/lib/form/components/form-renderer.component.spec.ts

@@ -701,12 +701,12 @@ describe('Form Renderer Component', () => {
     });
 
     describe('Form rules', () => {
-        it('should call the Form Rules Manager init on component changes', () => {
+        it('should call the Form Rules Manager init', () => {
             spyOn(rulesManager, 'initialize');
             const formModel = formService.parseForm(customWidgetFormWithVisibility.formRepresentation.formDefinition);
 
             formRendererComponent.formDefinition = formModel;
-            formRendererComponent.ngOnChanges();
+            formRendererComponent.ngOnInit();
 
             expect(rulesManager.initialize).toHaveBeenCalledWith(formModel);
         });

lib/core/src/lib/form/components/form-renderer.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, Input, OnDestroy, Injector, OnChanges, OnInit, Inject } from '@angular/core';
+import { Component, ViewEncapsulation, Input, OnDestroy, Injector, OnInit, Inject } from '@angular/core';
 import { FormRulesManager, formRulesManagerFactory } from '../models/form-rules.model';
 import { FormModel } from './widgets/core/form.model';
 import { ContainerModel, FormFieldModel, TabModel } from './widgets';
@@ -36,7 +36,7 @@ import { FORM_FIELD_MODEL_RENDER_MIDDLEWARE, FormFieldModelRenderMiddleware } fr
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class FormRendererComponent<T> implements OnInit, OnChanges, OnDestroy {
+export class FormRendererComponent<T> implements OnInit, OnDestroy {
     /** Toggle debug options. */
     @Input()
     showDebugButton: boolean = false;
@@ -57,9 +57,6 @@ export class FormRendererComponent<T> implements OnInit, OnChanges, OnDestroy {
 
     ngOnInit(): void {
         this.runMiddlewareServices();
-    }
-
-    ngOnChanges(): void {
         this.formRulesManager.initialize(this.formDefinition);
     }
 

lib/core/src/lib/form/events/form-spinner.event.ts

@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.
+ */
+
+export interface FormSpinnerEventPayload {
+    showSpinner: boolean;
+    message?: string;
+}
+
+export class FormSpinnerEvent {
+    constructor(public type: string, public payload: FormSpinnerEventPayload) {}
+}

lib/core/src/lib/form/events/index.ts

@@ -21,3 +21,4 @@ export * from './form-field.event';
 export * from './validate-form-field.event';
 export * from './validate-form.event';
 export * from './form-rules.event';
+export * from './form-spinner.event';

lib/core/src/lib/form/models/form-rules.model.ts

@@ -39,7 +39,7 @@ export function formRulesManagerFactory<T>(injector: Injector): FormRulesManager
 }
 
 export abstract class FormRulesManager<T> {
-    constructor(private formService: FormService) {}
+    constructor(protected formService: FormService) {}
 
     protected formModel: FormModel;
     private onDestroy$ = new Subject<boolean>();
@@ -66,7 +66,9 @@ export abstract class FormRulesManager<T> {
                         this.handleRuleEvent(event, rules);
                     });
 
-                this.formService.formRulesEvent.next(new FormRulesEvent('formLoaded', new FormEvent(formModel)));
+                const onFormLoadedEvent = new FormEvent(formModel);
+                const formRules = new FormRulesEvent('formLoaded', onFormLoadedEvent);
+                this.formService.formRulesEvent.next(formRules);
             }
         }
 

lib/core/src/lib/form/services/form.service.ts

@@ -29,12 +29,12 @@ import { ValidateFormEvent } from '../events/validate-form.event';
 import { ValidateFormFieldEvent } from '../events/validate-form-field.event';
 import { FormValidationService } from './form-validation-service.interface';
 import { FormRulesEvent } from '../events/form-rules.event';
+import { FormSpinnerEvent } from '../events';
 
 @Injectable({
     providedIn: 'root'
 })
 export class FormService implements FormValidationService {
-
     formLoaded = new Subject<FormEvent>();
     formDataRefreshed = new Subject<FormEvent>();
     formFieldValueChanged = new Subject<FormFieldEvent>();
@@ -44,6 +44,7 @@ export class FormService implements FormValidationService {
     taskSaved = new Subject<FormEvent>();
     taskSavedError = new Subject<FormErrorEvent>();
     formContentClicked = new Subject<ContentLinkModel>();
+    toggleFormSpinner = new Subject<FormSpinnerEvent>();
 
     validateForm = new Subject<ValidateFormEvent>();
     validateFormField = new Subject<ValidateFormFieldEvent>();
@@ -55,8 +56,7 @@ export class FormService implements FormValidationService {
 
     formRulesEvent = new Subject<FormRulesEvent>();
 
-    constructor() {
-    }
+    constructor() {}
 
     /**
      * Parses JSON data to create a corresponding Form model.

lib/core/src/lib/pipes/time-ago.pipe.ts

@@ -38,8 +38,10 @@ export class TimeAgoPipe implements PipeTransform, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(public userPreferenceService: UserPreferencesService,
-                public appConfig: AppConfigService) {
+    constructor(
+        public userPreferenceService: UserPreferencesService,
+        public appConfig: AppConfigService
+    ) {
         this.userPreferenceService
             .select(UserPreferenceValues.Locale)
             .pipe(takeUntil(this.onDestroy$))

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -41,6 +41,7 @@ import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
 import { v4 as uuidGeneration } from 'uuid';
 import { FormCloudDisplayMode, FormCloudDisplayModeConfiguration } from '../../services/form-fields.interfaces';
 import { DisplayModeService } from '../public-api';
+import { FormCloudSpinnerService } from '../services/spinner/form-cloud-spinner.service';
 
 @Component({
     selector: 'adf-cloud-form',
@@ -128,9 +129,13 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
         protected formService: FormService,
         private dialog: MatDialog,
         protected visibilityService: WidgetVisibilityService,
-        private readonly displayModeService: DisplayModeService
+        private readonly displayModeService: DisplayModeService,
+        private spinnerService: FormCloudSpinnerService
     ) {
         super();
+
+        this.spinnerService.initSpinnerHandling(this.onDestroy$);
+
         this.id = uuidGeneration();
 
         this.formService.formContentClicked.pipe(takeUntil(this.onDestroy$)).subscribe((content) => {
@@ -375,6 +380,7 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             }
             return form;
         }
+
         return null;
     }
 
@@ -396,8 +402,10 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
 
     private refreshFormData() {
         this.form = this.parseForm(this.formCloudRepresentationJSON);
-        this.onFormLoaded(this.form);
-        this.onFormDataRefreshed(this.form);
+        if (this.form) {
+            this.onFormLoaded(this.form);
+            this.onFormDataRefreshed(this.form);
+        }
     }
 
     protected onFormLoaded(form: FormModel) {

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.html

@@ -0,0 +1,11 @@
+<div class="adf-cloud-form-spinner">
+    <div class="adf-cloud-form-spinner-content">
+        <mat-progress-spinner
+            color="primary"
+            mode="indeterminate"
+        ></mat-progress-spinner>
+        <span class="adf-cloud-form-spinner-content-message">
+            {{message | translate}}
+        </span>
+    </div>
+</div>

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.scss

@@ -0,0 +1,20 @@
+.adf-cloud-form {
+    &-spinner {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        place-content: center center;
+
+        &-content {
+            display: flex;
+            flex-flow: column wrap;
+            place-content: center center;
+            row-gap: 25px;
+            align-items: center;
+
+            &-message {
+                font-size: var(--theme-body-4-font-size);
+            }
+        }
+    }
+}

lib/process-services-cloud/src/lib/form/components/spinner/form-spinner.component.ts

@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 { Component, Input } from '@angular/core';
+
+@Component({
+    templateUrl: './form-spinner.component.html',
+    styleUrls: ['./form-spinner.component.scss']
+})
+export class FormSpinnerComponent {
+    @Input() message = '';
+}

lib/process-services-cloud/src/lib/form/form-cloud.module.ts

@@ -42,10 +42,14 @@ import { FileViewerWidgetComponent } from './components/widgets/file-viewer/file
 import { DisplayRichTextWidgetComponent } from './components/widgets/display-rich-text/display-rich-text.widget';
 import { RichTextEditorModule } from '../rich-text-editor';
 import { A11yModule } from '@angular/cdk/a11y';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { FormSpinnerComponent } from './components/spinner/form-spinner.component';
+import { FormCloudSpinnerService } from './services/spinner/form-cloud-spinner.service';
 
 @NgModule({
     imports: [
         CommonModule,
+        OverlayModule,
         MaterialModule,
         FormsModule,
         ReactiveFormsModule,
@@ -76,7 +80,8 @@ import { A11yModule } from '@angular/cdk/a11y';
         PropertiesViewerWidgetComponent,
         FilePropertiesTableCloudComponent,
         FileViewerWidgetComponent,
-        DisplayRichTextWidgetComponent
+        DisplayRichTextWidgetComponent,
+        FormSpinnerComponent
     ],
     exports: [
         FormCloudComponent,
@@ -92,6 +97,7 @@ import { A11yModule } from '@angular/cdk/a11y';
         PropertiesViewerWidgetComponent,
         FileViewerWidgetComponent,
         DisplayRichTextWidgetComponent
-    ]
+    ],
+    providers: [FormCloudSpinnerService]
 })
 export class FormCloudModule {}