taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #678 from taigaio/issue/3359/custom-field-UI 

Issue/3359/custom field ui
stable
David Barragán Merino 2015-10-21 17:04:26 +02:00
parent 94b0a3a6f0 047be67092
commit abc0e6617e
4 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/coffee/modules/common/custom-field-values.coffee
View File

@ -152,8 +152,12 @@ CustomAttributeValueDirective = ($template, $selectedText, $compile, $translate,
prettyDate = $translate.instant("COMMON.PICKERDATE.FORMAT") prettyDate = $translate.instant("COMMON.PICKERDATE.FORMAT")
render = (attributeValue, edit=false) -> render = (attributeValue, edit=false) ->
if attributeValue.type is DATE_TYPE and attributeValue.value
value = moment(attributeValue.value, "YYYY-MM-DD").format(prettyDate)
else
value = attributeValue.value value = attributeValue.value
editable = isEditable() editable = isEditable()
ctx = { ctx = {
id: attributeValue.id id: attributeValue.id
name: attributeValue.name name: attributeValue.name
@ -190,15 +194,15 @@ CustomAttributeValueDirective = ($template, $selectedText, $compile, $translate,
requiredEditionPerm = $attrs.requiredEditionPerm requiredEditionPerm = $attrs.requiredEditionPerm
return permissions.indexOf(requiredEditionPerm) > -1 return permissions.indexOf(requiredEditionPerm) > -1
saveAttributeValue = -> submit = debounce 2000, (event) =>
attributeValue.value = $el.find("input[name=value], textarea[name='value']").val() event.preventDefault()
attributeValue.value = $el.find("input[name=value], textarea[name='value']").val()
if attributeValue.type is DATE_TYPE if attributeValue.type is DATE_TYPE
if moment(attributeValue.value, prettyDate).isValid() if moment(attributeValue.value, prettyDate).isValid()
attributeValue.value = moment(attributeValue.value, prettyDate).format("YYYY-MM-DD") attributeValue.value = moment(attributeValue.value, prettyDate).format("YYYY-MM-DD")
else else
attributeValue.reset() attributeValue.value = ""
return
$scope.$apply -> $scope.$apply ->
$ctrl.updateAttributeValue(attributeValue).then -> $ctrl.updateAttributeValue(attributeValue).then ->
@ -207,28 +211,21 @@ CustomAttributeValueDirective = ($template, $selectedText, $compile, $translate,
render(attributeValue, false) render(attributeValue, false)
submit = debounce 2000, (event) =>
event.preventDefault()
saveAttributeValue()
# Bootstrap # Bootstrap
attributeValue = $scope.$eval($attrs.tgCustomAttributeValue) attributeValue = $scope.$eval($attrs.tgCustomAttributeValue)
if attributeValue.type is DATE_TYPE and attributeValue.value
attributeValue.value = moment(attributeValue.value, "YYYY-MM-DD").format(prettyDate)
render(attributeValue) render(attributeValue)
## Actions (on view mode) ## Actions (on view mode)
$el.on "click", ".custom-field-value.read-mode", -> $el.on "click", ".custom-field-value", ->
return if not isEditable() return if not isEditable()
return if $selectedText.get().length return if $selectedText.get().length
render(attributeValue, true) render(attributeValue, true)
$el.find("input[name='description'], textarea[name='description']").focus().select() $el.find("input[name='value'], textarea[name='value']").focus()
$el.on "click", "a.icon-edit", (event) -> $el.on "click", "a.icon-edit", (event) ->
event.preventDefault() event.preventDefault()
render(attributeValue, true) render(attributeValue, true)
$el.find("input[name='description'], textarea[name='description']").focus().select() $el.find("input[name='value'], textarea[name='value']").focus()
## Actions (on edit mode) ## Actions (on edit mode)
$el.on "keyup", "input[name=value], textarea[name='value']", (event) -> $el.on "keyup", "input[name=value], textarea[name='value']", (event) ->

2
app/partials/custom-attributes/custom-attribute-value.jade
View File

@ -7,7 +7,7 @@ div.custom-field-single
<%- description %> <%- description %>
<% } %> <% } %>
div.custom-field-value.read-mode div.custom-field-value
span span
<%- value %> <%- value %>

12
app/styles/modules/common/custom-fields.scss
View File

@ -51,12 +51,12 @@
flex: 0; flex: 0;
flex-basis: 200px; flex-basis: 200px;
.custom-field-name { .custom-field-name {
@extend %bold;
display: block; display: block;
} }
.custom-field-description { .custom-field-description {
@extend %small; @extend %small;
color: $gray-light; @extend %light;
color: lighten($gray, 20%);
display: block; display: block;
line-height: .9rem; line-height: .9rem;
} }
@ -65,14 +65,10 @@
margin: 0; margin: 0;
} }
.custom-field-value { .custom-field-value {
@extend %light;
flex: 1; flex: 1;
padding: 0 1rem 0 2rem; padding: 0 1rem 0 2rem;
.read-mode { white-space: pre-line;
white-space: pre;
}
}
.read-mode {
white-space: pre;
} }
form { form {
label { label {

8
e2e/utils/detail.js
View File

@ -250,7 +250,7 @@ helper.customFields = function(typeIndex) {
// debounce // debounce
await browser.sleep(2000); await browser.sleep(2000);
let fieldText = textField.$('.read-mode span').getText(); let fieldText = textField.$('.custom-field-value span').getText();
expect(fieldText).to.be.eventually.equal('test text'); expect(fieldText).to.be.eventually.equal('test text');
}); });
@ -269,7 +269,7 @@ helper.customFields = function(typeIndex) {
// debounce // debounce
await browser.sleep(2000); await browser.sleep(2000);
let fieldText = textField.$('.read-mode span').getText(); let fieldText = textField.$('.custom-field-value span').getText();
expect(fieldText).to.be.eventually.equal('test text edit'); expect(fieldText).to.be.eventually.equal('test text edit');
}); });
@ -286,7 +286,7 @@ helper.customFields = function(typeIndex) {
// debounce // debounce
await browser.sleep(2000); await browser.sleep(2000);
let fieldText = textField.$('.read-mode span').getText(); let fieldText = textField.$('.custom-field-value span').getText();
expect(fieldText).to.be.eventually.equal('test text2'); expect(fieldText).to.be.eventually.equal('test text2');
}); });
@ -303,7 +303,7 @@ helper.customFields = function(typeIndex) {
// // debounce // // debounce
await browser.sleep(2000); await browser.sleep(2000);
let fieldText = await textField.$('.read-mode span').getText(); let fieldText = await textField.$('.custom-field-value span').getText();
expect(fieldText).to.be.equal('test text2 edit'); expect(fieldText).to.be.equal('test text2 edit');
}); });