.eslintignore

+.angular/
+.git/
+.idea/
+.vscode/
+build/
+coverage/
+dist/
+node_modules/
\ No newline at end of file

.eslintrc.json

+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -54,6 +54,5 @@ api/db.json
 # Documentation generated with compodoc
 documentation
 
-CHANGELOG.md
-
-package-lock.json
+# External libs
+/projects

.gitlab/merge_request_templates/default.md

+| :triangular_flag_on_post: Give your MR the same name that the desired squash commit. In doubt, check the conventional commit [doc](https://www.conventionalcommits.org/en/v1.0.0/).|
+| --- |
+
 ## What does this MR do and why?
 
 _Describe in detail what your merge request does and why._
 
-| :warning: Keep an up to date checklist based on your icescrum tasks during all the draft phase to help any other developer who would take the job after you to finish it. |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-
+| :warning: Keep an up to date checklist based on your icescrum tasks during all the draft phase of the MR to help any other developer who would take the job after you to finish it.|
+| --- |
 
 ## Screenshots or screen recordings
 
 _These are strongly recommended to assist reviewers and reduce the time to merge your change._
 
+
 ## How to set up and validate locally (or on alpha)
 
 _List all steps to set up and validate the changes on local environment._
 
 ## MR acceptance checklist
-
 _To be completed by the chosen reviewer._
 
 <!---
@@ -25,11 +27,12 @@ More reading on checklists can be found in the "Checklist Manifesto": http://atu
 "It is common to misconceive how checklists function in complex lines of work. They are not comprehensive how-to guides, whether for building a skyscraper or getting a plane out of trouble. They are quick and simple tools aimed to buttress the skills of expert professionals." - Gawande, Atul. The Checklist Manifesto
 --->
 
+
 ### Quality
 
-- [ ] Confirmed
+* [ ] Confirmed
 
-1. For the code that this change impacts, I believe that the automated tests validate functionality that is highly important to users. If the existing automated tests do not cover this functionality, I have added the necessary additional tests or I have added an issue to describe the automation testing gap and linked it to this MR.
+1. For the code that this change impacts, I believe that the automated tests validate functionality that is highly important to users.  If the existing automated tests do not cover this functionality, I have added the necessary additional tests or I have added an issue to describe the automation testing gap and linked it to this MR.
 1. I have made sure that the sonar quality coverage is up to standards.
 1. I have considered the impact of this change on the front-end, back-end, and database portions of the system where appropriate and applied.
 1. I have tested this MR in all supported browsers or determined that this testing is not needed.
@@ -37,26 +40,26 @@ More reading on checklists can be found in the "Checklist Manifesto": http://atu
 
 ### Performance, reliability and availability
 
-- [ ] Confirmed
+* [ ] Confirmed
 
 1. I am confident that this MR does not harm performance, or I have asked a reviewer to help assess the performance impact.
 1. I have considered the scalability risk based on future predicted growth.
 
 ### Documentation
 
-- [ ] Confirmed
+* [ ] Confirmed
 
-1. I have prepared a squash commit to feed the changelog linked to the current milestone.
+1. The MR is named after the desired squash commit to feed the changelog linked to the current milestone.
 1. I have added/updated documentation (also updated if the changes feature a deprecation) or I have decided that documentation changes are not needed for this MR.
 
 ### Security
 
-- [ ] Confirmed
+* [ ] Confirmed
 
 1. I have confirmed that if this MR does not contains any sensitive informations hidden in the changes.
 
 ### Deployment
 
-- [ ] Confirmed
+* [ ] Confirmed
 
 1. When featured on a self-data project release, i have made sure my app version in the manifest and package.json is incremented and any relative changes to the permissions are clearly written and transmitted to Cozy.

Dockerfile

@@ -15,6 +15,7 @@ RUN npm install --silent
 COPY angular.json .
 COPY tsconfig.json .
 COPY tsconfig.app.json .
+COPY tsconfig.base.json .
 COPY ngsw-config.json .
 COPY /nginx/nginx.conf .
 COPY /src ./src

angular.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "pamn": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "i18n": {
-        "sourceLocale": {
-          "code": "fr",
-          "baseHref": ""
-        },
-        "locales": {
-          "en": {
-            "baseHref": "/en/",
-            "translation": "src/locale/messages.en.xlf"
-          }
-        }
-      },
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "localize": true,
-            "allowedCommonJsDependencies": ["lodash", "leaflet.locatecontrol"],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/sitemap.xml",
-              "src/robots.txt",
-              "src/ngsw-worker.js",
-              "src/ngsw.json",
-              "src/manifest.webmanifest",
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "assets/"
-              }
-            ],
-            "styles": [
-              "src/styles.scss",
-              "./node_modules/leaflet/dist/leaflet.css",
-              "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css"
-            ],
-            "scripts": [],
-            "serviceWorker": true,
-            "ngswConfigPath": "ngsw-config.json",
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "10kb",
-                  "maximumError": "15kb"
-                }
-              ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
-            },
-            "fr": {
-              "localize": ["fr"]
-            },
-            "en": {
-              "localize": ["en"]
-            }
-          },
-          "defaultConfiguration": ""
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "pamn:build",
-            "proxyConfig": "proxy.conf.json"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "pamn:build:production"
-            },
-            "fr": {
-              "browserTarget": "pamn:build:fr"
-            },
-            "en": {
-              "browserTarget": "pamn:build:en"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "pamn:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "pamn:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "pamn:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "pamn"
-}
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "pamn": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "i18n": {
+        "sourceLocale": {
+          "code": "fr",
+          "baseHref": ""
+        },
+        "locales": {
+          "en": {
+            "baseHref": "/en/",
+            "translation": "src/locale/messages.en.xlf"
+          }
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "localize": true,
+            "allowedCommonJsDependencies": ["lodash", "leaflet.locatecontrol"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/sitemap.xml",
+              "src/robots.txt",
+              "src/ngsw-worker.js",
+              "src/ngsw.json",
+              "src/manifest.webmanifest",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "assets/"
+              }
+            ],
+            "styles": [
+              "src/styles.scss",
+              "./node_modules/leaflet/dist/leaflet.css",
+              "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css"
+            ],
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json",
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "10kb",
+                  "maximumError": "15kb"
+                }
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
+            },
+            "fr": {
+              "localize": ["fr"]
+            },
+            "en": {
+              "localize": ["en"]
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "pamn:build",
+            "proxyConfig": "proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "pamn:build:production"
+            },
+            "fr": {
+              "browserTarget": "pamn:build:fr"
+            },
+            "en": {
+              "browserTarget": "pamn:build:en"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "pamn:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "pamn:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "pamn:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "@gouvfr-anct/mediation-numerique": {
+      "projectType": "library",
+      "root": "projects/gouvfr-anct/mediation-numerique",
+      "sourceRoot": "projects/gouvfr-anct/mediation-numerique/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/gouvfr-anct/mediation-numerique/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/gouvfr-anct/mediation-numerique/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/gouvfr-anct/mediation-numerique/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run",
+          "options": {
+            "configPath": "jest.config.js",
+            "tsConfig": "tsconfig.spec.json",
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/gouvfr-anct/mediation-numerique/src/**/*.ts",
+              "projects/gouvfr-anct/mediation-numerique/src/**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "pamn"
+}

jest.config.js

+module.exports = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    '@gouvfr-anct/(.*)': '<rootDir>/dist/@gouvfr-anct/$1',
+  },
+};

