ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Move uploading logic to dedicated FileService

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-06-13 18:57:26 +02:00
parent 7b230d567e
commit 8229fbacea
6 changed files with 134 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/style.scss
View File

@@ -143,6 +143,10 @@ input.input-inline {
.card {
opacity: 1;
&.file-drop {
}
}
&.card-selected {
@@ -657,16 +661,16 @@ input.input-inline {
.drop-indicator {
display: none;
}
.file-drop .drop-indicator {
.card .nv-file-over,
.drop-indicator.nv-file-over {
display: block;
position: absolute;
width: 100%;
height: calc(100% - 40px);
height: 100%;
background-color: #fff;
z-index: 100;
opacity: 0.9;
text-align: center;
margin-top: 40px;
p {
width: calc(100% - 20px);
@@ -679,6 +683,7 @@ input.input-inline {
}
}
#card-meta { // TODO: use .card-block instead?
height: 100%;
display: flex;

11
js/controller/BoardController.js
View File

@@ -22,7 +22,7 @@
import app from '../app/App.js';
/* global oc_defaults OC */
app.controller('BoardController', function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions, $filter) {
app.controller('BoardController', function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions, $filter, FileService) {
$scope.sidebar = $rootScope.sidebar;
@@ -40,6 +40,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
$scope.labelservice = LabelService;
$scope.defaultColors = ['31CC7C', '317CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'];
$scope.board = BoardService.getCurrent();
$scope.uploader = FileService.uploader;
// workaround for $stateParams changes not being propagated
$scope.$watch(function() {
@@ -353,11 +354,11 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
};
};
$scope.attachmentCount = function(attachments) {
if (Array.isArray(attachments)) {
return attachments.filter((obj) => obj.deletedAt === 0).length;
$scope.attachmentCount = function(card) {
if (Array.isArray(card.attachments)) {
return card.attachments.filter((obj) => obj.deletedAt === 0).length;
}
return attachments;
return card.attachmentCount;
};
});

42
js/controller/CardController.js
View File

@@ -23,7 +23,7 @@
/* global app moment */
import app from '../app/App.js';
app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileUploader) {
app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
$scope.sidebar = $rootScope.sidebar;
$scope.status = {
lastEdit: 0,
@@ -31,49 +31,13 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
};
$scope.cardservice = CardService;
$scope.fileservice = FileService;
$scope.cardId = $stateParams.cardId;
$scope.statusservice = StatusService.getInstance();
$scope.boardservice = BoardService;
$scope.uploader = new FileUploader();
$scope.runUpload = function(fileItem) {
fileItem.url = OC.generateUrl('/apps/deck/cards/' + $scope.cardId + '/attachment');
fileItem.formData = [
{
requesttoken: oc_requesttoken,
type: 'deck_file',
}
];
$scope.uploader.uploadItem(fileItem);
};
$scope.uploader.onAfterAddingFile = function(fileItem) {
let existingFile = $scope.cardservice.getCurrent().attachments.find((attachment) => {
return attachment.data === fileItem.file.name;
});
if (typeof existingFile !== 'undefined') {
OC.dialogs.confirm(
`A file with the name ${fileItem.file.name} already exists. Do you want to overwrite it?`,
'File already exists',
function(result) {
if (result) {
$scope.runUpload(fileItem);
} else {
// TODO: check for proper number and append it before the file extension
// TODO: iterate over attachments (check if matches "file.name (n)") increase n
fileItem.file.name = fileItem.file.name + '.1';
}
}
);
} else {
$scope.runUpload(fileItem);
}
};
$scope.uploader.onSuccessItem = function(item, response) {
$scope.cardservice.getCurrent().attachments.push(response);
};
$scope.isArray = angular.isArray;
$scope.mimetypeForAttachment = function(attachment) {
let url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype);

105
js/service/FileService.js Normal file
View File

@@ -0,0 +1,105 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import app from '../app/App.js';
export default class FileService {
constructor ($http, FileUploader, CardService) {
this.uploader = new FileUploader();
this.cardservice = CardService;
this.uploader.onAfterAddingFile = this.onAfterAddingFile.bind(this);
this.uploader.onSuccessItem = this.onSuccessItem.bind(this);
}
runUpload (fileItem, attachmentId) {
fileItem.url = OC.generateUrl('/apps/deck/cards/' + fileItem.cardId + '/attachment');
if (typeof attachmentId !== 'undefined') {
fileItem.method = 'UPDATE';
fileItem.url = OC.generateUrl('/apps/deck/cards/' + fileItem.cardId + '/attachment/' + attachmentId);
}
fileItem.formData = [
{
requesttoken: oc_requesttoken,
type: 'deck_file',
}
];
this.uploader.uploadItem(fileItem);
};
runUpdate (fileItem) {
fileItem.url = OC.generateUrl('/apps/deck/cards/' + fileItem.cardId + '/attachment');
fileItem.formData = [
{
requesttoken: oc_requesttoken,
type: 'deck_file',
}
];
this.uploader.uploadItem(fileItem);
};
onAfterAddingFile (fileItem) {
// Fetch card details before trying to upload so we can detect filename collisions properly
let self = this;
this.cardservice.fetchOne(fileItem.cardId).then(function (data) {
let attachments = self.cardservice.get(fileItem.cardId).attachments;
let existingFile = attachments.find((attachment) => {
return attachment.data === fileItem.file.name;
});
if (typeof existingFile !== 'undefined') {
OC.dialogs.confirm(
`A file with the name ${fileItem.file.name} already exists. Do you want to overwrite it?`,
'File already exists',
function (result) {
if (result) {
self.runUpload(fileItem, existingFile.id);
} else {
let fileName = existingFile.extendedData.info.filename;
let foundFilesMatching = attachments.filter((attachment) => {
return attachment.extendedData.info.extension === existingFile.extendedData.info.extension
&& attachment.extendedData.info.filename.startsWith(fileName);
});
let nextIndex = foundFilesMatching.length+1;
fileItem.file.name = fileName + ' (' + nextIndex + ').' + existingFile.extendedData.info.extension;
self.runUpload(fileItem);
}
}
);
} else {
self.runUpload(fileItem);
}
}, function (error) {
});
};
onSuccessItem(item, response) {
this.cardservice.get(item.cardId).attachments.push(response);
};
}
app.service('FileService', FileService);

10
templates/part.board.mainView.php
View File

@@ -61,7 +61,11 @@
data-as-sortable-item
ng-click="$event.stopPropagation()"
ui-sref="board.card({boardId: id, cardId: c.id})"
ng-class="{'archived': cardservice.get(c.id).archived, 'has-labels': cardservice.get(c.id).labels.length>0, 'current': cardservice.get(c.id).id == params.cardId }">
ng-class="{'archived': cardservice.get(c.id).archived, 'has-labels': cardservice.get(c.id).labels.length>0, 'current': cardservice.get(c.id).id == params.cardId }"
nv-file-drop="" uploader="uploader" options="{cardId: c.id}">
<div class="drop-indicator" uploader="uploader" nv-file-over>
<p><?php p($l->t('Drop your files here to upload it to the card')); ?></p>
</div>
<div data-as-sortable-item-handle>
<div class="card-upper">
<h4>{{ cardservice.get(c.id).title }}</h4>
@@ -84,9 +88,9 @@
<i class="icon icon-checkmark"></i>
<span>{{ getCheckboxes(cardservice.get(c.id).description)[0] }}/{{ getCheckboxes(cardservice.get(c.id).description)[1] }}</span>
</div>
<div class="card-files" ng-if="attachmentCount(cardservice.get(c.id).attachments) > 0">
<div class="card-files" ng-if="attachmentCount(cardservice.get(c.id)) > 0">
<i class="icon icon-files-dark"></i>
<span>{{ attachmentCount(cardservice.get(c.id).attachments) }}</span>
<span>{{ attachmentCount(cardservice.get(c.id)) }}</span>
</div>
<div class="card-assigned-users">
<div class="assigned-user" ng-repeat="user in cardservice.get(c.id).assignedUsers | limitTo: 3">

10
templates/part.card.php
View File

@@ -1,5 +1,5 @@
<div nv-file-drop="" uploader="uploader" nv-file-over over-class="file-drop" class="drop-zone">
<div class="drop-indicator">
<div nv-file-drop="" uploader="uploader" class="drop-zone" options="{cardId: cardservice.getCurrent().id}">
<div class="drop-indicator" nv-file-over uploader="uploader">
<p><?php p($l->t('Drop your files here to upload it to the card')); ?></p>
</div>
<div id="board-status" ng-if="statusservice.active">
@@ -90,11 +90,11 @@
<div class="section-header">
<h4><?php p($l->t('Attachments')); ?></h4>
<label for="attachment-upload" class="button icon-upload"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" />
<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}" />
</div>
<div class="section-content card-attachments" v-if="cardservice.getCurrent().attachments">
<div class="section-content card-attachments" ng-if="cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)">
<ul>
<li class="attachment" ng-repeat="attachment in cardservice.getCurrent().attachments | orderBy: ['deletedAt', '-lastModified']" ng-class="{deleted: attachment.deletedAt > 0}">
<li class="attachment" ng-repeat="attachment in cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']" ng-class="{deleted: attachment.deletedAt > 0}">
<a class="fileicon" ng-style="mimetypeForAttachment(attachment)" ng-href="{{ attachmentUrl(attachment) }}"></a>
<div class="details">
<a ng-href="{{ attachmentUrl(attachment) }}" target="_blank">