From b52b441f486ea9e91d7a77768d668811bd7ce0fa Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 26 Mar 2024 17:38:54 +0100
Subject: [PATCH 1/2] affichage colonne pattern avec un order

---
 ui/src/components/common/TagsInfos.vue        |   5 +-
 ui/src/composable/application/DatePattern.js  |   1 +
 ui/src/composable/application/tags.js         |  18 +-
 .../composable/references/referenceLoader.js  | 112 ++++----
 ui/src/model/application/Component.js         | 259 ++++++++++--------
 ui/src/services/TagService.js                 |   2 +-
 .../views/references/ReferenceTableView.vue   | 168 +++++-------
 7 files changed, 277 insertions(+), 288 deletions(-)

diff --git a/ui/src/components/common/TagsInfos.vue b/ui/src/components/common/TagsInfos.vue
index 2018c06ed..d73b35c61 100644
--- a/ui/src/components/common/TagsInfos.vue
+++ b/ui/src/components/common/TagsInfos.vue
@@ -26,7 +26,10 @@ export default {
     }
 
     function isPresent(tag) {
-      return tag && tag.type !== Tag.NO_TAG && tag.findTaginTAgList(props.tagsColumn);
+      if (tag.type) {
+        return tag && tag.type !== Tag.NO_TAG && tag.findTaginTAgList(props.tagsColumn);
+      }
+      else return tag && tag.tagDefinition !== Tag.ORDER_TAG && tag.findTaginTAgList(props.tagsColumn);
     }
 
     function isSelected(tag) {
diff --git a/ui/src/composable/application/DatePattern.js b/ui/src/composable/application/DatePattern.js
index 149c1acff..6be8e8d6f 100644
--- a/ui/src/composable/application/DatePattern.js
+++ b/ui/src/composable/application/DatePattern.js
@@ -70,6 +70,7 @@ export function patternCheckerDateRef(application, columnName, refId) {
     for (const item of toto) {
       let columns = application.configuration.references[refId].validations[item]?.columns;
       for (const column in columns) {
+        console.log("column de patternCheckerDateRef", columns[column])
         if (columns[column] === columnName) {
           if (
             application.configuration.references[refId].validations[item].checker &&
diff --git a/ui/src/composable/application/tags.js b/ui/src/composable/application/tags.js
index 2071bb81b..72b36582c 100644
--- a/ui/src/composable/application/tags.js
+++ b/ui/src/composable/application/tags.js
@@ -57,14 +57,16 @@ export function buildTags(application, refsOrDatas) {
 export function buildTagsColumns(application, columns, tagsColumn) {
   let tags = {};
   for (let column in columns) {
-    let currentTags = columns[column].tags;
-    currentTags
-      .filter((tag) => tag.type === Tag.DOMAIN_TAG || tag.tagName === Tag.NO_TAG)
-      .forEach((tag) => {
-        if (!tags[tag.tagName]) {
-          tags[tag.tagName] = tag;
-        }
-      });
+    if(columns[column]) {
+      let currentTags = columns[column].tags;
+      currentTags
+          .filter((tag) => tag.type === Tag.DOMAIN_TAG || tag.tagName === Tag.NO_TAG)
+          .forEach((tag) => {
+            if (!tags[tag.tagName]) {
+              tags[tag.tagName] = tag;
+            }
+          });
+    }
   }
   if (tags) {
     services.tagService.sizeCollapseTags(tagsColumn);
diff --git a/ui/src/composable/references/referenceLoader.js b/ui/src/composable/references/referenceLoader.js
index 855994a2d..d60190d7b 100644
--- a/ui/src/composable/references/referenceLoader.js
+++ b/ui/src/composable/references/referenceLoader.js
@@ -1,77 +1,59 @@
 import services from "@/composable/services";
 
 export function referenceLoader(services) {
-  const referenceService = services.referenceService;
-  const references = {};
-  const getOrLoadReferenceById = async function (application, referenceName, key) {
-    let applicationName = application.configuration.applicationDescription.name;
-    let reference = references?.[referenceName]?.[key];
-    if (reference) {
-      return reference;
-    }
-    reference = await referenceService.getReferenceValuesByKey(applicationName, referenceName, key);
-    if (!reference) {
-      return null;
-    }
-    reference = {
-      ...reference,
-      localRefName: services.internationalisationService.localeReferenceNames(
-        referenceName,
-        application
-      ),
-      values: reference?.referenceValues?.[0],
-      localName: getValueDisplay(reference.referenceValues?.[0], application),
+    const referenceService = services.referenceService;
+    const references = {};
+    const getOrLoadReferenceById = async function (application, referenceName, key) {
+        let applicationName = application.configuration.applicationDescription.name;
+        let reference = references?.[referenceName]?.[key];
+        if (reference) {
+            return reference;
+        }
+        reference = await referenceService.getReferenceValuesByKey(applicationName, referenceName, key);
+        if (!reference) {
+            return null;
+        }
+        reference = {
+            ...reference,
+            localRefName: services.internationalisationService.localeReferenceNames(
+                referenceName,
+                application
+            ),
+            values: reference?.referenceValues?.[0],
+            localName: getValueDisplay(reference.referenceValues?.[0], application),
+        };
+        references[referenceName] = references[referenceName] || {};
+        references[referenceName][key] = reference;
+        return reference;
     };
-    references[referenceName] = references[referenceName] || {};
-    references[referenceName][key] = reference;
-    return reference;
-  };
-  return { getOrLoadReferenceById };
-}
-export function getValueDisplay(referenceLocal, application){
-  if(referenceLocal.values["__display_" + services.internationalisationService.getLocale()]) {
-    return referenceLocal.values["__display_" + services.internationalisationService.getLocale()];
-  }  if(application && referenceLocal.values["__display_" + application.configuration.applicationDescription.defaultLanguage]) {
-    return referenceLocal.values["__display_" + application.configuration.applicationDescription.defaultLanguage];
-  } else {
-    return referenceLocal.values["__display_default"]
-  }
+    return {getOrLoadReferenceById};
 }
 
-export function referenceOrderTag(components) {
-  let componentsOrder = Object.values(components).filter(
-    (component) => component.tags.filter((tag) => tag.type === "ORDER_TAG").length > 0
-  );
-  let newComponentsOrder = new Array();
-  for (let i = 1; i <= componentsOrder.length; i++) {
-    newComponentsOrder.push(
-      componentsOrder.filter(
-        (component) => component.tags.filter((tag) => tag.order === i).length > 0
-      )[0]
-    );
-  }
-  return [
-    ...newComponentsOrder,
-    ...Object.values(components).filter(
-      (component) => component.tags.filter((tag) => tag.type === "ORDER_TAG").length === 0
-    ),
-  ];
+export function getValueDisplay(referenceLocal, application) {
+    if (referenceLocal.values["__display_" + services.internationalisationService.getLocale()]) {
+        return referenceLocal.values["__display_" + services.internationalisationService.getLocale()];
+    }
+    if (application && referenceLocal.values["__display_" + application.configuration.applicationDescription.defaultLanguage]) {
+        return referenceLocal.values["__display_" + application.configuration.applicationDescription.defaultLanguage];
+    } else {
+        return referenceLocal.values["__display_default"]
+    }
 }
 
 export function getColumnNameView(columnId, application, refId, column) {
-  if (application.data[refId].componentDescriptions[columnId]) {
-    let importHeader = application.data[refId].componentDescriptions[columnId].importHeader;
-    let exportHeader = column
-      ? column.exportHeader
-      : application.data[refId].componentDescriptions[columnId].exportHeaderName;
-    if (exportHeader !== columnId) {
-      return exportHeader;
-    } else if (importHeader !== undefined && importHeader !== columnId) {
-      return importHeader;
+    if (application.data[refId].componentDescriptions[columnId]) {
+        let importHeader = application.data[refId].componentDescriptions[columnId].importHeader;
+        let exportHeader = column
+            ? column.exportHeader
+            : application.data[refId].componentDescriptions[columnId].exportHeaderName;
+        if (exportHeader !== columnId) {
+            return exportHeader;
+        } else if (importHeader !== undefined && importHeader !== columnId) {
+            return importHeader;
+        } else {
+            return columnId;
+        }
     } else {
-      return columnId;
+        return columnId;
     }
-  } else {
-    return columnId;
-  }
 }
diff --git a/ui/src/model/application/Component.js b/ui/src/model/application/Component.js
index f2653f136..712dec44b 100644
--- a/ui/src/model/application/Component.js
+++ b/ui/src/model/application/Component.js
@@ -1,126 +1,161 @@
-import { Tag } from "@/model/application/Tag";
+import {Tag} from "@/model/application/Tag";
 
 export class Component {
-  static BASIC_COMPONENT = "BasicComponent";
-  static COMPUTED_COMPONENT = "ComputedComponent";
-  static DYNAMIC_COMPONENT = "DynamicComponent";
-  static PATTERN_COMPONENT = "PatternComponent";
-  static CONSTANT_COMPONENT = "ConstantComponent";
-  static UNKNWON_COMPONENT = "ErrorComponent";
-  static MULTIPLICITY_ONE = "ONE";
-  static MULTIPLICITY_MANY = "MANY";
-  type;
-  id;
-  title = "#id";
-  key = false;
-  linkedTo = null;
-  tags = [Tag.NO_TAG_INSTANCE()];
-  componentKey;
-  exportHeader;
-  checker;
-  multiplicity;
-  refLinkedTo;
-  refLinkedToColumn;
-  referenceType;
-  tags;
+    static BASIC_COMPONENT = "BasicComponent";
+    static COMPUTED_COMPONENT = "ComputedComponent";
+    static DYNAMIC_COMPONENT = "DynamicComponent";
+    static PATTERN_COMPONENT = "PatternComponent";
+    static CONSTANT_COMPONENT = "ConstantComponent";
+    static UNKNWON_COMPONENT = "ErrorComponent";
+    static MULTIPLICITY_ONE = "ONE";
+    static MULTIPLICITY_MANY = "MANY";
+    type;
+    id;
+    title = "#id";
+    key = false;
+    linkedTo = null;
+    tags = [Tag.NO_TAG_INSTANCE()];
+    componentKey;
+    exportHeader;
+    checker;
+    multiplicity;
+    refLinkedTo;
+    refLinkedToColumn;
+    referenceType;
+    patternColumnComponents;
 
-  constructor(type, componentKey, exportHeader, checker, tags) {
-    this.type = type;
-    this.id = componentKey;
-    this.exportHeader = exportHeader || componentKey;
-    this.title = componentKey;
-    this.componentKey = componentKey;
-    this.checker = checker;
-    this.multiplicity = checker ? checker.multiplicity : Component.MULTIPLICITY_ONE;
-    this.referenceType = checker ? checker.type : null;
-    this.refLinkedTo = checker ? checker.refType : null;
-    this.refLinkedToColumn = checker ? checker.componentKey : null;
-    this.tags = tags && tags.length ? tags : [Tag.NO_TAG_INSTANCE()];
-  }
+    static compare(a, b) {
+        if (a.order() === b.order()) return a.componentKey.localeCompare(b.componentKey);
+        if (a.order() > b.order()) return 1;
+        return -1;
+    };
 
-  static build(
-    component,
-    referenceName,
-    application,
-    getInternationalizedColumn,
-    internationalize
-  ) {
-    let localName = getInternationalizedColumn(
-      referenceName,
-      component.exportHeader || component.exportHeaderName || component.componentKey,
-      application
-    );
-    let tags = (component.tags || []).map((tag) => Tag.buildTag(tag, internationalize));
-    if (!tags.length) {
-      tags.push(Tag.NO_TAG_INSTANCE());
+    order() {
+        let order = (this.tags || [])
+            .find(tag => tag.tagDefinition === "ORDER_TAG");
+        return order ? order.tagOrder : 99999;
+    };
+
+
+    constructor(type, componentKey, exportHeader, checker, tags) {
+        this.type = type;
+        this.id = componentKey;
+        this.exportHeader = exportHeader || componentKey;
+        this.title = componentKey;
+        this.componentKey = componentKey;
+        this.checker = checker;
+        this.multiplicity = checker ? checker.multiplicity : Component.MULTIPLICITY_ONE;
+        this.referenceType = checker ? checker.type : null;
+        this.refLinkedTo = checker ? checker.refType : null;
+        this.refLinkedToColumn = checker ? checker.componentKey : null;
+        this.tags = tags && tags.length ? tags : [Tag.NO_TAG_INSTANCE()];
     }
-    switch (component?.type) {
-      case Component.BASIC_COMPONENT: {
-        return new BasicComponent(
-          Component.BASIC_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
-        );
-      }
-      case Component.COMPUTED_COMPONENT: {
-        return new ComputedComponent(
-          Component.COMPUTED_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
-        );
-      }
-      case Component.DYNAMIC_COMPONENT: {
-        return new ComputedComponent(
-          Component.DYNAMIC_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
-        );
-      }
-      case Component.PATTERN_COMPONENT: {
-        return new ComputedComponent(
-          Component.PATTERN_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
-        );
-      }
-      case Component.CONSTANT_COMPONENT: {
-        return new ComputedComponent(
-          Component.CONSTANT_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
-        );
-      }
-      default: {
-        return new Component(
-          Component.UNKNWON_COMPONENT,
-          component.componentKey,
-          localName,
-          component.checker,
-          tags
+
+    static build(
+        component,
+        referenceName,
+        application,
+        getInternationalizedColumn,
+        internationalize
+    ) {
+        let localName = getInternationalizedColumn(
+            referenceName,
+            component.exportHeader || component.exportHeaderName || component.componentKey,
+            application
         );
-      }
+        let tags = (component.tags || []).map((tag) => Tag.buildTag(tag, internationalize));
+        if (!tags.length) {
+            tags.push(Tag.NO_TAG_INSTANCE());
+        }
+        switch (component?.type) {
+            case Component.BASIC_COMPONENT: {
+                return new BasicComponent(
+                    Component.BASIC_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags
+                );
+            }
+            case Component.COMPUTED_COMPONENT: {
+                return new ComputedComponent(
+                    Component.COMPUTED_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags
+                );
+            }
+            case Component.DYNAMIC_COMPONENT: {
+                return new ComputedComponent(
+                    Component.DYNAMIC_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags
+                );
+            }
+            case Component.PATTERN_COMPONENT: {
+                return new PatternComponent(
+                    Component.PATTERN_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags,
+                    component.patternColumnComponents
+                );
+            }
+            case Component.CONSTANT_COMPONENT: {
+                return new ComputedComponent(
+                    Component.CONSTANT_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags
+                );
+            }
+            default: {
+                return new Component(
+                    Component.UNKNWON_COMPONENT,
+                    component.componentKey,
+                    localName,
+                    component.checker,
+                    tags
+                );
+            }
+        }
     }
-  }
 }
 
 class BasicComponent extends Component {
-  constructor(type, componentKey, exportHeader, checker, tags) {
-    super(type, componentKey, exportHeader, checker, tags);
-  }
+    constructor(type, componentKey, exportHeader, checker, tags) {
+        super(type, componentKey, exportHeader, checker, tags);
+    }
 }
 
 class ComputedComponent extends Component {
-  constructor(type, componentKey, exportHeader, checker, tags) {
-    super(type, componentKey, exportHeader, checker, tags);
-  }
+    constructor(type, componentKey, exportHeader, checker, tags) {
+        super(type, componentKey, exportHeader, checker, tags);
+    }
 }
+
+class PatternComponent extends Component {
+    patternColumnComponents;
+
+    constructor(type, componentKey, exportHeader, checker, tags, patternColumnComponents) {
+        super(type, componentKey, exportHeader, checker, tags);
+        this.patternColumnComponents = Object.values(patternColumnComponents || [])
+            .map(patternColumnComponent => new PatternColumnComponent(componentKey, patternColumnComponent));
+    }
+}
+
+
+class PatternColumnComponent extends Component {
+    parentComponentKey;
+
+    constructor(parentComponentKey, patternColumnComponent) {
+        super(patternColumnComponent.type, patternColumnComponent.componentKey, patternColumnComponent.exportHeader, patternColumnComponent.checker, patternColumnComponent.tags);
+        this.parentComponentKey = parentComponentKey;
+    }
+}
+
diff --git a/ui/src/services/TagService.js b/ui/src/services/TagService.js
index 9173b046d..3520abe1f 100644
--- a/ui/src/services/TagService.js
+++ b/ui/src/services/TagService.js
@@ -18,7 +18,7 @@ export class TagService extends Fetcher {
     }
     return datas.filter((data) => {
       return data.tags.some((tag) => {
-        if (data.tags.length === 1 && tag.type === "ORDER_TAG") {
+        if (data.tags.length === 1 && tag.tagDefinition === "ORDER_TAG") {
           return true;
         } else {
           return selectedTags.some(
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 84dba9454..2992c303b 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -29,16 +29,16 @@
     <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
     <div v-if="reference && columnsToBeShown && !isLoading">
       <b-table
-        :current-page="currentPage"
-        :data="referenceValues"
-        :is-focusable="true"
-        :is-hoverable="true"
-        :per-page="params.limit"
-        :sticky-header="true"
-        :striped="true"
-        height="72.5vh"
-        paginated
-        style="padding-bottom: 20px; position: relative; z-index: 1"
+          :current-page="currentPage"
+          :data="referenceValues"
+          :is-focusable="true"
+          :is-hoverable="true"
+          :per-page="params.limit"
+          :sticky-header="true"
+          :striped="true"
+          height="72.5vh"
+          paginated
+          style="padding-bottom: 20px; position: relative; z-index: 1"
       >
         <template #pagination>
           <b-pagination
@@ -59,10 +59,10 @@
           />
         </template>
         <b-table-column
-          v-for="column in columnsToBeShown"
-          :key="column.id"
-          :field="column.id"
-          sortable
+            v-for="column in columnsToBeShown"
+            :key="column.id"
+            :field="column.id"
+            sortable
         >
           <template v-slot:header>
             <div v-if="column.tags" class="column" style="padding: 0">
@@ -97,15 +97,15 @@
                 :reference-type="addRefLinkedTo(column.id, column.linkedTo)"
             ></ReferencesManyLink>
             <ReferencesLink
-              v-else-if="column.id !== '#'"
-              :application="application"
-              :column-id="getRefColumnId(props.row, column)"
-              :column-title="getColumnNameView(column.id, application, refId)"
-              :component="props.row"
-              :loaded-references-by-key="{}"
-              :pattern-checker-date="patternCheckerDateRef(application, column.title, refId)"
-              :reference-type="column.refLinkedTo"
-              :value="typeof props.row.values[column.id] === 'string' ? props.row.values[column.id] : props.row.values[column.id].toString()"
+                v-else-if="column.id !== '#'"
+                :application="application"
+                :column-id="getRefColumnId(props.row, column)"
+                :column-title="getColumnNameView(column.id, application, refId)"
+                :component="props.row"
+                :loaded-references-by-key="{}"
+                :pattern-checker-date="patternCheckerDateRef(application, column.title, refId)"
+                :reference-type="column.refLinkedTo"
+                :value="typeof props.row.values[column.id] === 'string' ? props.row.values[column.id] : props.row.values[column.id].toString()"
             ></ReferencesLink>
             <div v-else class="columns">
               <a
@@ -135,10 +135,10 @@
 
       <div class="buttons" style="margin-top: 16px">
         <b-button
-          style="margin-bottom: 15px; float: right"
-          type="is-primary"
-          @click.prevent="downloadResultSearch"
-          >{{ $t("referencesManagement.download") }}
+            style="margin-bottom: 15px; float: right"
+            type="is-primary"
+            @click.prevent="downloadResultSearch"
+        >{{ $t("referencesManagement.download") }}
         </b-button>
       </div>
     </div>
@@ -169,17 +169,16 @@ import FiltersReferenceCollapse from "@/components/common/FiltersReferenceCollap
 import {init} from "@cypress/webpack-dev-server/dist/aut-runner";
 import {patternCheckerDateRef} from "@/composable/application/DatePattern";
 import TagsInfos from "@/components/common/TagsInfos.vue";
-import { Component } from "@/model/application/Component";
+import {Component} from "@/model/application/Component";
 import {
   getColumnNameView,
   referenceLoader,
-  referenceOrderTag,
 } from "@/composable/references/referenceLoader";
-import { lineCountSynthesis } from "@/composable/application/synthesis";
+import {lineCountSynthesis} from "@/composable/application/synthesis";
 
 export default {
   name: "ReferenceTableView",
-  methods: { getColumnNameView, patternCheckerDateRef, init },
+  methods: {getColumnNameView, patternCheckerDateRef, init},
   props: {
     applicationName: String,
     refId: String,
@@ -255,17 +254,17 @@ export default {
       let dataIsType = application.dataTypes[props.refId] ? "dataTypes" : "references";
       changeSubMenuPaths([
         new SubMenuPath(
-          application.dataTypes[props.refId]
-            ? i18n.t("dataTypesManagement.data-types").toLowerCase()
-            : i18n.t("referencesManagement.references").toLowerCase(),
-          () => app.$router.push(`/applications/${props.applicationName}/${dataIsType}`),
-          () => app.$router.push(`/applications`)
+            application.dataTypes[props.refId]
+                ? i18n.t("dataTypesManagement.data-types").toLowerCase()
+                : i18n.t("referencesManagement.references").toLowerCase(),
+            () => app.$router.push(`/applications/${props.applicationName}/${dataIsType}`),
+            () => app.$router.push(`/applications`)
         ),
         new SubMenuPath(
-          application.localRefName ? application.localRefName : props.refId,
-          () =>
-            app.$router.push(`/applications/${props.applicationName}/references/${props.refId}`),
-          () => app.$router.push(`/applications/${props.applicationName}/${dataIsType}`)
+            application.localRefName ? application.localRefName : props.refId,
+            () =>
+                app.$router.push(`/applications/${props.applicationName}/references/${props.refId}`),
+            () => app.$router.push(`/applications/${props.applicationName}/${dataIsType}`)
         ),
       ]);
       changeColumns(services.tagService.toBeShown(tags.value, columns.value));
@@ -321,7 +320,6 @@ export default {
       let dynamicComponents = {};
       let components = {};
       let componentDescriptions = reference?.value?.componentDescriptions;
-      console.log(componentDescriptions)
       for (let component in componentDescriptions) {
         let currentComponent = componentDescriptions[component];
         if (currentComponent.type === "DynamicComponent") {
@@ -337,7 +335,7 @@ export default {
                       "tags." + tagName,
                       tagName
                   );
-        } else if (currentComponent.type !== "AuthorizationScopeComponent") {
+        } else if (currentComponent.type !== "AuthorizationScopeComponent" && currentComponent.type !== "PatternComponentComponent") {
           (components[component] = Component.build(
               currentComponent,
               props.refId,
@@ -352,69 +350,36 @@ export default {
                   );
         }
       }
-      if (components) {
-        changeColumns([
-          ...Object.values(components).sort((c1, c2) => {
-            if (c1.componentKey < c2.componentKey) {
-              return -1;
-            }
-            if (c1.componentKey > c2.componentKey) {
-              return 1;
-            }
-            return 0;
-          }),
-          ...Object.values(dynamicComponents).sort((c1, c2) => {
-            if (c1.title < c2.title) {
-              return -1;
-            }
-            if (c1.title > c2.title) {
-              return 1;
-            }
-            return 0;
-          }),
-        ]);
-      }
-      changeColumns([...referenceOrderTag(columns.value)]);
+      changeColumns([
+        ...Object.values(components || {})
+            .sort(Component.compare)
+            .reduce((accumulator, component) => {
+              accumulator.push(component)
+              if (component.type === "PatternComponent") {
+                component.patternColumnComponents
+                    .sort(Component.compare)
+                    .forEach(componentComponent => accumulator.push(componentComponent))
+              }
+              return accumulator;
+            }, []),
+        ...Object.values(dynamicComponents || {})
+            .sort(Component.compare)
+            .reduce((accumulator, component) => {
+              accumulator.push(component)
+              if (component.type === "PatternComponent") {
+                component.patternColumnComponents
+                    .sort(Component.compare)
+                    .forEach(componentComponent => accumulator.push(componentComponent))
+              }
+              return accumulator;
+            }, [])
+      ]);
       if (referenceValues.value) {
         changeTableValues(Object.values(referenceValues.value).map((refValue) => refValue.values));
       }
-      /*      let dynamicColumns = dynamicComponents.filter((a) => a[1]);
-            for (let i = 0; i < dynamicColumns.length; i++) {
-              changeReferencesDynamic(
-                  await services.referenceService.getReferenceValues(
-                      props.applicationName,
-                      dynamicColumns[i][1].reference,
-                      {
-                        _offset_: params.offset,
-                        _limit_: params.limit,
-                      }
-                  )
-              );
-            }
-      */
-      //let interNameColumn = Object.entries(application.configuration.internationalization.dataComponents);
       for (let i = 0; i < columns.value.length; i++) {
-        /*for (let j = 0; j < interNameColumn.length; j++) {
-          if (interNameColumn[j][0] === reference.value.id) {
-            let listInterHeaderColumn = Object.entries(
-                interNameColumn[j][1].internationalizedDynamicColumns
-            ).filter((a) => a[1]);
-            for (let g = 0; g < listInterHeaderColumn.length; g++) {
-              if (columns.value[i].id === listInterHeaderColumn[g][0]) {
-                let tradNameColumn = Object.entries(listInterHeaderColumn[g][1]).filter(
-                    (a) => a[1]
-                );
-                for (let x = 0; x < tradNameColumn.length; x++) {
-                  if (tradNameColumn[x][0] === window.localStorage.lang) {
-                    columns.value[i].title = tradNameColumn[x][1];
-                  }
-                }
-              }
-            }
-          }
-        }*/
         //TODO
-        if (dynamicComponents[columns.value[i].id]) {
+        if (dynamicComponents[columns?.value[i]?.id] && application.data[props.refId]) {
           changeReferencesDynamic(
               await services.referenceService.getReferenceValues(
                   props.applicationName,
@@ -510,8 +475,9 @@ export default {
       }
       return false;
     }
-    
+
     function multiplicity(column, arrayValues) {
+      console.log("column de multiplicity", column)
       for (let i = 0; i < tableValues.value.length; i++) {
         let showModal = Object.entries(tableValues.value[i]).filter((a) => a[1]);
         for (let j = 0; j < showModal.length; j++) {
-- 
GitLab


From c995c377312b6eb2df6eab1369556e54efdabdfe Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 27 Mar 2024 12:26:22 +0100
Subject: [PATCH 2/2] PatternComponentComponent ordonnance des colonne et
 surcharge affichage header

---
 ui/src/components/references/ReferencesManyLink.vue |  1 -
 ui/src/composable/application/DatePattern.js        |  1 -
 ui/src/composable/references/referenceLoader.js     |  3 +++
 ui/src/model/application/Component.js               | 12 ++++++++++++
 ui/src/services/TagService.js                       |  7 +++----
 ui/src/views/datatype/DataTypesManagementView.vue   |  1 -
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/references/ReferencesManyLink.vue b/ui/src/components/references/ReferencesManyLink.vue
index 8f4ef7853..4351e24fb 100644
--- a/ui/src/components/references/ReferencesManyLink.vue
+++ b/ui/src/components/references/ReferencesManyLink.vue
@@ -157,7 +157,6 @@ export default {
         reference: this.referenceType,
       };
       this.refValues = { ...refValues, ...result };
-      console.log(this.refValues);
       this.$emit("changedRefValues", {
         key: this.value,
         refType: this.referenceType,
diff --git a/ui/src/composable/application/DatePattern.js b/ui/src/composable/application/DatePattern.js
index 6be8e8d6f..149c1acff 100644
--- a/ui/src/composable/application/DatePattern.js
+++ b/ui/src/composable/application/DatePattern.js
@@ -70,7 +70,6 @@ export function patternCheckerDateRef(application, columnName, refId) {
     for (const item of toto) {
       let columns = application.configuration.references[refId].validations[item]?.columns;
       for (const column in columns) {
-        console.log("column de patternCheckerDateRef", columns[column])
         if (columns[column] === columnName) {
           if (
             application.configuration.references[refId].validations[item].checker &&
diff --git a/ui/src/composable/references/referenceLoader.js b/ui/src/composable/references/referenceLoader.js
index d60190d7b..bf4aac42a 100644
--- a/ui/src/composable/references/referenceLoader.js
+++ b/ui/src/composable/references/referenceLoader.js
@@ -42,6 +42,9 @@ export function getValueDisplay(referenceLocal, application) {
 
 export function getColumnNameView(columnId, application, refId, column) {
     if (application.data[refId].componentDescriptions[columnId]) {
+        if(application.data[refId].componentDescriptions[columnId].type === "PatternComponentComponent") {
+            return services.internationalisationService.localeReferenceColumnsNames(refId, columnId, application)
+        }
         let importHeader = application.data[refId].componentDescriptions[columnId].importHeader;
         let exportHeader = column
             ? column.exportHeader
diff --git a/ui/src/model/application/Component.js b/ui/src/model/application/Component.js
index 712dec44b..ee81a1b2c 100644
--- a/ui/src/model/application/Component.js
+++ b/ui/src/model/application/Component.js
@@ -63,6 +63,18 @@ export class Component {
             component.exportHeader || component.exportHeaderName || component.componentKey,
             application
         );
+        if (component.patternColumnComponents) {
+            for (let patternColumnComponent in component.patternColumnComponents) {
+                component.patternColumnComponents[patternColumnComponent].exportHeaderName =
+                    getInternationalizedColumn(
+                        referenceName,
+                        component.patternColumnComponents[patternColumnComponent].exportHeader ||
+                        component.patternColumnComponents[patternColumnComponent].exportHeaderName ||
+                        component.patternColumnComponents[patternColumnComponent].componentKey,
+                        application
+                    );
+            }
+        }
         let tags = (component.tags || []).map((tag) => Tag.buildTag(tag, internationalize));
         if (!tags.length) {
             tags.push(Tag.NO_TAG_INSTANCE());
diff --git a/ui/src/services/TagService.js b/ui/src/services/TagService.js
index 3520abe1f..dbfb45478 100644
--- a/ui/src/services/TagService.js
+++ b/ui/src/services/TagService.js
@@ -4,25 +4,24 @@ import { Tag } from "@/model/application/Tag";
 
 export class TagService extends Fetcher {
   static INSTANCE = new TagService();
-  static HIDDEN_TAG = "__HIDDEN__";
 
   toBeShown(tags, datas) {
     if (!tags || !Object.keys(tags || {}).length) {
       return datas;
     }
     let selectedTags = Object.values(tags).filter((tag) => {
-      return (tag.type === Tag.NO_TAG || tag.type === "DOMAIN_TAG") && tag.selected;
+      return (tag.type === Tag.NO_TAG || tag.type === Tag.DOMAIN_TAG) && tag.selected;
     });
     if (!Object.keys(tags).length) {
       return datas;
     }
     return datas.filter((data) => {
       return data.tags.some((tag) => {
-        if (data.tags.length === 1 && tag.tagDefinition === "ORDER_TAG") {
+        if (data.tags.length === 1 && (tag.tagDefinition === Tag.ORDER_TAG || tag.type === Tag.ORDER_TAG)) {
           return true;
         } else {
           return selectedTags.some(
-            (selectedTag) => selectedTag.tagName === tag.tagName && tag.tagName != "HIDDEN_TAG"
+            (selectedTag) => selectedTag.tagName === tag.tagName && tag.tagName !== Tag.HIDDEN_TAG
           );
         }
       });
diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue
index 06a7e7543..19e1d1670 100644
--- a/ui/src/views/datatype/DataTypesManagementView.vue
+++ b/ui/src/views/datatype/DataTypesManagementView.vue
@@ -360,7 +360,6 @@ export default {
             file
         );
         let referenceSynthesis = result.referenceSynthesis;
-        console.log(referenceSynthesis)
         changeApplication({
           ...application,
           referenceSynthesis,
-- 
GitLab