Skip to content

Commit

Permalink
Merge from Develop - Show Upload Date (#16)
Browse files Browse the repository at this point in the history
* Display Upload date
* Fix error msg displayed too low
* Ability to show upload btn above
* Handle old File Types display for existing attachments
* CSS for when only Upload Date is displayed without File Types
* When showUploadBtnAbove display new row on top of the list
* Update documentation
* Fix for Upload Date label becoming blue when clicking on File Type dropdown..weird stuff
* Upload Date demo
* Adjust responsive layout
* Remove left border from File type when Upload Date is shown
* Fix for upload btn displaying on 2 lines in IE11
* Update bower.json
  • Loading branch information
acory authored Jul 12, 2017
1 parent 5503c9f commit e7c9baa
Show file tree
Hide file tree
Showing 8 changed files with 220 additions and 51 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ Properties:
* activateFileTypes, Boolean, default false
* fileTypes, Array, default []
* fileTypesLabel, String, default 'File Type'
* showUploadDate, Boolean, default false
* showUploadBtnAbove, Boolean, default false


## Styling
Expand Down
29 changes: 29 additions & 0 deletions behaviors/date-behavior.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<link rel="import" href="../../moment-element/moment-import.html">
<script>
window.etoolsFileBehaviors = window.etoolsFileBehaviors || {};
/** @polymerBehavior etoolsFileBehaviors.DateBehavior */
etoolsFileBehaviors.DateBehavior = {

/**
* Format date string to any format supported by momentjs
*/
prettyDate: function(dateInput, format) {
if (!format) {
format = 'D MMM YYYY';
}
var date;
if (dateInput instanceof Date) {
date = dateInput;
} else {
date = new Date(dateInput);
}

if (date.toString() !== 'Invalid Date') {
// using moment.utc() ensures that the date will not be changed no matter timezone the user has set
return moment.utc(date).format(format);
}

return '';
}
};
</script>
5 changes: 3 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "etools-file",
"description": "This element will allow you to select and prepare the files you are gonna upload.",
"version": "1.0.10",
"version": "1.2.0",
"license": "https://github.com/unicef-polymer/etools-file/blob/master/LICENSE.md",
"main": "etools-file.html",
"dependencies": {
Expand All @@ -12,7 +12,8 @@
"paper-toast": "PolymerElements/paper-toast#^1.3.0",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.5.0",
"paper-menu": "PolymerElements/paper-menu#^1.2.2",
"paper-item": "PolymerElements/paper-item#^1.2.1"
"paper-item": "PolymerElements/paper-item#^1.2.1",
"moment-element": "^2.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
Expand Down
7 changes: 5 additions & 2 deletions demo/demo-helper.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@
value: {
id: null,
intervention: 4,
type: null
type: null,
upload_date: null
},
notify: true
},
Expand Down Expand Up @@ -122,6 +123,7 @@
type: 8,
attachment: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",
attachment_file: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",
upload_date: '2017-07-05',

// prepared from attachment_file
file_name: 'A nice cat 1',
Expand All @@ -133,6 +135,7 @@
type: 7,
attachment: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",
attachment_file: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",
upload_date: '2017-08-09',

// prepared from attachment_file
file_name: 'A nice cat 2',
Expand All @@ -144,7 +147,7 @@
type: 4,
attachment: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",
attachment_file: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg",

upload_date: '2016-05-09',
// prepared from attachment_file
file_name: 'A nice cat 3',
path: "https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg"
Expand Down
20 changes: 20 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,26 @@ <h3>Custom file array, with ids and other data, all not used properties will rem
</template>
</demo-snippet>

<h3>List of uploaded files with Upload Date and File Types columns and Upload File button displayed above </h3>

<demo-snippet>
<template is="dom-bind">
<demo-helper single-file-data="{{singleFileData}}"
file-model={{fileModel}}
multiple-file-data={{multipleFilesData}}
file-types={{fileTypes}}></demo-helper>

<div class="layout horizontal wrap" style="margin: 30px 0;">
<etools-file files=[[multipleFilesData]]
file-model="[[fileModel]]"
file-types=[[fileTypes]]
label="Attachment" multiple activate-file-types
show-upload-date
show-upload-btn-above></etools-file>
</div>

</template>
</demo-snippet>
</div>
</body>
</html>
84 changes: 66 additions & 18 deletions etools-file.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">

<link rel="import" href="behaviors/date-behavior.html">

<link rel="import" href="style/etools-file-style.html">
<link rel="import" href="style/additional-columns-displayed-style.html">
<!--
`etools-file`
Expand Down Expand Up @@ -47,7 +50,7 @@
<dom-module id="etools-file">

<template>
<style include="etools-file-style">
<style include="etools-file-style additional-columns-displayed-style">

</style>

Expand All @@ -62,19 +65,28 @@
<div class="file-area">

<div class$="selected-file-container [[_getFileSelectedClass(file)]]">
<iron-icon class="file-icon" icon="attachment"></iron-icon>
<template is="dom-if" if="[[showUploadDate]]">
<div class="upload-date">
<paper-input-container always-float-label>
<label slot="label">Upload Date</label>
<div class="paper-input-input">
[[_formatUploadDate(file.upload_date, file.id)]]
</div>
</paper-input-container>
</div>
</template>
<div class="file-name-wrapper">
<iron-icon class="file-icon" icon="attachment"></iron-icon>
<span class="file-name" title="[[file.file_name]]">[[file.file_name]]</span>
</div>

<template is="dom-if" if="[[_showReadonlyType(file.type, readonly)]]">
<div class="file-type-input-wrapper">
<paper-input class="file-type-input" label="[[fileTypesLabel]]"
value="[[_getFileTypeStr(file.type)]]"
placeholder="&#8212;" readonly></paper-input>
</div>
</template>
<template is="dom-if" if="[[_showFileType(fileTypes.length, readonly)]]">
<template is="dom-if" if="[[_showFileType(fileTypes.length, readonly, file.type)]]">
<!-- types dropdown -->
<paper-dropdown-menu class="type-dropdown" label="[[fileTypesLabel]]" placeholder="&#8212;" noink>
<paper-menu id$="typeDropdown_[[index]]" class="dropdown-content"
Expand All @@ -90,6 +102,7 @@
</template>

</div>

<div class$="file-actions [[_getFileSelectedClass(file)]]">
<!-- download btn if file was uploaded -->
<paper-button class="download-button"
Expand All @@ -115,6 +128,7 @@
Delete
</paper-button>
</div>

</div>
</template>
</div>
Expand Down Expand Up @@ -163,7 +177,9 @@
Polymer({

is: 'etools-file',

behaviors: [
etoolsFileBehaviors.DateBehavior
],
properties: {
label: {
type: String,
Expand Down Expand Up @@ -230,6 +246,20 @@
},
reflectToAttribute: true
},
showUploadDate: {
type: Boolean,
value: function() {
return false;
},
reflectToAttribute: true
},
showUploadBtnAbove: {
type: Boolean,
value: function() {
return false;
},
reflectToAttribute: true
},
fileTypes: {
type: Array,
value: []
Expand All @@ -256,6 +286,15 @@
this.files = [];
}
},
_formatUploadDate: function(uploadDate, fileId) {
if (!fileId) {
return this.prettyDate(new Date(Date.now()));
}
if (!uploadDate) {
return '-';
}
return this.prettyDate(uploadDate);
},
_readonlyChanged: function(newValue) {
if (newValue) {
this.set('hideDeleteBtn', true);
Expand All @@ -275,27 +314,33 @@
}
return this.hideDeleteBtn;
},
_showFileType: function(fileTypesLength, readonly) {
return this.activateFileTypes && fileTypesLength > 0 && readonly === false;
_showFileType: function(fileTypesLength, readonly, fileType) {
return this.activateFileTypes && fileTypesLength > 0 && !readonly;
},

_showReadonlyType: function(fileType, readonly) {
return readonly && this.activateFileTypes;
return this.activateFileTypes && readonly;
},

_getFileTypeStr: function(fileType) {
if (this.fileTypes.length > 0) {
var type = this.fileTypes.filter(function(type) {
return parseInt(type.id, 10) === parseInt(fileType, 10);
})[0];
if (type) {
return type.name;
}
if (!this.fileTypes.length || !fileType) {
return null;
}
var type = this._findInAvailableFileTypes(fileType);
if (type) {
return type.name;
}
return null;
},
_findInAvailableFileTypes: function(fileType) {
var type = this.fileTypes.filter(function(type) {
return parseInt(type.id, 10) === parseInt(fileType, 10);
});
if (type && type.length) {
return type[0];
}
return null;
},

_showLabel: function(label) {
return typeof label === 'string' && label !== '';
},
Expand Down Expand Up @@ -384,8 +429,11 @@
var fileObj = this._getFileModel();
fileObj.file_name = files[i].name;
fileObj.raw = files[i];

this.push('files', fileObj);
if (this.showUploadBtnAbove) {
this.unshift('files', fileObj);
} else {
this.push('files', fileObj);
}
} else {
filesAlreadySelected.push(fileAlreadySelected[0]);
}
Expand Down
83 changes: 83 additions & 0 deletions style/additional-columns-displayed-style.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">

<dom-module id="additional-columns-displayed-style">
<template>
<style>
:host([show-upload-btn-above]) .files-wrapper {
order: 2;
}
:host([activate-file-types]) .file-name-wrapper,
:host([show-upload-date]) .file-name-wrapper {
width: calc(100% - 305px);
padding-right: 15px;
box-sizing: border-box;

}
:host([activate-file-types][show-upload-date]) .file-name-wrapper {
width: calc(100% - 440px);
padding-right: 15px;
box-sizing: border-box;
}

:host([activate-file-types]) .file-name-wrapper,
:host([show-upload-date]) .file-name-wrapper {
@apply(--layout-horizontal);
@apply(--layout-start-justified);
@apply(--layout-center);
box-sizing: border-box;
min-width: 140px;
min-height: 62px;

}
:host([activate-file-types]) .selected-file-container {
border-bottom: none;
}
:host([show-upload-date]) .selected-file-container {
border-bottom: none;
}

:host([activate-file-types]) .file-area,
:host([show-upload-date]) .file-area {
border-bottom: 1px solid var(--etools-file-area-with-type-border-color, rgba(0, 0, 0, 0.12));
padding: 15px;
@apply(--etools-file-area-with-type);
}
:host([activate-file-types][show-upload-btn-above]) .file-area {
border-bottom: none;
border-top: 1px solid var(--etools-file-area-with-type-border-color, rgba(0, 0, 0, 0.12));
padding: 15px;
@apply(--etools-file-area-with-type);
}
:host([show-upload-date][show-upload-btn-above]) .file-area {
border-bottom: none;
border-top: 1px solid var(--etools-file-area-with-type-border-color, rgba(0, 0, 0, 0.12));
padding: 15px;
@apply(--etools-file-area-with-type);
}
:host([show-upload-date]) .type-dropdown {
border-left: none;
}
:host([show-upload-btn-above]) .upload-button {
margin-top: 0px !important;
margin-bottom: 25px !important;
}
.upload-date paper-input-container {
--paper-input-container-label-floating: {
color: var(--secondary-text-color, #737373);
};
}
.upload-date {
box-sizing: border-box;
float: left;
border-right: 1px solid var(--etools-file-type-underline-color, rgba(0, 0, 0, 0.12));
padding-right: 15px;
padding-bottom: 8px;
margin-right: 15px;
min-width: 95px;
height: 62px;
}

</style>
</template>
</dom-module>
Loading

0 comments on commit e7c9baa

Please sign in to comment.