Merge branch 'add-georchestra-header' into 'develop'

Ajout du header geOrchestra

See merge request !821

README.md

@@ -57,6 +57,25 @@ NODE_ENV=development
     "DISPLAY_FORBIDDEN_PROJECTS_DEFAULT": true
 }
 ```
+### Configuration additionnelle pour geOrchestra
+
+Afin de mieux s'intégrer au SDI geOrchestra, il est possible de modifier le header pour afficher celui de geOrchestra.
+
+Dans le fichier config.json, ajouter :
+```json
+{
+  "GEORCHESTRA_INTEGRATION": {
+    "HEADER": {
+      "LEGACY_HEADER": false,
+      "LEGACY_URL": "/header/",
+      "STYLE": "",
+      "STYLESHEET": "",
+      "HEADER_SCRIPT": ""
+    }
+  }
+}
+```
+
 ### Utilisation sans installation du backend
 
 Il est possible d'utiliser un serveur HTTP local pour utiliser l'API des instances en ligne, sans avoir de problèmes de CORS, pour cela se référer fichier : conf_apache_dev.md

src/App.vue

 <template>
   <div id="app">
-    <AppHeader />
+    <GeorchestraHeader v-if="isGeorchestra" :key="$route.fullPath"/>
+    <AppHeader v-else />
+
 
     <div id="app-content">
       <span id="scroll-top-anchor" />
@@ -26,11 +28,13 @@ import { mapState } from 'vuex';
 
 import AppHeader from '@/components/AppHeader';
 import AppFooter from '@/components/AppFooter';
+import GeorchestraHeader from '@/components/GeorchestraHeader.vue';
 
 export default {
   name: 'App',
 
   components: {
+    GeorchestraHeader,
     AppHeader,
     AppFooter,
   },
@@ -54,7 +58,10 @@ export default {
     ...mapState('projects', [
       'projects',
       'project',
-    ])
+    ]),
+    isGeorchestra() {
+      return this.configuration.GEORCHESTRA_INTEGRATION?.HEADER;
+    },
   },
 };
 </script>
@@ -63,4 +70,4 @@ export default {
 .ui.active.dimmer {
   position: fixed;
 }
-</style>
\ No newline at end of file
+</style>

src/components/GeorchestraHeader.vue

+<template>
+  <div>
+    <geor-header
+      :legacy-header="legacyHeader"
+      :legacy-url="legacyUrl"
+      :style="customStyle"
+      :logo-url="logo"
+      :stylesheet="customStylesheet"
+      :active-app="activeApp"
+    />
+  </div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex';
+
+export default {
+
+  name: 'GeorchestraHeader',
+
+  computed: {
+    ...mapState([
+      'configuration'
+    ]),
+
+    headerConfig() {
+      return this.configuration.GEORCHESTRA_INTEGRATION?.HEADER;
+    },
+    activeApp() {
+      return this.$route.path.includes('my_account') ? 'geocontrib-account' : 'geocontrib';
+    },
+    logo() {
+      return this.configuration.VUE_APP_LOGO_PATH;
+    },
+    legacyHeader() {
+      return this.headerConfig.LEGACY_HEADER;
+    },
+    legacyUrl() {
+      return this.headerConfig.LEGACY_URL;
+    },
+    customStyle() {
+      return this.headerConfig.STYLE;
+    },
+    customStylesheet() {
+      return this.headerConfig.STYLESHEET;
+    },
+    headerScript() {
+      return this.headerConfig.HEADER_SCRIPT;
+    },
+  },
+
+  mounted() {
+    const headerScript = document.createElement('script');
+    headerScript.setAttribute('src', this.headerScript ? this.headerScript : 'https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js');
+    document.head.appendChild(headerScript);
+  },
+};
+</script>

src/main.js

@@ -32,6 +32,7 @@ Vue.component('FontAwesomeIcon', FontAwesomeIcon);
 
 // Setting Vue's production tip configuration
 Vue.config.productionTip = false;
+Vue.config.ignoredElements = ['geor-header'];
 
 // Handling service worker updates and precaching
 var refreshing = false; // Flag to prevent multiple refreshes