8cbbc222e9
* hook up frontend parts * complete backend, save success alert issues * fix broken existing specs * complete snackbar confirmation on page redirect * rollback success alert; but leave foundation for it in place * preserve a11y features of snackbar; complete cypress tests * test redirect after braodcast destroy
50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import { Controller } from 'stimulus';
|
|
|
|
export default class AlertController extends Controller {
|
|
static targets = ['alertZone'];
|
|
|
|
closeAlert() {
|
|
this.alertZoneTarget.innerHTML = '';
|
|
}
|
|
|
|
alertMarkup({ alertMsg, classes }) {
|
|
return `
|
|
<div
|
|
class="mb-3 crayons-notice ${classes}"
|
|
style="display:flex; justify-content:space-between;">
|
|
<div>${alertMsg}</div>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
className="crayons-icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
role="img"
|
|
aria-labelledby="714d29e78a3867c79b07f310e075e824"
|
|
data-action="click->alert#closeAlert"
|
|
>
|
|
<title id="714d29e78a3867c79b07f310e075e824">Close</title>
|
|
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
|
</svg>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
generateErrorAlert(event) {
|
|
const { alertMsg } = event.detail;
|
|
|
|
this.alertZoneTarget.innerHTML = this.alertMarkup({
|
|
alertMsg,
|
|
classes: 'crayons-notice--danger',
|
|
});
|
|
}
|
|
|
|
generateSuccessAlert(event) {
|
|
const { alertMsg } = event.detail;
|
|
|
|
this.alertZoneTarget.innerHTML = this.alertMarkup({
|
|
alertMsg,
|
|
classes: 'crayons-notice--success',
|
|
});
|
|
}
|
|
}
|