Skip to content

Commit ef8b79a

Browse files
gavignongavignon
committed
Add stencils
1 parent e6ea7c2 commit ef8b79a

File tree

3 files changed

+78
-59
lines changed

3 files changed

+78
-59
lines changed

‎force-app/main/default/classes/FilePreviewController.cls

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @date 12/05/2020
44
* @description File Preview Component with filter and sort options
55
*/
6-
public with sharing class FilePreview {
6+
public with sharing class FilePreviewController {
77
private static Map<String, String> mapConditionByFilter = new Map<String, String>{
88
'gt100KB' => 'ContentDocument.ContentSize >= ' + 100 * 1024,
99
'lt100KBgt10KB' => '(ContentDocument.ContentSize < ' + 100 * 1024 + ' AND ContentDocument.ContentSize > ' + 10 * 1024 + ')',

‎force-app/main/default/lwc/filePreview/filePreview.html

+51-28
Original file line numberDiff line numberDiff line change
@@ -42,43 +42,59 @@ <h2 slot="title">
4242
</div>
4343

4444
<ul class="slds-var-m-top_medium">
45-
<template for:each={attachments} for:item="attachment">
46-
<li key={attachment.Id} class="forceContentVirtualRelatedListStencil forceRecordLayout">
45+
<!-- Skeleton Loading -->
46+
<template if:false={loaded}>
47+
<li class="forceContentVirtualRelatedListStencil forceRecordLayout">
4748
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
4849
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
49-
<lightning-icon icon-name={attachment.icon} alternative-text="Doctype file" data-id={attachment.Id} title="Doctype"></lightning-icon>
50-
<img src={attachment.src} class="thumbnailImg slds-hide" data-id={attachment.Id} onload={handleLoad}/>
50+
<c-stencil width="100%" height="30px" radius="2px"></c-stencil>
5151
</div>
52-
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small">
53-
<a class="itemTitle uiOutputText" onclick={openPreview} data-id={attachment.ContentDocumentId}>{attachment.ContentDocument.Title}</a>
52+
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small" style="width: 100%;">
53+
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
5454
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
55-
<span>
56-
<lightning-formatted-date-time value={attachment.ContentDocument.CreatedDate}></lightning-formatted-date-time>
57-
</span>
58-
<span>{attachment.size}</span>
59-
<span>{attachment.ContentDocument.FileExtension}</span>
55+
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
56+
</p>
57+
</div>
58+
</div>
59+
</li>
60+
<li class="forceContentVirtualRelatedListStencil forceRecordLayout">
61+
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
62+
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
63+
<c-stencil width="100%" height="30px" radius="2px"></c-stencil>
64+
</div>
65+
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small" style="width: 100%;">
66+
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
67+
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
68+
<c-stencil width="100%" height="10px" animated="true" radius="30px"></c-stencil>
6069
</p>
6170
</div>
6271
</div>
6372
</li>
6473
</template>
65-
</ul>
66-
<!-- Drop Zone Custom -->
67-
<!-- <div class="drop-zone-container slds-var-p-around_x-small slds-var-m-around_medium">
68-
<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}>
69-
<template if:false={fileCreated}>
70-
Uploading file... <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
71-
</template>
72-
<template if:true={fileCreated}>
73-
<template if:true={inDropZone}>
74-
<span style="font-weight: bold;color: #639bd0;">Drop it here!</span>
75-
</template>
76-
<template if:false={inDropZone}>
77-
Drop a file here to upload it.
78-
</template>
74+
75+
<template if:true={loaded}>
76+
<template for:each={attachments} for:item="attachment">
77+
<li key={attachment.Id} class="forceContentVirtualRelatedListStencil forceRecordLayout">
78+
<div class="slds-list_horizontal slds-media_center slds-var-p-vertical_xx-small">
79+
<div class="slds-show_inline-block slds-align-middle thumbnailImg">
80+
<lightning-icon icon-name={attachment.icon} alternative-text="Doctype file" data-id={attachment.Id} title="Doctype"></lightning-icon>
81+
<img src={attachment.src} class="thumbnailImg slds-hide" data-id={attachment.Id} onload={handleLoad}/>
82+
</div>
83+
<div class="slds-show_inline-block slds-var-p-left_x-small slds-truncate slds-var-m-right_x-small">
84+
<a class="itemTitle uiOutputText" onclick={openPreview} data-id={attachment.ContentDocumentId}>{attachment.ContentDocument.Title}</a>
85+
<p class="slds-m-around_none secondaryFields slds-text-body_small slds-truncate">
86+
<span>
87+
<lightning-formatted-date-time value={attachment.ContentDocument.CreatedDate}></lightning-formatted-date-time>
88+
</span>
89+
<span>{attachment.size}</span>
90+
<span>{attachment.ContentDocument.FileExtension}</span>
91+
</p>
92+
</div>
93+
</div>
94+
</li>
7995
</template>
80-
</div>
81-
</div> -->
96+
</template>
97+
</ul>
8298
<div style="text-align: center;">
8399
<lightning-file-upload
84100
class="file-upload forceContentRelatedListPreviewFileList"
@@ -94,7 +110,14 @@ <h2 slot="title">
94110
<template if:true={moreRecords}>
95111
<a onclick={loadMore}>
96112
<div class="slds-card__footer">
97-
<span>View More</span>
113+
<template if:true={moreLoaded}>
114+
<span>View More</span>
115+
</template>
116+
<template if:false={moreLoaded}>
117+
<div style="position: relative; min-height:50px;">
118+
<lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
119+
</div>
120+
</template>
98121
</div>
99122
</a>
100123
</template>

‎force-app/main/default/lwc/filePreview/filePreview.js

+26-30
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,35 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
1515
@api defaultNbFileDisplayed;
1616
@api limitRows;
1717

18+
@track moreLoaded = true;
19+
@track loaded = false;
1820
@track attachments;
1921
@track totalFiles;
2022
@track moreRecords;
2123
@track offset=0;
22-
@track fileCreated = true;
23-
@track inDropZone = false;
24-
@track sortIcon;
25-
@track sortOrder;
26-
@track sortField;
27-
@track disabled;
24+
@track sortIcon = 'utility:arrowdown';
25+
@track sortOrder = 'DESC';
26+
@track sortField = 'ContentDocument.CreatedDate';
27+
@track disabled = true;
28+
@track filters = [
29+
{
30+
'id' : 'gt100KB',
31+
'label' : '>= 100 KB',
32+
'checked' : true
33+
},
34+
{
35+
'id' : 'lt100KBgt10KB',
36+
'label' : '< 100 KB and > 10 KB',
37+
'checked' : true
38+
},
39+
{
40+
'id' : 'lt10KB',
41+
'label' : '<= 10 KB',
42+
'checked' : true
43+
}
44+
];
2845

2946
title;
30-
@track filters;
3147
conditions;
3248
documentForceUrl;
3349

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

4460
// Initialize component
4561
connectedCallback() {
46-
this.sortOrder = 'DESC';
47-
this.sortField = 'ContentDocument.CreatedDate';
48-
this.sortIcon = 'utility:arrowdown';
49-
this.disabled = true;
50-
51-
this.filters = [
52-
{
53-
'id' : 'gt100KB',
54-
'label' : '>= 100 KB',
55-
'checked' : true
56-
},
57-
{
58-
'id' : 'lt100KBgt10KB',
59-
'label' : '< 100 KB and > 10 KB',
60-
'checked' : true
61-
},
62-
{
63-
'id' : 'lt10KB',
64-
'label' : '<= 10 KB',
65-
'checked' : true
66-
}
67-
];
68-
6962
this.initRecords();
7063
}
7164

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

10295
this.disabled = false;
96+
this.loaded = true;
10397

10498
})
10599
.catch(error => {
@@ -183,6 +177,7 @@ export default class FilePreview extends NavigationMixin(LightningElement) {
183177
}
184178

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

194189
self.updateCounters(result.length);
190+
self.moreLoaded = true;
195191
});
196192
}
197193

0 commit comments

Comments
 (0)