Refactor wiki views: Add tg-editable-wiki-content-directive
David Barragán Merino
parent
6182ef5ce9
commit
b10178810f
|
|
@ -62,8 +62,6 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEven
|
|||
{redirectTo: (params) -> "/project/#{params.pslug}/wiki/home"}, )
|
||||
$routeProvider.when("/project/:pslug/wiki/:slug",
|
||||
{templateUrl: "/partials/wiki.html", resolve: {loader: tgLoaderProvider.add()}})
|
||||
$routeProvider.when("/project/:pslug/wiki/:slug/edit",
|
||||
{templateUrl: "/partials/wiki-edit.html"})
|
||||
|
||||
# Issues
|
||||
$routeProvider.when("/project/:pslug/issues",
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ urls = {
|
|||
|
||||
"project-wiki": "/project/:project/wiki",
|
||||
"project-wiki-page": "/project/:project/wiki/:slug",
|
||||
"project-wiki-page-edit": "/project/:project/wiki/:slug/edit",
|
||||
|
||||
# Admin
|
||||
"project-admin-home": "/project/:project/admin/project-profile/details"
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
"$scope",
|
||||
"$rootScope",
|
||||
"$tgRepo",
|
||||
"$tgModel",
|
||||
"$tgConfirm",
|
||||
"$tgResources",
|
||||
"$routeParams",
|
||||
|
|
@ -51,7 +52,7 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
"tgLoader"
|
||||
]
|
||||
|
||||
constructor: (@scope, @rootscope, @repo, @confirm, @rs, @params, @q, @location,
|
||||
constructor: (@scope, @rootscope, @repo, @model, @confirm, @rs, @params, @q, @location,
|
||||
@filter, @log, @appTitle, @navUrls, @analytics, tgLoader) ->
|
||||
@scope.projectSlug = @params.pslug
|
||||
@scope.wikiSlug = @params.slug
|
||||
|
|
@ -80,7 +81,15 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
@scope.wiki = wiki
|
||||
return wiki
|
||||
|
||||
@scope.wiki = {content: ""}
|
||||
if @scope.project.my_permissions.indexOf("add_wiki_page") == -1
|
||||
return null
|
||||
|
||||
data = {
|
||||
project: @scope.projectId
|
||||
slug: @scope.wikiSlug
|
||||
content: ""
|
||||
}
|
||||
@scope.wiki = @model.make_model("wiki", data)
|
||||
return @scope.wiki
|
||||
|
||||
loadWikiLinks: ->
|
||||
|
|
@ -109,28 +118,13 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
@scope.wikiId = data.wikipage
|
||||
|
||||
return prom.then null, (xhr) =>
|
||||
ctx = {project: @params.pslug, slug: @params.slug}
|
||||
@location.path(@navUrls.resolve("project-wiki-page-edit", ctx))
|
||||
@scope.wikiId = null
|
||||
|
||||
return promise.then(=> @.loadProject())
|
||||
.then(=> @.loadUsersAndRoles())
|
||||
.then(=> @q.all([@.loadWikiLinks(),
|
||||
@.loadWiki()]))
|
||||
|
||||
edit: ->
|
||||
ctx = {
|
||||
project: @scope.projectSlug
|
||||
slug: @scope.wikiSlug
|
||||
}
|
||||
@location.path(@navUrls.resolve("project-wiki-page-edit", ctx))
|
||||
|
||||
cancel: ->
|
||||
ctx = {
|
||||
project: @scope.projectSlug
|
||||
slug: @scope.wikiSlug
|
||||
}
|
||||
@location.path(@navUrls.resolve("project-wiki-page", ctx))
|
||||
|
||||
delete: ->
|
||||
# TODO: i18n
|
||||
title = "Delete Wiki Page"
|
||||
|
|
@ -151,59 +145,6 @@ class WikiDetailController extends mixOf(taiga.Controller, taiga.PageMixin)
|
|||
|
||||
module.controller("WikiDetailController", WikiDetailController)
|
||||
|
||||
#############################################################################
|
||||
## Wiki Edit Controller
|
||||
#############################################################################
|
||||
|
||||
class WikiEditController extends WikiDetailController
|
||||
save: debounce 2000, ->
|
||||
onSuccess = =>
|
||||
ctx = {
|
||||
project: @scope.projectSlug
|
||||
slug: @scope.wiki.slug
|
||||
}
|
||||
@location.path(@navUrls.resolve("project-wiki-page", ctx))
|
||||
@confirm.notify("success")
|
||||
|
||||
onError = =>
|
||||
@confirm.notify("error")
|
||||
|
||||
if @scope.wiki.id
|
||||
@repo.save(@scope.wiki).then onSuccess, onError
|
||||
else
|
||||
@analytics.trackEvent("wikipage", "create", "create wiki page", 1)
|
||||
@scope.wiki.project = @scope.projectId
|
||||
@scope.wiki.slug = @scope.wikiSlug
|
||||
@repo.create("wiki", @scope.wiki).then onSuccess, onError
|
||||
|
||||
module.controller("WikiEditController", WikiEditController)
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Wiki Main Directive
|
||||
#############################################################################
|
||||
|
||||
WikiDirective = ($tgrepo, $log, $location, $confirm) ->
|
||||
link = ($scope, $el, $attrs) ->
|
||||
$ctrl = $el.controller()
|
||||
|
||||
return {link:link}
|
||||
|
||||
module.directive("tgWikiDetail", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", WikiDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Wiki Edit Main Directive
|
||||
#############################################################################
|
||||
|
||||
WikiEditDirective = ($tgrepo, $log, $location, $confirm) ->
|
||||
link = ($scope, $el, $attrs) ->
|
||||
$ctrl = $el.controller()
|
||||
|
||||
return {link:link}
|
||||
|
||||
module.directive("tgWikiEdit", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", WikiEditDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Wiki User Info Directive
|
||||
|
|
@ -243,3 +184,115 @@ WikiUserInfoDirective = ($log) ->
|
|||
}
|
||||
|
||||
module.directive("tgWikiUserInfo", ["$tgRepo", "$log", "$tgLocation", "$tgConfirm", WikiUserInfoDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Editable Wiki Content Directive
|
||||
#############################################################################
|
||||
|
||||
EditableWikiContentDirective = ($window, $document, $repo, $confirm, $loading, $location, $navUrls,
|
||||
$analytics) ->
|
||||
template = """
|
||||
<div class="view-wiki-content">
|
||||
<section class="wiki-content wysiwyg"
|
||||
tg-bind-html="wiki.html"></section>
|
||||
<span class="edit icon icon-edit" href="" title="Edit" style="display: none;"/>
|
||||
</div>
|
||||
<div class="edit-wiki-content" style="display: none;">
|
||||
<textarea placeholder="Write your wiki page here"
|
||||
ng-model="wiki.content"
|
||||
tg-markitup="tg-markitup"></textarea>
|
||||
<span class="action-container">
|
||||
<a class="save icon icon-floppy" href="" title="Save" />
|
||||
<a class="cancel icon icon-delete" href="" title="Cancel" />
|
||||
</span>
|
||||
</div>
|
||||
""" # TODO: i18n
|
||||
|
||||
link = ($scope, $el, $attrs, $model) ->
|
||||
isEditable = ->
|
||||
return $scope.project.my_permissions.indexOf("modify_wiki_page") != -1
|
||||
|
||||
switchToEditMode = ->
|
||||
$el.find('.edit-wiki-content').show()
|
||||
$el.find('.view-wiki-content').hide()
|
||||
$el.find('textarea').focus()
|
||||
|
||||
switchToReadMode = ->
|
||||
$el.find('.edit-wiki-content').hide()
|
||||
$el.find('.view-wiki-content').show()
|
||||
|
||||
disableEdition = ->
|
||||
$el.find(".view-wiki-content .edit").remove()
|
||||
$el.find(".edit-wiki-content").remove()
|
||||
|
||||
cancelEdition = ->
|
||||
if $scope.wiki.id
|
||||
$scope.wiki.revert()
|
||||
switchToReadMode()
|
||||
else
|
||||
ctx = {project: $scope.projectSlug}
|
||||
$location.path($navUrls.resolve("project-wiki", ctx))
|
||||
|
||||
getSelectedText = ->
|
||||
if $window.getSelection
|
||||
return $window.getSelection().toString()
|
||||
else if $document.selection
|
||||
return $document.selection.createRange().text
|
||||
return null
|
||||
|
||||
$el.on "mouseup", ".view-wiki-content", (event) ->
|
||||
# We want to dettect the a inside the div so we use the target and
|
||||
# not the currentTarget
|
||||
target = angular.element(event.target)
|
||||
return if not isEditable()
|
||||
return if target.is('a')
|
||||
return if getSelectedText()
|
||||
switchToEditMode()
|
||||
|
||||
$el.on "click", ".save", debounce 2000, ->
|
||||
onSuccess = (wikiPage) ->
|
||||
if not $scope.wiki.id?
|
||||
$analytics.trackEvent("wikipage", "create", "create wiki page", 1)
|
||||
|
||||
$model.setModelValue = $scope.wiki
|
||||
$confirm.notify("success")
|
||||
switchToReadMode()
|
||||
|
||||
onError = ->
|
||||
$confirm.notify("error")
|
||||
|
||||
$loading.start($el.find('.save-container'))
|
||||
promise = $repo.save($scope.wiki).then(onSuccess, onError)
|
||||
promise.finally ->
|
||||
$loading.finish($el.find('.save-container'))
|
||||
|
||||
$el.on "click", ".cancel", ->
|
||||
cancelEdition()
|
||||
|
||||
$el.on "keyup", "textarea", ->
|
||||
if event.keyCode == 27
|
||||
cancelEdition()
|
||||
|
||||
$scope.$watch $attrs.ngModel, (wikiPage) ->
|
||||
return if not wikiPage
|
||||
$scope.wiki = wikiPage
|
||||
|
||||
if not isEditable()
|
||||
disableEdition()
|
||||
else if not wikiPage.id?
|
||||
switchToEditMode()
|
||||
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link
|
||||
restrict: "EA"
|
||||
require: "ngModel"
|
||||
template: template
|
||||
}
|
||||
|
||||
module.directive("tgEditableWikiContent", ["$window", "$document", "$tgRepo", "$tgConfirm", "$tgLoading",
|
||||
"$tgLocation", "$tgNavUrls", "$tgAnalytics",
|
||||
EditableWikiContentDirective])
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
div.summary.wiki-summary
|
||||
div.summary.wiki-summary(ng-if="wiki.id")
|
||||
ul
|
||||
li
|
||||
span.number(tg-bo-bind="wiki.editions")
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
extends dummy-layout
|
||||
|
||||
block head
|
||||
title Taiga Your agile, free, and open source project management tool
|
||||
|
||||
block content
|
||||
div.wrapper(tg-wiki-edit, ng-controller="WikiEditController as ctrl",
|
||||
ng-init="section='wiki'")
|
||||
sidebar.menu-secondary.extrabar(tg-check-permission="view_wiki_links")
|
||||
section.wiki-nav(tg-wiki-nav, ng-model="wikiLinks")
|
||||
section.main.wiki
|
||||
div.header-with-actions
|
||||
h1
|
||||
span(tg-bo-bind="project.name", class="project-name-short")
|
||||
span.green Wiki
|
||||
span.wiki-title(tg-bo-bind='wikiSlug|unslugify')
|
||||
.action-buttons
|
||||
a.button.button-green.save-wiki(href="", title="Save", ng-click="ctrl.save()") Save
|
||||
a.button.button-red.cancel-wiki(href="", title="CAncel", ng-click="ctrl.cancel()") Cancel
|
||||
|
||||
section.wysiwyg
|
||||
textarea(placeholder="Write a your wiki page", ng-model="wiki.content", tg-markitup)
|
||||
|
||||
tg-attachments(ng-model="wiki", type="wiki_page", ng-if="wiki.id")
|
||||
|
|
@ -4,25 +4,19 @@ block head
|
|||
title Taiga Your agile, free, and open source project management tool
|
||||
|
||||
block content
|
||||
div.wrapper(tg-wiki-detail, ng-controller="WikiDetailController as ctrl",
|
||||
div.wrapper(ng-controller="WikiDetailController as ctrl",
|
||||
ng-init="section='wiki'")
|
||||
sidebar.menu-secondary.extrabar(tg-check-permission="view_wiki_links")
|
||||
section.wiki-nav(tg-wiki-nav, ng-model="wikiLinks")
|
||||
section.main.wiki
|
||||
.header-with-actions
|
||||
.header
|
||||
h1
|
||||
span(tg-bo-bind="project.name", class="project-name-short")
|
||||
span(tg-bo-bind="project.name")
|
||||
span.green Wiki
|
||||
span.wiki-title(tg-bo-bind='wiki.slug|unslugify')
|
||||
.action-buttons
|
||||
a.button.button-red.delete-wiki(tg-check-permission="delete_wiki_page",
|
||||
href="", title="Delete", ng-click="ctrl.delete()") Delete
|
||||
|
||||
a.button.button-green.edit-wiki(tg-check-permission="modify_wiki_page",
|
||||
href="", title="Edit", ng-click="ctrl.edit()") Edit
|
||||
span.wiki-title(tg-bo-bind='wikiSlug|unslugify')
|
||||
|
||||
include views/modules/wiki-summary
|
||||
|
||||
section.wiki-content.wysiwyg(tg-bind-html="wiki.html")
|
||||
section.wiki-content(tg-editable-wiki-content ng-model="wiki")
|
||||
|
||||
tg-attachments(ng-model="wiki", type="wiki_page")
|
||||
tg-attachments(ng-model="wiki", type="wiki_page", ng-if="wiki.id")
|
||||
|
|
|
|||
Loading…
Reference in New Issue