Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
compendium-v2
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
geant-swd
compendium-v2
Merge requests
!64
useBlock in the survey frontend to ask users for confirmation
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
useBlock in the survey frontend to ask users for confirmation
feature/react-router-stuff
into
develop
Overview
0
Commits
6
Pipelines
0
Changes
2
Merged
Remco Tukker
requested to merge
feature/react-router-stuff
into
develop
1 year ago
Overview
0
Commits
6
Pipelines
0
Changes
2
Expand
use a context provider for the filter selection in the compendium frontend
so that we can upgrade to data routers in both frontends
so that I can useBlock in the survey frontend to ask users for confirmation when they press the back button while editing...
and also improve the survey component to allow for rerenders because everything rerenders if navigating away is blocked.....
Edited
1 year ago
by
Remco Tukker
0
0
Merge request reports
Viewing commit
2a4df433
Prev
Next
Show latest version
2 files
+
104
−
92
Side-by-side
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
2
Search (e.g. *.vue) (Ctrl+P)
2a4df433
clean up the surveycomponent and fix warning about editing state during render
· 2a4df433
Remco Tukker
authored
1 year ago
survey-frontend/src/SurveyComponent.tsx
+
91
−
74
Options
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