Skip to content
Snippets Groups Projects

useBlock in the survey frontend to ask users for confirmation

Merged Remco Tukker requested to merge feature/react-router-stuff into develop
2 files
+ 104
92
Compare changes
  • Side-by-side
  • Inline
Files
2
import React from "react";
import React, { useCallback } from "react";
import { Question, FunctionFactory } from "survey-core";
import { Question, FunctionFactory } from "survey-core";
import { Survey } from "survey-react-ui";
import { Survey } from "survey-react-ui";
import { VerificationStatus } from './Schema';
import { VerificationStatus } from './Schema';
function SurveyComponent({ surveyModel, verificationStatus }) {
function validateWebsiteUrl(params) {
function customDescriptionCallback(_, options) {
const value = params[0];
// get the customDescription for matrix rows and set it in the title
if (value === undefined || value == null || value == '') {
// attribute so that it shows up as a hover popup
return true;
if (options.column['indexValue'] == 0 && 'item' in options.row) {
}
const item = options.row['item'] as object;
try {
if (item['customDescription'] !== undefined) {
const url = new URL(value);
options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
return url.protocol === 'http:' || url.protocol === 'https:';
} catch (err) {
return false;
}
}
}
}
 
}
surveyModel.css = {
function validateWebsiteUrl(params) {
question: {
const value = params[0];
title: "sv-title sv-question__title sv-header-flex",
if (value === undefined || value == null || value == '') {
titleOnError: "sv-question__title--error sv-error-color-fix"
return true;
}
}
};
try {
const url = new URL(value);
function setVerifyButton(question: Question, state: VerificationStatus) {
return url.protocol === 'http:' || url.protocol === 'https:';
} catch (err) {
verificationStatus.current.set(question.name, state);
return false;
}
const btn = document.createElement("button");
}
btn.type = "button";
btn.className = "sv-action-bar-item verification";
function hideCheckboxLabels(_, options) {
btn.innerHTML = state;
if (options.question.hideCheckboxLabels) {
const classes = options.cssClasses;
if (state == VerificationStatus.Unverified) {
classes.root += " hidden-checkbox-labels";
btn.innerHTML = "No change from previous year";
}
btn.className += " verification-required";
}
btn.onclick = function () {
if (surveyModel.mode == "display") {
function setVerifyButton(question: Question, state: VerificationStatus, surveyModel) {
return;
}
surveyModel.verificationStatus.set(question.name, state);
question.validate();
setVerifyButton(question, VerificationStatus.Verified);
const btn = document.createElement("button");
 
btn.type = "button";
 
btn.className = "sv-action-bar-item verification";
 
btn.innerHTML = state;
 
 
if (state == VerificationStatus.Unverified) {
 
btn.innerHTML = "No change from previous year";
 
btn.className += " verification-required";
 
btn.onclick = function () {
 
if (surveyModel.mode == "display") {
 
return;
}
}
} else {
question.validate();
btn.innerHTML = "Answer updated"
setVerifyButton(question, VerificationStatus.Verified, surveyModel);
btn.className += " verification-ok";
}
}
 
} else {
 
btn.innerHTML = "Answer updated"
 
btn.className += " verification-ok";
 
}
const selector = '[data-name="' + question.name + '"]';
const selector = '[data-name="' + question.name + '"]';
const header = document.querySelector(selector)?.querySelector('h5');
const header = document.querySelector(selector)?.querySelector('h5');
const old = header?.querySelector(".verification");
const old = header?.querySelector(".verification");
if (old) {
if (old) {
old.replaceWith(btn);
old.replaceWith(btn);
} else {
} else {
header?.appendChild(btn);
header?.appendChild(btn);
}
}
}
 
}
FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
surveyModel.onAfterRenderQuestion.add(function (survey, options) {
function SurveyComponent({ surveyModel }) {
const status = verificationStatus.current.get(options.question.name);
 
const alwaysSetVerify = useCallback((_, options) => {
 
const status = surveyModel.verificationStatus.get(options.question.name);
if (status) {
if (status) {
setVerifyButton(options.question, status);
setVerifyButton(options.question, status, surveyModel);
}
}
});
}, [surveyModel])
surveyModel.onValueChanged.add(function (survey, options) {
const updateFromUnverified = useCallback((_, options) => {
const currentStatus = verificationStatus.current.get(options.question.name);
const currentStatus = surveyModel.verificationStatus.get(options.question.name);
if (currentStatus == VerificationStatus.Unverified) {
if (currentStatus == VerificationStatus.Unverified) {
setVerifyButton(options.question, VerificationStatus.Edited);
setVerifyButton(options.question, VerificationStatus.Edited, surveyModel);
}
}
});
}, [surveyModel])
surveyModel.onUpdateQuestionCssClasses.add(function (_, options) {
if (!FunctionFactory.Instance.hasFunction("validateWebsiteUrl")) {
if (options.question.hideCheckboxLabels) {
FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
const classes = options.cssClasses;
}
classes.root += " hidden-checkbox-labels";
}
if (!surveyModel.css.question.title.includes("sv-header-flex")) {
});
surveyModel.css.question.title = "sv-title sv-question__title sv-header-flex";
 
surveyModel.css.question.titleOnError = "sv-question__title--error sv-error-color-fix";
 
}
 
 
if (!surveyModel.onAfterRenderQuestion.hasFunc(alwaysSetVerify)) {
 
surveyModel.onAfterRenderQuestion.add(alwaysSetVerify);
 
}
surveyModel.onMatrixAfterCellRender.add((survey, options) => {
if (!surveyModel.onValueChanged.hasFunc(updateFromUnverified)) {
// get the customDescription for matrix rows and set it in the title
surveyModel.onValueChanged.add(updateFromUnverified);
// attribute so that it shows up as a hover popup
}
 
 
if (!surveyModel.onUpdateQuestionCssClasses.hasFunc(hideCheckboxLabels)) {
 
surveyModel.onUpdateQuestionCssClasses.add(hideCheckboxLabels);
 
}
 
 
if (!surveyModel.onMatrixAfterCellRender.hasFunc(customDescriptionCallback)) {
// NB I would have preferred using onAfterRenderQuestion, but unfortunately that is
// NB I would have preferred using onAfterRenderQuestion, but unfortunately that is
// not always triggered on re-renders (specifically when extra column become visble or invisible)
// not always triggered on re-renders (specifically when extra column become visble or invisible)
surveyModel.onMatrixAfterCellRender.add(customDescriptionCallback);
if (options.column['indexValue'] == 0 && 'item' in options.row) {
}
const item = options.row['item'] as object;
if (item['customDescription'] !== undefined) {
options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
}
}
});
return <Survey model={surveyModel} />
return <Survey model={surveyModel} />
}
}
Loading