signature_connection_not_ok

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@angular/elements": "^19.0.1",
         "@types/qrcode": "^1.5.5",
         "@vitejs/plugin-react": "^4.3.1",
         "@vitejs/plugin-vue": "^5.0.5",
@@ -45,6 +46,37 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@angular/core": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.0.1.tgz",
+      "integrity": "sha512-+VpWcg2aC/dY9TM6fsj00enZ6RP5wpRqk/SeRe3UP3Je/n+vWIgHJTb1ZLNeOIvDaE86BhKPMwFS0QVjoEGQFA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "rxjs": "^6.5.3 || ^7.4.0",
+        "zone.js": "~0.15.0"
+      }
+    },
+    "node_modules/@angular/elements": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-19.0.1.tgz",
+      "integrity": "sha512-HqNZ1DcsT+SVVXrqZIxveZEZiA+1ZeYggNWmh2Z19APyWTMXylkL7Tm4AFdbQItUXZDOVzbjycq8EQ/5Fdvfng==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "19.0.1",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -5151,6 +5183,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -6941,6 +6982,12 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/zone.js": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz",
+      "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==",
+      "peer": true
     }
   }
 }

package.json

@@ -28,6 +28,7 @@
     "webpack-dev-server": "^5.0.2"
   },
   "dependencies": {
+    "@angular/elements": "^19.0.1",
     "@types/qrcode": "^1.5.5",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-vue": "^5.0.5",

src/interface/groupInterface.ts

@@ -0,0 +1,22 @@
+import { DocumentSignature } from "~/models/signature.models";
+
+export interface Group {
+    id: number;
+    name: string;
+    description: string;
+    roles: Array<{
+        name: string;
+        members: Array<{ id: string | number; name: string }>;
+        documents?: Array<any>; 
+    }>;
+    commonDocuments: Array<{  
+        id: number;
+        name: string;
+        visibility: string;
+        description: string;
+        createdAt?: string | null;
+        deadline?: string | null;
+        signatures?: DocumentSignature[];
+        status?: string;
+    }>;
+}

src/main.ts

@@ -0,0 +1,23 @@
+import { SignatureComponent } from './pages/signature/signature-component';
+import { SignatureElement } from './pages/signature/signature';
+
+// Exporter les composants pour une utilisation externe
+export {
+    SignatureComponent,
+    SignatureElement
+};
+
+// Déclarer les types pour TypeScript
+declare global {
+    interface HTMLElementTagNameMap {
+        'signature-component': SignatureComponent;
+        'signature-element': SignatureElement;
+    }
+}
+
+// Configuration pour le mode indépendant
+if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) {
+    // Initialiser les composants si nécessaire
+    customElements.define('signature-component', SignatureComponent);
+    customElements.define('signature-element', SignatureElement);
+} 

src/models/signature.models.ts

@@ -15,6 +15,7 @@ export interface Group {
             deadline: string | null;
             signatures: DocumentSignature[];
             status?: string;
+            files?: Array<{ name: string; url: string }>;
         }[];
     }[];
 }

src/pages/signature/signature-component.ts

@@ -0,0 +1,56 @@
+import { SignatureElement } from './signature';
+import signatureHtml from './signature.html?raw'
+import signatureCss from '../../../public/style/signature.css?raw'
+import Services from '../../services/service.js'
+
+class SignatureComponent extends HTMLElement {
+    _callback: any
+    signatureElement: SignatureElement | null = null;
+
+    constructor() {
+        super();
+        console.log('INIT')
+        this.attachShadow({ mode: 'open' });
+
+        this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
+    }
+
+    connectedCallback() {
+        console.log('CALLBACKs')
+        this.render();
+        this.fetchData();
+    }
+
+    async fetchData() {
+        if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
+            const data = await (window as any).myService?.getProcesses();
+        } else {
+            const service = await Services.getInstance()
+            const data = await service.getProcesses();
+        }
+    }
+
+    set callback(fn) {
+        if (typeof fn === 'function') {
+            this._callback = fn;
+        } else {
+            console.error('Callback is not a function');
+        }
+    }
+
+    get callback() {
+        return this._callback;
+    }
+
+    render() {
+        if(this.shadowRoot) {
+            // Créer l'élément signature-element
+            const signatureElement = document.createElement('signature-element');
+            this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
+            this.shadowRoot.appendChild(signatureElement);
+        }
+    }
+}
+
+export { SignatureComponent }
+customElements.define('signature-component', SignatureComponent);

src/router.ts

@@ -73,10 +73,13 @@ async function handleLocation(path: string) {
       initChat();
       break;
 
-    case 'signature':
+      case 'signature':
-      const { initSignature } = await import('./pages/signature/signature');
+        const container = document.querySelector('.container');
-      initSignature();
+        if (container) {
-      break;
+            const signatureComponent = document.createElement('signature-component');
+            container.appendChild(signatureComponent);
+        }
+        break;
     }
   }
 }

src/utils/document.utils.ts

@@ -0,0 +1,4 @@
+export function getCorrectDOM(componentTag: string): Node {
+    const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
+    return dom
+    }

tsconfig.json

@@ -1,27 +1,27 @@
 {
   "compilerOptions": {
-    "declaration": true,
+  "declaration": true,
-    "outDir": "./dist",
+  "outDir": "./dist",
-    "target": "ESNext",
+  "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext", "webworker"],
+  "lib": ["DOM", "DOM.Iterable", "ESNext", "webworker"],
-    "types": ["vite/client", "node"],
+  "types": ["vite/client", "node"],
-    "allowJs": true,
+  "allowJs": true,
-    "skipLibCheck": true,
+  "skipLibCheck": true,
-    "esModuleInterop": false,
+  "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
+  "allowSyntheticDefaultImports": true,
-    "strict": true,
+  "strict": true,
-    "forceConsistentCasingInFileNames": true,
+  "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
+  "module": "ESNext",
-    "moduleResolution": "Node",
+  "moduleResolution": "Node",
-    "resolveJsonModule": true,
+  "resolveJsonModule": true,
-    "isolatedModules": true,
+  "isolatedModules": true,
-    "noEmit": true,
+  "noEmit": true,
-    "jsx": "react-jsx",
+  "jsx": "react-jsx",
-    "baseUrl": "./",
+  "baseUrl": "./",
-    "paths": {
+  "paths": {
-      "~/*": ["src/*"]
+  "~/": ["src/"]
-    }
+  }
   },
-  "include": ["src", "src/**/*", "./vite.config.ts", "src/*.d.ts", "src/router.ts"],
+  "include": ["src", "src/*/", "./vite.config.ts", "src/*.d.ts", "src/main.ts"],
   "exclude": ["node_modules"]
-}
+  }

vite.config.ts

@@ -20,11 +20,19 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     target: 'esnext',
+    minify: false,
     rollupOptions: {
-        input: './src/router.ts',
+      input: './src/main.ts',
-        output: {
+      external: ['ihm_client'],
-          entryFileNames: 'index.js',
+      output: {
-        },
+        entryFileNames: 'index.js',
+      }
+    },
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.ts'),
+      name: 'signature',
+      formats: ['es'],
+      fileName: (format) => `signature.${format}.js`,
     },
   },
   resolve: {
@@ -37,6 +45,6 @@ export default defineConfig({
     host: 'localhost',
     open: false,
     port: 3001,
-    strictPort: true,    // Empêche de changer de port si le 3001 est occupé
+    strictPort: true    // Empêche de changer de port si le 3001 est occupé
-  },
+  }
 });