Admin 指派 Editor
我們要再文章清單裡面在加入一個 DropDownList 可以選擇該篇文章的 Editor。
示意圖如下:
修改文章清單 View
檔案路徑: postManager/components/list.js
在 render()
裡加入以下判斷是否要顯示表格 Editor 欄位
return ()
略...
{() => {
if (this.state.authStatus.authority === 'admin') {
return (
<th>
{this._getIntlMessage('postManager.editor')}
</th>
);
}
}()}
);
修改 renderPost()
,把下拉選單用 this.renderEditor()
方把包裝起來,方便好讀管理。
renderPost = (post, index) => {
return (
<tr className='post--row' key={index}>
<td>
{post.id}
</td>
<td>
<Link to={`/postOne/${post.id}`} >
{post.title}
</Link>
</td>
{this.renderEdit(post)}
{this.renderEditor(post.EditorId, post.id)}
</tr>
);
}
this.renderEditor()
:把使用者權限是 Editor 的顯示在下拉選單,並選擇時就立即更新到後端。
renderEditor(EditorId, postId) {
if (this.state.authStatus.authority === 'admin') {
return (
<td>
<Input type='select' value={EditorId} onChange={this.updateEditor.bind(this, postId)}>
<option value='0'>select...</option>
{this.state.editors.map(this.renderEditorsOptions)}
</Input>
</td>
);
}
}
程式碼說明:
- 先判斷是否為 Admin ,才可以操作選擇 Editor
- Input 寫入 onChange() 事件,當 Admin 從下拉選單選擇 Editor 時及更
設定取得 this.state.editors
的資料,從 role Store 取得目前所有使用者權限是 Editor。
state = {
posts: this.props.flux
.getStore('posts')
.getState().posts,
authStatus: this.props.flux
.getStore('auth')
.getState().authStatus,
editors: this.props.flux
.getStore('role')
.getState().attributes
};
componentWillMount()
加入
componentWillMount() {
this.props.flux.
getActions('role').fetchByAttributes('editor');
}
componentDidMount()
加入
componentDidMount() {
this.props.flux
.getStore('role')
.listen(this._handleStoreChange);
}
componentWillUnmount()
加入
componentDidMount() {
this.props.flux
.getStore('role')
.unlisten(this._handleStoreChange);
}
修改 _handleStoreChange()
_handleStoreChange = (state) => {
state.authStatus = this.props.flux.getStore('auth').getState().authStatus;
state.editors = this.props.flux.getStore('role').getState().attributes;
return this.setState(state);
}
renderEditorsOptions()
:列舉 this.state.editor
把目前使用者權限是 Editor 顯示出來"
renderEditorsOptions = (editor, index) => {
return (
<option value={editor.id} key={index}>{editor.username}</option>
);
}
updateEditor()
:新增 updateEditor()
Action,做為更新文章時的觸發。
updateEditor = (postId, event) => {
this.props.flux.getActions('posts').updateEditor(postId, {editorId: event.target.value});
}
修改 post Action
剛剛已經在 View 先定義好了 updateEditor
Action 但還未實作,因此還需將以下程式碼加入
檔案路徑: postManager/actions/posts.js
constructor() {
this.generateActions(
'updateEditorSuccess'
);
}
updateEditor(id:string, params) {
const promise = (resolve) => {
let that = this;
that.alt.getActions('requests').start();
request.put(baseUrl + 'rest/post/updateEditor/' + `${id}`)
.send(params)
.end((error, res) => {
if (error) return resolve(error);
this.actions.updateEditorSuccess(res.body.post);
this.alt.getActions('requests').success();
return resolve();
}, 300);
};
this.alt.resolve(promise);
}
修改 post Store
修改 state 狀態
檔案路徑: postManager/stores/posts.js
onUpdateEditorSuccess(newPost) {
const posts: Array<Object> = this.posts;
posts.forEach((post, index) => {
if (post.id === newPost.id) {
this.posts[index] = newPost;
// UI select default value.
if (newPost.EditorId === null) this.posts[index].EditorId = 0;
}
});
return this.setState({posts});
}
完成。