Outil BDD

Appearance

Front - Outil BDD ​

Application front en Vue 3 + Vite + Quasar.

Installation ​

bash
yarn

Variables d'environnement ​

Creer un fichier .env a la racine de front :

ini
BASE_URL=http://localhost:3000
PORT=4000
AUTH_APP_URL=https://staging.auth.heriade.fr
APPLICATION=bdd
ENVIRONMENT=default
FORMS_APP_URL=
CONSOLE_ADMIN_APP_URL=
DOCS_APP_URL=/docs/
FILE_SIZE_LIMIT=50
  • BASE_URL : URL du backend NestJS
  • PORT : port local du serveur Vite
  • AUTH_APP_URL : URL du portail AUTH (redirection SSO)
  • APPLICATION : identifiant applicatif envoyé à AUTH (bdd)
  • ENVIRONMENT : environnement cible vérifié dans le app_access_token
  • FORMS_APP_URL / CONSOLE_ADMIN_APP_URL / DOCS_APP_URL : liens du selecteur d'applications dans la sidebar
  • FILE_SIZE_LIMIT : taille max d'upload en Mo (défaut 50)
  • E2E_BASE_URL : URL cible pour Playwright (optionnel)

Mode reel Playwright (optionnel) :

ini
E2E_REAL_AUTH=true
E2E_TEST_USER_EMAIL=...
E2E_TEST_USER_PASSWORD=...

Lancement ​

bash
yarn dev

Scripts utiles ​

  • yarn dev : lancement en local
  • yarn build : build production
  • yarn preview : previsualisation du build
  • yarn lint : lint global
  • yarn test : tests unitaires
  • yarn test:e2e : tests end-to-end Playwright
  • yarn test:e2e:ui : mode UI Playwright
  • yarn test:e2e:install : installer les navigateurs Playwright

Playwright lit directement les variables du .env (via Vite) et utilise E2E_BASE_URL si defini. Le scénario reel de login est ignore si E2E_REAL_AUTH et les credentials ne sont pas definis.

Le suivi des scenarios Playwright critiques est documente ici :

Notes ​

  • Le client HTTP est configure dans src/boot/axios.js
  • Les appels API utilisent BASE_URL

Upload et fichiers deposes ​

La page src/pages/admin/folders/AdminFoldersDetailPage.vue couvre deux usages :

  • depot de nouveaux fichiers via drag & drop ou selecteur
  • consultation de la liste des fichiers deja transmis par l'utilisateur connecte et des dossiers enfants existants

Le dossier de destination peut être choisi dans l'interface de dépôt. Le user doit se placer dans le dossier voulu OU une fonctionnalité permet de déplacer un fichier soumis.

Depuis la vue d'un dossier, le front envoie le fichier au backend via src/stores/files-store.js. La liste des documents est egalement chargee depuis cette vue.

La liste Mes fichiers deposes est chargee via le store src/stores/files-store.js :

js
await api.get('/documents')

Chaque ligne est rendue par src/components/documents/DocumentListItem.vue et affiche le nom, l'extension, la date de depot et la taille du fichier. Apres un upload reussi depuis AdminFolderDetailPage.vue, la liste est rechargee pour afficher le nouveau document.

Le composant expose aussi l'action Telecharger. La page appelle alors :

js
await api.get('/documents/:uuid/download')

La reponse contient une URL pre-signee temporaire et le nom de fichier original. Le front cree un lien <a> temporaire pour declencher le telechargement sans exposer les informations internes S3.

Le menu expose egalement Copier le lien. Cette action copie une URL applicative securisee :

text
/files/:documentUuid

La route src/pages/documents/DocumentAccessPage.vue verifie la session via le guard front existant, puis appelle GET /documents/:uuid/access-url. Le backend revalide les droits avant de fournir une URL S3 temporaire. Le front manipule le uuid public du document, jamais l'ID numerique interne.