Merge pull request #488 from nextcloud/feature/109/file-attachments

File attachments for cards

.eslintrc.yml

@@ -33,6 +33,7 @@ rules:
   no-fallthrough: error
   no-mixed-spaces-and-tabs: error
   no-unused-vars: warn
+  no-useless-escape: warn
   no-use-before-define: error
   semi: ["error", "always"]
   indent:

appinfo/database.xml

@@ -198,12 +198,6 @@
                 <autoincrement>1</autoincrement>
                 <length>4</length>
             </field>
-            <field>
-                <name>title</name>
-                <type>text</type>
-                <notnull>true</notnull>
-                <length>100</length>
-            </field>
             <field>
                 <name>card_id</name>
                 <type>integer</type>
@@ -218,20 +212,34 @@
             </field>
             <field>
                 <name>data</name>
-                <type>clob</type>
+                <type>text</type>
             </field>
             <field>
                 <name>last_modified</name>
                 <type>integer</type>
-                <default></default>
+                <default/>
                 <length>8</length>
                 <notnull>false</notnull>
                 <unsigned>true</unsigned>
             </field>
             <field>
                 <name>created_at</name>
                 <type>integer</type>
-                <default></default>
+                <default/>
+                <length>8</length>
+                <notnull>false</notnull>
+                <unsigned>true</unsigned>
+            </field>
+            <field>
+                <name>created_by</name>
+                <type>text</type>
+                <notnull>true</notnull>
+                <length>64</length>
+            </field>
+            <field>
+                <name>deleted_at</name>
+                <type>integer</type>
+                <default>0</default>
                 <length>8</length>
                 <notnull>false</notnull>
                 <unsigned>true</unsigned>

appinfo/routes.php

@@ -59,6 +59,16 @@
 		['name' => 'card#assignUser', 'url' => '/cards/{cardId}/assign', 'verb' => 'POST'],
 		['name' => 'card#unassignUser', 'url' => '/cards/{cardId}/assign/{userId}', 'verb' => 'DELETE'],
 
+		['name' => 'attachment#getAll', 'url' => '/cards/{cardId}/attachments', 'verb' => 'GET'],
+		['name' => 'attachment#create', 'url' => '/cards/{cardId}/attachment', 'verb' => 'POST'],
+		['name' => 'attachment#display', 'url' => '/cards/{cardId}/attachment/{attachmentId}', 'verb' => 'GET'],
+		['name' => 'attachment#update', 'url' => '/cards/{cardId}/attachment/{attachmentId}', 'verb' => 'PUT'],
+		// also allow to use POST for updates so we can properly access files when using application/x-www-form-urlencoded
+		['name' => 'attachment#update', 'url' => '/cards/{cardId}/attachment/{attachmentId}', 'verb' => 'POST'],
+		['name' => 'attachment#delete', 'url' => '/cards/{cardId}/attachment/{attachmentId}', 'verb' => 'DELETE'],
+		['name' => 'attachment#restore', 'url' => '/cards/{cardId}/attachment/{attachmentId}/restore', 'verb' => 'GET'],
+
+
 		// labels
 		['name' => 'label#create', 'url' => '/labels', 'verb' => 'POST'],
 		['name' => 'label#update', 'url' => '/labels/{labelId}', 'verb' => 'PUT'],

css/style.scss

@@ -143,6 +143,10 @@ input.input-inline {
 
 	.card {
 		opacity: 1;
+
+		&.file-drop {
+
+		}
 	}
 
 	&.card-selected {
@@ -261,10 +265,6 @@ input.input-inline {
 			margin-right: 6px;
 		}
 	}
-
-	> button {
-		padding: 16px 20px;
-	}
 }
 
 .filter-select {
@@ -461,7 +461,7 @@ input.input-inline {
 			}
 		}
 
-		.card-tasks {
+		.card-tasks, .card-files {
 			border-radius: 3px;
 			margin: 4px 4px 4px 0px;
 			padding: 0 2px;
@@ -472,6 +472,7 @@ input.input-inline {
 
 			.icon {
 				background-size: contain;
+				margin-right: 2px;
 			}
 		}
 
@@ -653,6 +654,32 @@ input.input-inline {
 	}
 }
 
+.drop-indicator {
+	display: none;
+}
+.card .nv-file-over,
+.drop-indicator.nv-file-over {
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+	z-index: 100;
+	opacity: 0.9;
+	text-align: center;
+
+	p {
+		width: calc(100% - 20px);
+		height: calc(100% - 20px);
+		position: absolute;
+		padding: 20px;
+		border: 1px dashed #AAA;
+		margin: 10px;
+		border-radius: 5px;
+	}
+}
+
+
 #card-meta { // TODO: use .card-block instead?
 	height: 100%;
 	display: flex;
@@ -696,10 +723,23 @@ input.input-inline {
 			flex: 1;
 		}
 	}
