AB#118658 - Record cloning improvements

apps/back-office/src/app/app-preview/pages/form/form.component.html

@@ -1,12 +1,21 @@
 <ng-container *ngIf="!loading && form">
-  <shared-form [form]="form" (save)="onComplete($event)"></shared-form>
-  <ng-container *ngIf="completed && !form.uniqueRecord && !hideNewRecord">
+  <shared-form
+    [form]="form"
+    [record]="record"
+    (save)="onComplete($event)"
+  ></shared-form>
+  <!-- Form actions, only appear if not editing a record -->
+  <ng-container *ngIf="completed && !record">
     <div class="flex justify-center gap-x-4">
       <!-- Action buttons -->
       <shared-action-buttons [actionButtons]="actionButtons">
-        <ui-button category="secondary" (click)="clearForm()">{{
-          'models.record.new' | translate
-        }}</ui-button>
+        <!-- New record -->
+        <ui-button
+          *ngIf="!form.uniqueRecord && !hideNewRecord"
+          category="secondary"
+          (click)="clearForm()"
+          >{{ 'models.record.new' | translate }}</ui-button
+        >
       </shared-action-buttons>
     </div>
   </ng-container>

apps/back-office/src/app/app-preview/pages/form/form.component.ts

@@ -14,13 +14,16 @@ import {
   ActionButton,
   ContextService,
   Record,
+  RecordQueryResponse,
 } from '@oort-front/shared';
 import {
   GET_SHORT_FORM_BY_ID,
   GET_PAGE_BY_ID,
   GET_STEP_BY_ID,
+  GET_RECORD_BY_ID,
 } from './graphql/queries';
-import { takeUntil } from 'rxjs/operators';
+import { switchMap, takeUntil } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 
 /**
  * Application preview form page component.
@@ -34,8 +37,6 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   /** Form component */
   @ViewChild(SharedFormComponent)
   private formComponent?: SharedFormComponent;
-
-  // === DATA ===
   /** Loading state */
   public loading = true;
   /** Current form id */
@@ -44,20 +45,20 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   public form?: Form;
   /** Is form completed */
   public completed = false;
+  /** Ongoing query */
+  public querySubscription?: Subscription;
   /** Should possibility to add new records be hidden */
   public hideNewRecord = false;
   /** Form button actions */
   public actionButtons: ActionButton[] = [];
-
-  // === ROUTER ===
   /** Current page */
   public page?: Page;
   /** Current step */
   public step?: Step;
-
-  // === ROUTE ===
   /** Is this form part of step */
   public isStep = false;
