allow editing file/folder name in react_files

closes: CNVS-14670

test plan:
click the cog to edit a file or folder name,
it should work

Change-Id: I25eedea8bd2270ded67e1156de61caf696931b18
Reviewed-on: https://gerrit.instructure.com/38922
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jason Madsen <jmadsen@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2014-08-08 01:34:19 -06:00
parent 445de1969a
commit 36324f7a4f
3 changed files with 31 additions and 9 deletions

View File

@ -18,6 +18,8 @@ define [
@on 'change:sort change:order', @setQueryStringParams
super
url: -> "/api/v1/folders/#{@id}"
parse: (response) ->
json = super
@contentTypes ||= response.contentTypes

View File

@ -6,28 +6,48 @@ define [
'./FriendlyDatetime'
'./ItemCog'
'compiled/util/friendlyBytes'
], (React, {Link}, BackboneMixin, withReactDOM, FriendlyDatetime, ItemCog, friendlyBytes) ->
'compiled/models/Folder'
'compiled/fn/preventDefault'
], (React, {Link}, BackboneMixin, withReactDOM, FriendlyDatetime, ItemCog, friendlyBytes, Folder, preventDefault) ->
FolderChild = React.createClass
mixins: [BackboneMixin('model')],
getInitialState: ->
editing: false
startEditingName: preventDefault ->
@setState editing: true
setTimeout =>
@refs.newName.getDOMNode().focus()
doneEditing: preventDefault ->
@props.model.save(name: @refs.newName.getDOMNode().value)
@setState(editing: false)
render: withReactDOM ->
div className:'ef-item-row',
div className:'ef-name-col',
if @props.model.get('display_name')
if @state.editing
form onSubmit: @doneEditing,
input type:'text', ref:'newName', defaultValue: @props.model.get('name') || @props.model.get('display_name')
else if @props.model instanceof Folder
Link to: 'folder', contextType: @props.params.contextType, contextId: @props.params.contextId, splat: @props.model.urlPath(),
i className:'icon-folder',
@props.model.get('name')
else
a href: @props.model.get('url'),
if @props.model.get('thumbnail_url')
img src: @props.model.get('thumbnail_url'), className:'ef-thumbnail', alt:''
else
i className:'icon-document'
@props.model.get('display_name')
else
Link to: 'folder', contextType: @props.params.contextType, contextId: @props.params.contextId, splat: @props.model.urlPath(),
i className:'icon-folder',
@props.model.get('name')
div className:'ef-date-created-col',
div className:'ef-date-created-col', onClick: @startEditing,
FriendlyDatetime datetime: @props.model.get('created_at'),
div className:'ef-date-modified-col',
FriendlyDatetime datetime: @props.model.get('updated_at'),
@ -44,5 +64,5 @@ define [
span( {className:'screenreader-only accessible_label'}, 'Published. Click to unpublish.')
),
ItemCog(model: @props.model)
ItemCog(model: @props.model, startEditingName: @startEditingName)
)

View File

@ -48,7 +48,7 @@ define [
ul id:'content-1', className:'al-options', role:'menu', tabIndex:'0', 'aria-hidden':'true', 'aria-expanded':'false', 'aria-activedescendant':'content-2',
li {},
a href:'#', id:'content-2', tabIndex:'-1', role:'menuitem', title:'Edit Name', 'Edit Name'
a href:'#', onClick: @props.startEditingName, id:'content-2', tabIndex:'-1', role:'menuitem', title:'Edit Name', 'Edit Name'
li {},
a onClick: @openRestrictedDialog, href:'#', id:'content-3', tabIndex:'-1', role:'menuitem', title:'Restrict Access', 'Restrict Access'
li {},