This repository has been archived by the owner on Nov 9, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 57
/
SystemGlossary.jsx
131 lines (115 loc) · 3.88 KB
/
SystemGlossary.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React, { PureRenderMixin } from 'react/addons';
import Configs from '../constants/Configs';
import GlossaryStore from '../stores/GlossaryStore';
import Actions from '../actions/GlossaryActions';
import { Button, Input, Icons, Icon, Loader, Select } from 'zanata-ui'
import DataTable from './glossary/DataTable'
import NewEntryModal from './glossary/NewEntryModal'
import ImportModal from './glossary/ImportModal'
import _ from 'lodash';
import StringUtils from '../utils/StringUtils'
/**
* System glossary root component.
*/
var SystemGlossary = React.createClass({
mixins: [PureRenderMixin],
_init: function() {
return GlossaryStore.init();
},
getInitialState: function() {
return this._init();
},
componentDidMount: function() {
GlossaryStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
GlossaryStore.removeChangeListener(this._onChange);
},
_onChange: function() {
this.setState(this._init());
},
_onTranslationLocaleChange: function(localeId) {
Actions.changeTransLocale(localeId)
},
_handleFilterKeyDown: function(event) {
if(event.key === 'Enter') {
Actions.updateFilter(this.state.filter);
}
},
_handleFilterChange: function(event) {
this.setState({filter: event.target.value});
},
render: function() {
var srcLocale = this.state.srcLocale,
count = 0,
selectedTransLocale = this.state.selectedTransLocale,
uploadSection = null,
newEntrySection = null;
var contents = (<DataTable
glossaryData={this.state.glossary}
glossaryResId={this.state.glossaryResId}
focusedRow={this.state.focusedRow}
hoveredRow={this.state.hoveredRow}
totalCount={this.state.totalCount}
canAddNewEntry={this.state.canAddNewEntry}
canUpdateEntry={this.state.canUpdateEntry}
user={Configs.user}
sort={this.state.sort}
srcLocale={srcLocale}
selectedTransLocale={selectedTransLocale}/>);
if(!_.isUndefined(srcLocale) && !_.isNull(srcLocale)) {
count = this.state.srcLocale.numberOfTerms;
}
var allowNewEntry = this.state.canAddNewEntry && !_.isUndefined(srcLocale) && !_.isNull(srcLocale);
if(allowNewEntry) {
uploadSection = (<ImportModal srcLocale={this.state.srcLocale} transLocales={this.state.locales}/>);
newEntrySection = (<NewEntryModal className='ml1/2' srcLocale={this.state.srcLocale}/>);
}
return (
<div>
<Icons />
<div className='dfx aic mb1'>
<div className='fxauto dfx aic'>
<h1 className='fz2 dib csec'>System Glossary</h1>
<Icon name='chevron-right' className='mh1/2 csec50' size='s1'/>
<Select
name='language-selection'
placeholder='Select a language…'
className='w16'
value={this.state.selectedTransLocale}
options={this.state.localeOptions}
onChange={this._onTranslationLocaleChange}/>
</div>
<div className='dfx aic'>
{uploadSection}
{newEntrySection}
</div>
</div>
<div className='dfx aic mb1'>
<div className='fxauto'>
<div className='w8'>
<Input value={this.state.filter}
label='Search Glossary'
hideLabel
className="w100p pr1&1/2"
border='outline'
reset
placeholder='Search Glossary'
id="search"
onKeyDown={this._handleFilterKeyDown}
onChange={this._handleFilterChange}/>
</div>
</div>
<div className='dfx aic'>
<Icon name='glossary' className='csec50 mr1/4' />
<span className='csec'>{count}</span>
</div>
</div>
<div>
{contents}
</div>
</div>
);
}
});
export default SystemGlossary;