From 71e9485458d842bb2ffaf86c8bd3df78e4c8c558 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Tue, 24 Dec 2019 21:58:41 +0800
Subject: [PATCH] EditMapWindow

---
 .../editor/assets/window/EditMapWindow.jsx    | 279 ++++++++++++++++++
 .../assets/window/css/EditMapWindow.css       |  37 +++
 2 files changed, 316 insertions(+)
 create mode 100644 ShadowEditor.Web/src/editor/assets/window/EditMapWindow.jsx
 create mode 100644 ShadowEditor.Web/src/editor/assets/window/css/EditMapWindow.css

diff --git a/ShadowEditor.Web/src/editor/assets/window/EditMapWindow.jsx b/ShadowEditor.Web/src/editor/assets/window/EditMapWindow.jsx
new file mode 100644
index 00000000..dd86f50c
--- /dev/null
+++ b/ShadowEditor.Web/src/editor/assets/window/EditMapWindow.jsx
@@ -0,0 +1,279 @@
+import './css/EditMapWindow.css';
+import { PropTypes, Window, TabLayout, Content, Buttons, Form, FormControl, Label, Input, Select, ImageUploader, Button, CheckBox, DataGrid, Column, LinkButton } from '../../../third_party';
+import Ajax from '../../../utils/Ajax';
+import CategoryWindow from './CategoryWindow.jsx';
+
+/**
+ * 编辑贴图窗口
+ * @author tengge / https://github.com/tengge1
+ */
+class EditMapWindow extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            activeTabIndex: 0,
+
+            name: props.data.Name,
+            categories: null,
+            categoryID: props.data.CategoryID,
+            thumbnail: props.data.Thumbnail,
+            isPublic: props.data.IsPublic,
+
+            histories: [],
+            selectedHistory: null
+        };
+
+        this.handleActiveTabChange = this.handleActiveTabChange.bind(this);
+
+        this.updateUI = this.updateUI.bind(this);
+
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleCategoryChange = this.handleCategoryChange.bind(this);
+        this.handleThumbnailChange = this.handleThumbnailChange.bind(this);
+        this.handleIsPublicChange = this.handleIsPublicChange.bind(this);
+        this.handleEditCategoryList = this.handleEditCategoryList.bind(this);
+
+        this.handleSelectHistory = this.handleSelectHistory.bind(this);
+        this.loadHistoryRenderer = this.loadHistoryRenderer.bind(this);
+        this.handleLoadHistory = this.handleLoadHistory.bind(this);
+
+        this.handleSave = this.handleSave.bind(this, props.callback);
+        this.handleClose = this.handleClose.bind(this);
+    }
+
+    render() {
+        const { typeName } = this.props;
+        const { activeTabIndex, name, categories, categoryID, thumbnail, isPublic, histories, selectedHistory } = this.state;
+        const { enableAuthority, authorities } = app.server;
+
+        return <Window
+            className={'EditMapWindow'}
+            title={`${_t('Edit')} ${typeName}`}
+            style={{ width: '400px', height: '320px' }}
+            mask={false}
+            onClose={this.handleClose}
+               >
+            <Content>
+                <TabLayout activeTabIndex={activeTabIndex}
+                    onActiveTabChange={this.handleActiveTabChange}
+                >
+                    <Form title={_t('Basic Info')}>
+                        <FormControl>
+                            <Label>{_t('Name')}</Label>
+                            <Input name={'name'}
+                                value={name}
+                                onChange={this.handleNameChange}
+                            />
+                        </FormControl>
+                        <FormControl>
+                            <Label>{_t('Type')}</Label>
+                            <Select name={'select'}
+                                options={categories}
+                                value={categoryID}
+                                onChange={this.handleCategoryChange}
+                            />
+                            <Button show={!enableAuthority || authorities.includes('LIST_CATEGORY')}
+                                onClick={this.handleEditCategoryList}
+                            >{_t('Edit')}</Button>
+                        </FormControl>
+                        <FormControl>
+                            <Label>{_t('Thumbnail')}</Label>
+                            <ImageUploader
+                                server={app.options.server}
+                                url={thumbnail}
+                                noImageText={_t('No Image')}
+                                onChange={this.handleThumbnailChange}
+                            />
+                        </FormControl>
+                        <FormControl>
+                            <Label>{_t('Is Public')}</Label>
+                            <CheckBox name={'isPublic'}
+                                checked={isPublic ? true : false}
+                                onChange={this.handleIsPublicChange}
+                            />
+                        </FormControl>
+                    </Form>
+                    <DataGrid data={histories}
+                        keyField={'ID'}
+                        title={_t('Historic Version')}
+                        selected={selectedHistory}
+                        onSelect={this.handleSelectHistory}
+                    >
+                        <Column type={'number'} />
+                        {/* <Column field={'SceneName'} /> */}
+                        <Column field={'Version'}
+                            title={_t('Version')}
+                            width={80}
+                            align={'center'}
+                        />
+                        {/* <Column field={'CreateTime'} /> */}
+                        <Column field={'UpdateTime'}
+                            title={_t('Update Time')}
+                            align={'center'}
+                        />
+                        <Column field={'ID'}
+                            title={_t('')}
+                            width={80}
+                            align={'center'}
+                            renderer={this.loadHistoryRenderer}
+                        />
+                    </DataGrid>
+                </TabLayout>
+            </Content>
+            <Buttons>
+                <Button onClick={this.handleSave}>{_t('OK')}</Button>
+                <Button onClick={this.handleClose}>{_t('Cancel')}</Button>
+            </Buttons>
+        </Window>;
+    }
+
+    componentDidMount() {
+        this.updateUI();
+    }
+
+    handleActiveTabChange(activeTabIndex) {
+        if (activeTabIndex === 1) { // 更新历史数据
+            const { data } = this.props;
+            fetch(`${app.options.server}/api/Scene/HistoryList?ID=${data.ID}`).then(response => {
+                response.json().then(json => {
+                    this.setState({
+                        histories: json.Data,
+                        activeTabIndex
+                    });
+                });
+            });
+        } else {
+            this.setState({
+                activeTabIndex
+            });
+        }
+    }
+
+    updateUI() {
+        Ajax.getJson(`${app.options.server}/api/Category/List?Type=${this.props.type}`, json => {
+            var options = {
+                '': _t('Not Set')
+            };
+            json.Data.forEach(n => {
+                options[n.ID] = n.Name;
+            });
+            this.setState({
+                categories: options
+            });
+        });
+    }
+
+    handleNameChange(value) {
+        this.setState({
+            name: value
+        });
+    }
+
+    handleCategoryChange(value) {
+        this.setState({
+            categoryID: value
+        });
+    }
+
+    handleThumbnailChange(file) {
+        Ajax.post(`${app.options.server}/api/Upload/Upload`, {
+            file
+        }, json => {
+            var obj = JSON.parse(json);
+            if (obj.Code === 200) {
+                this.setState({
+                    thumbnail: obj.Data.url
+                });
+            } else {
+                app.toast(_t(obj.Msg), 'warn');
+            }
+        });
+    }
+
+    handleIsPublicChange(value, name) {
+        this.setState({
+            [name]: value
+        });
+    }
+
+    handleEditCategoryList() {
+        const window = app.createElement(CategoryWindow, {
+            type: this.props.type,
+            typeName: `${this.props.typeName}`
+        });
+
+        app.addElement(window);
+    }
+
+    handleSelectHistory(record) {
+        this.setState({
+            selectedHistory: record.ID
+        });
+    }
+
+    loadHistoryRenderer(id, row) {
+        if (row.IsNew) { // 当前版本
+            return null;
+        }
+        return <LinkButton name={row.ID}
+            onClick={this.handleLoadHistory}
+               >{_t('Load')}</LinkButton>;
+    }
+
+    handleLoadHistory(name) {
+        const history = this.state.histories.filter(n => n.ID === name)[0];
+
+        if (!history) {
+            app.toast(_t('The scene is not existed!'));
+            return;
+        }
+
+        let url = `${app.options.server}/api/Scene/Load?ID=${history.SceneID}&Version=${history.Version}`;
+
+        app.call(`load`, this, url, history.SceneName, history.ID);
+    }
+
+    handleSave() {
+        const { data, saveUrl, callback } = this.props;
+        const { name, categoryID, thumbnail, isPublic } = this.state;
+
+        Ajax.post(saveUrl, {
+            ID: data.ID,
+            Name: name,
+            Category: categoryID,
+            Image: thumbnail,
+            IsPublic: isPublic
+        }, json => {
+            var obj = JSON.parse(json);
+            if (obj.Code === 200) {
+                callback && callback(obj);
+                this.handleClose();
+            } else {
+                app.toast(_t(obj.Msg), 'warn');
+            }
+        });
+    }
+
+    handleClose() {
+        app.removeElement(this);
+    }
+}
+
+EditMapWindow.propTypes = {
+    type: PropTypes.oneOf(['Mesh']),
+    typeName: PropTypes.string,
+    data: PropTypes.object,
+    saveUrl: PropTypes.string,
+    callback: PropTypes.func
+};
+
+EditMapWindow.defaultProps = {
+    type: 'Map',
+    typeName: 'Map',
+    data: null,
+    saveUrl: null,
+    callback: null
+};
+
+export default EditMapWindow;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor/assets/window/css/EditMapWindow.css b/ShadowEditor.Web/src/editor/assets/window/css/EditMapWindow.css
new file mode 100644
index 00000000..73e3f942
--- /dev/null
+++ b/ShadowEditor.Web/src/editor/assets/window/css/EditMapWindow.css
@@ -0,0 +1,37 @@
+.Window.EditMapWindow>.wrap>.content {
+    left: 0;
+    right: 0;
+    top: 24px;
+    bottom: 32px;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout>.contents>.content:nth-child(1) {
+    padding: 2px 8px;
+    box-sizing: border-box;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout>.contents>.content:nth-child(2) {
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout>.contents>.content>.Form {
+    overflow: hidden;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout>.contents>.content>.Form>.FormControl>.Button {
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    margin: 0 8px;
+}
+
+.Window.EditMapWindow>.wrap>.content>.TabLayout>.contents>.content>.DataGrid>.wrap>.body>tbody>tr>td>a {
+    color: #D4237A;
+}
\ No newline at end of file