jest.setup.ts

+import 'jest-preset-angular/jest-preset';

package.json

@@ -22,13 +22,14 @@
     "@angular/common": "~13.1.1",
     "@angular/compiler": "~13.1.1",
     "@angular/core": "~13.1.1",
-    "@angular/flex-layout": "^10.0.0-beta.32",
+    "@angular/flex-layout": "^13.0.0-beta.38",
     "@angular/forms": "~13.1.1",
     "@angular/platform-browser": "~13.1.1",
     "@angular/platform-browser-dynamic": "~13.1.1",
     "@angular/router": "~13.1.1",
     "@angular/service-worker": "~13.1.1",
     "@asymmetrik/ngx-leaflet": "^8.1.0",
+    "@gouvfr-anct/mediation-numerique": "^0.0.17",
     "@ngx-translate/core": "^13.0.0",
     "ag-grid-angular": "^26.2.0",
     "ag-grid-community": "^26.2.1",
@@ -43,29 +44,44 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/jest": "^13.0.3",
     "@angular-devkit/build-angular": "^13.2.1",
+    "@angular-eslint/builder": "^13.2.1",
+    "@angular-eslint/eslint-plugin": "^13.2.1",
+    "@angular-eslint/eslint-plugin-template": "^13.2.1",
+    "@angular-eslint/schematics": "^13.2.1",
+    "@angular-eslint/template-parser": "^13.2.1",
     "@angular/cli": "^13.1.2",
     "@angular/compiler-cli": "~13.1.1",
     "@angular/localize": "^13.1.1",
     "@compodoc/compodoc": "^1.1.16",
     "@types/jasmine": "~4.0.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/jest": "^27.5.0",
     "@types/leaflet": "^1.5.17",
     "@types/leaflet.locatecontrol": "^0.60.7",
     "@types/node": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.24.0",
