feat(titres): ajoute une barre d'accès rapide aux titres (#7)

* feat(titres): ajoute une barre d'accès rapide aux titres

* feat(titres): accède rapidement à un titre

* test(domaine): ajoute une story sur le composant Domaine

* chore(ui): ajoute des tests sur la visualisation des domaines

* real test

* separate lint and format

* new proposal for lint-staged

* ajoute titresTypesTypes au common

* feat(titres): corrige des détails

* fix test

Co-authored-by: vmaubert <v.maubert@code-troopers.com>

.github/workflows/common.yml

+name: common/ci
+on:
+  push:
+concurrency:
+  group: common-ci-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '17.8'
+          cache: 'npm'
+      - name: Npm install
+        run: |
+          npm set-script prepare ""
+          npm ci
+          npm run lint --workspace=packages/common
+        env:
+          CI: true
+      - name: Unit tests
+        run: npm run test --workspace=packages/common

Dockerfile.api

@@ -2,6 +2,7 @@ FROM node:17.8-alpine as build-stage
 WORKDIR /app
 
 COPY package*.json /app/
+COPY packages/common/package.json /app/packages/common/package.json
 COPY packages/api/package.json /app/packages/api/package.json
 
 # On désactive husky
@@ -20,10 +21,13 @@ RUN ln -sf /dev/stdout ./app.log
 
 COPY --from=build-stage /app/package.json ./
 COPY --from=build-stage /app/packages/api/package.json ./packages/api/
+COPY --from=build-stage /app/packages/common/package.json ./packages/common/
 COPY --from=build-stage /app/packages/api/dist/ ./packages/api/dist/
 COPY --from=build-stage /app/node_modules ./node_modules/
 # nous avons besoin des sources pour lancer certains scripts manuellement
 COPY --from=build-stage /app/packages/api/src ./packages/api/src/
 COPY --from=build-stage /app/packages/api/tsconfig.json ./packages/api/
+COPY --from=build-stage /app/packages/common/src ./packages/common/src/
+COPY --from=build-stage /app/packages/common/tsconfig.json ./packages/common/
 
 CMD ["npm", "start", "-w", "packages/api"]

Dockerfile.ui

@@ -6,6 +6,7 @@ LABEL maintainer=francois.romain@beta.gouv.fr
 WORKDIR /app
 
 COPY package*.json /app/
+COPY packages/common/package.json /app/packages/common/package.json
 COPY packages/ui/package.json /app/packages/ui/package.json
 # On désactive husky
 RUN npm set-script prepare ""

docker-compose.dev.yml

@@ -18,8 +18,8 @@ services:
       - ${API_PORT}
     volumes:
       - files:/app/files
-      - ./.env:/app/.env
-      - ./app.log:/app/app.log
+      - ./.env:/.env
+      - ./app.log:/app.log
     networks:
       - default
       - nginx-proxy
@@ -35,8 +35,8 @@ services:
     environment:
       PGHOST: db
     volumes:
-      - files:/app/files
-      - ./.env:/app/.env
+      - files:/files
+      - ./.env:/.env
     networks:
       - default
       - nginx-proxy

docker-compose.local.yml

@@ -13,7 +13,7 @@ services:
     expose:
       - ${API_PORT}:${API_PORT}
     volumes:
-      - ./.env:/packages/api/.env
+      - ./.env:/.env
 
   cron:
     container_name: camino_api_cron
@@ -26,7 +26,7 @@ services:
     environment:
       PGHOST: db
     volumes:
-      - ./.env:/packages/api/.env
+      - ./.env:/.env
 
   db:
     container_name: camino_api_db

docker-compose.yml

@@ -15,9 +15,9 @@ services:
     expose:
       - ${PORT}
     volumes:
-      - files:/app/files
-      - ./.env:/app/.env
-      - ./app.log:/app/app.log
+      - files:/files
+      - ./.env:/.env
+      - ./app.log:/app.log
     networks:
       - default
       - nginx-proxy
@@ -31,8 +31,8 @@ services:
     environment:
       PGHOST: db
     volumes:
-      - files:/app/files
-      - ./.env:/app/.env
+      - files:/files
+      - ./.env:/.env
     networks:
       - default
       - nginx-proxy

package.json

@@ -8,6 +8,7 @@
   "description": "Le cadastre minier numérique ouvert",
   "workspaces": [
     "packages/api",
+    "packages/common",
     "packages/ui"
   ],
   "private": true,
@@ -22,14 +23,16 @@
   "homepage": "https://github.com/MTES-MCT/camino#readme",
   "scripts": {
     "prepare": "husky install",
-    "test": "npm run test -w packages/api && npm run test -w packages/ui"
+    "test": "npm run test --workspaces",
+    "lint": "npm run lint --workspaces"
   },
   "lint-staged": {
-    "packages/ui/*.{js,ts,vue}": "eslint --cache --fix",
-    "packages/ui/*.css": "stylelint --fix",
-    "packages/ui/*.{js,css}": "prettier --write",
-    "packages/api/*.{js,ts}": "eslint --cache --fix",
-    "packages/api/*.{ts,js,graphql}": "prettier --write"
+    "packages/ui/**/*.{js,ts,vue}": "eslint --cache --fix",
+    "packages/ui/**/*.css": "stylelint --fix",
+    "packages/ui/**/*.{js,css}": "prettier --write",
+    "packages/api/**/*.{js,ts}": "eslint --cache --fix",
+    "packages/api/**/*.{ts,js,graphql}": "prettier --write",
+    "packages/common/**/*.ts": ["npm run lint -w packages/common", "npm run format -w packages/common"]
   },
   "devDependencies": {
     "husky": "^7.0.4",
@@ -60,6 +63,12 @@
           "pkgRoot": "./packages/ui"
         }
       ],
+      [
+        "@semantic-release/npm",
+        {
+          "pkgRoot": "./packages/common"
+        }
+      ],
       "@semantic-release/git"
     ]
   }

packages/api/src/dev/api-communes-call.js

-import 'dotenv/config'
+import 'dotenvp/config'
 
 import { apiGeoGet } from '../tools/api-geo'
 

packages/api/src/init.ts

-import 'dotenv/config'
-
+import dotenv from 'dotenv'
+import { resolve } from 'path'
 import { knexInit } from './knex'
 import { knexConfig } from './knex/config'
 
+dotenv.config({ path: resolve(process.cwd(), '../../.env') })
+
 knexInit(knexConfig)

packages/common/package.json

+{
+  "name": "camino-common",
+  "version": "1.0.0",
+  "description": "Le cadastre minier numérique ouvert",
+  "private": true,
+  "scripts": {
+    "test": "ava",
+    "format": "prettier --write src",
+    "lint": "eslint --fix"
+  },
+  "devDependencies": {
+    "ava": "^4.1.0",
+    "ts-node": "^10.7.0"
+  },
+  "ava": {
+    "extensions": [
+      "ts"
+    ],
+    "require": [
+      "ts-node/register"
+    ]
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended",
+      "standard",
+      "prettier"
+    ],
+    "env": {
+      "node": true
+    },
+    "plugins": [
+      "jest",
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "newline-before-return": 1,
+      "no-use-before-define": 0,
+      "no-redeclare": 0,
+      "no-return-await": "error",
+      "default-param-last": 0,
+      "no-unused-vars": 0,
+      "@typescript-eslint/explicit-function-return-type": 0,
+      "@typescript-eslint/explicit-module-boundary-types": 0,
+      "@typescript-eslint/no-empty-interface": 0,
+      "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-non-null-assertion": 0,
+      "@typescript-eslint/no-var-requires": 0,
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ]
+    }
+  }
+}

packages/common/src/definition.ts

+export interface Definition<T> {
+  id: T
+  nom: string
+  description: string
+  ordre: number
+}

packages/common/src/domaines.test.ts

+import test from 'ava'
+import { Domaines, DOMAINES_IDS } from './domaines'
+
+test('domaine', t => {
+  t.is(Domaines.c, Domaines[DOMAINES_IDS.CARRIERES])
+})

packages/common/src/domaines.ts

