Merge pull request #61 from Avantage-Numerique/dev

Ajout de matamo et ajustements visuels
Avantage-Numerique · Aug 8, 2024 · 6048146 · 6048146
2 parents 4725966 + 8200398
commit 6048146
Show file tree

Hide file tree

Showing 28 changed files with 268 additions and 86 deletions.
diff --git a/.env.exemple b/.env.exemple
@@ -17,6 +17,7 @@ API_HOST_NAME='localhost'
 API_PROTOCOLE='http://'
 API_METHOD='POST'
 API_PORT='8000'
+API_URL='http://localhost:8000'
 
 FROMSERVER_API_HOST_NAME='localhost'
 FROMSERVER_API_PROTOCOLE='http://'
@@ -37,4 +38,7 @@ PING_INTERVAL=10000
 ## PUBLIC
 NEXT_PUBLIC_APP_URL='http://localhost:3000'
 NEXT_PUBLIC_APP_API_URL='http://localhost:3000'
-NEXT_PUBLIC_API_URL='http://localhost:8000'
+NEXT_PUBLIC_API_URL='http://localhost:8000'
+
+NEXT_PUBLIC_MATOMO_URL=''
+NEXT_PUBLIC_MATOMO_SITE_ID=''
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@popperjs/core": "^2.11.6",
     "@shopify/draggable": "^1.0.0-beta.8",
+    "@socialgouv/matomo-next": "^1.9",
     "blotter": "^1.0.0",
     "bootstrap": "^5.3.0",
     "chroma-js": "^2.4.2",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,22 +1,30 @@
+import React, {useEffect} from "react";
 import {getIronSession} from "iron-session";
 import App from "next/app";
 import {appDefaultSessionOptions} from "@/src/authentification/session/Session";
 import {AuthProvider} from '@/src/authentification/context/auth-context';
 import Layout from '@/src/layouts/Layout';
 import {getVisitorDataFromContext} from "@/src/authentification/context/visitor-context";
 import {verifyToken} from "@/auth/callbacks/verify-token.callback";
-
+import CookieBanner from "@/common/widgets/CookieBanner/CookieBanner";
 /**
  * Import global SCSS files
  */
 import '@/styles/main.scss';
+import useWebStats from "@/src/monitoring/hooks/useWebStats";
+
 
 // Extends basic Javascript for the project.
