commons-assessment 12.0.32 → 12.1.0

package/README.md

@@ -8,7 +8,17 @@ This library provides a comprehensive set of tools and components to create and
 
 ## Dependencies
 
-The library uses Bootstrap styles and requires the following modules to be imported in your application:
+### Required Peer Dependencies
+
+Ensure the following packages are installed in your consumer application (as defined in `package.json`):
+- **Angular Core & Common**: `>=12.0.0`
+- **Angular Material & CDK** (for UI components and drag-and-drop): `>=12.0.0`
+- **Bootstrap** (for baseline grid and component styling): `>=5.0.0`
+- **Quill** (for rich text subjective questions): `>=2.0.0`
+
+### Required Angular Imports
+
+Import the following modules in your application:
 - `BrowserAnimationsModule`
 - `HttpClientModule`
 - `CommonsAssessmentModule`
@@ -19,53 +29,70 @@ The library uses Bootstrap styles and requires the following modules to be impor
 
 ### 1. Import Modules
 
-Import the appropriate modules in your `app.module.ts`. You must configure `CommonsAssessmentModule` with `forRoot()` to provide the backend base URL.
+Import the `CommonsAssessmentModule.forRoot()` in your root `app.module.ts` once to register the singleton service providers. Other modules can then import the specific feature modules as needed:
 
 ```typescript
 import { CommonsAssessmentModule, AssessmentMakerModule, AssessmentTakerModule } from 'commons-assessment';
 
 @NgModule({
   imports: [
-    CommonsAssessmentModule.forRoot({
-      baseURL: 'https://dev.platformcommons.org', // Use your backend API base URL
-    }),
+    CommonsAssessmentModule.forRoot(), // Import once in root app.module
     AssessmentMakerModule,
     AssessmentTakerModule
   ]
 })
 ```
 
-### 2. Configure `angular.json`
+### 2. Configure HTTP Interceptor (Decoupled base URL)
+
+Since the library uses relative paths, you must configure an HTTP Interceptor in your application to detect library API requests (which carry the `X-Library-Source: commons-assessment` header), prepend your backend API base URL, and strip the header before forwarding the request.
+
+```typescript
+import { Injectable } from '@angular/core';
+import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+
+@Injectable()
+export class ApiInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    let headers = req.headers;
+    let url = req.url;
+
+    if (headers.has('X-Library-Source')) {
+      headers = headers.delete('X-Library-Source');
+      url = 'https://your-api-domain.org' + url; // Prepend your backend base URL
+    }
+
+    req = req.clone({ url, headers });
+    return next.handle(req);
+  }
+}
+```
+
+### 3. Configure `angular.json`
 
 Add the necessary assets and global styles in your `angular.json` file inside the `architect.build.options` block.
 
 **Assets:**
-Add the library assets and angular-editor icons to the `assets` array.
+Add the library assets to the `assets` array.
 ```json
 "assets": [
   {
     "glob": "**/*",
     "input": "node_modules/commons-assessment/src/lib/assets",
     "output": "assets/commons-assessment"
-  },
-  {
-    "glob": "**/*",
-    "input": "node_modules/@kolkov/angular-editor/assets/icons",
-    "output": "assets/ae-icons/"
   }
 ]
 ```
 
 **Styles:**
-Include the library's global styles and third-party dependencies in the `styles` array.
+Include the library's global styles in the `styles` array.
 ```json
 "styles": [
-  "src/styles.scss",
-  "node_modules/@kolkov/angular-editor/themes/default.scss"
+  "src/styles.scss"
 ]
 ```
 
-### 3. Theming Setup (`styles.scss`)
+### 4. Theming Setup (`styles.scss`)
 
 The library provides a mixin to easily customize the theme, including fonts and color variables. Set this up in your application's global `styles.scss`: