AB#120296 - Draft & Auto save

libs/shared/src/lib/components/draft-record-list-modal/draft-record-list-modal.component.ts

@@ -10,8 +10,8 @@ import { Dialog } from '@angular/cdk/dialog';
 import { Apollo } from 'apollo-angular';
 import {
   DraftRecordsQueryResponse,
-  DraftRecord,
-} from '../../models/draft-record.model';
+  Record as RecordModel,
+} from '../../models/record.model';
 import {
   TableModule,
   DialogModule,
@@ -48,7 +48,7 @@ interface DialogData {
 })
 export class DraftRecordListModalComponent implements OnInit {
   /** Array of available draft records */
-  public draftRecords: Array<DraftRecord> = new Array<DraftRecord>();
+  public draftRecords: Array<RecordModel> = new Array<RecordModel>();
   /** Displayed table columns */
   public displayedColumns = ['createdAt', 'actions'];
   /** Displayed skeleton table columns */
@@ -103,7 +103,7 @@ export class DraftRecordListModalComponent implements OnInit {
       .pipe()
       .subscribe(({ data }) => {
         this.form = data.form;
-        this.draftRecords = data.draftRecords;
+        this.draftRecords = data.records;
         this.loading = false;
       });
   }
@@ -113,7 +113,7 @@ export class DraftRecordListModalComponent implements OnInit {
    *
    * @param element draft record selected
    */
-  async onPreview(element: DraftRecord) {
+  async onPreview(element: RecordModel) {
     const { DraftRecordModalComponent } = await import(
       '../draft-record-modal/draft-record-modal.component'
     );
@@ -130,7 +130,7 @@ export class DraftRecordListModalComponent implements OnInit {
    *
    * @param element Draft record to delete
    */
-  onDelete(element: DraftRecord) {
+  onDelete(element: RecordModel) {
     const dialogRef = this.confirmService.openConfirmModal({
       title: this.translate.instant(
         'components.form.draftRecords.confirmModal.delete'
@@ -160,7 +160,7 @@ export class DraftRecordListModalComponent implements OnInit {
    *
    * @param element Draft record to be returned to form component
    */
-  onClose(element: DraftRecord): void {
+  onClose(element: RecordModel): void {
     const confirmDialogRef = this.confirmService.openConfirmModal({
       title: this.translate.instant(
         'components.form.draftRecords.confirmModal.load'

libs/shared/src/lib/components/draft-record-list-modal/graphql/queries.ts

@@ -3,10 +3,16 @@ import { gql } from 'apollo-angular';
 /** Graphql request for getting draft records */
 export const GET_DRAFT_RECORDS = gql`
   query GetDraftRecords($form: ID!) {
-    draftRecords(form: $form) {
+    records(draft: true) {
       id
+      incrementalId
+      draft
       createdAt
       data
+      form {
+        id
+        name
+      }
     }
     form(id: $form) {
       id

libs/shared/src/lib/components/draft-record/draft-record.component.ts

@@ -22,6 +22,8 @@ export class DraftRecordComponent extends UnsubscribeComponent {
   @Input() survey!: SurveyModel;
   /** Form input */
   @Input() formId!: string;
+  /** Optional hook before opening drafts list. Return false to cancel. */
+  @Input() beforeOpenDrafts?: () => Promise<boolean> | boolean;
   /** Emit event when selecting draft */
   @Output() loadDraft: EventEmitter<string> = new EventEmitter();
 
@@ -38,6 +40,10 @@ export class DraftRecordComponent extends UnsubscribeComponent {
    * Open draft list.
    */
   public async onOpenDrafts(): Promise<void> {
+    const beforeOpenDrafts = await this.beforeOpenDrafts?.();
+    if (!beforeOpenDrafts) {
+      return;
+    }
     // Lazy load modal
     const { DraftRecordListModalComponent } = await import(
       '../draft-record-list-modal/draft-record-list-modal.component'

libs/shared/src/lib/components/form-modal/form-modal.component.html

@@ -11,11 +11,12 @@
           *ngIf="survey"
           [survey]="survey"
         ></shared-form-actions>
-        <!-- <shared-draft-record
+        <shared-draft-record
           [survey]="survey"
           [formId]="form?.id ?? ''"
+          [beforeOpenDrafts]="beforeOpenDrafts"
           (loadDraft)="onLoadDraftRecord($event)"
-        ></shared-draft-record> -->
+        ></shared-draft-record>
       </div>
       <ui-tabs
         [selectedIndex]="(selectedPageIndex$ | async)!"
@@ -71,9 +72,9 @@
         {{ 'common.next' | translate }}
       </ui-button>
     </ng-container>
-    <!-- <ui-button [disabled]="disableSaveAsDraft" (click)="saveAsDraft()">{{
+    <ui-button *ngIf="showSaveAsDraft" [disabled]="disableSaveAsDraft" (click)="saveAsDraft()">{{
       'components.form.draftRecords.save' | translate
-    }}</ui-button> -->
+    }}</ui-button>
     <ui-button
       category="secondary"
       variant="primary"