+	.section-header-tabbed {
+		margin-top: 10px;
+		margin-bottom: 5px;
+		flex-shrink: 0;
+		display: flex;
+		.tabHeaders {
+			margin: 0;
+			flex-grow: 1;
+		}
+		.tabDetails {
+			display: flex;
+		}
+	}
 
 	.save-indicator {
 		border-radius: 3px;
-		float: right;
+		margin: 5px;
 		padding: 0 10px;
 		font-size: 8pt;
 		display: none;
@@ -750,6 +790,97 @@ input.input-inline {
 		}
 	}
 
+	.icon-upload.icon-loading-small {
+		background-image: none;
+	}
+	.attachment-list-wrapper {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background-color: rgba($color-darkgrey, 0.5);
+		left: 0;
+		top: 0;
+	}
+	.attachment-list {
+		&.selector {
+			padding: 10px;
+			position: absolute;
+			width: 30%;
+			max-width: 500px;
+			min-width: 200px;
+			max-height: 50%;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background-color: $color-main-background;
+			z-index: 2;
+			border-radius: 3px;
+			box-shadow: 0 0 3px $color-darkgrey;
+			overflow: scroll;
+		}
+		h3.attachment-selector {
+			margin: 0 0 10px;
+			padding: 0;
+			.icon-close {
+				display: inline-block;
+				float: right;
+			}
+		}
+
+		li.attachment {
+			display: flex;
+			padding: 3px;
+
+			&.deleted {
+				opacity: .5;
+			}
+
+			.fileicon {
+				display: inline-block;
+				min-width: 32px;
+				width: 32px;
+				height: 32px;
+				background-size: contain;
+			}
+			.details {
+				flex-grow: 1;
+				flex-shrink: 1;
+				min-width: 0;
+				flex-basis: 50%;
+				line-height: 110%;
+				padding: 2px;
+			}
+			.filename {
+				width: 70%;
+				display: flex;
+				.basename {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					padding-bottom: 2px;
+				}
+				.extension {
+					opacity: 0.7;
+				}
+			}
+			.filesize, .filedate {
+				font-size: 90%;
+				color: $color-darkgrey;
+			}
+			.app-popover-menu-utils {
+				position: relative;
+				right: -10px;
+				button {
+					height: 32px;
+					width: 42px;
+				}
+			}
+			button.icon-history {
+				width: 44px;
+			}
+		}
+	}
+
 	.card-description {
 		&.section-header {
 			.save-indicator {
@@ -1137,7 +1268,11 @@ input.input-inline {
 			border: 0 !important;
 			overflow: hidden;
 		}
+		.select2-search-field {
+			margin-right: -10px;
+		}
 	}
+
 	.select2-choice {
 		height: auto;
 	}
@@ -1234,6 +1369,13 @@ input.input-inline {
 		}
 	}
 
+	img {
+		max-width: 100%;
+		max-height: 50vh;
+		margin: auto;
+		display: block;
+	}
+
 	input[type=checkbox] {
 		margin: 0px 10px 0px 0px;
 		line-height: 10px;

js/app/App.js

@@ -47,12 +47,14 @@ import angularuiselect from 'ui-select';
 import ngsortable from 'ng-sortable';
 import md from 'angular-markdown-it';
 import nganimate from 'angular-animate';
+import 'angular-file-upload';
 
 var app = angular.module('Deck', [
 	ngsanitize,
 	uirouter,
 	angularuiselect,
-	ngsortable, md, nganimate
+	ngsortable, md, nganimate,
+	'angularFileUpload'
 ]);
 
 export default app;

js/app/Config.js

@@ -74,6 +74,9 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
 		})
 		.state('board.card', {
 			url: '/card/:cardId',
+			params: {
+				tab: {value: 0, dynamic: true},
+			},
 			views: {
 				'sidebarView': {
 					templateUrl: '/card.sidebarView.html',
@@ -82,4 +85,28 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
 			}
 		});
 
+	$provide.decorator('nvFileOverDirective', function ($delegate) {
+		var directive = $delegate[0],
+			link = directive.link;
+
+		directive.compile = function () {
+			return function (scope, element, attrs) {
+				var overClass = attrs.overClass || 'nv-file-over';
+				link.apply(this, arguments);
+				let counter = 0;
+				element.on('dragenter', function (event) {
+					counter++;
+				});
+				element.on('dragleave', function (event) {
+					counter--;
+					if (counter <= 0) {
+						$('.' + overClass).removeClass(overClass);
+					}
+				});
+			};
+		};
+
+		return $delegate;
+	});
+
 });

js/app/Run.js

@@ -24,6 +24,7 @@ import app from './App.js';
 /* global Snap */
 app.run(function ($document, $rootScope, $transitions, BoardService) {
 	'use strict';
+
 	$document.click(function (event) {
 		$rootScope.$broadcast('documentClicked', event);
 	});