/
ContentReviewForm.js
102 lines (87 loc) · 3.02 KB
/
ContentReviewForm.js
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
/* global window */
import i18n from 'i18n';
import jQuery from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import { loadComponent } from 'lib/Injector';
const FormBuilderModal = loadComponent('FormBuilderModal');
/**
* "Content due for review" modal popup. See AddToCampaignForm.js in
* silverstripe/admin for reference.
*/
jQuery.entwine('ss', ($) => {
/**
* Kick off a "content due for review" dialog from the CMS actions.
*/
$('.cms-content-actions .content-review__button').entwine({
onclick(event) {
event.preventDefault();
let dialog = $('#content-review__dialog-wrapper');
if (!dialog.length) {
dialog = $('<div id="content-review__dialog-wrapper" />');
$('body').append(dialog);
}
dialog.open();
return false;
},
});
// This is required because the React version of e.preventDefault() doesn't work
// this is to prevent PJAX request to occur when clicking a link the modal
$('.content-review-modal .content-review-modal__nav-link').entwine({
onclick: (e) => {
e.preventDefault();
const $link = $(e.target);
window.location = $link.attr('href');
},
});
/**
* Uses reactstrap in order to replicate the bootstrap styling and JavaScript behaviour.
*/
$('#content-review__dialog-wrapper').entwine({
onunmatch() {
// solves errors given by ReactDOM "no matched root found" error.
this._clearModal();
},
open() {
this._renderModal(true);
},
close() {
this._renderModal(false);
},
_renderModal(isOpen) {
const handleHide = () => this.close();
const handleSubmit = (...args) => this._handleSubmitModal(...args);
const id = $('form.cms-edit-form :input[name=ID]').val();
const sectionConfigKey = 'SilverStripe\\CMS\\Controllers\\CMSPageEditController';
const store = window.ss.store;
const sectionConfig = store.getState().config.sections
.find((section) => section.name === sectionConfigKey);
const modalSchemaUrl = `${sectionConfig.form.ReviewContentForm.schemaUrl}/${id}`;
const title = i18n._t('ContentReview.CONTENT_DUE_FOR_REVIEW', 'Content due for review');
ReactDOM.render(
<FormBuilderModal
title={title}
isOpen={isOpen}
onSubmit={handleSubmit}
onClosed={handleHide}
schemaUrl={modalSchemaUrl}
bodyClassName="modal__dialog"
className="content-review-modal"
responseClassBad="modal__response modal__response--error"
responseClassGood="modal__response modal__response--good"
identifier="ContentReview.CONTENT_DUE_FOR_REVIEW"
/>,
this[0]
);
},
_clearModal() {
ReactDOM.unmountComponentAtNode(this[0]);
},
_handleSubmitModal(data, action, submitFn) {
// Remove the "review content" bell button so users won't do it again
$('.content-review__button-holder').remove();
// Handle the review submission
return submitFn();
},
});
});