Skip to content

Commit a854c98

Browse files
OlofSvahnVbgOlof Svahn
OlofSvahnVbg
and
Olof Svahn
authored
Fix/documenthandler modal update (#1626)
* fixed and updated dialog handling in documenteditor * removed comments * comment removed --------- Co-authored-by: Olof Svahn <olof.svahn@varberg.se>
1 parent 5c59e63 commit a854c98

File tree

1 file changed

+97
-69
lines changed

1 file changed

+97
-69
lines changed

‎apps/admin/src/views/documenteditor.jsx‎

Lines changed: 97 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -274,10 +274,11 @@ class DocumentEditor extends Component {
274274
if (result === "File saved") {
275275
result = "Filen sparades utan problem.";
276276
}
277+
277278
this.setState({
278279
showModal: true,
279280
modalTitle: result,
280-
modalContent: "",
281+
modalType: "SAVE_DOC",
281282
showAbortButton: false,
282283
modalConfirmCallback: () => {
283284
this.hideModal();
@@ -290,12 +291,8 @@ class DocumentEditor extends Component {
290291
delete() {
291292
this.setState({
292293
showModal: true,
293-
modalContent: (
294-
<div>
295-
Hela dokumentet kommer att raderas, detta kan inte ångras. Vill du
296-
fortsätta?
297-
</div>
298-
),
294+
modalTitle: "Radera dokument",
295+
modalType: "DELETE_DOC",
299296
showAbortButton: true,
300297
modalConfirmCallback: () => {
301298
this.props.model.delete(
@@ -305,6 +302,7 @@ class DocumentEditor extends Component {
305302
this.load();
306303
this.setState({
307304
selectedFolder: "",
305+
selectedDocument: "",
308306
});
309307
}
310308
);
@@ -313,6 +311,15 @@ class DocumentEditor extends Component {
313311
});
314312
}
315313

314+
renderDeleteDialog() {
315+
return (
316+
<div>
317+
Hela dokumentet kommer att raderas, detta kan inte ångras. Vill du
318+
fortsätta?
319+
</div>
320+
);
321+
}
322+
316323
addChapter(title, titleID) {
317324
this.state.data.chapters.push(
318325
new Chapter({
@@ -329,8 +336,7 @@ class DocumentEditor extends Component {
329336
this.setState({
330337
showModal: true,
331338
modalTitle: "Ta bort kapitel",
332-
modalContent:
333-
"Detta kapitel och dess underkapitel kommer att tas bort, det går inte att ångra ditt val. Vill du verkställa ändringen?",
339+
modalType: "DELETE_CHAPTER",
334340
showAbortButton: true,
335341
modalConfirmCallback: () => {
336342
parentChapters.splice(index, 1);
@@ -340,12 +346,21 @@ class DocumentEditor extends Component {
340346
});
341347
}
342348

349+
renderDeleteChapterDialog() {
350+
return (
351+
<div>
352+
Detta kapitel och dess underkapitel kommer att tas bort, det går inte
353+
att ångra ditt val. Vill du verkställa ändringen?
354+
</div>
355+
);
356+
}
357+
343358
hideModal() {
344359
this.setState({
345360
showModal: false,
346361
modalStyle: {},
347362
okButtonText: "OK",
348-
modalConfirmCallback: () => {},
363+
modalConfirmCallback: () => { },
349364
});
350365
}
351366

@@ -407,12 +422,12 @@ class DocumentEditor extends Component {
407422
this.setState({
408423
showModal: true,
409424
showAbortButton: true,
410-
modalContent: this.renderToc(
411-
chapter,
412-
this.state.data.chapters,
413-
parentChapters,
414-
index
415-
),
425+
modalType: "TOC_CHAPTER",
426+
chapter: chapter,
427+
chapters: this.state.data.chapters,
428+
parentChapters: parentChapters,
429+
index: index,
430+
416431
modalConfirmCallback: () => {
417432
this.hideModal();
418433
},
@@ -481,7 +496,8 @@ class DocumentEditor extends Component {
481496
showModal: true,
482497
showAbortButton: true,
483498
modalTitle: "Ändra titel",
484-
modalContent: this.renderNameInput(),
499+
modalType: "CHANGE_NAME",
500+
// modalContent: this.renderNameInput(),
485501
modalConfirmCallback: () => {
486502
chapter.header = this.state.newChapterName;
487503
chapter.headerIdentifier = this.state.newHeaderIdentifier;
@@ -652,20 +668,20 @@ class DocumentEditor extends Component {
652668
<Typography className={classes.gridItem}>Nyckelord</Typography>
653669
{chapter.keywords
654670
? chapter.keywords.map((keyword, i) => (
655-
<Chip
656-
key={i}
657-
label={keyword}
658-
onDelete={(i) => {
659-
const index = chapter.keywords.indexOf(keyword);
660-
if (index > -1) {
661-
chapter.keywords.splice(index, 1);
662-
}
663-
this.setState({
664-
keywords: chapter.keywords,
665-
});
666-
}}
667-
/>
668-
))
671+
<Chip
672+
key={i}
673+
label={keyword}
674+
onDelete={(i) => {
675+
const index = chapter.keywords.indexOf(keyword);
676+
if (index > -1) {
677+
chapter.keywords.splice(index, 1);
678+
}
679+
this.setState({
680+
keywords: chapter.keywords,
681+
});
682+
}}
683+
/>
684+
))
669685
: null}
670686
<Grid item>
671687
<AddKeyword
@@ -706,13 +722,13 @@ class DocumentEditor extends Component {
706722
>
707723
{chapter.expanded
708724
? chapter.chapters.map((innerChapter, innerIndex) => {
709-
return this.renderChapter(
710-
chapter.chapters,
711-
innerChapter,
712-
innerIndex,
713-
false
714-
);
715-
})
725+
return this.renderChapter(
726+
chapter.chapters,
727+
innerChapter,
728+
innerIndex,
729+
false
730+
);
731+
})
716732
: null}
717733
</Grid>
718734
</Grid>
@@ -757,14 +773,29 @@ class DocumentEditor extends Component {
757773
<DialogTitle id="alert-dialog-title">
758774
{this.state.modalTitle}
759775
</DialogTitle>
760-
<DialogContent>{this.state.modalContent}</DialogContent>
776+
<DialogContent>
777+
{this.state.modalType === "TOC" && this.renderTableOfContentsInput()}
778+
{this.state.modalType === "CREATE_DOC" && this.renderCreateForm()}
779+
{this.state.modalType === "CREATE_FOLDER" &&
780+
this.renderCreateFormFolder()}
781+
{this.state.modalType === "TOC_CHAPTER" &&
782+
this.renderToc(
783+
this.state.chapter,
784+
this.state.chapters,
785+
this.state.parentChapters,
786+
this.state.index
787+
)}
788+
{this.state.modalType === "DELETE_DOC" && this.renderDeleteDialog()}
789+
{this.state.modalType === "CHANGE_NAME" && this.renderNameInput()}
790+
{this.state.modalType === "DELETE_CHAPTER" &&
791+
this.renderDeleteChapterDialog()}
792+
</DialogContent>
761793
<DialogActions>
762794
{this.state.showAbortButton && (
763795
<Button onClick={() => this.hideModal()} color="primary">
764796
Avbryt
765797
</Button>
766798
)}
767-
768799
<ColorButtonGreen
769800
variant="contained"
770801
className="btn"
@@ -956,31 +987,29 @@ class DocumentEditor extends Component {
956987
);
957988
}
958989

959-
renderCreateDialog(chapter, parentChapters, index) {
990+
renderCreateDialog() {
960991
this.setState({
961992
showModal: true,
962993
showAbortButton: true,
963994
modalTitle: "Skapa nytt dokument",
964-
modalContent: this.renderCreateForm(),
995+
modalType: "CREATE_DOC",
965996
okButtonText: "Spara",
966997
modalConfirmCallback: () => {
967-
var data = {
998+
const data = {
968999
folderName: this.state.newFolderName,
9691000
documentName: this.state.newDocumentName,
9701001
mapName: this.state.newDocumentMap,
9711002
};
972-
const isValid = this.validateNewDocumentName(data.documentName);
973-
974-
if (!isValid || data.documentName === "") {
1003+
if (
1004+
!this.validateNewDocumentName(data.documentName) ||
1005+
data.documentName === ""
1006+
) {
9751007
return;
9761008
}
977-
978-
if (data.documentName !== "") {
979-
this.props.model.createDocument(data, (response) => {
980-
this.load(data.folderName, data.documentName);
981-
});
1009+
this.props.model.createDocument(data, () => {
1010+
this.load(data.folderName, data.documentName);
9821011
this.hideModal();
983-
}
1012+
});
9841013
},
9851014
});
9861015
}
@@ -990,19 +1019,17 @@ class DocumentEditor extends Component {
9901019
showModal: true,
9911020
showAbortButton: true,
9921021
modalTitle: "Skapa ny mapp",
993-
modalContent: this.renderCreateFormFolder(),
1022+
modalType: "CREATE_FOLDER",
9941023
okButtonText: "Spara",
9951024
modalConfirmCallback: () => {
9961025
const folderName = this.state.newFolderName;
997-
const isValid = this.validateNewFolderName(folderName);
998-
999-
if (!isValid || folderName === "") {
1026+
if (!this.validateNewFolderName(folderName) || folderName === "") {
10001027
return;
10011028
}
1002-
1003-
this.props.model.createFolder({ folderName }, (response) => {});
1004-
this.loadFolderList();
1005-
this.hideModal();
1029+
this.props.model.createFolder({ folderName }, () => {
1030+
this.loadFolderList();
1031+
this.hideModal();
1032+
});
10061033
},
10071034
});
10081035
}
@@ -1016,23 +1043,23 @@ class DocumentEditor extends Component {
10161043
title: this.state.newTableOfContentsTitle,
10171044
};
10181045

1019-
this.setState({
1046+
this.setState((prevState) => ({
10201047
data: {
1021-
...this.state.data,
1048+
...prevState.data,
10221049
tableOfContents: tableOfContents,
10231050
},
10241051
tableOfContentsModal: false,
1025-
});
1052+
}));
10261053
}
10271054

10281055
renderTableOfContentsModal() {
10291056
this.setState({
10301057
showModal: true,
10311058
modalTitle: "Innehållsförteckning",
1032-
modalContent: this.renderTableOfContentsInput(),
10331059
showAbortButton: true,
1034-
1060+
modalType: "TOC",
10351061
modalConfirmCallback: () => {
1062+
this.saveTableOfContents();
10361063
this.hideModal();
10371064
},
10381065
});
@@ -1060,10 +1087,11 @@ class DocumentEditor extends Component {
10601087
control={
10611088
<Switch
10621089
checked={this.state.newTableOfContentsExpanded}
1063-
onChange={(e) => {
1064-
this.setState({
1065-
[e.target.name]: e.target.checked,
1066-
});
1090+
onChange={() => {
1091+
this.setState((prevState) => ({
1092+
newTableOfContentsExpanded:
1093+
!prevState.newTableOfContentsExpanded,
1094+
}));
10671095
}}
10681096
name="newTableOfContentsExpanded"
10691097
color="primary"

0 commit comments

Comments
 (0)