# cap-shared Library Installation

## Install cap-shared library

Run `npm install cap-shared`

## Import cap-shared library assets

Edit your angular.json file and add the following lines to your build assets:
{
"glob": "\*_/_",
"input": "./node_modules/cap-shared/src/assets/",
"output": "/cap-shared/"
}

## Import cap-shared localization resources

In your app.module.ts add cap-shared/i18n path to the MultiTranslateHttpLoader param:

export function HttpLoaderFactory(httpClient: HttpClient) {
return new MultiTranslateHttpLoader(httpClient, [
{ prefix: './assets/i18n/', suffix: '.json' },
{ prefix: './cap-shared/i18n/', suffix: '.json' }
]);
}

## Use cap-shared assets

Reference cap-shared assets using their path in dist folder (e.g. "/cap-shared/faq/en-faq.json")

## Manage Attachment

Use css in page.scss
.modal-dialog-attachment-container .modal-dialog {
-webkit-transform: none;
transform: none;
z-index: 1000;
max-width: 1110px !important;
overflow: auto;
background-color: #fff;
margin: 0 auto;
border-radius: 4px;
top: 50px;
}

.modal-dialog-attachment-container {
top: 0;
}

Configuration Setting:

=>result = [] contain data from backend
this.configuration = new AttachmentConfiguration();
this.configuration.header = { label: 'app.attachmentTooltipPlaceholder', value: 'DCN001' };
this.configuration.data = [];
result.forEach(item => {
let optional: Array<OptionalText> = [];
optional.push({ key: 'workItemId', value: item.workItemId });
optional.push({ key: 'modifyDate', value: item.modifyDate });
this.configuration.data.push({
attachmentId: item.attachmentId,
fileName: item.fileName,
description: '',
createdDate: item.uploadDate,
size: this.AttachmentDataService.formatBytes(item.fileSize, 0),
optional: optional
});
});
this.configuration.gridConfig = {
pageSize: 10,
pageHeight: 500,
gridColumns: [
{ label: 'app.workItemName', value: 'workItemId', isExternal: true },
{ label: 'app.modifyDate', value: 'modifyDate', isExternal: true },
{ label: 'app.fileName', value: 'fileName' },
{ label: 'app.description', value: 'description' },
{ label: 'app.size', value: 'size' }
]
};

    this.configuration.actions = [
      AttachmentAction.Delete,
      AttachmentAction.Download,
      AttachmentAction.Preview,
      AttachmentAction.Edit,
      AttachmentAction.Replace
    ];
    this.configuration.viewMode = {
      type: ViewType.Edit,
      mode: ViewMode.Detail,
      displayType: DisplayType.Both
    };

## Search result Grid Lock/Unlock feature

For Lock/Unlock feature in the grid, width is mandatory. If width is not set, by default adding 200 width for each column.