Skip to content

Commit

Permalink
Better parser data -- #1120 (#1125)
Browse files Browse the repository at this point in the history 
* get paragraph id

* fixes

* next

* fix

* fixes

* fixes

* fixes

* fixes

* it works

* better bold font and refactoring

* refactoring

* save to_json

* most correct version

* cleanup

* cleanup

* get_by_id

* next steps

* next steps

* right components

* selection

* selection

* next changes

* some fixes

* show results

* toggle variants

* toggle unverified

* correct setting approved

* cleanup

* count highlighted

* best solution for add markup

* refactoring

* refactoring

* new removeFromMarkup

* more smart code

* pasteMarkup

* paste results but keep prefix

* save

* parse element

* minor

* almost complete

* UserVariantModal

* next steps

* fixes after testing

* fixes

* thin fixes

* update on delete key
  • Loading branch information
@vmonakhov
vmonakhov authored Jun 25, 2024
1 parent 46c0dbe commit fa4aa36
Show file tree
Hide file tree
Showing 3 changed files with 456 additions and 252 deletions.
108 changes: 53 additions & 55 deletions src/components/OdtMarkupModal/PropertiesView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,67 +15,62 @@ class PropertiesView extends React.Component {
super(props);

this.state = {
elemToDelete: null
elemToDeleteId: null
};

this.onToggleVariant = this.onToggleVariant.bind(this);
this.onVariantsChanged = this.onVariantsChanged.bind(this);
this.deleteVariant = this.deleteVariant.bind(this);
}

