index.tsx

import * as Lodash from 'lodash';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as $ from 'jquery';
import * as Mao from 'mao-cms';

import CourseIntroEditModal from './course-intro-edit-modal';
import CourseCoverEditModal from './course-cover-edit-modal';
import CourseVideoEditModal from './course-video-edit-modal';

import "./index.less";

let { Box, Link, DataTable, LimitCharacter, message, Modal, Row, Col, Icon, Button, Flex, FlexItem } = Mao.widgets;

@Mao.decorators.doActions(
    'course/fetchCategories'
)
export default class CourseKeywords extends React.Component<PageComponentProps, any> {
    private _dataSource: any[];
    private _$el: JQuery;
    private _courseIntroEditModal: CourseIntroEditModal;
    private _courseCoverEditModal: CourseCoverEditModal;
    private _courseVideoEditModal: CourseCoverEditModal;
    
    constructor(props: PageComponentProps, context: any) {
        super(props, context);
        this.updateDataSource();
        
        this.state = {
            filterCatIndex: 0
        };
    }
    
    componentWillReceiveProps() {
        this.updateDataSource();
        const categorieMap = Mao.get<Dictionary<any>>('data.course.categoriesTree');
        
        if (this._courseCoverEditModal.state.visible) {
            const record = this._courseCoverEditModal.state.record || {}; 
            this._courseCoverEditModal.edit(categorieMap[record.id]);
        }
        
        if (this._courseVideoEditModal.state.visible) {
            const record = this._courseVideoEditModal.state.record || {}; 
            this._courseVideoEditModal.edit(categorieMap[record.id]);
        }
    }
    
    
    componentDidMount() {
        
        
        this._$el.on('click', '.J-trigger-edit-course-intro', (event) => {
            const categorieMap = Mao.get<Dictionary<any>>('data.course.categoriesTree');
            const $el = $(event.currentTarget);
            const id = $el.attr('data-id');
            
            this._courseIntroEditModal.edit(categorieMap[id]);
        });
        
        
        this._$el.on('click', '.J-trigger-edit-course-cover', (event) => {
            const categorieMap = Mao.get<Dictionary<any>>('data.course.categoriesTree');
            const $el = $(event.currentTarget);
            const id = $el.attr('data-id');
            this._courseCoverEditModal.edit(categorieMap[id]);
        });
        
        this._$el.on('click', '.J-trigger-edit-course-video', (event) => {
            const categorieMap = Mao.get<Dictionary<any>>('data.course.categoriesTree');
            const $el = $(event.currentTarget);
            const id = $el.attr('data-id');
            this._courseVideoEditModal.edit(categorieMap[id]);
        });
        
        this._$el.on('click', '.J-trigger-filter-cat', (event) => {
            const $el = $(event.currentTarget);
            
            this.setState({
                filterCatIndex: $el.attr('data-index')
            });
        });
    }
    
    render() {
        
        return (
            <Box ref={component => this._$el = $(ReactDOM.findDOMNode(component))} className="course-categories">
                <DataTable 
                    columns={this.columns} 
                    dataSource={this._dataSource[this.state.filterCatIndex].children}
                    pagination={false}
                    primaryKey="id" 
                    headerBarExtra={
                        <div className="filter-cat-buttons">
                        {this._dataSource.map((item, index) => {
                            return <Button className={`J-trigger-filter-cat ${this.state.filterCatIndex == index ? 'selected' : ''}`} key={index} data-index={index}>{item.label}</Button>
                        })}
                        </div>
                    } />

                <CourseIntroEditModal ref={component => this._courseIntroEditModal = component} />
                <CourseCoverEditModal ref={component => this._courseCoverEditModal = component} />
                <CourseVideoEditModal ref={component => this._courseVideoEditModal = component} />
            </Box>
        );
    }
    
    
    private get columns() {
        const processing = Mao.get<Dictionary<any>>('data.course.processing', {});
        return [
            {
                title: "分类",
                dataIndex: 'cat',
                key: 'cat',
                width: '30%'
            },
            {
                title: '名称',
                dataIndex: 'label',
                key: 'label',
                width: '25%',
                render: (value: string, record: any) => {
                    if (record.isHead) {
                        return;
                    }
                    return value;
                }
            },
            {
                title: '介绍',
                dataIndex: 'intro',
                key: 'intro',
                width: '15%',
                render: (value: string, record: any) => {
                    if (record.isHead) {
                        return;
                    }
                    return <span data-id={record.id} className="J-trigger-edit-course-intro trigger-button">{value ? <i>已设置</i> : <b>未设置</b>}</span>;
                }
            },
            {
                title: '背景',
                dataIndex: 'cover',
                key: 'cover',
                width: '15%',
                render: (value: any, record: any) => {
                    if (record.isHead) {
                        return;
                    }
                    
                    if (processing[record.id] && processing[record.id]['cover']) {
                        return <span className="processing">处理中</span>;
                    }
                    
                    return <span data-id={record.id} className="J-trigger-edit-course-cover trigger-button">{value ? <i>已设置</i> : <b>未设置</b>}</span>;
                }
            },
            {
                title: '视频',
                dataIndex: 'video',
                key: 'video',
                width: '15%',
                render: (value: any, record: any) => {
                    if (record.isHead) {
                        return;
                    }
                    
                    if (processing[record.id] && processing[record.id]['video']) {
                        return <span className="processing">处理中</span>;
                    }
                    
                    return <span data-id={record.id}  className="J-trigger-edit-course-video trigger-button">{value ? <i>已设置</i> : <b>未设置</b>}</span>;
                }
            }
        ];
        
    }
    
    
    private getCategoryItems(item: any, prefixs: string[], children: any[] = [], map: any) {
        let cat = prefixs.join('/');
        for (let citem of item.children) {
            citem = map[citem.id] || citem;
            if (citem.children && citem.children.length) {
                this.getCategoryItems(citem, [...prefixs, citem.label], children, map);
            } else {
                children.push(Lodash.assign({ cat }, citem));
            }
        }
    }
    
    private updateDataSource() {
        let categoriesTree = Mao.get<any []>('data.course.categoriesTree');
        
        this._dataSource = [];
        
        for (let i = 0, list = categoriesTree[0].children, l = list.length; i < l; i++) {
            let item = list[i];
            let children: any[] = [];
            
            this.getCategoryItems(item, [item.label], children, categoriesTree);
            this._dataSource.push({
                label: item.label,
                id : item.id,
                children
            });
        }
        
    }
}