Skip to content

Commit

Permalink
Add stencils
Browse files Browse the repository at this point in the history
  • Loading branch information
@gavignon
gavignon committed May 26, 2020
1 parent e6ea7c2 commit ef8b79a
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 59 deletions.
2 changes: 1 addition & 1 deletion force-app/main/default/classes/FilePreviewController.cls
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @date 12/05/2020
* @description File Preview Component with filter and sort options
*/
public with sharing class FilePreview {
public with sharing class FilePreviewController {
private static Map<String, String> mapConditionByFilter = new Map<String, String>{
'gt100KB' => 'ContentDocument.ContentSize >= ' + 100 * 1024,
'lt100KBgt10KB' => '(ContentDocument.ContentSize < ' + 100 * 1024 + ' AND ContentDocument.ContentSize > ' + 10 * 1024 + ')',
Expand Down
79 changes: 51 additions & 28 deletions force-app/main/default/lwc/filePreview/filePreview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,43 +42,59 @@ <h2 slot="title">
</div>

<ul class="slds-var-m-top_medium">
<template for:each={attachments} for:item="attachment">
<li key={attachment.Id} class="forceContentVirtualRelatedListStencil forceRecordLayout">
<!-- Skeleton Loading -->
<template if:false={loaded}>
<li class="forceContentVirtualRelatedListStencil forceRecordLayout">
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
<lightning-icon icon-name={attachment.icon} alternative-text="Doctype file" data-id={attachment.Id} title="Doctype"></lightning-icon>
<img src={attachment.src} class="thumbnailImg slds-hide" data-id={attachment.Id} onload={handleLoad}/>
<c-stencil width="100%" height="30px" radius="2px"></c-stencil>
</div>
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small">
<a class="itemTitle uiOutputText" onclick={openPreview} data-id={attachment.ContentDocumentId}>{attachment.ContentDocument.Title}</a>
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small" style="width: 100%;">
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
<span>
<lightning-formatted-date-time value={attachment.ContentDocument.CreatedDate}></lightning-formatted-date-time>
</span>
<span>{attachment.size}</span>
<span>{attachment.ContentDocument.FileExtension}</span>
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
</p>
</div>
</div>
</li>
<li class="forceContentVirtualRelatedListStencil forceRecordLayout">
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
<c-stencil width="100%" height="30px" radius="2px"></c-stencil>
</div>
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small" style="width: 100%;">
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
</p>
</div>
</div>
</li>
</template>
</ul>
<!-- Drop Zone Custom -->
<!-- <div class="drop-zone-container slds-var-p-around_x-small slds-var-m-around_medium">
<div class="drop-zone drop-zone-border slds-color__text_gray-7 slds-text-align_center placeholder slds-is-relative" ondrop={handleDrop} ondragenter={handleDragEnter} ondragleave={handleDragLeave}>
<template if:false={fileCreated}>
Uploading file... <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
</template>
<template if:true={fileCreated}>
<template if:true={inDropZone}>
<span style="font-weight: bold;color: #639bd0;">Drop it here!</span>
</template>
<template if:false={inDropZone}>
Drop a file here to upload it.
</template>

<template if:true={loaded}>
<template for:each={attachments} for:item="attachment">
<li key={attachment.Id} class="forceContentVirtualRelatedListStencil forceRecordLayout">
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
<lightning-icon icon-name={attachment.icon} alternative-text="Doctype file" data-id={attachment.Id} title="Doctype"></lightning-icon>
<img src={attachment.src} class="thumbnailImg slds-hide" data-id={attachment.Id} onload={handleLoad}/>
</div>
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small">
<a class="itemTitle uiOutputText" onclick={openPreview} data-id={attachment.ContentDocumentId}>{attachment.ContentDocument.Title}</a>
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
<span>
<lightning-formatted-date-time value={attachment.ContentDocument.CreatedDate}></lightning-formatted-date-time>
</span>
<span>{attachment.size}</span>
<span>{attachment.ContentDocument.FileExtension}</span>
</p>
</div>
</div>
</li>
</template>
</div>
</div> -->
</template>
</ul>
<div style="text-align: center;">
<lightning-file-upload
class="file-upload forceContentRelatedListPreviewFileList"
Expand All @@ -94,7 +110,14 @@ <h2 slot="title">
<template if:true={moreRecords}>
<a onclick={loadMore}>
<div class="slds-card__footer">
<span>View More</span>
<template if:true={moreLoaded}>
<span>View More</span>
</template>
<template if:false={moreLoaded}>
<div style="position: relative; min-height:50px;">
<lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
</div>
</template>
</div>
</a>
</template>
Expand Down
56 changes: 26 additions & 30 deletions force-app/main/default/lwc/filePreview/filePreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,35 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
@api defaultNbFileDisplayed;
@api limitRows;

@track moreLoaded = true;
@track loaded = false;
@track attachments;
@track totalFiles;
@track moreRecords;
@track offset=0;
@track fileCreated = true;
@track inDropZone = false;
@track sortIcon;
@track sortOrder;
@track sortField;
@track disabled;
@track sortIcon = 'utility:arrowdown';
@track sortOrder = 'DESC';
@track sortField = 'ContentDocument.CreatedDate';
@track disabled = true;
@track filters = [
{
'id' : 'gt100KB',
'label' : '>= 100 KB',
'checked' : true
},
{
'id' : 'lt100KBgt10KB',
'label' : '< 100 KB and > 10 KB',
'checked' : true
},
{
'id' : 'lt10KB',
'label' : '<= 10 KB',
'checked' : true
}
];

title;
@track filters;
conditions;
documentForceUrl;

Expand All @@ -43,29 +59,6 @@ export default class FilePreview extends NavigationMixin(LightningElement) {

// Initialize component
connectedCallback() {
this.sortOrder = 'DESC';
this.sortField = 'ContentDocument.CreatedDate';
this.sortIcon = 'utility:arrowdown';
this.disabled = true;

this.filters = [
{
'id' : 'gt100KB',
'label' : '>= 100 KB',
'checked' : true
},
{
'id' : 'lt100KBgt10KB',
'label' : '< 100 KB and > 10 KB',
'checked' : true
},
{
'id' : 'lt10KB',
'label' : '<= 10 KB',
'checked' : true
}
];

this.initRecords();
}

Expand Down Expand Up @@ -100,6 +93,7 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
this.title = 'Files (' + nbFiles + ')';

this.disabled = false;
this.loaded = true;

})
.catch(error => {
Expand Down Expand Up @@ -183,6 +177,7 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
}

loadMore(){
this.moreLoaded = false;
var self = this;
loadFiles({ recordId: this.recordId, filters: this.conditions, defaultLimit: this.defaultNbFileDisplayed, offset: this.offset, sortField: this.sortField, sortOrder: this.sortOrder })
.then(result => {
Expand All @@ -192,6 +187,7 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
}

self.updateCounters(result.length);
self.moreLoaded = true;
});
}

Expand Down

0 comments on commit ef8b79a

Please sign in to comment.