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:
parent
445de1969a
commit
36324f7a4f
|
@ -18,6 +18,8 @@ define [
|
|||
@on 'change:sort change:order', @setQueryStringParams
|
||||
super
|
||||
|
||||
url: -> "/api/v1/folders/#{@id}"
|
||||
|
||||
parse: (response) ->
|
||||
json = super
|
||||
@contentTypes ||= response.contentTypes
|
||||
|
|
|
@ -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)
|
||||
)
|
||||
|
|
|
@ -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 {},
|
||||
|
|
Loading…
Reference in New Issue