+  /** Current record, optional */
+  public record?: Record;
 
   /**
    * Application preview form page component.
@@ -84,58 +85,106 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
       this.loading = true;
       this.id = params.id;
       this.isStep = this.router.url.includes('/workflow/');
+      // If a query is already loading, cancel it
+      if (this.querySubscription) {
+        this.querySubscription.unsubscribe();
+      }
       if (this.isStep) {
-        this.apollo
+        this.querySubscription = this.apollo
           .query<StepQueryResponse>({
             query: GET_STEP_BY_ID,
             variables: {
               id: this.id,
             },
           })
-          .subscribe(({ data }) => {
-            this.step = data.step;
-            this.actionButtons = data.step.buttons as ActionButton[];
-            this.apollo
-              .query<FormQueryResponse>({
-                query: GET_SHORT_FORM_BY_ID,
-                variables: {
-                  id: this.step.content,
-                },
-              })
-              .subscribe(({ data, loading }) => {
-                this.form = data.form;
-                this.loading = loading;
-              });
+          .pipe(
+            switchMap(({ data }) => {
+              this.step = data.step;
+              this.actionButtons = data.step.buttons as ActionButton[];
+              const recordId = this.route.snapshot.queryParams.id;
+              if (recordId) {
+                return this.getRecordQuery(recordId).pipe(
+                  switchMap((recordResponse) => {
+                    this.record = recordResponse.data.record;
+                    // Then, proceed to fetch the form
+                    return this.getFormQuery(this.step?.content ?? '');
+                  })
+                );
+              }
+              this.record = undefined;
+              return this.getFormQuery(this.step.content ?? '');
+            }),
+            takeUntil(this.destroy$)
+          )
+          .subscribe(({ data, loading }) => {
+            this.form = data.form;
+            this.loading = loading;
           });
       } else {
-        this.apollo
+        this.querySubscription = this.apollo
           .query<PageQueryResponse>({
             query: GET_PAGE_BY_ID,
             variables: {
               id: this.id,
             },
           })
-          .subscribe(({ data }) => {
-            this.page = data.page;
-            this.actionButtons = data.page.buttons as ActionButton[];
-            this.apollo
-              .query<FormQueryResponse>({
-                query: GET_SHORT_FORM_BY_ID,
-                variables: {
-                  id: this.page.content,
-                },
-              })
-              .subscribe(({ data, loading }) => {
-                if (data) {
-                  this.form = data.form;
-                }
-                this.loading = loading;
-              });
+          .pipe(
+            switchMap(({ data }) => {
+              this.page = data.page;
+              this.actionButtons = data.page.buttons as ActionButton[];
+              const recordId = this.route.snapshot.queryParams.id;
+              if (recordId) {
+                return this.getRecordQuery(recordId).pipe(
+                  switchMap((recordResponse) => {
+                    this.record = recordResponse.data.record;
+                    // Then, proceed to fetch the form
+                    return this.getFormQuery(this.page?.content ?? '');
+                  })
+                );
+              }
+              this.record = undefined;
+              return this.getFormQuery(this.page.content ?? '');
+            }),
+            takeUntil(this.destroy$)
+          )
+          .subscribe(({ data, loading }) => {
+            this.form = data.form;
+            this.loading = loading;
           });
       }
     });
   }
 
+  /**
+   * Returns a form query stream for the given id
+   *
+   * @param {string} id form id to fetch
+   * @returns a query stream
+   */
+  private getFormQuery(id: string) {
+    return this.apollo.query<FormQueryResponse>({
+      query: GET_SHORT_FORM_BY_ID,
+      variables: {
+        id,
+      },
+    });
+  }
+
+  /**
+   * Returns query for the given record id
+   *
+   * @param id record id
+   * @returns record query for the given id
+   */
+  private getRecordQuery(id: string) {
+    return this.apollo.query<RecordQueryResponse>({
+      query: GET_RECORD_BY_ID,
+      variables: {
+        id,
+      },
+    });
+  }
+
   /**
    * Handles complete event.
    *

apps/back-office/src/app/app-preview/pages/form/graphql/queries.ts

@@ -123,3 +123,22 @@ export const GET_SHORT_FORM_BY_ID = gql`
     }
   }
 `;
+
+/** Graphql request for getting a record by its id */
+export const GET_RECORD_BY_ID = gql`
+  query GetRecordById($id: ID!) {
+    record(id: $id) {
+      id
+      data
+      createdAt
+      createdBy {
+        name
+      }
+      modifiedAt
+      modifiedBy {
+        name
+      }
+      canUpdate
+    }
+  }
+`;

apps/back-office/src/app/application/pages/form/form.component.html

@@ -46,16 +46,18 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
     </div>
   </div>
   <!-- Form -->
-  <shared-form [form]="form" (save)="onComplete($event)"></shared-form>
-  <!-- Form actions -->
-  <div
-    class="mt-6 flex justify-center gap-x-4"
-    *ngIf="completed && !form.uniqueRecord && !hideNewRecord"
-  >
+  <shared-form
+    [form]="form"
+    [record]="record"
+    (save)="onComplete($event)"
+  ></shared-form>
+  <!-- Form actions, only appear if not editing a record -->
+  <div class="mt-6 flex justify-center gap-x-4" *ngIf="completed && !record">
     <!-- Action buttons -->
     <shared-action-buttons [actionButtons]="actionButtons">
       <!-- New record -->
       <ui-button