+import { Definition } from './definition'
+
+export const DOMAINES_IDS = {
+  METAUX: 'm',
+  CARRIERES: 'c',
+  FOSSILES: 'f',
+  GEOTHERMIE: 'g',
+  HYDROCARBURE: 'h',
+  RADIOACTIF: 'r',
+  SOUTERRAIN: 's',
+  GRANULATS_MARINS: 'w',
+  INDETERMINE: 'i'
+} as const
+
+export type DomaineId = typeof DOMAINES_IDS[keyof typeof DOMAINES_IDS]
+
+export const Domaines: { [key in DomaineId]: Definition<key> } = {
+  c: {
+    id: 'c',
+    nom: 'carrières',
+    description:
+      'Domaine couvrant les zones spéciales de carrières à terre qui incluent des substances minérales ou fossiles de carrières rares ou nécessaires pour satisfaire les besoins des consommateurs et l’intérêt économique national ou régional.',
+    ordre: 3
+  },
+  f: {
+    id: 'f',
+    nom: 'combustibles fossiles',
+    description:
+      'Domaine minier auquel appartiennent les combustibles fossiles, la tourbe exceptée.',
+    ordre: 5
+  },
+  g: {
+    id: 'g',
+    nom: 'géothermie',
+    description:
+      "Domaine auquel appartiennent les gîtes renfermés dans le sein de la terre dont on peut extraire de l'énergie sous forme thermique, notamment par l'intermédiaire des eaux chaudes et des vapeurs souterraines qu'ils contiennent.",
+    ordre: 7
+  },
+  h: {
+    id: 'h',
+    nom: 'hydrocarbures liquides ou gazeux',
+    description:
+      "Domaine minier auquel appartiennent des hydrocarbures qu'ils soient sous forme liquide ou gazeuse.",
+    ordre: 4
+  },
+  i: {
+    id: 'i',
+    nom: 'indéterminé',
+    description: 'Domaine indéterminé',
+    ordre: 9
+  },
+  m: {
+    id: 'm',
+    nom: 'minéraux et métaux',
+    description:
+      'Domaine minier auquel appartiennent les substances minérales non énergétiques et non radioactives classées dans la catégorie des substances de mines, notemment certains métaux, gaz, sels et terres-rares.',
+    ordre: 1
+  },
+  r: {
+    id: 'r',
+    nom: 'éléments radioactifs',
+    description:
+      'Domaine minier auquel appartiennent les substances minérales radioactives classés dans la catégorie des substances de mines.',
+    ordre: 6
+  },
+  s: {
+    id: 's',
+    nom: 'stockages souterrains',
+    description:
+      "Domaine auquel appartiennent les cavités souterraines naturelles ou artificielles ou formations souterraines naturelles présentant les qualités requises pour constituer des réservoirs étanches ou susceptibles d'être rendus tels, en vue du stockage de gaz naturel, d'hydrocarbures liquides, liquéfiés ou gazeux ou de produits chimiques à destination industrielle.",
+    ordre: 8
+  },
+  w: {
+    id: 'w',
+    nom: 'granulats marins',
+    description:
+      'Domaine auquel appartiennent les substances de carrières situés dans les fonds marins du domaine public.',
+    ordre: 2
+  }
+}

packages/common/src/titresTypesTypes.ts

+import { Definition } from './definition'
+
+export const TITRES_TYPES_TYPES_IDS = {
+  AUTORISATION_DE_PROSPECTION: 'ap',
+  AUTORISATION_DE_RECHERCHE: 'ar',
+  AUTORISATION_D_EXPLOITATION: 'ax',
+  CONCESSION: 'cx',
+  INDETERMINE: 'in',
+  PERMIS_EXCLUSIF_DE_CARRIERES: 'pc',
+  PERMIS_EXCLUSIF_DE_RECHERCHES: 'pr',
+  PERMIS_D_EXPLOITATION: 'px'
+} as const
+export type TitresTypesTypesId =
+  typeof TITRES_TYPES_TYPES_IDS[keyof typeof TITRES_TYPES_TYPES_IDS]
+
+export const TitresTypesTypes: {
+  [key in TitresTypesTypesId]: Definition<key>
+} = {
+  ap: {
+    id: 'ap',
+    nom: 'autorisation de prospections préalables',
+    description:
+      "Cette autorisation est applicable aux granulats marins et aux hydrocarbures liquides ou gazeux. Elle donne le droit non exclusif de solliciter l’exécution de tous travaux de recherches en mer destinés à acquérir des connaissances sur le contexte géologique et les gisements du sous-sol marin. Son titulaire ne peut pas disposer des éventuels gisements identifiés. Les sondages dépassant une profondeur de 300 mètres à partir du fond de la mer sont exclus. Sa durée ne peut excéder deux ans. L'autorisation de prospection préalable n'inclut pas d'autorisation de travaux miniers.",
+    ordre: 1
+  },
+  ar: {
+    id: 'ar',
+    nom: 'autorisation de recherches',
+    description:
+      "Cette autorisation minière donne un droit de prospection destiné à caractériser un gisement pressenti. Ensuite le titulaire pourra éventuellement faire valoir son droit d’inventeur. Il s’agit généralement de périmètres n'excédant pas quelques kilomètres carrés. Elle se décline pour :\r\n- la géothermie , la durée n'excédant pas trois ans ;\r\n- dans les zones spéciales de carrières pour une durée de trois ans renouvelable sans limite pour la même durée.\r\n- pour les minéraux et métaux, en Guyane, afin d’effectuer des travaux de recherches avec l’accord du propriétaire du sol. Cette autorisation porte exclusivement sur le domaine privé forestier de l’Etat. Elle est accordée par l’Office National des Forêts, mandataire de l’Etat, sous la conduite du préfet.",
+    ordre: 2
+  },
+  ax: {
+    id: 'ax',
+    nom: "autorisation d'exploitation",
+    description:
+      "Cette autorisation minière donne un droit d’exploitation d’un gisement de minerais ou de métaux sur une zone n'excédant pas un kilomètre carré dans les départements et régions d’outre-mer. Sa durée de validité est de 4 ans renouvelable une fois.",
+    ordre: 4
+  },
+  cx: {
+    id: 'cx',
+    nom: 'concession',
+    description:
+      'Ce titre donne un droit d’exploitation. Il est applicable à tous les domaines miniers excepté dans les zones spéciales de carrières pour ces substances. Elle est accordée pour une durée maximale de cinquante ans et peut faire l’objet de prolongations successives de vingt-cinq ans maximum. La concession donne également l’exclusivité des droits de prospection sur les substances concédées sur son périmètre.',
+    ordre: 7
+  },
+  in: {
+    id: 'in',
+    nom: 'indéterminé',
+    description:
+      'Titres et autorisations dont les informations disponibles sont insuffisantes pour en déterminer le statut.',
+    ordre: 8
+  },
+  pc: {
+    id: 'pc',
+    nom: 'permis exclusif de carrières',
+    description:
+      'Ce titre minier donne le droit d’exploitation d’un gisement de substances de carrière situé dans le périmètre d’une zone spéciale de carrières. Sa durée maximale est de dix ans et peut faire l’objet de prolongations successives. L’autorité décisionnaire est le ministre chargé des mines et le ministre chargé de l’environnement conjointement.',
+    ordre: 5
+  },
+  pr: {
+    id: 'pr',
+    nom: 'permis exclusif de recherches',
+    description:
+      'Ce titre minier donne un droit de prospection destiné à faire l’inventaire des gisements sur lesquels le titulaire pourra faire valoir son droit d’inventeur. Il est applicable à tous les domaines miniers excepté les zones spéciales de carrières. Il s’agit généralement de larges périmètres (plusieurs centaines de kilomètres carrés). Sa durée est de cinq ans maximum renouvelable deux fois. Pour les hydrocarbures liquides ou gazeux, l’une de ces trois périodes peut faire l’objet d’une prolongation exceptionnelle de trois ans maximum.',
+    ordre: 3
+  },
+  px: {
+    id: 'px',
+    nom: "permis d'exploitation",
+    description:
+      'Ce titre minier donne un droit d’exploitation de gîtes de géothermie (dans un volume déterminé par un périmètre et deux profondeurs). Il est accordé pour trente ans maximum et peut faire l’objet de prolongations successives de quinze ans maximum. Il est également applicable aux mines de minéraux et métaux dans les départements et régions d’outre-mer, pour cinq ans maximum prolongeables deux fois.',
+    ordre: 6
+  }
+}

packages/common/tsconfig.json

+{
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "inlineSources": true,
+    "lib": ["es2020", "dom"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "strict": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "target": "ES2020",
+    "types": ["node", "ava"],
+    "resolveJsonModule": true,
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*"],
+}

packages/ui/jest.config.js

@@ -65,10 +65,10 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
       '<rootDir>/src/__mocks__/file-mock.js',
     // '^vue$': 'vue/dist/vue.runtime.min.js',
-    // '^.+\\.(css)$': '<rootDir>/src/__mocks__/css.js',
+    //     '^.+\\.(css)$': '<rootDir>/src/__mocks__/css.js',
     '@/(.*)$': '<rootDir>/src/$1'
   },
 

packages/ui/package.json

@@ -12,8 +12,7 @@
     "test:watch": "cross-env NODE_ENV=test jest --watch --verbose",
     "test:simple": "cross-env NODE_ENV=test jest --verbose",
     "lint": "prettier --write src && eslint --fix --ext .js,.ts,.vue src",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006"
   },
   "@comment dependencies": {
     "eslint": "eslint et eslint-plugin-vue, bloqués à 0.7.x https://github.com/vuejs/eslint-config-standard/issues/10",
@@ -27,7 +26,8 @@
     "connect-history-api-fallback": "^1.6.0",
     "dotenv": "^16.0.0",
     "express": "^4.17.3",
-    "http-proxy-middleware": "^2.0.4"
+    "http-proxy-middleware": "^2.0.4",
+    "vue3-simple-typeahead": "^1.0.5"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
@@ -53,6 +53,7 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/test-utils": "^2.0.0-rc.17",
+    "@vue/vue3-jest": "27.0.0-alpha.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
@@ -119,7 +120,6 @@
     "vue-loader": "^17.0.0",
     "vue-meta": "^2.4.0",
     "vue-router": "^4.0.14",
-    "@vue/vue3-jest": "27.0.0-alpha.4",
     "vuex": "^4.0.2",
     "vuex-router-sync": "^6.0.0-rc.1"
   },

packages/ui/src/api/titres.js

@@ -211,6 +211,14 @@ const titresRechercher = apiGraphQLFetch(
         elements {
           id
           nom
+          domaine {
+            id
+          }
+          type {
+            type {
+              id
+            }
+          }
         }
       }
     }

packages/ui/src/components/_common/__snapshots__/domaine.stories.storyshot

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Automated Storybook Snapshots Common/Domaine All Domaines 1`] = `
+<div
+  style="height: 100%; width: 100%; background: white;"
+>
+  <table>
+    <tr>
+      <th>
+        Domaine
+      </th>
+      <th>
+        Rendu
+      </th>
+    </tr>
+    <tr>
+      <td>
+        m
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-m color-bg pill py-xs px-s"
+          >
+            
+            m
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        c
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-c color-bg pill py-xs px-s"
+          >
+            
+            c
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        f
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-f color-bg pill py-xs px-s"
+          >
+            
+            f
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        g
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-g color-bg pill py-xs px-s"
+          >
+            
+            g
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        h
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-h color-bg pill py-xs px-s"
+          >
+            
+            h
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        r
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-r color-bg pill py-xs px-s"
+          >
+            
+            r
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        s
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-s color-bg pill py-xs px-s"
+          >
+            
+            s
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        w
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-w color-bg pill py-xs px-s"
+          >
+            
+            w
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        i
+      </td>
+      <td>
+        <span
+          class="cap-first small bold mono"
+        >
+          <span
+            class="bg-domaine-i color-bg pill py-xs px-s"
+          >
+            
+            i
+            
+          </span>
+        </span>
+      </td>
+    </tr>
+  </table>
+</div>
+`;
+
+exports[`Automated Storybook Snapshots Common/Domaine Default 1`] = `
+<span
+  class="cap-first small bold mono"
+>
+  <span
+    class="bg-domaine-m color-bg pill py-xs px-s"
+  >
+    
+    m
+    
+  </span>
+</span>
+`;