reorder and save

This commit is contained in:
Mira Weller
2026-05-12 11:30:12 +02:00
parent 9a7d5abb1f
commit 09abc5725e
3 changed files with 51 additions and 13 deletions
@@ -1,6 +1,6 @@
<script>
import Questionnaire from './Questionnaire.vue';
import {get_datafields, get_items, get_questionnaires} from './api';
import {create_questionnaire, get_datafields, get_items, get_questionnaires, update_questionnaire} from './api';
import { i18n_any, QUESTION_TYPE } from './helper';
import { ref } from 'vue';
import { SlickList, SlickItem } from 'vue-slicksort';
@@ -11,18 +11,30 @@ const items_response = await get_items();
const questionnaires = ref(questionnaires_response.results);
const datafields = ref(datafields_response.results);
export default {
components: {
Questionnaire
Questionnaire, SlickList, SlickItem
},
methods: {
i18n_any,
addQuestionnaire: function() {
addQuestionnaire() {
questionnaires.value.push({
items: [], internal_name: "Unnamed questionnaire",
type: 'PS',
_new_id: Date.now(),
});
}
},
saveData() {
console.log(JSON.parse(JSON.stringify(questionnaires.value)));
for (const questionnaire of questionnaires.value) {
if (questionnaire.id) {
update_questionnaire(questionnaire.id, questionnaire);
} else {
create_questionnaire(questionnaire);
}
}
},
},
data() {
return {
@@ -44,10 +56,11 @@ export default {
.question-edit-buttons div { position: absolute; margin-left: 10px; }
.question-edit-buttons button { }
.form-group { margin-bottom: 30px }
.filter-row { background: #fffee6; border: 1px solid #ecead5; padding: 10px; }
</style>
<template>
<p>
<p class="filter-row">
Questionnaires for product:
<select v-model="selected_product">
<option value="">(all)</option>
@@ -58,7 +71,7 @@ export default {
</p>
<div class="question-editor">
<SlickList axis="y" v-model:list="questionnaires" useDragHandle appendTo="#questionnaireListParent" id="questionnaireListParent">
<SlickItem v-for="(questionnaire, index) in questionnaires" :key="questionnaire.id" :index="index">
<SlickItem v-for="(questionnaire, index) in questionnaires" :key="questionnaire.id || questionnaire._new_id" :index="index">
<Questionnaire
:questionnaire="questionnaire"
:datafields="datafields"
@@ -68,6 +81,7 @@ export default {
</SlickList>
</div>
<p>
<button class="btn btn-default" @click="addQuestionnaire()"><i class="fa fa-plus"></i> Neuen Fragebogen erstellen</button>
<button class="btn btn-default" @click="addQuestionnaire()"><i class="fa fa-plus"></i> Neuen Fragebogen erstellen</button>
<button class="btn btn-default" @click="saveData()"><i class="fa fa-save"></i> Speichern</button>
</p>
</template>
@@ -5,6 +5,7 @@ import {i18n_any, QUESTION_TYPE, QUESTION_TYPE_LABEL} from "./helper";
import I18nTextField from "./I18nTextField.vue";
import NativeDialog from "./NativeDialog.vue";
import { SlickList, SlickItem, DragHandle } from 'vue-slicksort';
import {update_questionnaire} from "./api";
const dlgEditor = ref();
const dlgAddExisting = ref();
@@ -76,7 +77,6 @@ const isEditable = computed(() => props.selected_product && props.questionnaire.
</summary>
<div class="panel-body" v-if="!isHidden">
<div class="form-horizontal" :id="`questionListParent${props.questionnaire.id}`">
<SlickList axis="y" v-model:list="props.questionnaire.children" useDragHandle :appendTo="`#questionListParent${props.questionnaire.id}`">
<SlickItem v-for="(child, index) in props.questionnaire.children" :key="child.id" :index="index">
<Question
@@ -86,13 +86,13 @@ const isEditable = computed(() => props.selected_product && props.questionnaire.
@remove-self="questionnaire.children.splice(index, 1)" />
</SlickItem>
</SlickList>
</div>
<p v-if="true">
<button class="btn btn-default" @click="dlgAddExisting.show()"><i class="fa fa-plus"></i> {{ gettext('Existing data field') }}</button>
<button class="btn btn-default" @click="newDatafield()"><i class="fa fa-plus"></i> {{ gettext('New data field') }}</button>
<button class="btn btn-default" @click="showAddTextblockDialog()"><i class="fa fa-plus"></i> {{ gettext('Text') }}</button>
</p>
<button @click="update_questionnaire(questionnaire.id, questionnaire)" class="btn btn-default pull-right">save</button>
</div>
</details>
@@ -155,6 +155,7 @@ const isEditable = computed(() => props.selected_product && props.questionnaire.
<button @click="addTextblock()" class="btn btn-default pull-right">{{ gettext('OK') }}</button>
<button @click="dlgAddTextblock.close()" class="btn btn-default pull-right">{{ gettext('Cancel') }}</button>
</NativeDialog>
</Teleport>
</template>
@@ -1,16 +1,39 @@
const organizer_slug = document.body.getAttribute('data-organizer'),
event_slug = document.body.getAttribute('data-event');
async function api_get(resource) {
return await $.getJSON(`/api/v1/${resource}?_nocache=${+new Date()}`);
}
async function api_json_request(resource, method, json_body) {
return await (await fetch(`/api/v1/${resource}`, {
body: JSON.stringify(json_body),
method: method,
headers: {
"Content-Type": "application/json",
"X-CSRFToken": $('[name=csrfmiddlewaretoken]').val(),
},
})).json();
}
export async function get_datafields() {
return await (await fetch(`/api/v1/organizers/${organizer_slug}/events/${event_slug}/datafields/`)).json();
return await api_get(`organizers/${organizer_slug}/events/${event_slug}/datafields/`);
}
export async function get_questionnaires() {
return await (await fetch(`/api/v1/organizers/${organizer_slug}/events/${event_slug}/questionnaires/`)).json();
return await api_get(`organizers/${organizer_slug}/events/${event_slug}/questionnaires/`);
}
export async function update_questionnaire(id, data) {
return await api_json_request(`organizers/${organizer_slug}/events/${event_slug}/questionnaires/${id}/`, 'PATCH', data);
}
export async function create_questionnaire(data) {
return await api_json_request(`organizers/${organizer_slug}/events/${event_slug}/questionnaires/`, 'POST', data);
}
export async function get_items() {
return await (await fetch(`/api/v1/organizers/${organizer_slug}/events/${event_slug}/items/`)).json();
return await api_get(`organizers/${organizer_slug}/events/${event_slug}/items/`);
}
function get_json_script_value(id) {