+    "@typescript-eslint/parser": "^5.24.0",
     "codelyzer": "^6.0.0",
+    "eslint": "^8.15.0",
+    "eslint-plugin-jest": "^26.2.2",
     "http-server": "^14.1.0",
     "jasmine-core": "~4.1.0",
     "jasmine-spec-reporter": "~5.0.0",
+    "jest": "^27.5.1",
+    "jest-preset-angular": "^11.1.2",
     "karma": "^6.3.9",
     "karma-browserify": "^7.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^13.0.0",
     "prettier": "^2.1.2",
     "protractor": "~7.0.0",
     "standard-version": "^9.3.2",
+    "ts-jest": "^27.1.4",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.5.4"

src/app/app-routing.module.ts

@@ -8,7 +8,6 @@ import { OrientationFormComponent } from './form/orientation-form/orientation-fo
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
 import { LoginGuard } from './guards/login.guard';
-import { DeactivateGuard } from './guards/deactivate.guard';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { LoginComponent } from './login/login.component';
 import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
@@ -18,10 +17,9 @@ import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { StructureResolver } from './resolvers/structure.resolver';
 import { PasswordFormComponent } from './shared/components';
-import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
-import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
-import { StructureListComponent } from './structure-list/structure-list.component';
+import { StructureDetailsWrapperComponent } from './structure/components/structure-details-wrapper/structure-details-wrapper.component';
 import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
