Skip to content

Commit ff24616

Browse files
vmonakhovvmonakhov
authored
docx2xlsx (#1079)
1 parent fbfd272 commit ff24616

File tree

2 files changed

+202
-0
lines changed

2 files changed

+202
-0
lines changed

‎src/Layout/Routes.js

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import DistanceMap from "pages/DistanceMap";
1515
import MapSelectedLanguages from "pages/DistanceMap/map";
1616
import SelectedLanguages from "pages/DistanceMap/selectorLangGroup";
1717
import Docx2Eaf from "pages/Docx2Eaf";
18+
import Docx2Xlsx from "pages/Docx2Xlsx";
1819
import EditTranslations from "pages/EditTranslations";
1920
import Files from "pages/Files";
2021
import Grants from "pages/Grants";
@@ -70,6 +71,7 @@ const AppRoutes = () => (
7071
<Route path="/authors" element={<AuthorsRoute />} />
7172
<Route path="/version" element={<VersionRoute />} />
7273
<Route path="/docx2eaf" element={<Docx2Eaf />} />
74+
<Route path="/docx2xlsx" element={<Docx2Xlsx />} />
7375
<Route path="/valency" element={<Valency />} />
7476
<Route element={<NotFound />} />
7577
</Routes>

‎src/pages/Docx2Xlsx/index.js

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React from "react";
2+
import { connect } from "react-redux";
3+
import { Button, Checkbox, Dimmer, Icon, Input, Label, List, Loader, Message, Segment } from "semantic-ui-react";
4+
import { gql } from "@apollo/client";
5+
import { graphql } from "@apollo/client/react/hoc";
6+
import { compose } from "recompose";
7+
8+
import TranslationContext from "Layout/TranslationContext";
9+
10+
const docx2xlsxMutation = gql`
11+
mutation docx2xlsx(
12+
$docxFile: Upload
13+
$separateFlag: Boolean
14+
) {
15+
docx2xlsx(
16+
docx_file: $docxFile
17+
separate_flag: $separateFlag
18+
) {
19+
triumph
20+
xlsx_url
21+
message
22+
}
23+
}
24+
`;
25+
26+
class Docx2Xlsx extends React.Component {
27+
constructor(props) {
28+
super(props);
29+
30+
this.state = {
31+
separate_flag: false,
32+
file: null,
33+
converting_flag: false,
34+
error_message: null,
35+
result: null
36+
};
37+
38+
this.onConvert = this.onConvert.bind(this);
39+
}
40+
41+
onConvert() {
42+
this.props
43+
.docx2xlsx({
44+
variables: {
45+
docxFile: this.state.file,
46+
separateFlag: this.state.separate_flag
47+
}
48+
})
49+
50+
.then(
51+
({ data: { docx2xlsx } }) => {
52+
this.setState({
53+
converting_flag: false,
54+
result: docx2xlsx
55+
});
56+
},
57+
58+
error_data => {
59+
this.setState({
60+
converting_flag: false,
61+
error_message: error_data.message
62+
});
63+
}
64+
);
65+
66+
this.setState({
67+
converting_flag: true,
68+
error_message: null,
69+
result: null
70+
});
71+
}
72+
73+
render() {
74+
const result = this.state.result;
75+
76+
return (
77+
<div className="background-content">
78+
{this.props.user.id === undefined && !this.props.loading ? (
79+
<Message>
80+
<Message.Header>{this.context("Please sign in")}</Message.Header>
81+
<p>{this.context("Only registered users can convert .docx to .xlsx.")}</p>
82+
</Message>
83+
) : this.props.loading ? (
84+
<Segment>
85+
<Loader active inline="centered" indeterminate>
86+
{this.context("Loading")}...
87+
</Loader>
88+
</Segment>
89+
) : (
90+
<Segment>
91+
<List>
92+
<List.Item>
93+
<Checkbox
94+
label={this.context("Separate by alphabet")}
95+
checked={this.state.separate_flag}
96+
onChange={(e, { checked }) =>
97+
this.setState({
98+
separate_flag: checked,
99+
error_message: null,
100+
result: null
101+
})
102+
}
103+
/>
104+
</List.Item>
105+
<List.Item>
106+
<span>
107+
{this.context(
108+
this.state.file ? ".docx file for convertion:" : "Please select .docx file for convertion."
109+
)}
110+
</span>
111+
112+
{this.state.file && (
113+
<Label style={{ marginLeft: "0.5em" }}>
114+
<Icon name="file outline" />
115+
{this.state.file.name}
116+
</Label>
117+
)}
118+
119+
<Button style={{ marginLeft: "1em" }} onClick={() => document.getElementById("file-select").click()}>
120+
{`${this.context("Browse")}...`}
121+
</Button>
122+
123+
<Input
124+
id="file-select"
125+
type="file"
126+
style={{ display: "none" }}
127+
onChange={e =>
128+
this.setState({
129+
file: e.target.files[0],
130+
error_message: null,
131+
result: null
132+
})
133+
}
134+
/>
135+
</List.Item>
136+
137+
<List.Item>
138+
<Button
139+
color="green"
140+
content={this.context("Convert")}
141+
disabled={!this.state.file}
142+
onClick={this.onConvert}
143+
/>
144+
</List.Item>
145+
</List>
146+
147+
{this.state.error_message && (
148+
<Message negative>
149+
<Message.Header>{this.context("Convertion error")}</Message.Header>
150+
<p>
151+
<span>{this.context("Please contact developers at")} </span>
152+
<a href="https://t.me/lingvodoc_support" target="_blank" rel="noreferrer">
153+
{this.context("Support@Telegram")}
154+
</a>
155+
<span> {this.context("or at")} </span>
156+
<a href="https://github.com/ispras/lingvodoc-react/issues">{this.context("Lingvodoc Github")}</a>
157+
<span>.</span>
158+
</p>
159+
<p>{this.context(this.state.error_message)}</p>
160+
</Message>
161+
)}
162+
163+
{this.state.converting_flag && (
164+
<Dimmer active inverted>
165+
<Loader inverted indeterminate>
166+
{this.context("Converting")}...
167+
</Loader>
168+
</Dimmer>
169+
)}
170+
171+
{result && !result.triumph && (
172+
<Message>
173+
<Message.Header>{this.context("Convertion failed")}</Message.Header>
174+
<p>{this.context(result.message)}</p>
175+
</Message>
176+
)}
177+
178+
{result && result.triumph && (
179+
<Message positive>
180+
<Message.Header>{this.context("Converted successfully")}</Message.Header>
181+
<List>
182+
<List.Item>
183+
<a href={result.xlsx_url}>{this.context(".xlsx file")}</a>
184+
</List.Item>
185+
</List>
186+
</Message>
187+
)}
188+
</Segment>
189+
)}
190+
</div>
191+
);
192+
}
193+
}
194+
195+
Docx2Xlsx.contextType = TranslationContext;
196+
197+
export default compose(
198+
connect(state => state.user),
199+
graphql(docx2xlsxMutation, { name: "docx2xlsx" })
200+
)(Docx2Xlsx);

0 commit comments

Comments
 (0)