onToggleVariant(variant, checked) {
const { selection, setDirty } = this.props;
const { result } = variant;
const selectedElem = document.getElementById(selection);
onToggleVariant(result, checked) {
const { selection, updateJson, setElemState } = this.props;

document.getElementById(result.id).classList.toggle("approved");
if (checked) {
selectedElem.classList.remove("unverified");
selectedElem.classList.add("verified");
setElemState(result.id, 'approved');
setElemState(selection, 'verified');
} else {
if (!selectedElem.getElementsByClassName("result approved").length) {
selectedElem.classList.remove("verified");
selectedElem.classList.add("unverified");
}
setElemState(result.id, 'unapproved');
setElemState(selection, 'toggle_verified');
}
setDirty();
updateJson();
}

onVariantsChanged() {
const { setDirty } = this.props;
setDirty();
this.props.updateJson();
this.forceUpdate();
}

deleteVariant() {
const { elemToDelete } = this.state;
const { selection, setDirty } = this.props;
const selectedElem = document.getElementById(selection);
const { elemToDeleteId } = this.state;
const { selection, updateJson, getById, setElemState } = this.props;
const selectedElem = getById(selection);
if (!selectedElem.results) return;
const resultIndex = selectedElem.results.findIndex((res) => res.id === elemToDeleteId);
if (resultIndex === -1) return;

document.getElementById(elemToDelete).remove();
// remove our variant and update elements
selectedElem.results.splice(resultIndex, 1);

if (!selectedElem.getElementsByClassName("result broken").length) {
selectedElem.classList.remove("broken");
}
setElemState(selection, 'toggle_broken');
setElemState(selection, 'toggle_verified');

if (!selectedElem.getElementsByClassName("result approved").length) {
selectedElem.classList.remove("verified");
selectedElem.classList.add("unverified");
}
this.setState({ elemToDelete: null });
setDirty();
updateJson();
this.setState({ elemToDeleteId: null });
}

render() {
const { selection, openModal } = this.props;
const { elemToDelete } = this.state;
const { selection, openModal, getById, getAvailableId } = this.props;
const { elemToDeleteId } = this.state;
const isEdit = this.props.mode === "edit";
const selectedElem = selection !== null ? document.getElementById(selection) : null;
let results = selection !== null ? Array.from(selectedElem.getElementsByClassName("result")) : [];
if (selection && !isEdit && selectedElem.classList.contains("verified")) {
results = results.filter(result => result.classList.contains("approved"));
const selectedElem = getById(selection);
let results = [];
if (selectedElem) {
results = selectedElem.results;
if (!isEdit && /\bverified\b/.test(selectedElem.state)) {
results = results.filter(res => /\bapproved\b/.test(res.state));
}
}
const variants = results.map(result => Object.assign({ result }, JSON.parse(result.innerText)));

return (
<div id="variants_section">
Expand All @@ -86,50 +81,51 @@ class PropertiesView extends React.Component {
<div>
<Divider />
<List divided relaxed style={{ maxHeight: "calc(100vh - 269px)", overflowX: "hidden", overflowY: "auto" }}>
{variants.map((variant, index) => (
{results.map((result, index) => (
<List.Item key={index}>
<List.Content>
<List.Header style={{ display: "flex", flexDirection: "row", color: "blue", fontWeight: "bold" }}>
<Checkbox
key={variant.result.id}
defaultChecked={variant.result.classList.contains("approved")}
disabled={!isEdit}
onChange={(_e, data) => this.onToggleVariant(variant, data.checked)}
style={{ marginRight: "10px" }}
/>
<span>{variant.lex}</span>
{isEdit && (
<Checkbox
key={result.id}
defaultChecked={/\bapproved\b/.test(result.state)}
onChange={(_e, data) => this.onToggleVariant(result, data.checked)}
style={{ marginRight: "10px" }}
/>
)}
<span>{result.lex}</span>
{isEdit && (
<div style={{ marginLeft: "auto" }}>
<Button
icon="edit"
size="mini"
color="violet"
onClick={() => openModal(UserVariantModal, { variant, onSubmit: this.onVariantsChanged })}
onClick={() => openModal(UserVariantModal, { result, onSubmit: this.onVariantsChanged })}
/>
<Button
icon="delete"
size="mini"
color="red"
onClick={() => this.setState({ elemToDelete: variant.result.id })}
onClick={() => this.setState({ elemToDeleteId: result.id })}
/>
</div>
)}
</List.Header>
<List.Description
style={{ display: "flex", flexDirection: "column", marginTop: 5, color: "black" }}
>
<span style={{ fontStyle: "italic" }}>{variant.parts}</span>
<span style={{ fontStyle: "italic" }}>{result.parts}</span>
<div style={{ margin: "5px 0", wordWrap: "break-word" }}>
<span style={{ fontWeight: "bold" }}>gloss: </span>
{variant.gloss}
{result.gloss}
</div>
<div style={{ wordWrap: "break-word" }}>
<span style={{ fontWeight: "bold" }}>gr: </span>
{variant.gr}
{result.gr}
</div>
<div style={{ marginTop: 5, wordWrap: "break-word" }}>
<span style={{ fontWeight: "bold" }}>trans_ru: </span>
{variant.trans_ru}
{result.trans_ru}
</div>
</List.Description>
</List.Content>
Expand All @@ -143,7 +139,7 @@ class PropertiesView extends React.Component {
icon="plus"
content={this.context("Add variant")}
onClick={() =>
openModal(UserVariantModal, { parent: selectedElem, onSubmit: this.onVariantsChanged })
openModal(UserVariantModal, { parent: results, onSubmit: this.onVariantsChanged, getAvailableId })
}
/>
</List.Item>
Expand All @@ -152,11 +148,11 @@ class PropertiesView extends React.Component {
</div>
)}
<Confirm
open={elemToDelete !== null}
open={elemToDeleteId !== null}
header={this.context("Confirmation")}
content={this.context("Are you sure you want to delete this variant?")}
onConfirm={this.deleteVariant}
onCancel={() => this.setState({ elemToDelete: null })}
onCancel={() => this.setState({ elemToDeleteId: null })}
className="lingvo-confirm"
/>
</div>
Expand All @@ -167,9 +163,11 @@ class PropertiesView extends React.Component {
PropertiesView.contextType = TranslationContext;

PropertiesView.propTypes = {
selection: PropTypes.string,
selection: PropTypes.number,
mode: PropTypes.string.isRequired,
setDirty: PropTypes.func.isRequired
updateJson: PropTypes.func.isRequired,
setElemState: PropTypes.func.isRequired,
getAvailableId: PropTypes.func.isRequired
};

export default connect(null, dispatch => bindActionCreators({ openModal }, dispatch))(PropertiesView);
35 changes: 16 additions & 19 deletions src/components/OdtMarkupModal/UserVariantModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,33 @@ class UserVariantModal extends React.Component {
constructor(props) {
super(props);

const { variant } = props;
const { result } = props;
this.state = {
lex: variant ? variant.lex : "",
parts: variant ? variant.parts : "",
gloss: variant ? variant.gloss : "",
gr: variant ? variant.gr : "",
trans_ru: variant ? variant.trans_ru : ""
id: result ? result.id : null,
state: result ? result.state : "result user",
lex: result ? result.lex : "",
parts: result ? result.parts : "",
gloss: result ? result.gloss : "",
gr: result ? result.gr : "",
trans_ru: result ? result.trans_ru : ""
};

this.save = this.save.bind(this);
}

save() {
const { parent, variant, onSubmit, onClose } = this.props;
if (variant) {
variant.result.innerHTML = JSON.stringify(this.state);
const { parent, result, onSubmit, onClose, getAvailableId } = this.props;
if (result) {
Object.assign(result, this.state);
} else {
const elem = document.createElement("span");
elem.classList.add("result");
elem.classList.add("user");
elem.innerHTML = JSON.stringify(this.state);
parent.append(elem);
elem.id = `${elem.previousElementSibling ? elem.previousElementSibling.id : parent.id}!`;
parent.push({...this.state, id: getAvailableId()});
}
onSubmit();
onClose();
}

render() {
const { variant, onClose } = this.props;
const { result, onClose } = this.props;
const { lex, parts, gloss, gr, trans_ru } = this.state;
const isValid =
lex.trim() !== "" && parts.trim() !== "" && gloss.trim() !== "" && gr.trim() !== "" && trans_ru.trim() !== "";
Expand Down Expand Up @@ -73,7 +70,7 @@ class UserVariantModal extends React.Component {
<Modal.Actions>
<Button
disabled={!isValid}
content={this.context(variant ? "Save" : "Create")}
content={this.context(result ? "Save" : "Create")}
onClick={this.save}
className="lingvo-button-violet"
/>
Expand All @@ -87,8 +84,8 @@ class UserVariantModal extends React.Component {
UserVariantModal.contextType = TranslationContext;

UserVariantModal.propTypes = {
parent: PropTypes.object,
variant: PropTypes.object,
parent: PropTypes.array,
result: PropTypes.object,
onSubmit: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
};
Expand Down
Loading

0 comments on commit fa4aa36

Please sign in to comment.