Refactor attachments: use directives to show its
David Barragán Merino
parent
ada119933b
commit
9dbe70fed6
|
|
@ -0,0 +1,152 @@
|
||||||
|
###
|
||||||
|
# Copyright (C) 2014 Andrey Antukh <niwi@niwi.be>
|
||||||
|
# Copyright (C) 2014 Jesús Espino Garcia <jespinog@gmail.com>
|
||||||
|
# Copyright (C) 2014 David Barragán Merino <bameda@dbarragan.com>
|
||||||
|
#
|
||||||
|
# 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/>.
|
||||||
|
#
|
||||||
|
# File: modules/common/attachments.coffee
|
||||||
|
###
|
||||||
|
|
||||||
|
taiga = @.taiga
|
||||||
|
sizeFormat = @.taiga.sizeFormat
|
||||||
|
|
||||||
|
module = angular.module("taigaCommon")
|
||||||
|
|
||||||
|
|
||||||
|
#############################################################################
|
||||||
|
## Attachments Directive
|
||||||
|
#############################################################################
|
||||||
|
|
||||||
|
AttachmentsDirective = ->
|
||||||
|
link = ($scope, $el, $attrs, $model) ->
|
||||||
|
#$ctrl = $el.controller()
|
||||||
|
## Total attachments counter
|
||||||
|
$scope.$watch "attachmentsCount", (attachmentsCount) ->
|
||||||
|
$el.find("span.attachments-num").html(attachmentsCount)
|
||||||
|
|
||||||
|
## See deprecated attachments
|
||||||
|
$scope.showDeprecatedAttachments = false
|
||||||
|
|
||||||
|
$scope.$watch "deprecatedAttachmentsCount", (deprecatedAttachmentsCount) ->
|
||||||
|
$el.find("span.more-attachments-num").html("(#{deprecatedAttachmentsCount} deprecated)") # TODO: i18n
|
||||||
|
|
||||||
|
if deprecatedAttachmentsCount
|
||||||
|
$el.find("a.more-attachments").removeClass("hidden")
|
||||||
|
else
|
||||||
|
$el.find("a.more-attachments").addClass("hidden")
|
||||||
|
|
||||||
|
$el.on "click", "a.more-attachments", ->
|
||||||
|
event.preventDefault()
|
||||||
|
target = angular.element(event.currentTarget)
|
||||||
|
|
||||||
|
$scope.showDeprecatedAttachments = not $scope.showDeprecatedAttachments
|
||||||
|
|
||||||
|
if $scope.showDeprecatedAttachments
|
||||||
|
target.find("span.text").html("- hide deprecated attachments") # TODO: i18n
|
||||||
|
$el.find("div.single-attachment.deprecated").removeClass("hidden")
|
||||||
|
else
|
||||||
|
target.find("span.text").html("+ show deprecated attachments") # TODO: i18n
|
||||||
|
$el.find("div.single-attachment.deprecated").addClass("hidden")
|
||||||
|
|
||||||
|
## On destroy
|
||||||
|
$scope.$on "$destroy", ->
|
||||||
|
$el.off()
|
||||||
|
|
||||||
|
return {
|
||||||
|
link: link,
|
||||||
|
require: "ngModel"
|
||||||
|
}
|
||||||
|
|
||||||
|
module.directive("tgAttachments", [AttachmentsDirective])
|
||||||
|
|
||||||
|
|
||||||
|
#############################################################################
|
||||||
|
## Attachment Directive
|
||||||
|
#############################################################################
|
||||||
|
|
||||||
|
AttachmentDirective = ($log) ->
|
||||||
|
singleAttachment = _.template("""
|
||||||
|
<div class="attachment-name">
|
||||||
|
<span class="icon.icon-document"></span>
|
||||||
|
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
|
||||||
|
</div>
|
||||||
|
<div class="attachment-comment">
|
||||||
|
<span class="attachment-size">(<%- size %>)</span>
|
||||||
|
<span><%- description %></span>
|
||||||
|
</div>
|
||||||
|
<a class="settings icon icon-edit" href="" title="Edit"></a>
|
||||||
|
<a class="settings icon icon-delete" href="" title="Delete"></a>
|
||||||
|
<a class="settings icon icon-drag-v" href="" title=""Drag"></a>
|
||||||
|
""") #TODO: i18n
|
||||||
|
|
||||||
|
singleAttachmentEditable = _.template("""
|
||||||
|
<div class="attachment-name">
|
||||||
|
<span class="icon.icon-document"></span>
|
||||||
|
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
|
||||||
|
</div>
|
||||||
|
<div class="editable editable-attachment-comment">
|
||||||
|
<span class="attachment-size">(<%- size %>)</span>
|
||||||
|
<input type="text" />
|
||||||
|
</div>
|
||||||
|
<div class="editable editable-attachment-deprecated">
|
||||||
|
<input type="checkbox" id="attach-<%- id %>-is-deprecated" />
|
||||||
|
<label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
|
||||||
|
</div>
|
||||||
|
<a class="editable icon icon-floppy" href="" title="Save"></a>
|
||||||
|
<a class="editable icon icon-delete" href="" title="Cancel"></a>
|
||||||
|
""") # TODO: i18n
|
||||||
|
|
||||||
|
link = ($scope, $el, $attrs, $model) ->
|
||||||
|
render = (attachment, isEditable=false) ->
|
||||||
|
ctx = {
|
||||||
|
id: attachment.id
|
||||||
|
name: attachment.name
|
||||||
|
url: attachment.url
|
||||||
|
size: sizeFormat(attachment.size)
|
||||||
|
description: attachment.description
|
||||||
|
isDeprecated: attachment.is_deprecated
|
||||||
|
}
|
||||||
|
|
||||||
|
if isEditable
|
||||||
|
html = singleAttachmentEditable(ctx)
|
||||||
|
else
|
||||||
|
html = singleAttachment(ctx)
|
||||||
|
$el.html(html)
|
||||||
|
|
||||||
|
if attachment.is_deprecated
|
||||||
|
$el.addClass("deprecated")
|
||||||
|
if $scope.showDeprecatedAttachments
|
||||||
|
$el.removeClass("hidden")
|
||||||
|
else
|
||||||
|
$el.removeClass("deprecated")
|
||||||
|
$el.removeClass("hidden")
|
||||||
|
|
||||||
|
## Initialize
|
||||||
|
if not $attrs.tgAttachment?
|
||||||
|
return $log.error "AttachmentDirective the directive need an attachment"
|
||||||
|
|
||||||
|
attachment = $scope.$eval($attrs.tgAttachment)
|
||||||
|
render(attachment)
|
||||||
|
|
||||||
|
## On destroy
|
||||||
|
$scope.$on "$destroy", ->
|
||||||
|
$el.off()
|
||||||
|
|
||||||
|
return {
|
||||||
|
link: link,
|
||||||
|
require: "ngModel"
|
||||||
|
}
|
||||||
|
|
||||||
|
module.directive("tgAttachment", ["$log", AttachmentDirective])
|
||||||
|
|
@ -1,36 +1,48 @@
|
||||||
section.attachments
|
//- NOTE: You must to define 'var attachModel' with the object model
|
||||||
|
//- that have attachments
|
||||||
|
|
||||||
|
section.attachments(tg-attachments, ng-model=attachModel)
|
||||||
div.attachments-header
|
div.attachments-header
|
||||||
h3.attachments-title
|
h3.attachments-title
|
||||||
span.icon.icon-attachment
|
span.icon.icon-attachment
|
||||||
span.attachments-num {{ attachmentsCount }}
|
span.attachments-num 0
|
||||||
span.attachments-text attachments
|
span.attachments-text attachments
|
||||||
a.button.button-gray(href="", title="Add new attachment")
|
a.button.button-gray(href="", title="Add new attachment")
|
||||||
span +new file
|
span +new file
|
||||||
|
|
||||||
div.attachment-body
|
div.attachment-body
|
||||||
div.single-attachment(ng-repeat="attach in activeAttachments")
|
div.hidden.single-attachment(ng-repeat="attach in attachments",
|
||||||
div.attachment-name
|
tg-attachment="attach",
|
||||||
span.icon.icon-document
|
ng-model=attachModel)
|
||||||
a(href="{{ attach.url }}", title="{{ attach.name }}" target="_blank") {{ attach.name }}
|
|
||||||
div.attachment-comment
|
|
||||||
span {{ attach.description }}
|
|
||||||
span.attachment-size ({{ attach.size }} B)
|
|
||||||
a.settings.icon.icon-edit(href="","Edit")
|
|
||||||
a.settings.icon.icon-drag-v(href="","Drag")
|
|
||||||
|
|
||||||
//-div.single-attachment.edit
|
//- An attachment ('deprecated' class for deprecxated attachments)
|
||||||
|
//-
|
||||||
|
//-div.single-attachment
|
||||||
|
//- div.attachment-name
|
||||||
|
//- span.icon.icon-document
|
||||||
|
//- a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefuario.png
|
||||||
|
//- div.attachment-comment
|
||||||
|
//- span.attachment-size (42 B)
|
||||||
|
//- span A sort description
|
||||||
|
//- a.settings.icon.icon-edit(href="", "Edit")
|
||||||
|
//- a.settings.icon.icon-delete(href="", "Delete")
|
||||||
|
//- a.settings.icon.icon-drag-v(href="", "Drag")
|
||||||
|
|
||||||
|
//- An edittable attachment ('deprecated' class for deprecxated attachments)
|
||||||
|
//-
|
||||||
|
//-div.single-attachment
|
||||||
//- div.attachment-name
|
//- div.attachment-name
|
||||||
//- span.icon.icon-document
|
//- span.icon.icon-document
|
||||||
//- a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefuario.png
|
//- a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefuario.png
|
||||||
//- div.editable.editable-attachment-comment
|
//- div.editable.editable-attachment-comment
|
||||||
|
//- span.attachment-size (42 B)
|
||||||
//- input(type="text")
|
//- input(type="text")
|
||||||
//- div.editable.editable-attachment-deprecated
|
//- div.editable.editable-attachment-deprecated
|
||||||
//- label
|
//- label Deprecated?
|
||||||
//- input(type="checkbox")
|
//- input(type="checkbox")
|
||||||
//- span Deprecated?
|
//- a.editable.icon.icon-floppy(href="#", "Save")
|
||||||
//- div.editable.attachment-delete
|
//- a.editable.icon.icon-delete(href="#", "Cancel")
|
||||||
//- a.icon.icon-delete(href="#")
|
|
||||||
|
|
||||||
a.more-attachments(href="", title="show atachments history")
|
a.hidden.more-attachments(href="", title="show atachments history")
|
||||||
span + show deprecated atachments
|
span.text + show deprecated atachments
|
||||||
span.more-attachments-num ({{ deprecatedAttachmentsCount }} more)
|
span.more-attachments-num (0 deprecated)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue