Hit 452 form redirection

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

@@ -46,7 +46,8 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
     </div>
   </div>
   <!-- Form -->
-  <shared-form [form]="form" (save)="onComplete($event)"></shared-form>
+  <shared-form [form]="form" (save)="onComplete($event)">
+  </shared-form>
   <!-- Form actions -->
   <div
     class="mt-6 flex justify-center"

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

@@ -61,6 +61,8 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
   /** Is form part of workflow step */
   public isStep = false;
 
+
+
   /**
    * Form page in application
    *
@@ -220,15 +222,71 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
    * @param e.hideNewRecord do we show new record button
    */
   onComplete(e: { completed: boolean; hideNewRecord?: boolean }): void {
+    this.hideNewRecord = e.hideNewRecord ?? false;
+
+    // If it's a step
+    if (this.isStep && this.step?.nextStepOnSave) {
+      const redirectId = this.page?.redirectTo;
+
+      // Redirect takes priority over nextStep
+      if (redirectId) {
+        (async () => {
+          const targetPage = await this.getPageById(redirectId);
+          const targetType = targetPage?.type ?? 'form';
+          this.router.navigate([
+            '/applications',
+            this.applicationId,
+            targetType,
+            redirectId,
+          ]);
+        })();
+      } else {
+        this.workflowService.nextStep.emit();
+      }
+
+      return;
+    }
+
+    // If it's a page and has redirect
+    if (!this.isStep && this.page?.redirectTo) {
+      const redirectId = this.page.redirectTo;
+
+      (async () => {
+        const targetPage = await this.getPageById(redirectId);
+        const targetType = targetPage?.type ?? 'form';
+        this.router.navigate([
+          '/applications',
+          this.applicationId,
+          targetType,
+          redirectId,
+        ]);
+      })();
+
+      return;
+    }
+
+    // Otherwise, show completion
     this.completed = e.completed;
-    this.hideNewRecord = e.hideNewRecord || false;
+  }
 
-    // Checks if should go to next step if in an workflow
-    if (this.step?.nextStepOnSave) {
-      this.workflowService.nextStep.emit();
+  //** Get Pagge by id to check the type of it  */
+  private async getPageById(id: string): Promise<Page | undefined> {
+    try {
+      const result = await this.apollo
+        .query<PageQueryResponse>({
+          query: GET_PAGE_BY_ID,
+          variables: { id },
+          fetchPolicy: 'network-only',
+        })
+        .toPromise();
+
+      return result?.data?.page; // safely access page
+    } catch (error) {
+      console.error('Failed to fetch page by ID:', error);
+      return undefined;
     }
   }
-
+  
   /**
    * Clear status of the form.
    */
@@ -311,4 +369,5 @@ export class FormComponent extends UnsubscribeComponent implements OnInit {
       subscription?.unsubscribe();
     });
   }
+
 }

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

@@ -78,6 +78,7 @@ export const GET_PAGE_BY_ID = gql`
       canSee
       canUpdate
       canDelete
+      redirectTo
     }
   }
 `;

apps/back-office/src/app/components/view-settings-modal/view-settings-modal.component.html

@@ -80,6 +80,23 @@ <h4>
                     ></shared-search-menu>
                   </ng-template>
                 </ng-container>
+                <!-- Redirect To After Submission -->
+                <div uiFormFieldDirective class="w-full">
+                  <label>
+                    {{ 'common.settings.redirectAfterSubmission' | translate }}
+                  </label>
+                  <ui-select-menu
+                    formControlName="redirectTo"
+                    [placeholder]="'common.none' | translate"
+                  >
+                    <ui-select-option [value]="null">
+                      {{ 'common.none' | translate }}
+                    </ui-select-option>
+                    <ui-select-option *ngFor="let p of pages" [value]="p.id">
+                      {{ p.name }}
+                    </ui-select-option>
+                  </ui-select-menu>
+                </div> 
               </div>
             </ng-container>
           </div>

apps/back-office/src/app/components/view-settings-modal/view-settings-modal.component.ts

@@ -113,6 +113,8 @@ export class ViewSettingsModalComponent
   public showFilter!: boolean;
   /** Grid type */
   public gridType = GridType;
+  /** All pages for this application */
+  public pages: { id: string; name: string }[] = [];
 
   /**
    * Common settings of pages / steps.
@@ -148,6 +150,21 @@ export class ViewSettingsModalComponent
       this.settingsForm.disable();
     }
 
+    // Add logging to debug valueChanges
+    this.settingsForm.controls.redirectTo.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value: string | null) => {
+        console.log('redirectTo valueChanges:', value);
+        this.onUpdateRedirectTo(value);
+      });
+
+    // populate dropdown
+    this.applicationService.pages$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((pages) => {
+        this.pages = pages.map((p: any) => ({ id: p.id, name: p.name }));
+      });
+
     // Listen to icon updates
     this.settingsForm?.controls.icon.valueChanges
       .pipe(takeUntil(this.destroy$))
@@ -261,9 +278,12 @@ export class ViewSettingsModalComponent
    */
   private createSettingsForm() {
     return this.fb.group({
-      // initializes icon field with data info
       icon: this.fb.control(this.data.icon ?? ''),
       visible: this.fb.control(this.data.visible ?? true),
+      redirectTo: this.fb.control(
+        (this.data.page as Page)?.redirectTo ?? null,
+        { updateOn: 'blur' }
+      ),
       ...(this.dashboard && {
         gridOptions: this.fb.group({
           minCols: this.fb.control(
@@ -397,4 +417,22 @@ export class ViewSettingsModalComponent
       callback
     );
   }
+
+  /** Called whenever the dropdown changes */
+  public onUpdateRedirectTo(value: string | null) {
+    console.log('onUpdateRedirectTo called with:', value);
+    if (this.data.type === 'page' && this.data.page) {
+      const page = this.data.page;
+      console.log('Calling updatePageRedirectTo with page:', page);
+      this.applicationService.updatePageRedirectTo(
+        page,
+        value,
+        () => {
+          console.log('updatePageRedirectTo callback success');
+          page.redirectTo = value ?? undefined;
+          this.onUpdate.emit({ redirectTo: value });
+        }
+      );
+    }
+  }
 }

apps/back-office/src/environments/environment.ts

@@ -7,7 +7,7 @@ import { Environment } from './environment.type';
  * Authentication configuration
  */
 const authConfig: AuthConfig = {
-  issuer: 'https://id-mab.unesco.oortcloud.tech/realms/oort',
+  issuer: 'https://id-dev.oortcloud.tech/realms/oort',
   redirectUri: 'http://localhost:4200/',
   postLogoutRedirectUri: 'http://localhost:4200/auth/',
   clientId: 'oort-client',

apps/front-office/src/environments/environment.oort.dev.ts

@@ -25,4 +25,17 @@ export const environment: Environment = {
   availableLanguages: ['en', 'fr', 'test'],
   authConfig,
   theme,
+  availableWidgets: [
+    'form',
+    'donut-chart',
+    'line-chart',
+    'bar-chart',
+    'column-chart',
+    'pie-chart',
+    'grid',
+    'text',
+    'map',
+    'summaryCard',
+    'tabs',
+  ],
 };

apps/front-office/src/environments/environment.ts

@@ -2,27 +2,40 @@ import { AuthConfig } from 'angular-oauth2-oidc';
 import { theme } from '../themes/default/default.local';
 import { sharedEnvironment } from './environment.shared';
 import { Environment } from './environment.type';
-
 /** Authentication configuration of the module. */
 const authConfig: AuthConfig = {
-  issuer: 'https://id-mab.unesco.oortcloud.tech/realms/oort',
+  issuer: 'https://id-dev.oortcloud.tech/realms/oort',
   redirectUri: 'http://localhost:4200/',
   postLogoutRedirectUri: 'http://localhost:4200/auth/',
   clientId: 'oort-client',
   scope: 'openid profile email offline_access',
   responseType: 'code',
   showDebugInformation: true,
 };
-
-/** Environment configuration */
+/**
+ * Environment file for local development.
+ */
 export const environment: Environment = {
   ...sharedEnvironment,
-  production: false,
+  production: true,
   apiUrl: 'http://localhost:3000',
   subscriptionApiUrl: 'ws://localhost:3000',
   frontOfficeUri: 'http://localhost:4200/',
   backOfficeUri: 'http://localhost:4200/',
   availableLanguages: ['en', 'fr', 'test'],
   authConfig,
   theme,
+  availableWidgets: [
+    'form',
+    'donut-chart',
+    'line-chart',
+    'bar-chart',
+    'column-chart',
+    'pie-chart',
+    'grid',
+    'text',
+    'map',
+    'summaryCard',
+    'tabs',
+  ],
 };

apps/front-office/src/environments/environment.type.ts

@@ -20,6 +20,7 @@ export interface Environment {
   backOfficeUri: string;
   availableLanguages: string[];
   authConfig: AuthConfig;
+  availableWidgets: string[];
   esriApiKey: string;
   theme: any;
   sentry?: any;

libs/shared/src/i18n/en.json

@@ -454,7 +454,9 @@
     "semicolon": "semicolon",
     "send": "Send",
     "separator": "Separator",
-    "settings": "Settings",
+    "settings": {
+      "redirectAfterSubmission": "Redirect After Submission"
+    },
     "status": "Status",
     "status_active": "Active",
     "status_archived": "Archived",
@@ -1854,7 +1856,7 @@
                 "selectDistributionList": "Select the distribution list that will set recipients of the email",
                 "selectTemplates": "Select the email templates users will be allowed to choose from when using the action"
               },
-              "notify": "When enabled, you must provide a channel and a message. All selected rows will be sent as a single notification on the specified channel. The provided message is used to define the notification’s action",
+              "notify": "When enabled, you must provide a channel and a message. All selected rows will be sent as a single notification on the specified channel. The provided message is used to define the notification's action",
               "publish": "When enabled, you must provide a channel. All selected rows will be sent as a single publication on the specified channel. Everyone listening to this channel can receive the records"
             }
           },