+        *ngIf="!form.uniqueRecord && !hideNewRecord"
         [isBlock]="!actionButtons.length"
         class="max-w-xs"
         variant="primary"

apps/back-office/src/app/application/pages/form/form.component.ts

@@ -18,12 +18,14 @@ import {
   StepQueryResponse,
   UnsubscribeComponent,
   WorkflowService,
+  RecordQueryResponse,
 } from '@oort-front/shared';
 import { Apollo } from 'apollo-angular';
 import { Observable, Subscription } from 'rxjs';
 import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import {
   GET_PAGE_BY_ID,
+  GET_RECORD_BY_ID,
   GET_SHORT_FORM_BY_ID,
   GET_STEP_BY_ID,
 } from './graphql/queries';
@@ -40,7 +42,6 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   /** Form component */
   @ViewChild(SharedFormComponent)
   private formComponent?: SharedFormComponent;
-
   /** Loading indicator */
   public loading = true;
   /** Current form id */
@@ -67,6 +68,8 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   public isStep = false;
   /** Configured form action buttons */
   public actionButtons: ActionButton[] = [];
+  /** Current record, optional */
+  public record?: Record;
 
   /**
    * Form page in application
@@ -119,8 +122,20 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
             switchMap(({ data }) => {
               this.step = data.step;
               this.actionButtons = data.step.buttons as ActionButton[];
-              return this.getFormQuery(this.step.content ?? '');
-            })
+              const recordId = this.route.snapshot.queryParams.id;
+              if (recordId) {
+                return this.getRecordQuery(recordId).pipe(
+                  switchMap((recordResponse) => {
+                    this.record = recordResponse.data.record;
+                    // Then, proceed to fetch the form
+                    return this.getFormQuery(this.step?.content ?? '');
+                  })
+                );
+              }
+              this.record = undefined;
+              return this.getFormQuery(this.step?.content ?? '');
+            }),
+            takeUntil(this.destroy$)
           )
           .subscribe(({ data, loading }) => {
             this.handleFormQueryResponse(data, 'step');
@@ -138,8 +153,20 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
             switchMap(({ data }) => {
               this.page = data.page;
               this.actionButtons = data.page.buttons as ActionButton[];
-              return this.getFormQuery(this.page.content ?? '');
-            })
+              const recordId = this.route.snapshot.queryParams.id;
+              if (recordId) {
+                return this.getRecordQuery(recordId).pipe(
+                  switchMap((recordResponse) => {
+                    this.record = recordResponse.data.record;
+                    // Then, proceed to fetch the form
+                    return this.getFormQuery(this.page?.content ?? '');
+                  })
+                );
+              }
+              this.record = undefined;
+              return this.getFormQuery(this.page?.content ?? '');
+            }),
+            takeUntil(this.destroy$)
           )
           .subscribe(({ data, loading }) => {
             this.handleFormQueryResponse(data, 'page');
@@ -164,6 +191,21 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
     });
   }
 
+  /**
+   * Returns query for the given record id
+   *
+   * @param id record id
+   * @returns record query for the given id
+   */
+  private getRecordQuery(id: string) {
+    return this.apollo.query<RecordQueryResponse>({
+      query: GET_RECORD_BY_ID,
+      variables: {
+        id,
+      },
+    });
+  }
+
   /**
    * Handle response for the form query
    *

apps/back-office/src/app/application/pages/form/graphql/queries.ts

@@ -128,3 +128,21 @@ export const GET_SHORT_FORM_BY_ID = gql`
     }
   }
 `;
+
+/** Graphql request for getting a record by its id */
+export const GET_RECORD_BY_ID = gql`
+  query GetRecordById($id: ID!) {
+    record(id: $id) {
+      id
+      data
+      createdAt
+      createdBy {
+        name
+      }
+      modifiedAt
+      modifiedBy {
+        name
+      }
+    }
+  }
+`;