feat: allow to define grid actions in summary card settings (#1888)

* Allow-to-define-grid-actions-from-summary-card-settings

* lint

* duplication of grid actions in summary cards

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: TaiKamilla

libs/shared/src/lib/components/widgets/grid-settings/tab-actions/tab-actions.component.html renamed to libs/shared/src/lib/components/widgets/common/tab-actions/tab-actions.component.html

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Inject } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { ApplicationService } from '../../../../services/application/application.service';
 import { Application } from '../../../../models/application.model';
@@ -24,8 +24,6 @@ export class TabActionsComponent
   public showSelectPage = false;
   /** Available pages from the application */
   public pages: any[] = [];
-  /** Current environment */
-  private environment: any;
   /** Grid actions */
   public actions = [
     {
@@ -78,15 +76,10 @@ export class TabActionsComponent
   /**
    * Constructor of the grid component
    *
-   * @param applicationService Application service,
-   * @param environment environment
+   * @param applicationService Application service
    */
-  constructor(
-    public applicationService: ApplicationService,
-    @Inject('environment') environment: any
-  ) {
+  constructor(public applicationService: ApplicationService) {
     super();
-    this.environment = environment;
   }
 
   ngOnInit(): void {

libs/shared/src/lib/components/widgets/grid-settings/tab-actions/tab-actions.component.scss renamed to libs/shared/src/lib/components/widgets/common/tab-actions/tab-actions.component.scss

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { GridSettingsComponent } from './grid-settings.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { TabActionsModule } from './tab-actions/tab-actions.module';
+import { TabActionsModule } from '../common/tab-actions/tab-actions.module';
 import { TabButtonsModule } from './tab-buttons/tab-buttons.module';
 import { TabMainModule } from './tab-main/tab-main.module';
 import {

libs/shared/src/lib/components/widgets/grid-settings/tab-actions/tab-actions.component.spec.ts renamed to libs/shared/src/lib/components/widgets/common/tab-actions/tab-actions.component.spec.ts

@@ -124,3 +124,69 @@ export const GET_RESOURCE = gql`
     }
   }
 `;
+
+// === GET RELATED FORMS FROM RESOURCE ===
+
+/** Graphql request for getting resource meta date for a grid */
+export const GET_GRID_RESOURCE_META = gql`
+  query GetGridResourceMeta(
+    $resource: ID!
+    $layoutIds: [ID]
+    $firstLayouts: Int
+    $aggregationIds: [ID]
+    $firstAggregations: Int
+  ) {
+    resource(id: $resource) {
+      id
+      name
+      queryName
+      forms {
+        id
+        name
+      }
+      relatedForms {
+        id
+        name
+        fields
+        resource {
+          id
+          queryName
+          name
+          fields
+        }
+      }
+      layouts(ids: $layoutIds, first: $firstLayouts) {
+        edges {
+          node {
+            id
+            name
+            query
+            createdAt
+            display
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        totalCount
+      }
+      aggregations(ids: $aggregationIds, first: $firstAggregations) {
+        edges {
+          node {
+            id
+            name
+            sourceFields
+            pipeline
+            createdAt
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        totalCount
+      }
+    }
+  }
+`;

libs/shared/src/lib/components/widgets/grid-settings/tab-actions/tab-actions.component.ts renamed to libs/shared/src/lib/components/widgets/common/tab-actions/tab-actions.component.ts

@@ -5,18 +5,42 @@
   </div>
 
   <ng-container formGroupName="card">
-    <!-- RESOURCE SELECTION  -->
-    <div uiFormFieldDirective>
-      <label>{{ 'models.resource.select' | translate }}</label>
-      <ui-graphql-select
-        valueField="id"
-        textField="name"
-        [query]="resourcesQuery"
-        formControlName="resource"
-        [selectedElements]="[selectedResource]"
-        (searchChange)="onResourceSearchChange($event)"
-        [filterable]="true"
-      ></ui-graphql-select>
+    <div class="flex gap-2 flex-wrap">
+      <!-- RESOURCE SELECTION  -->
+      <div uiFormFieldDirective class="flex-1">
+        <label>{{ 'models.resource.select' | translate }}</label>
+        <ui-graphql-select
+          valueField="id"
+          textField="name"
+          [query]="resourcesQuery"
+          formControlName="resource"
+          [selectedElements]="[selectedResource]"
+          (searchChange)="onResourceSearchChange($event)"
+          [filterable]="true"
+        ></ui-graphql-select>
+      </div>
+
+      <!-- TEMPLATE SELECTION -->
+      <div uiFormFieldDirective class="flex-1">
+        <label>{{ 'models.form.template' | translate }}</label>
+        <ui-select-menu formControlName="template">
+          <ui-select-option>-</ui-select-option>
+          <ui-select-option
+            *ngFor="let template of templates"
+            [value]="template.id"
+          >
+            {{ template.name }}
+          </ui-select-option>
+        </ui-select-menu>
+        <ui-icon
+          uiSuffix
+          icon="info_outline"
+          variant="grey"
+          [uiTooltip]="
+            'components.widget.settings.grid.tooltip.template' | translate
+          "
+        ></ui-icon>
+      </div>
     </div>
 
     <!-- SELECT AGGREGATION OR LAYOUT -->

libs/shared/src/lib/components/widgets/grid-settings/tab-actions/tab-actions.module.ts renamed to libs/shared/src/lib/components/widgets/common/tab-actions/tab-actions.module.ts

@@ -38,6 +38,7 @@ import {
 } from '@oort-front/ui';
 import { Dialog } from '@angular/cdk/dialog';
 import { GET_RESOURCES } from '../graphql/queries';
+import { Form } from '../../../../models/form.model';
 
 /** Default number of resources to be fetched per page */
 const ITEMS_PER_PAGE = 10;
@@ -78,6 +79,7 @@ export class SummaryCardGeneralComponent
   @Input() selectedResource: Resource | null = null;
   @Input() selectedLayout: Layout | null = null;
   @Input() selectedAggregation: Aggregation | null = null;
+  @Input() templates: Form[] = [];
 
   @Output() resourceChange = new EventEmitter<Resource | null>();
   @Output() layoutChange = new EventEmitter<Layout | null>();

libs/shared/src/lib/components/widgets/grid-settings/grid-settings.module.ts

@@ -18,6 +18,7 @@
         <shared-summary-card-general
           [tileForm]="tileForm"
           [selectedResource]="selectedResource"
+          [templates]="templates"
           [selectedLayout]="selectedLayout"
           [selectedAggregation]="selectedAggregation"
           (resourceChange)="handleResourceChange($event)"