Skip to content

Commit fb3fc8c

Browse files
twinkarmatwinkarma
authored
Merge pull request #108 from RSE-Sheffield/feat/delete-project-survey
Add function for deleting project and survey
2 parents 804aebb + 58696d6 commit fb3fc8c

File tree

76 files changed

+1342
-842
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1342
-842
lines changed

‎assets/sort-survey-configurator/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
<body>
1515
<div id="app"></div>
1616
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
17-
<script type="module" src="/src/main.ts" ></script>
17+
<script type="module" src="./src/main.ts" ></script>
1818
</body>
1919
</html>

‎assets/sort-survey-configurator/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"build": "vite build",
8+
"build": "vite build --emptyOutDir",
99
"preview": "vite preview",
1010
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
1111
},

‎assets/sort-survey-configurator/src/App.svelte

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<svelte:options customElement="survey-configurator"/>
22
<script lang="ts">
3+
/**
4+
* Harness for testing SORT UI components
5+
*/
36
import * as _ from 'lodash';
4-
import defaultConfigs from '../../../data/survey_config/sort_only_config.json';
5-
import SurveyConfigurator from "./lib/SurveyConfigurator.svelte";
6-
import SurveyResponse from "./lib/SurveyResponse.svelte";
7+
import defaultConfigs from '../../../data/survey_config/all_elements_test_config.json';
8+
import SurveyConfigurator from "./lib/components/SurveyConfigurator.svelte";
9+
import SurveyResponse from "./lib/components/SurveyResponse.svelte";
10+
import {download} from "./lib/misc.svelte.js";
711
812
//Import data from other script blocks on page (for django)
913
//otherwise use the default config
@@ -18,38 +22,37 @@
1822
let configData = $state(_.cloneDeep(initConfigData));
1923
2024
21-
let surveyConfigComponent = $state();
25+
let surveyComponent = $state();
2226
let editable = $state(true);
2327
2428
let responseValue = $state();
25-
$inspect(responseValue);
2629
2730
28-
function validate() {
29-
surveyConfigComponent.validate();
30-
}
31+
3132
3233
function getConfig() {
33-
surveyConfigComponent.getConfig();
34+
download("config.json", JSON.stringify(configData, null, 2))
3435
}
3536
3637
function toggleEditable() {
3738
editable = !editable;
3839
}
3940
4041
function getValues() {
41-
surveyConfigComponent.getValue();
42+
download("values.json", JSON.stringify(responseValue, null, 2))
4243
}
4344
4445
</script>
45-
46+
<nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
47+
<div class="container-fluid">
48+
<h2>SORT UI Dev test page</h2>
49+
</div>
50+
</nav>
4651
<main>
4752
<div class="container">
48-
<div>
49-
<button class="btn btn-primary" onclick={validate}>Validate</button>
53+
<div class="btn-group mb-3" role="group" aria-label="Test functions">
5054
<button class="btn btn-primary" onclick={getConfig}>Get config</button>
5155
<button class="btn btn-primary" onclick={toggleEditable}>
52-
5356
{#if editable}
5457
Turn off editing
5558
{:else}
@@ -61,11 +64,11 @@
6164

6265
{#if editable}
6366
<SurveyConfigurator bind:config={configData}
64-
bind:this={surveyConfigComponent}
67+
bind:this={surveyComponent}
6568
editable={editable}
6669
/>
6770
{:else}
68-
<SurveyResponse config={configData} bind:value={responseValue}/>
71+
<SurveyResponse config={configData} bind:value={responseValue} bind:this={surveyComponent}/>
6972
{/if}
7073
</div>
7174

‎assets/sort-survey-configurator/src/SurveyConfigConsentDemographyApp.svelte

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import * as _ from 'lodash';
44
import defaultConsentConfigs from '../../../data/survey_config/consent_only_config.json';
55
import defaultDemographicConfigs from '../../../data/survey_config/demography_only_config.json';
6-
import SurveyConfigurator from "./lib/SurveyConfigurator.svelte";
7-
import {getDataInElem} from "./lib/misc.svelte";
6+
import SurveyConfigurator from "./lib/components/SurveyConfigurator.svelte";
7+
import {getDataInElem} from "./lib/misc.svelte.js";
88
99
//Import data from other script blocks on page (for django)
1010
//otherwise use the default config
@@ -15,16 +15,16 @@
1515
1616
let consentConfigStr = $derived(JSON.stringify(consentConfig))
1717
let demographyConfigStr = $derived(JSON.stringify(demographyConfig))
18-
19-
$inspect(consentConfig);
20-
$inspect(demographyConfig);
2118
</script>
2219

2320

2421
<div class="card mb-3">
2522
<div class="card-body">
2623
<h2>Configure your welcome and consent page</h2>
27-
<p></p>
24+
<p>
25+
The introduction page of your survey page can be configured below. We've provided a default consent page which
26+
can be freely customised.
27+
</p>
2828

2929
<SurveyConfigurator bind:config={consentConfig}
3030
sectionTypeEditable={false}
@@ -35,8 +35,17 @@
3535
</div>
3636
<div class="card mb-3">
3737
<div class="card-body">
38-
<h2>Configure your demographys page</h2>
39-
<p></p>
38+
<h2>SORT Survey Questions</h2>
39+
<p>SORT questions are automatically added to your survey.</p>
40+
</div>
41+
</div>
42+
<div class="card mb-3">
43+
<div class="card-body">
44+
<h2>Configure your demographic page</h2>
45+
<p>
46+
The demographic page of your survey can be configured below. We've provided some example demographic
47+
questions which can be freely customised.
48+
</p>
4049
<SurveyConfigurator bind:config={demographyConfig}
4150
sectionTypeEditable={false}
4251
sectionEditable={false}

‎assets/sort-survey-configurator/src/SurveyResponseApp.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<script lang="ts">
33
import * as _ from 'lodash';
44
import defaultConfigs from '../../../data/survey_config/sort_only_config.json';
5-
import SurveyConfigurator from "./lib/SurveyConfigurator.svelte";
6-
import SurveyResponse from "./lib/SurveyResponse.svelte";
7-
import {getDataInElem} from "./lib/misc.svelte";
5+
import SurveyConfigurator from "./lib/components/SurveyConfigurator.svelte";
6+
import SurveyResponse from "./lib/components/SurveyResponse.svelte";
7+
import {getDataInElem} from "./lib/misc.svelte.js";
88
99
//Import data from other script blocks on page (for django)
1010
//otherwise use the default config

‎assets/sort-survey-configurator/src/lib/SurveyResponse.svelte

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎assets/sort-survey-configurator/src/lib/SurveyConfigurator.svelte renamed to ‎assets/sort-survey-configurator/src/lib/components/SurveyConfigurator.svelte

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,6 @@
1919
let _sectionComponents = $state([]);
2020
let sectionComponents = $derived(_sectionComponents.filter(Boolean));
2121
22-
23-
24-
export function validate() {
25-
// for (let i in sectionComponents) {
26-
// sectionComponents[i].validate();
27-
// }
28-
}
29-
30-
export function getValue(){
31-
let sectionValues = [];
32-
for (let i = 0; i < sectionComponents.length; i++) {
33-
sectionValues.push(sectionComponents[i].getValue())
34-
}
35-
36-
download("formValues.json", JSON.stringify(sectionValues, null, 2));
37-
38-
return sectionValues;
39-
}
40-
41-
export function getConfig() {
42-
download("config.json", JSON.stringify(config, null, 2));
43-
}
44-
4522
function checkCurrentEditor(sectionIndex: number, fieldIndex: number, doEdit: boolean) {
4623
for (let i = 0; i < sectionComponents.length; i++) {
4724
if(doEdit){
@@ -63,18 +40,7 @@
6340
config.sections.push(getDefaultSectionConfig());
6441
}
6542
66-
function download(filename, text) {
67-
var element = document.createElement('a');
68-
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
69-
element.setAttribute('download', filename);
7043
71-
element.style.display = 'none';
72-
document.body.appendChild(element);
73-
74-
element.click();
75-
76-
document.body.removeChild(element);
77-
}
7844
7945
8046
</script>

‎assets/sort-survey-configurator/src/lib/components/SurveyResponse.svelte

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<script lang="ts">
2+
import * as _ from "lodash"
3+
import SectionComponent from "./input/SectionComponent.svelte";
4+
5+
let {
6+
config = $bindable(),
7+
value = $bindable(),
8+
initValue = null,
9+
csrf = "",
10+
} = $props();
11+
12+
$inspect(value);
13+
14+
let isValid = $state(); let isInvalid = $state();
15+
16+
function setIsValid(valid) {
17+
isValid = valid;
18+
isInvalid = !valid;
19+
}
20+
21+
function clearValidation(){
22+
isValid = false;
23+
isInvalid = false;
24+
}
25+
26+
// Keeps track of all section components
27+
// when components are deleted the derived property filters this out
28+
let currentSectionComponent = $state();
29+
30+
// Value in plaintext for submitting to the backend
31+
let valueStr = $derived(JSON.stringify(value))
32+
33+
34+
let sectionValues = $state(initValue !== null ? initValue : []);
35+
$effect(() => {
36+
value = sectionValues;
37+
})
38+
39+
let currentPage = $state(0);
40+
41+
function validate() {
42+
const currentPageValidates = currentSectionComponent.validate();
43+
setIsValid(currentPageValidates)
44+
return currentPageValidates;
45+
}
46+
47+
function previousPage() {
48+
if (currentPage > 0) {
49+
currentPage -= 1;
50+
clearValidation();
51+
}
52+
}
53+
54+
function nextPage() {
55+
if (validate()) {
56+
if (currentPage < config.sections.length - 1) {
57+
currentPage += 1;
58+
clearValidation();
59+
}
60+
}
61+
}
62+
63+
function onSubmitHandler(e) {
64+
if (!validate()) {
65+
// Don't submit if there's still an error on the page
66+
e.preventDefault();
67+
}
68+
}
69+
70+
71+
</script>
72+
{#each config.sections as section, index (index)}
73+
{#if currentPage === index}
74+
<SectionComponent bind:config={config.sections[index]}
75+
editable={false}
76+
displaySectionType={false}
77+
bind:value={sectionValues[index]}
78+
bind:this={currentSectionComponent}
79+
/>
80+
{/if}
81+
{/each}
82+
{#if isInvalid}
83+
<div class="alert alert-danger mb-3">
84+
Values are incorrect or missing. Please check the values above before continuing.
85+
</div>
86+
{/if}
87+
88+
<div class="row">
89+
<div class="col-1">
90+
<button class="btn btn-primary" disabled={currentPage < 1} onclick={previousPage}>Previous</button>
91+
</div>
92+
<div class="col-1">
93+
{#if currentPage < config.sections.length - 1}
94+
<button class="btn btn-primary" onclick={nextPage}>Next</button>
95+
{:else}
96+
<form method="post" onsubmit={onSubmitHandler}>
97+
<input type="hidden" name="csrfmiddlewaretoken" value="{csrf}"/>
98+
<input type="hidden" name="value" value="{valueStr}"/>
99+
<input type="submit" class="btn btn-primary" value="Submit"/>
100+
</form>
101+
{/if}
102+
</div>
103+
</div>

0 commit comments

Comments
 (0)