@eqproject/eqp-attachments 3.1.2 → 3.1.3

package/README.md

@@ -106,6 +106,7 @@ For the best icon display, include Font Awesome in your project's styles, for ex
 
 | Input                  | Type        | Default       | Description                                                                      |
 | ---------------------- | ----------- | ------------- | -------------------------------------------------------------------------------- |
+| `layout`             | `'full'`  | `'compact'` | `'compact'`                                                                       |
 | `viewMode`           | `'card'`  | `'table'`   | `'card'`                                                                       |
 | `chooseView`         | `boolean` | `true`      | If `true`, displays the Card/Table view switcher in the header.                |
 | `showSummary`        | `boolean` | `true`      | If `true`, displays the summary block with file count and total size.          |
@@ -117,6 +118,14 @@ For the best icon display, include Font Awesome in your project's styles, for ex
 
 ---
 
+#### **Table View Configuration**
+
+| Input                  | Type        | Default       | Description                                                                      |
+| ---------------------- | ----------- | ------------- | -------------------------------------------------------------------------------- |
+| `customColumns`      | `'AttachmentFieldColumn'`  | `[]` | Array to add custom columns to the table view.                               |
+
+---
+
 #### **Functional Configuration**
 
 | Input                           | Type                 | Default       | Description                                                                                               |
@@ -206,6 +215,39 @@ For the best icon display, include Font Awesome in your project's styles, for ex
 | `isUploading`         | `boolean`         | (Internal State)`true`during the upload process.     |
 | `uploadError`         | `boolean`         | (Internal State)`true`if the upload failed.          |
 
+---
+
+
+#### `AttachmentFieldColumn` Interface
+
+| Property                | Type                | Description                                            |
+| ----------------------- | ------------------- | ------------------------------------------------------ |
+| `key`                  | `string` | .                           |
+| `display`            | `string`          | The property key from the IAttachmentDTO object                            |
+| `type`            | `TypeAttachmentColumn`          | The rendering type (TEXT, DATE, TEMPLATE). Defaults to TEXT.           |
+| `externalTemplate`      | `TemplateRef<any>`  | The ng-template to use (required if type is TEMPLATE). |
+| `styles`      | `{ flex: string }`          | Defines the column width (e.g., '1 1 0%' or '0 0 150px').                     |
+| `position`            | `number`          | The column's display order (Default: 99). File is 10, Actions is 100.                      |
+| `class`     | `string`          | A custom CSS class to add to the column's cells.        |
+---
+
+
+
+#### **AttachmentCardSize Type**
+
+export type AttachmentCardSize = 'small' | 'medium' | 'large' | 'custom';                            
+
+---
+
+---
+
+#### **Layout Configuration**
+
+export type Layout = 'full' | 'compact';                           
+
+---
+
+
 ## Use Cases
 
 ### Case 1: Single Image Upload
@@ -289,6 +331,76 @@ export class MyComponent {
 }
 ```
 
+### Case 3: Custom Columns
+**HTML**
+
+```
+<eqp-attachments
+  [multipleAttachment]="true"
+  [attachmentsList]="documentList"
+  [allowedTypes]="[1, 2]"
+  [viewMode]="'card'"
+  [headerTitle]="'Project Documents'"
+  [showSummary]="true"
+  (localEditedAttachments)="onAttachmentsChange($event)"
+  [customColumns]="myCustomColumns">
+</eqp-attachments>
+
+<ng-template #statusTemplate let-att>
+  <mat-chip-listbox>
+    <mat-chip [style.background-color]="att.Status === 'Approved' ? '#c8e6c9' : '#ffcdd2'"
+              [style.color]="att.Status === 'Approved' ? '#2e7d32' : '#c62828'">
+      {{ att.Status }}
+    </mat-chip>
+  </mat-chip-listbox>
+</ng-template>
+```
+
+**TypeScript**
+
+```
+@ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<any>;
+  
+  documentList: IAttachmentDTO[] = [
+    { 
+      ID: 1, 
+      FileName: 'report.pdf', 
+      FileExtension: 'pdf', 
+      UploadUserName: 'Mario Rossi', 
+      Status: 'Approved' 
+    },
+    { 
+      ID: 2, 
+      FileName: 'schema.zip', 
+      FileExtension: 'zip', 
+      UploadUserName: 'Laura Bianchi', 
+      Status: 'Pending' 
+    }
+  ];
+  myCustomColumns: AttachmentFieldColumn[] = [];
+
+  ngOnInit() {
+    this.myCustomColumns = [
+      { 
+        key: 'UploadUserName', 
+        header: 'Uploaded By',
+        type: TypeAttachmentColumn.TEXT, // Renders as plain text
+        styles: { flex: '2 1 0%' }, // Takes 2 parts of the available space
+        position: 20 // Shows after "File" (10)
+      },
+      {
+        key: 'Status', // Unique key for this column
+        header: 'Status',
+        type: TypeAttachmentColumn.TEMPLATE,
+        externalTemplate: this.statusTemplate, // Pass the ng-template
+        styles: { flex: '1 1 0%' }, // Takes 1 part of the available space
+        position: 30 // Shows after "Uploaded By" (20)
+      }
+    ];
+  }
+```
+
+
 ## Credits
 
 This library has been developed by EqProject SRL. For more info, contact: info@eqproject.it