+import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
 
 const footerOutletRoute: Route = {
   path: '',
@@ -33,7 +31,7 @@ const routes: Routes = [
   {
     path: 'print',
     outlet: 'print',
-    children: [{ path: 'structure', component: StructureDetailsComponent }, footerOutletRoute],
+    children: [{ path: 'structure', component: StructureDetailsWrapperComponent }, footerOutletRoute],
   },
   {
     path: 'print',
@@ -60,7 +58,7 @@ const routes: Routes = [
       {
         path: '',
         outlet: 'left-pane',
-        component: StructureDetailsComponent,
+        component: StructureDetailsWrapperComponent,
       },
     ],
   },
@@ -74,16 +72,6 @@ const routes: Routes = [
       footerOutletRoute,
     ],
   },
-  {
-    path: 'structures',
-    children: [
-      {
-        path: '',
-        component: StructureListComponent,
-      },
-      footerOutletRoute,
-    ],
-  },
   {
     path: 'legal-notice',
     children: [
@@ -152,7 +140,7 @@ const routes: Routes = [
         path: '',
         outlet: 'left-pane',
         data: { fullScreen: true },
-        component: StructureDetailsComponent,
+        component: StructureDetailsWrapperComponent,
       },
     ],
   },

src/app/app.component.ts

@@ -4,7 +4,6 @@ import { ProfileService } from './profile/services/profile.service';
 import { AuthService } from './services/auth.service';
 import { RouterListenerService } from './services/routerListener.service';
 import { UpdateService } from './services/update.service';
-import { PrintService } from './shared/service/print.service';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +15,6 @@ export class AppComponent implements OnInit {
   public loading = true;
 
   constructor(
-    public printService: PrintService,
     private authService: AuthService,
     private profilService: ProfileService,
     private routerListener: RouterListenerService,

src/app/app.module.ts

-import { LOCALE_ID, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { GeometryPolygonConfiguration, MapModule, StructureModule } from '@gouvfr-anct/mediation-numerique';
 import { ToastrModule } from 'ngx-toastr';
-
+import metropole from '../assets/geojson/metropole.json';
+import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
-
 import { AppComponent } from './app.component';
 import { CartoComponent } from './carto/carto.component';
 import { CustomBreakPointsProvider } from './config/custom-breakpoint';
+import { CustomHttpInterceptor } from './config/http-interceptor';
+import { InitialPosition } from './config/map/initial-position';
+import { MarkerType } from './config/map/marker-type';
+import { ZoomLevel } from './config/map/zoomLevel.enum';
+import { ContactComponent } from './contact/contact.component';
 import { FooterComponent } from './footer/footer.component';
+import { FormViewModule } from './form/form-view/form-view.module';
+import { OrientationComponent } from './form/orientation-form/component/orientation-modal/orientation-modal.component';
+import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
+import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
+import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
+import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
+import { AdminGuard } from './guards/admin.guard';
+import { AuthGuard } from './guards/auth.guard';
+import { DeactivateGuard } from './guards/deactivate.guard';
+import { LoginGuard } from './guards/login.guard';
+import { RoleGuard } from './guards/role.guard';
 import { HeaderComponent } from './header/header.component';
-import { SharedModule } from './shared/shared.module';
-import { MapModule } from './map/map.module';
-import { StructureListComponent } from './structure-list/structure-list.component';
-import { CardComponent } from './structure-list/components/card/card.component';
-import { StructureListSearchComponent } from './structure-list/components/structure-list-search/structure-list-search.component';
-import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
-import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
+import { LoginComponent } from './login/login.component';
+import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
 import { PageComponent } from './page/page.component';
-import { ContactComponent } from './contact/contact.component';
-import { AuthGuard } from './guards/auth.guard';
-import { LoginGuard } from './guards/login.guard';
-import { CustomHttpInterceptor } from './config/http-interceptor';
 import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
-import { AdminGuard } from './guards/admin.guard';
-import { DeactivateGuard } from './guards/deactivate.guard';
+import { StructureResolver } from './resolvers/structure.resolver';
 import { TempUserResolver } from './resolvers/temp-user.resolver';
-import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
+import { GeojsonService } from './services/geojson.service';
 import { RouterListenerService } from './services/routerListener.service';
-import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
-import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
-import { StructureDetailPrintComponent } from './form/orientation-form/component/structure-detail-print/structure-detail-print.component';
-import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
-import { StructurePrintHeaderComponent } from './form/orientation-form/component/structure-print-header/structure-print-header.component';
-import { OrientationComponent } from './form/orientation-form/component/orientation-modal/orientation-modal.component';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '../environments/environment';
-import { StructureResolver } from './resolvers/structure.resolver';
-import { RoleGuard } from './guards/role.guard';
+import { StructureService } from './services/structure.service';
 import { UpdateService } from './services/update.service';
 import { DataShareConsentComponent } from './shared/components/data-share-consent/data-share-consent.component';
-import { FormViewModule } from './form/form-view/form-view.module';
-import { LoginComponent } from './login/login.component';
+import { SharedModule } from './shared/shared.module';
+import { SearchService } from './structure-list/services/search.service';
+import { StructureDetailsActionsComponent } from './structure/components/structure-details-actions/structure-details-actions.component';
+import { StructureDetailsModalsComponent } from './structure/components/structure-details-modals/structure-details-modals.component';
+import { StructureDetailsWrapperComponent } from './structure/components/structure-details-wrapper/structure-details-wrapper.component';
+import { TclAccessComponent } from './structure/components/tcl-access/tcl-access.component';
 import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
+import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
 
 @NgModule({
   declarations: [
@@ -53,11 +57,6 @@ import { StructureExcludeComponent } from './structure/structure-exclude/structu
     HeaderComponent,
     FooterComponent,
     CartoComponent,
-    StructureListComponent,
-    CardComponent,
-    StructureListSearchComponent,
-    ModalFilterComponent,
-    StructureDetailsComponent,
     LegalNoticeComponent,
     PageComponent,
     ContactComponent,
@@ -72,16 +71,27 @@ import { StructureExcludeComponent } from './structure/structure-exclude/structu
     DataShareConsentComponent,
     OrientationComponent,
     LoginComponent,
+    TclAccessComponent,
+    StructureDetailsModalsComponent,
+    StructureDetailsActionsComponent,
     StructureExcludeComponent,
+    StructureDetailsWrapperComponent,
   ],
   imports: [
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,
     SharedModule,
-    MapModule,
+    MapModule.forRoot(
+      metropole as GeometryPolygonConfiguration,
+      ZoomLevel,
+      InitialPosition,
+      MarkerType,
+      GeojsonService
+    ),
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
+    StructureModule.forRoot(SearchService, StructureService),
     FormViewModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,

src/app/carto/carto.component.html

@@ -4,6 +4,7 @@
   </div>
   <div class="panes-container" fxLayout="row">
     <app-structure-list
+      #ref
       (searchEvent)="getStructures($event)"
       [structureList]="structures"
       [location]="currentLocation"
@@ -12,9 +13,29 @@
       [selectedStructure]="currentStructure"
       (updatedStructure)="updateStructures($event)"
       class="left-pane"
-      [ngClass]="{ mapPhone: isMapPhone == true }"
+      [ngClass]="{ mapPhone: isMapPhone === true }"
       fxLayout="column"
-    ></app-structure-list>
+    >
+      <div slot="structure-list-actions">
+        <app-button
+          tabindex="0"
+          (action)="addStructure()"
+          [text]="'Ajouter une structure'"
+          [style]="buttonTypeEnum.Secondary"
+          [extraClass]="'small-text'"
+        ></app-button>
+      </div>
+      <div slot="structure-list-elements">
+        <app-card
+          *ngFor="let structure of ref.structureList"
+          [structure]="structure"
+          [isClaimed]="((structureClaims | async) ?? [])[structure._id]"
+          (showDetails)="ref.showDetails($event)"
+          (hover)="ref.handleCardHover($event)"
+          class="structure-card"
+        ></app-card>
+      </div>
+    </app-structure-list>
     <div class="btnSwitch">
       <app-button
         [style]="buttonTypeEnum.ButtonPhone"
@@ -31,7 +52,7 @@
       [isMapPhone]="isMapPhone"
       [searchedValue]="searchedValue"
       class="right-pane"
-      [ngClass]="{ mapPhone: isMapPhone == true }"
+      [ngClass]="{ mapPhone: isMapPhone === true }"
     ></app-map>
   </div>
 </div>

src/app/carto/carto.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Filter, GeoJson, Structure } from '@gouvfr-anct/mediation-numerique';
+import { ButtonType } from '@gouvfr-anct/mediation-numerique/shared';
 import * as _ from 'lodash';
-import { GeoJson } from '../map/models/geojson.model';
-import { Structure } from '../models/structure.model';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
 import { GeojsonService } from '../services/geojson.service';
 import { StructureService } from '../services/structure.service';
-import { ButtonType } from '../shared/components/button/buttonType.enum';
-import { Filter } from '../structure-list/models/filter.model';
 import { CustomRegExp } from '../utils/CustomRegExp';
 
 @Component({
@@ -28,11 +28,15 @@ export class CartoComponent implements OnInit {
   public isMapPhone = false;
   public searchedValue = null;
   public buttonTypeEnum = ButtonType;
+
+
   constructor(
     private structureService: StructureService,
     private geoJsonService: GeojsonService,
     private activatedRoute: ActivatedRoute,
-    private meta: Meta
+    private meta: Meta,
+    private router: Router,
+    private authService: AuthService
   ) {}
 
   ngOnInit(): void {
@@ -114,11 +118,12 @@ export class CartoComponent implements OnInit {
         }
         return structure;
       })
-    ).then((structureList) => {
+    ).then(async (structureList: Structure[]) => {
       if (sortByDistance) {
         structureList = _.sortBy(structureList, ['distance']);
       }
       this.structures = structureList;
+      // await this.setClaimIndicators(this.profilService.isAdmin());
     });
   }
 
@@ -207,4 +212,16 @@ export class CartoComponent implements OnInit {
   public switchMapList(): void {
     this.isMapPhone = !this.isMapPhone;
   }
+
+  public addStructure(): void {
+    if (!this.authService.isLoggedIn()) {
+      this.router.navigateByUrl('/login');
+    } else {
+      this.router.navigateByUrl('/form/structure');
+    }
+  }
+
+  public isClaimed(structure): Observable<boolean> {
+    return this.structureService.isClaimed(structure._id, null);
+  }
 }

src/app/structure-list/enum/access-modality.enum.ts → src/app/config/map/access-modality.enum.ts

-export enum AccessModality {
-  free = 'accesLibre',
-  numeric = 'telephoneVisio',
-  meetingOnly = 'uniquementSurRdv',
-  meeting = 'surRdv',
-}
+export enum AccessModality {
+  free = 'accesLibre',
+  numeric = 'telephoneVisio',
+  meetingOnly = 'uniquementSurRdv',
+  meeting = 'surRdv',
+}

src/app/config/map/initial-position.ts

+export enum InitialPosition {
+  latitude = 45.764043,
+  longitude = 4.835659,
+}

src/app/map/components/markerType.enum.ts → src/app/config/map/marker-type.ts

-export enum MarkerType {
-  structure = 0,
-  mdm = 1,
-  conseillerFrance = 2,
-  user = 3,
-}
+export enum MarkerType {
+  structure = 0,
+  mdm = 1,
+  conseillerFrance = 2,
+  user = 3,
+}

src/app/map/components/zoomLevel.enum.ts → src/app/config/map/zoomLevel.enum.ts

-export enum ZoomLevel {
-  min = 10,
-  regular = 12,
-  userPosition = 15,
-  max = 19,
-}
+export enum ZoomLevel {
+  min = 10,
+  regular = 12,
+  userPosition = 15,
+  max = 19,
+}

src/app/form/footer-form/footer-form.component.ts

 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { ButtonType } from '@gouvfr-anct/mediation-numerique/shared';
 import { User } from '../../models/user.model';
 import { ProfileService } from '../../profile/services/profile.service';
 import { AuthService } from '../../services/auth.service';
 import { NewsletterService } from '../../services/newsletter.service';
-import { ButtonType } from '../../shared/components/button/buttonType.enum';
 import { Utils } from '../../utils/utils';
 import { accountFormStep } from '../form-view/account-form/accountFormStep.enum';
 import { formType } from '../form-view/formType.enum';