@eqproject/eqp-attachments 3.1.2 → 3.1.4

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.          |
@@ -114,7 +115,15 @@ For the best icon display, include Font Awesome in your project's styles, for ex
 | `customCardHeightPx` | `number`  | `180`       | Sets the custom card height in pixels when `cardSize`is `'custom'`.          |
 | `showMatCard`        | `boolean` | `true`      | If `true`(and in table mode), the component is rendered inside a `mat-card`. |
 | `cropDialogClass`    | `string`  | `undefined` | Assigns a custom CSS class to the image cropper dialog panel.                    |
+| `showUploadTitle`           | `boolean`  | `true`   | If `true`, will show title over dropbox                                                                       |
+---
+
+#### **Table View Configuration**
 
+| Input                  | Type        | Default       | Description                                                                      |
+| ---------------------- | ----------- | ------------- | -------------------------------------------------------------------------------- |
+| `customColumns`      | `'AttachmentFieldColumn[]'`  | `[]` | Array to add custom columns to the table view.                               |
+| `customMenuActions`      | `'AttachmentMenuAction[]'`  | `[]` | Array to add custom actions to the table's "more options" (...) menu.    
 ---
 
 #### **Functional Configuration**
@@ -206,6 +215,49 @@ 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.        |
+---
+
+#### `AttachmentMenuAction` Interface
+
+| Property                | Type                | Description                                            |
+| ----------------------- | ------------------- | ------------------------------------------------------ |
+| `icon`                  | `string` | mat-icon name to display (e.g., 'share').                           |
+| `name`            | `string`          | Text to show in the menu item.object                            |
+| `fn`            | `(att: IAttachmentDTO) => void`          | Function to execute when the item is clicked.           |
+| `disabled`      | `(att: IAttachmentDTO) => boolean`  | Function to dynamically disable the action for a specific row. |
+| `position`      | `number`          | Display order. Preview is 10, Delete is 100. Use a number in between (e.g., 20) to add an action.                     |
+---
+
+
+#### **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 +341,93 @@ 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"
+  [customMenuActions]="myCustomActions">
+</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[] = [];
+  myCustomActions: AttachmentMenuAction[] = [];
+
+  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)
+      }
+    ];
+
+    this.myCustomActions = [
+      {
+        icon: 'share',
+        label: 'Share',
+        onClick: (item) => this.shareAttachment(item),
+        position: 25 // Show after "Preview" (10) and before "Delete" (100)
+      },
+      {
+        icon: 'edit',
+        label: 'Edit Name',
+        onClick: (item) => this.renameAttachment(item),
+        position: 26
+      }
+    ];
+  }
+```
+
+
 ## Credits
 
 This library has been developed by EqProject SRL. For more info, contact: info@eqproject.it