Add API client generation and fix IsEditable bug

client/README.md

@@ -0,0 +1,49 @@
+# TFE.Umbraco.AccessRestriction - Client
+
+De frontend van het TFE.Umbraco.AccessRestriction pakket. Gebouwd met Vite, TypeScript en Lit.
+
+## Installatie
+
+```bash
+npm install
+```
+
+## Scripts
+
+| Script | Beschrijving |
+|--------|-------------|
+| `npm run dev` | Start de Vite dev server |
+| `npm run build` | Compileert TypeScript en bouwt de productie-bundle |
+| `npm run watch` | Bouwt automatisch opnieuw bij wijzigingen |
+| `npm run test` | Draait de tests |
+| `npm run generate:api` | Genereert de TypeScript API client vanuit de Swagger spec |
+
+## API Client genereren
+
+De bestanden in `src/api/` worden automatisch gegenereerd op basis van de Swagger specificatie van de backend. Na wijzigingen aan de backend API (endpoints, models) moet de client opnieuw gegenereerd worden.
+
+### Vereisten
+
+- De Umbraco backend moet lokaal draaien met Swagger ingeschakeld
+
+### Uitvoeren
+
+```bash
+npm run generate:api
+```
+
+De standaard Swagger URL is `https://localhost:44394/umbraco/swagger/IPAccessRestrictionAPI/swagger.json`. Als je backend op een andere poort draait, pas de URL aan in het `generate:api` script in `package.json`.
+
+### Na het genereren
+
+Na het genereren moet je controleren of de frontend nog compileert:
+
+```bash
+npm run build
+```
+
+Wijzigingen in de API (nieuwe velden, verwijderde endpoints) kunnen typefouten veroorzaken in de frontend code die handmatig opgelost moeten worden.
+
+## Build output
+
+De gebouwde bestanden worden geschreven naar `../src/wwwroot/App_Plugins/TFE.Umbraco.AccessRestriction/`. Dit is de map die Umbraco gebruikt om de backoffice extensie te laden.

client/package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview",
     "watch": "vite build --watch",
     "test": "web-test-runner",
-    "test:watch": "web-test-runner --watch"
+    "test:watch": "web-test-runner --watch",
+    "generate:api": "NODE_TLS_REJECT_UNAUTHORIZED=0 openapi --input https://localhost:44394/umbraco/swagger/IPAccessRestrictionAPI/swagger.json --output src/api --client fetch"
   },
   "dependencies": {
     "@umbraco-ui/uui-button-group": "^1.8.0",
@@ -24,6 +25,7 @@
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-playwright": "^0.11.0",
     "eslint": "^9.7.0",
+    "openapi-typescript-codegen": "^0.29.0",
     "playwright": "^1.45.3",
     "sinon": "^18.0.0",
     "typescript": "^5.2.2",

client/src/api/index.ts

@@ -7,8 +7,6 @@ export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI } from './core/OpenAPI';
 export type { OpenAPIConfig } from './core/OpenAPI';
 
-export { EventMessageTypeModel } from './models/EventMessageTypeModel';
 export type { IPAccessEntry } from './models/IPAccessEntry';
-export type { NotificationHeaderModel } from './models/NotificationHeaderModel';
 
 export { V1Service } from './services/V1Service';

client/src/api/models/IPAccessEntry.ts

@@ -3,15 +3,14 @@
 /* tslint:disable */
 /* eslint-disable */
 export type IPAccessEntry = {
-    id?: string;
+    id: string;
     ip?: string | null;
     description?: string | null;
     created?: string | null;
     createdBy?: string | null;
     modified?: string | null;
     modifiedBy?: string | null;
-    isDeleted?: boolean;
-    isEditable?: boolean;
+    isDeleted: boolean;
+    isEditable: boolean;
 };
 
-export default IPAccessEntry;