add share report by url

Author: EricD-OFA

package-lock.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^22.0.1",
     "@angular/platform-browser-dynamic": "^22.0.1",
     "@angular/router": "^22.0.1",
+    "lz-string": "^1.5.0",
     "rxjs": "~7.8.0",
     "three": "^0.165.0",
     "tslib": "^2.6.0",
@@ -30,6 +31,7 @@
     "@angular-devkit/build-angular": "^22.0.1",
     "@angular/cli": "^22.0.1",
     "@angular/compiler-cli": "^22.0.1",
+    "@types/lz-string": "^1.5.0",
     "@types/three": "^0.165.0",
     "angular-eslint": "^22.0.0",
     "eslint": "^9.15.0",

package.json

@@ -16,27 +16,51 @@
       Retour
     </button>
 
-    <button type="button" class="report__print" (click)="print()">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+    <div class="report__actions">
+      <button
+        type="button"
+        class="report__share"
+        [class.report__share--copied]="copied()"
+        [disabled]="zones().length === 0"
+        (click)="copyShareLink()"
       >
-        <polyline points="6 9 6 2 18 2 18 9" />
-        <path
-          d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"
-        />
-        <rect x="6" y="14" width="12" height="8" />
-      </svg>
-      Imprimer
-    </button>
+        @if (copied()) {
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Lien copié !
+        } @else {
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+          </svg>
+          Créer un lien de partage
+        }
+      </button>
+
+      <button type="button" class="report__print" (click)="print()">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 6 2 18 2 18 9" />
+          <path
+            d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"
+          />
+          <rect x="6" y="14" width="12" height="8" />
+        </svg>
+        Imprimer
+      </button>
+    </div>
   </header>
 
+
   <main class="report__body">
     <div class="report__logo">
       <span class="report__brand-mark">+</span>
@@ -121,8 +145,6 @@ <h1>Doloris - Cartographie de la douleur</h1>
         </div>
       </div>
     }
-
-    <p class="footer">Document généré par Doloris</p>
   </main>
 </div>
 

src/app/components/report/report.component.html

@@ -14,8 +14,15 @@
   background: #f9fbfc;
 }
 
+.report__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .report__back,
-.report__print {
+.report__print,
+.report__share {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -35,6 +42,61 @@
   }
 }
 
+.report__share--copied {
+  color: #2f9e8f;
+  border-color: #2f9e8f;
+}
+
+.report__share:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.share-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 32px;
+  background: #f0f7f9;
+  border-bottom: 1px solid #c8dde4;
+  font-size: 0.875rem;
+  color: #2e3d45;
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  &__load,
+  &__dismiss {
+    padding: 5px 12px;
+    border-radius: 5px;
+    border: 1px solid #dbe5e8;
+    background: #fff;
+    font-size: 0.875rem;
+    font-family: system-ui, sans-serif;
+    cursor: pointer;
+    transition: border-color 0.15s;
+
+    &:hover {
+      border-color: #5a7a8a;
+    }
+  }
+
+  &__load {
+    background: #2e3d45;
+    color: #fff;
+    border-color: #2e3d45;
+
+    &:hover {
+      background: #1a2228;
+      border-color: #1a2228;
+    }
+  }
+}
+
 .report__body {
   max-width: 720px;
   margin: 0 auto;
@@ -242,11 +304,42 @@ hr {
   margin: 8px 0 0;
 }
 
+.share-footer {
+  margin-top: 36px;
+  padding: 14px 16px;
+  border: 1px solid #dbe5e8;
+  border-radius: 6px;
+  background: #f9fbfc;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__label {
+    font-size: 0.78rem;
+    color: #8a9da5;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__url {
+    font-size: 0.8rem;
+    color: #2e3d45;
+    word-break: break-all;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #2f9e8f;
+      text-decoration: underline;
+    }
+  }
+}
+
 .footer {
   font-size: 0.8rem;
   color: #8a9da5;
   text-align: center;
-  margin-top: 48px;
+  margin-top: 24px;
 }
 
 .hidden-viewer {

src/app/components/report/report.component.scss

@@ -1,7 +1,8 @@
-import { Component, ChangeDetectionStrategy, inject, signal, effect } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, signal, computed, effect } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { PainDataService } from '../../services/pain-data.service';
+import { ShareService } from '../../services/share.service';
 import { getPainType } from '../../models/pain-types';
 import { BodyViewerComponent } from '../body-viewer/body-viewer.component';
 
@@ -17,6 +18,7 @@ const COMMENT_KEY = 'pain-mapper:report-comment';
 export class ReportComponent {
   readonly painData = inject(PainDataService);
   private readonly router = inject(Router);
+  private readonly share = inject(ShareService);
 
   readonly zones = this.painData.zones;
   readonly today = new Date().toLocaleDateString('fr-FR', {
@@ -30,7 +32,18 @@ export class ReportComponent {
   readonly showViewer = signal(false);
   readonly overviewImages = this.painData.overviewImages;
 
+  readonly copied = signal(false);
+  readonly shareUrl = computed(() => this.zones().length > 0 ? this.share.getShareUrl(this.zones()) : null);
+
   constructor() {
+    const shared = this.share.extractFromFragment();
+    if (shared) {
+      this.painData.loadZones(shared);
+      this.painData.reportImages.set(new Map());
+      this.painData.overviewImages.set(null);
+      this.share.clearFragment();
+    }
+
     const needsZones = this.painData.reportImages().size === 0 && this.painData.zones().length > 0;
     const needsOverview = !this.painData.overviewImages();
     if (needsZones || needsOverview) {
@@ -78,4 +91,12 @@ export class ReportComponent {
   print(): void {
     window.print();
   }
+
+  async copyShareLink(): Promise<void> {
+    const url = this.share.getShareUrl(this.zones());
+    await navigator.clipboard.writeText(url);
+    this.copied.set(true);
+    setTimeout(() => this.copied.set(false), 2000);
+  }
+
 }

src/app/components/report/report.component.ts

@@ -181,12 +181,16 @@ export class PainDataService {
   importJson(json: string): void {
     const parsed = JSON.parse(json) as { zones: PainZone[] };
     if (Array.isArray(parsed.zones)) {
-      this.zones.set(parsed.zones);
-      this.selectedZoneId.set(null);
-      this.redrawTick.update((n) => n + 1);
+      this.loadZones(parsed.zones);
     }
   }
 
+  loadZones(zones: PainZone[]): void {
+    this.zones.set(zones);
+    this.selectedZoneId.set(null);
+    this.redrawTick.update((n) => n + 1);
+  }
+
   /** Images capturées depuis le viewer 3D, transmises à la page rapport. */
   readonly reportImages = signal<Map<string, string>>(new Map());
 }

src/app/services/pain-data.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
+
+import { PainZone } from '../models/pain-zone.model';
+
+const SHARE_PREFIX = '#share=';
+
+@Injectable({ providedIn: 'root' })
+export class ShareService {
+  private encode(zones: PainZone[]): string {
+    const slim = zones.map((z) => ({
+      ...z,
+      points: z.points.map(({ u, v }) => ({ u, v })),
+    }));
+    return compressToEncodedURIComponent(JSON.stringify({ zones: slim }));
+  }
+
+  private decode(compressed: string): PainZone[] | null {
+    try {
+      const json = decompressFromEncodedURIComponent(compressed);
+      if (!json) return null;
+      const parsed = JSON.parse(json) as { zones: PainZone[] };
+      return Array.isArray(parsed.zones) ? parsed.zones : null;
+    } catch {
+      return null;
+    }
+  }
+
+  getShareUrl(zones: PainZone[]): string {
+    const encoded = this.encode(zones);
+    const url = new URL(window.location.href);
+    url.hash = 'share=' + encoded;
+    return url.toString();
+  }
+
+  extractFromFragment(): PainZone[] | null {
+    const hash = window.location.hash;
+    if (!hash.startsWith(SHARE_PREFIX)) return null;
+    return this.decode(hash.slice(SHARE_PREFIX.length));
+  }
+
+  clearFragment(): void {
+    history.replaceState(null, '', window.location.pathname + window.location.search);
+  }
+}