-import "@/src/helpers/ExtendedString";
-import CookieBanner from "@/common/widgets/CookieBanner/CookieBanner";
-import React from "react";
+// import "@/src/helpers/ExtendedString";
 
 function MyApp({Component, pageProps, user, serverCookiesChoices}) {
+
+    const webStats = useWebStats();
+    const cookieCHoices = serverCookiesChoices;
+
+    useEffect(() => {
+        webStats.init(cookieCHoices);
+    }, []);
     /**
      * Main app render.
      */

diff --git a/pages/searchResults/index.js b/pages/searchResults/index.js
@@ -8,6 +8,7 @@ import Button from "@/src/common/FormElements/Button/Button";
 import Icon from "@/src/common/widgets/Icon/Icon";
 import {lang} from "@/src/common/Data/GlobalConstants";
 import {getBadgesInfo} from "@/src/DataTypes/Badges/BadgesSection";
+import useWebStats from "@/src/monitoring/hooks/useWebStats";
 
 const SearchResults = (props) => {
 
@@ -17,7 +18,7 @@ const SearchResults = (props) => {
     const [filter, setFilter] = useState([])
     const [nearTaxonomyObject, setNearestTaxonomyObject] = useState(undefined)
 
-
+    const webStats = useWebStats();
     const updateFilterState = (filterType) => {
         if(filterType === "all")
             setFilter([]);
@@ -37,11 +38,15 @@ const SearchResults = (props) => {
         async function searchRequest() {
 
             let response = [];
-            if(router.query.searchIndex){
-                response = await getResultsRouteResponse(router.query.searchIndex);
-                const nearTaxonomy = await getNearestTaxonomyToSearchIndex(router.query.searchIndex)
-                setNearestTaxonomyObject(nearTaxonomy.data)
-                setSearchMessage("par texte")
+            const searchIndex = router.query.searchIndex;
+            if(searchIndex){
+                response = await getResultsRouteResponse(searchIndex);
+                const nearTaxonomy = await getNearestTaxonomyToSearchIndex(searchIndex);
+                setNearestTaxonomyObject(nearTaxonomy.data);
+                setSearchMessage("par texte");
+
+                const totalSearchRequestResults = response.data?.length ?? 0;
+                webStats.push(['trackSiteSearch', searchIndex, (nearTaxonomy?.nearestTaxonomy?.name ?? undefined), totalSearchRequestResults]);
             }
 
             if(router.query.linkId){
@@ -53,11 +58,12 @@ const SearchResults = (props) => {
                 response = await getEntityTypeResponse(router.query.entityType);
                 setSearchMessage("par type d'entité");
             }
+
             setSearchList(response.data);
         }
         searchRequest();
     }, [router.asPath])
-    
+
     const getResultsRouteResponse = (searchIndex) => {
         return clientSideExternalApiRequest("/search/?searchIndex="+searchIndex, { method: 'GET'});
     }
@@ -93,12 +99,14 @@ const SearchResults = (props) => {
             }
             filteredList = filteredList.filter( (el) => { return el.type === entityType })
         }
+        const searchCount = filteredList?.length;
+
 
         return (
             <div className="py-4">
                 <h3>{resultMessage}</h3>
                 {
-                    filteredList?.length > 0 ?
+                    searchCount > 0 ?
                     <EntitiesGrid className={"row"} feed={filteredList.filter(el => el.type !== "Taxonomy")} badgesInfo={props.badgesInfo}></EntitiesGrid>
                     :
                     <div>Aucune entité trouvée, réessayer avec d'autre critère de recherche</div>
@@ -237,7 +245,7 @@ const SearchResults = (props) => {
                                 <ul>
                                     { nearTaxonomyObject.otherNearbyTaxonomy.slice(0,8).map( (nearTaxo, index) => {
                                         return (
-                                            <li key={"nearTaxoList-"+nearTaxo._id}>
+                                            <li key={index+"nearTaxoList-"+nearTaxo._id}>
                                                 <a href={`/categories/${nearTaxo?.category}/${nearTaxo?.slug}`}>{nearTaxo.name}</a>
                                             </li>)
                                     })}

diff --git a/src/DataTypes/Entity/models/ApiEntityModel.js b/src/DataTypes/Entity/models/ApiEntityModel.js
@@ -101,7 +101,7 @@ class ApiEntityModel {
 
     static domainsToSelectOptions(domains){
         //If domains is from entity formState
-        if(domains?.length === undefined && domains.domain)
+        if(domains?.length === undefined && domains?.domain)
             return [{ value : domains.domain._id, label : domains.domain.name, color : getColor(domains.domain) }]
 
         if (Array.isArray(domains)) {

diff --git a/src/DataTypes/Event/component/layout/single/EventSingleView.js b/src/DataTypes/Event/component/layout/single/EventSingleView.js
@@ -63,7 +63,7 @@ const EventSingleView = ({data}) => {
     const [formatEnumState, setFormatEnumState] = useState(undefined);
 
     /******* Sorted lists ********/
-    const sortedTeam = team?.[0]?.subMeta?.order ? team.sort((a,b) => a.subMeta.order - b.subMeta.order) : team;
+    const sortedTeam = team?.[0]?.subMeta?.order !== undefined ? team.sort((a,b) => a.subMeta.order - b.subMeta.order) : team;
 
     useEffect( () => {
         const getEventFormatEnum = async () => {

diff --git a/src/DataTypes/Organisation/components/layouts/single/OrganisationSingleView.js b/src/DataTypes/Organisation/components/layouts/single/OrganisationSingleView.js
@@ -47,8 +47,10 @@ const OrganisationSingleView = ({ data }) => {
         url,
         location,
         meta,
-        projects,
+        creatorOfProjects,
+        projectsPartner,
         events,
+        creatorOfEvents,
         equipment,
         //__v,
         //_id
@@ -58,9 +60,9 @@ const OrganisationSingleView = ({ data }) => {
     const model = new Organisation(data);
 
     /******* Sorted lists ********/
-    const sortedOffers = offers?.[0]?.subMeta?.order ? offers.sort((a,b) => a.subMeta.order - b.subMeta.order) : offers;
-    const sortedTeam = team?.[0]?.subMeta?.order ? team.sort((a,b) => a.subMeta.order - b.subMeta.order) : team;
-
+    const sortedOffers = offers?.[0]?.subMeta?.order !== undefined ? offers.sort((a,b) => a.subMeta.order - b.subMeta.order) : offers;
+    const sortedTeam = team?.[0]?.subMeta?.order !== undefined ? team.sort((a,b) => a.subMeta.order - b.subMeta.order) : team;
+    const sortedEquipment = equipment?.[0]?.subMeta?.order !== undefined ? equipment.sort((a, b) => a?.subMeta?.order - b?.subMeta?.order) : equipment;
 
     const breadcrumbLabels = {
         "organisations": lang.Organisations,
@@ -77,7 +79,6 @@ const OrganisationSingleView = ({ data }) => {
         setBreadCrumb(breadcrumbsRoutes)
     }, [name]);
 
-
     const Header = (
         <SingleBaseHeader
             title={(
@@ -130,7 +131,7 @@ const OrganisationSingleView = ({ data }) => {
             </SingleInfo>
 
             {/* Team */}
-            <SingleInfo 
+            <SingleInfo
                 title={lang.teamMembers}
                 displayCondition={sortedTeam.length > 0}
                 cardLayout
@@ -143,50 +144,68 @@ const OrganisationSingleView = ({ data }) => {
                 />
             </SingleInfo>
 
-            {/* Projects */}
-            <SingleInfo 
-                title={`${lang.plural(lang.Project, lang.Projects, projects.length)}`} 
-                displayCondition={projects.length > 0}
+            {/* Creator of Projects */}
+            <SingleInfo
+                title={`${lang.plural(lang.projectCreated, lang.projectsCreated, creatorOfProjects.length)}`}
+                displayCondition={creatorOfProjects?.length > 0}
+                cardLayout
+            >
+                <EntitiesTagGrid feed={creatorOfProjects} />
+            </SingleInfo>
+
+            {/* Project partner */}
+            <SingleInfo
+                title={`${lang.plural(lang.projectPartner, lang.projectsPartner, projectsPartner.length)}`}
+                displayCondition={projectsPartner?.length > 0}
                 cardLayout
             >
-                <EntitiesTagGrid feed={projects} />
+                <EntitiesTagGrid feed={projectsPartner} />                
             </SingleInfo>
 
-            {/* Events */}
-            <SingleInfo 
+            {/* CreatorOfEvents */}
+            <SingleInfo
+                title={`${lang.plural(lang.creatorOfEvent, lang.creatorOfEvents, creatorOfEvents.length)}`}
+                displayCondition={creatorOfEvents?.length > 0}
+                cardLayout
+            >
+                <EntitiesTagGrid feed={creatorOfEvents} />
+            </SingleInfo>
+
+            {/* Events organizer */}
+            <SingleInfo
                 title={`${lang.plural(lang.organizerOfEvent, lang.organizerOfEvents, events.length)}`}
-                displayCondition={events.length > 0}
+                displayCondition={events?.length > 0}
                 cardLayout
             >
                 <EntitiesTagGrid feed={events} />
             </SingleInfo>
 
             {/* Equipment */}
-            <SingleInfo 
+            <SingleInfo
                 title={lang.EquipmentsOwned}
-                displayCondition={equipment && equipment.length > 0}
+                displayCondition={sortedEquipment && sortedEquipment.length > 0}
                 cardLayout
             >
                 <ul className={`container mt-2 mb-0 ${styles["equipment-container"]}`}>
                     <li className="row mb-2">
-                        <div className="d-flex">
-                            <div className={`text-secondary-darker ${styles["equipment-row__qty"]}`}>{lang.Qty}</div>
+                        <div className={`d-flex ${styles["column-labels"]}`}>
+                            <div className={`text-secondary-darker ${styles["equipment-row-qty-label"]}`}>{lang.Qty}</div>
                             <div className={`col text-secondary-darker`}>{lang.label}</div>
                             <div className="col text-secondary-darker">{lang.modelName}</div>
                             <div className="col text-secondary-darker">{lang.brand}</div>
                         </div>
                     </li>
-                    {equipment && equipment.map((equip, index) => {
+                    {sortedEquipment && sortedEquipment.map((equip, index) => {
                         const equipmentModel = new Equipment(equip.equipment);
                         return (
                             <li className={` ${styles["equipment-row"]} row rounded py-2 mt-2`} key={`orgEquip${index}`}>
                                 <Link href={equipmentModel.singleLink} title={equipmentModel.name}>
-                                    <div className="d-flex">
-                                        <div className={`${styles["equipment-row__qty"]} text-center`}>{equip.qty}</div>
+                                    <span className={` ${styles["responsive-list"]}`}>
+                                        <div className={`${styles["equipment-row__qty"]}`}>{equip.qty}</div>
                                         <div className={`col ${styles["equipment-row__name"]}`}>{equipmentModel.label}</div>
-                                        <div className="col">{equipmentModel.modelName}</div>
-                                        <div className="col">{equipmentModel.brand}</div>
-                                    </div>
+                                        <div className={`col ${styles["equipment-row__modelName"]}`}>{equipmentModel.modelName}</div>
+                                        <div className={`col ${styles["equipment-row__brand"]}`}>{equipmentModel.brand}</div>
+                                    </span>
                                 </Link>
                             </li>
                         )

diff --git a/src/DataTypes/Organisation/components/layouts/single/OrganisationSingleView.module.scss b/src/DataTypes/Organisation/components/layouts/single/OrganisationSingleView.module.scss
@@ -1,13 +1,64 @@
 .equipment-container {
-
-    .equipment-row {
-        background-color: lighten($secondary-dark, 15%);
-        cursor: pointer;
-        transition: 0.3s ease-out;
-
-        &:hover { background-color: $secondary-dark; }
+
+    //Small screen
+    @include media-breakpoint-down(lg){
+        .column-labels {
+            position: absolute;
+            visibility: hidden;
+        }
+        .equipment-row {
+            background-color: lighten($secondary-dark, 15%);
+            transition: 0.3s ease-out;
+            &:hover { background-color: $secondary-dark; }
+
+            div {
+                border-bottom: 2px solid;
+                border-bottom-color: darken($secondary-dark, 15%);
+            }
+            .equipment-row__qty::before {
+                content: "Qte : ";
+            }
+            .equipment-row__name::before {
+                content: "Nom : ";
+            }
+            .equipment-row__modelName::before {
+                content: "Modèle : ";
+            }
+            .equipment-row__brand::before {
+                content: "Marque : ";
+            }
+            .equipment-row__brand {
+                border-bottom: none;
+            }
+        }
+        .responsive-list {
+            display : block;
+        }
+    }
+
+    //Large screen
+    @include media-breakpoint-up(lg){
+        .equipment-row {
+            background-color: lighten($secondary-dark, 15%);
+            cursor: pointer;
+            transition: 0.3s ease-out;
+            &:hover { background-color: $secondary-dark; }
+
+            div {
+                border-bottom: none;
+            }
+        }
+        .responsive-list {
+            display: flex;
+        }
+        //.equipment-row__name
+        //.equipment-row__modelName
+        //.equipment-last__brand
+        .equipment-row__qty { width: 4ch; padding-left: 0.6rem; }
     }
-    .equipment-row__qty { width: 4ch; }
+
+    .equipment-row-qty-label { width: 4ch;}
+
 
 
 }