New Result View
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
Jonas Rittershofer
parent
cb28a3d1a5
commit
8f7b826f6f
|
|
@ -553,6 +553,25 @@ class ApiController extends Controller {
|
|||
return new Http\JSONResponse($id);
|
||||
}
|
||||
|
||||
/**
|
||||
* @NoAdminRequired
|
||||
*/
|
||||
private function getAnswers(int $submissionId): array {
|
||||
try {
|
||||
$answerEntities = $this->answerMapper->findBySubmission($submissionId);
|
||||
} catch (DoesNotExistException $e) {
|
||||
//Just ignore, if no Data. Returns empty Answers-Array
|
||||
}
|
||||
|
||||
// Load Answer-Data
|
||||
$answers = [];
|
||||
foreach ($answerEntities as $answerEntity) {
|
||||
$answers[] = $answerEntity->read();
|
||||
}
|
||||
|
||||
return $answers;
|
||||
}
|
||||
|
||||
/**
|
||||
* @NoAdminRequired
|
||||
*/
|
||||
|
|
@ -569,24 +588,39 @@ class ApiController extends Controller {
|
|||
return new Http\JSONResponse([], Http::STATUS_FORBIDDEN);
|
||||
}
|
||||
|
||||
$result = [];
|
||||
$submissionList = $this->submissionMapper->findByForm($form->getId());
|
||||
foreach ($submissionList as $submissionEntity) {
|
||||
$answerList = $this->answerMapper->findBySubmission($submissionEntity->id);
|
||||
foreach ($answerList as $answerEntity) {
|
||||
$answer = $answerEntity->read();
|
||||
//Temporary Adapt Data to be usable by old Results-View
|
||||
$answer['userId'] = $submissionEntity->getUserId();
|
||||
|
||||
$question = $this->questionMapper->findById($answer['questionId']);
|
||||
$answer['questionText'] = $question->getText();
|
||||
$answer['questionType'] = $question->getType();
|
||||
|
||||
$result[] = $answer;
|
||||
}
|
||||
try {
|
||||
$submissionEntities = $this->submissionMapper->findByForm($form->getId());
|
||||
} catch (DoesNotExistException $e) {
|
||||
//Just ignore, if no Data. Returns empty Submissions-Array
|
||||
}
|
||||
|
||||
return new Http\JSONResponse($result);
|
||||
$submissions = [];
|
||||
foreach ($submissionEntities as $submissionEntity) {
|
||||
// Load Submission-Data & corresponding Answers
|
||||
$submission = $submissionEntity->read();
|
||||
$submission['answers'] = $this->getAnswers($submission['id']);
|
||||
|
||||
// Add to returned List of Submissions
|
||||
$submissions[] = $submission;
|
||||
}
|
||||
|
||||
// Load question-texts, including deleted ones.
|
||||
try {
|
||||
$questionEntities = $this->questionMapper->findByForm($form->getId());
|
||||
} catch (DoesNotExistException $e) {
|
||||
//handle silently
|
||||
}
|
||||
$questions = [];
|
||||
foreach ($questionEntities as $questionEntity) {
|
||||
$questions[] = $questionEntity->read();
|
||||
}
|
||||
|
||||
$response = [
|
||||
'submissions' => $submissions,
|
||||
'questions' => $questions,
|
||||
];
|
||||
|
||||
return new Http\JSONResponse($response);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -57,7 +57,9 @@ class SubmissionMapper extends QBMapper {
|
|||
->from($this->getTableName())
|
||||
->where(
|
||||
$qb->expr()->eq('form_id', $qb->createNamedParameter($formId, IQueryBuilder::PARAM_INT))
|
||||
);
|
||||
)
|
||||
//Newest submissions first
|
||||
->orderBy('timestamp', 'DESC');
|
||||
|
||||
return $this->findEntities($qb);
|
||||
}
|
||||
|
|
|
|||
62
src/components/Results/Answer.vue
Normal file
62
src/components/Results/Answer.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2020 Jonas Rittershofer <jotoeri@users.noreply.github.com>
|
||||
-
|
||||
- @author Jonas Rittershofer <jotoeri@users.noreply.github.com>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<tr class="answer">
|
||||
<td class="question-text">
|
||||
{{ question.text }}
|
||||
</td>
|
||||
<td id="text">
|
||||
{{ answer.text }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Answer',
|
||||
|
||||
props: {
|
||||
answer: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
question: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.answer {
|
||||
white-space: initial;
|
||||
|
||||
.question-text {
|
||||
min-width: 20%;
|
||||
max-width: 40%;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
123
src/components/Results/Submission.vue
Normal file
123
src/components/Results/Submission.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!--
|
||||
- @copyright Copyright (c) 2020 Jonas Rittershofer <jotoeri@users.noreply.github.com>
|
||||
-
|
||||
- @author Jonas Rittershofer <jotoeri@users.noreply.github.com>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="table submission">
|
||||
<div id="submission-head">
|
||||
<div id="submission-title">
|
||||
Submission by {{ userDisplayName }}
|
||||
</div>
|
||||
<div id="submission-date">
|
||||
{{ submissionDateTime }}
|
||||
</div>
|
||||
</div>
|
||||
<table class="answer">
|
||||
<Answer
|
||||
v-for="answer in submission.answers"
|
||||
:key="answer.id"
|
||||
:answer="answer"
|
||||
:question="questionToAnswer(answer.questionId)" />
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from '@nextcloud/moment'
|
||||
import Answer from './Answer'
|
||||
|
||||
export default {
|
||||
name: 'Submission',
|
||||
|
||||
components: {
|
||||
Answer,
|
||||
},
|
||||
|
||||
props: {
|
||||
submission: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
questions: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
userDisplayName() {
|
||||
return this.submission.userId
|
||||
},
|
||||
submissionDateTime() {
|
||||
return moment(this.submission.timestamp, 'X').format('LLLL')
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
questionToAnswer(questionId) {
|
||||
return this.questions.find(question => question.id === questionId)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.submission {
|
||||
margin: 15px 0px;
|
||||
width: 100%;
|
||||
|
||||
border: 1px;
|
||||
border-color: var(--color-border);
|
||||
border-style: solid;
|
||||
|
||||
line-break: normal;
|
||||
|
||||
// div {
|
||||
// min-height: 30px;
|
||||
// }
|
||||
|
||||
#submission-head {
|
||||
background-color: var(--color-background-dark);
|
||||
display: flex;
|
||||
|
||||
#submission-title {
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-self: baseline;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
#submission-date {
|
||||
align-self: baseline;
|
||||
color: var(--color-text-lighter);
|
||||
display: block ruby;
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.answer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
|
||||
<header v-if="!noSubmissions">
|
||||
<h2>{{ t('forms', 'Responses for {title}', { title: form.title }) }}</h2>
|
||||
<div v-for="sum in stats" :key="sum">
|
||||
<!-- <div v-for="sum in stats" :key="sum">
|
||||
{{ sum }}
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<!-- No submissions -->
|
||||
|
|
@ -56,11 +56,13 @@
|
|||
</section>
|
||||
|
||||
<section v-else>
|
||||
<button id="exportButton" class="primary" @click="download">
|
||||
<span class="icon-download-white" role="img" />
|
||||
{{ t('forms', 'Export to CSV') }}
|
||||
</button>
|
||||
<transition-group
|
||||
<Submission
|
||||
v-for="submission in submissions"
|
||||
:key="submission.id"
|
||||
:submission="submission"
|
||||
:questions="questions" />
|
||||
|
||||
<!-- <transition-group
|
||||
name="list"
|
||||
tag="div"
|
||||
class="table">
|
||||
|
|
@ -68,10 +70,10 @@
|
|||
key="0"
|
||||
:header="true" />
|
||||
<ResultItem
|
||||
v-for="answer in answers"
|
||||
:key="answer.id"
|
||||
:answer="answer" />
|
||||
</transition-group>
|
||||
v-for="submission in submissions"
|
||||
:key="submission.id"
|
||||
:answer="submission.answers[0]" />
|
||||
</transition-group> -->
|
||||
</section>
|
||||
</AppContent>
|
||||
</template>
|
||||
|
|
@ -81,10 +83,11 @@ import { generateUrl } from '@nextcloud/router'
|
|||
import { showError } from '@nextcloud/dialogs'
|
||||
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||
import axios from '@nextcloud/axios'
|
||||
import json2csvParser from 'json2csv'
|
||||
// import json2csvParser from 'json2csv'
|
||||
|
||||
import EmptyContent from '../components/EmptyContent'
|
||||
import ResultItem from '../components/resultItem'
|
||||
// import ResultItem from '../components/resultItem'
|
||||
import Submission from '../components/Results/Submission'
|
||||
import TopBar from '../components/TopBar'
|
||||
import ViewsMixin from '../mixins/ViewsMixin'
|
||||
|
||||
|
|
@ -94,7 +97,7 @@ export default {
|
|||
components: {
|
||||
AppContent,
|
||||
EmptyContent,
|
||||
ResultItem,
|
||||
Submission,
|
||||
TopBar,
|
||||
},
|
||||
|
||||
|
|
@ -103,45 +106,14 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
loadingResults: true,
|
||||
answers: [],
|
||||
submissions: [],
|
||||
questions: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
stats() {
|
||||
const sums = []
|
||||
|
||||
if (this.answers != null) {
|
||||
const uniqueAns = []
|
||||
const uniqueQs = []
|
||||
const ansToQ = new Map()
|
||||
for (let i = 0; i < this.answers.length; i++) {
|
||||
if (this.answers[i].questionType === 'radiogroup' || this.answers[i].questionType === 'dropdown') {
|
||||
if (uniqueAns.includes(this.answers[i].text) === false) {
|
||||
uniqueAns.push(this.answers[i].text)
|
||||
ansToQ.set(this.answers[i].text, this.answers[i].questionId)
|
||||
}
|
||||
if (uniqueQs.includes(this.answers[i].questionId) === false) {
|
||||
uniqueQs.push(this.answers[i].questionId)
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < uniqueAns.length; i++) {
|
||||
sums[i] = 0
|
||||
}
|
||||
for (let i = 0; i < this.answers.length; i++) {
|
||||
sums[uniqueAns.indexOf(this.answers[i].text)]++
|
||||
}
|
||||
for (let i = 0; i < sums.length; i++) {
|
||||
sums[i] = 'Question ' + ansToQ.get(uniqueAns[i]) + ': ' + (sums[i] / ((this.answers.length / uniqueQs.length)) * 100).toFixed(2) + '%' + ' of respondents voted for answer choice: ' + uniqueAns[i]
|
||||
}
|
||||
}
|
||||
|
||||
return sums.sort()
|
||||
},
|
||||
|
||||
noSubmissions() {
|
||||
return this.answers && this.answers.length === 0
|
||||
return this.submissions && this.submissions.length === 0
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -150,7 +122,6 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
|
||||
showEdit() {
|
||||
this.$router.push({
|
||||
name: 'edit',
|
||||
|
|
@ -168,8 +139,9 @@ export default {
|
|||
const response = await axios.get(generateUrl('/apps/forms/api/v1/submissions/{hash}', {
|
||||
hash: this.form.hash,
|
||||
}))
|
||||
this.answers = response.data
|
||||
console.debug(this.answers)
|
||||
this.submissions = response.data.submissions
|
||||
this.questions = response.data.questions
|
||||
console.debug(this.submissions)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('forms', 'There was an error while loading results'))
|
||||
|
|
@ -178,9 +150,9 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
download() {
|
||||
/* download() {
|
||||
this.loading = true
|
||||
axios.get(generateUrl('apps/forms/get/form/' + this.$route.params.hash))
|
||||
axios.get(OC.generateUrl('apps/forms/get/form/' + this.$route.params.hash))
|
||||
.then((response) => {
|
||||
this.json2csvParser = ['userId', 'questionId', 'questionText', 'Answer'] // TODO Is this one necessary??
|
||||
const formattedAns = []
|
||||
|
|
@ -202,26 +174,11 @@ export default {
|
|||
document.body.removeChild(element)
|
||||
this.loading = false
|
||||
}, (error) => {
|
||||
/* eslint-disable-next-line no-console */
|
||||
/* eslint-disable-next-line no-console *
|
||||
console.log(error.response)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
}, */
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#exportButton {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue