292 lines
14 KiB
Text
292 lines
14 KiB
Text
@model UserResponsesViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "User Responses";
|
|
}
|
|
|
|
|
|
|
|
<style>
|
|
.stepper-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.stepper-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
padding-left: 120px;
|
|
}
|
|
|
|
.stepper-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.step-counter {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.step-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.step-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid mt-3">
|
|
<p>
|
|
<a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
|
|
</p>
|
|
|
|
<div class="card p-5 m-3 shadow">
|
|
<div class="bd-callout bd-callout-primary">
|
|
<h4 class="text-primary">User Responses</h4>
|
|
<text>@Model.UserName (@Model.UserEmail)</text>
|
|
</div>
|
|
|
|
<!-- Stepper -->
|
|
<div class="stepper-wrapper">
|
|
@foreach (var response in Model.Responses)
|
|
{
|
|
<div class="stepper-item">
|
|
<div class="step-counter">
|
|
<span class="badge bg-primary p-3 shadow">@response.Questionnaire.Title</span>
|
|
</div>
|
|
<div class="step-content">
|
|
|
|
<div class="card p-4">
|
|
<div class="step-header">
|
|
<h6>Survey: @response.Questionnaire.Title</h6>
|
|
<p>Submitted on: @response.SubmissionDate</p>
|
|
</div>
|
|
|
|
<!-- Collapsible button -->
|
|
<button class="btn btn-primary btn-sm mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
|
|
View Responses
|
|
</button>
|
|
|
|
<!-- Collapsible content -->
|
|
<div class="collapse mt-3" id="collapseResponse-@response.Id">
|
|
<table class="table table-responsive w-100 d-block d-md-table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Question</th>
|
|
<th>Response</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var detail in response.ResponseDetails)
|
|
{
|
|
<tr>
|
|
<td>@detail.Question.Text</td>
|
|
<td>
|
|
@if (detail.QuestionType == QuestionType.Text || detail.QuestionType == QuestionType.Slider || detail.QuestionType == QuestionType.Open_ended)
|
|
{
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
Question type
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
|
|
</li>
|
|
</ul>
|
|
<br />
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
Answer
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.TextResponse</span>
|
|
</li>
|
|
</ul>
|
|
}
|
|
else
|
|
{
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
Question type
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
|
|
</li>
|
|
</ul>
|
|
<br />
|
|
<ul class="list-group">
|
|
@foreach (var answer in detail.ResponseAnswers)
|
|
{
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Answer
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.Question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId)?.Text</span>
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@* <div class="container-fluid mt-3">
|
|
<p>
|
|
<a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
|
|
</p>
|
|
|
|
<div class="card p-5 m-3 shadow">
|
|
<div class="bd-callout bd-callout-primary">
|
|
<h4 class="text-primary">User Responses</h4>
|
|
<text>@Model.UserName (@Model.UserEmail)</text>
|
|
</div>
|
|
|
|
<div>
|
|
@foreach (var response in Model.Responses)
|
|
{
|
|
<div class="container card mt-4 p-3">
|
|
<div>
|
|
<h6>Survey: @response.Questionnaire.Title</h6>
|
|
<p>Submitted on: @response.SubmissionDate</p>
|
|
|
|
<!-- Collapsible button -->
|
|
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
|
|
View Responses
|
|
</button>
|
|
|
|
<!-- Collapsible content -->
|
|
<div class="collapse mt-3" id="collapseResponse-@response.Id">
|
|
<table class="table table-responsive w-100 d-block d-md-table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Question</th>
|
|
<th>Response</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var detail in response.ResponseDetails)
|
|
{
|
|
<tr>
|
|
<td>@detail.Question.Text</td>
|
|
<td>
|
|
@if (detail.QuestionType == QuestionType.Text || detail.QuestionType == QuestionType.Slider || detail.QuestionType == QuestionType.Open_ended)
|
|
{
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
Question type
|
|
<span class="badge text-bg-primary rounded-pill p-1s">@detail.QuestionType</span>
|
|
</li>
|
|
|
|
</ul>
|
|
<br />
|
|
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
|
|
Answer
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.TextResponse</span>
|
|
</li>
|
|
</ul>
|
|
|
|
}
|
|
else
|
|
{
|
|
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center border-1">
|
|
Question type
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
|
|
</li>
|
|
|
|
</ul>
|
|
<br />
|
|
|
|
<ul class="list-group">
|
|
|
|
@foreach (var answer in detail.ResponseAnswers)
|
|
{
|
|
|
|
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Answer
|
|
<span class="badge text-bg-primary rounded-pill p-1">@detail.Question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId)?.Text</span>
|
|
</li>
|
|
}
|
|
|
|
</ul>
|
|
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div> *@
|
|
|
|
@section Scripts {
|
|
<!-- Include Bootstrap 5 JS for collapse functionality -->
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');
|
|
|
|
collapseElements.forEach(function (element) {
|
|
var targetId = element.getAttribute('data-bs-target');
|
|
var targetElement = document.querySelector(targetId);
|
|
|
|
// Initialize button text and color based on current state
|
|
if (targetElement.classList.contains('show')) {
|
|
element.textContent = 'Hide Responses';
|
|
element.classList.remove('btn-primary');
|
|
element.classList.add('btn-info');
|
|
} else {
|
|
element.textContent = 'View Responses';
|
|
element.classList.remove('btn-info');
|
|
element.classList.add('btn-primary');
|
|
}
|
|
|
|
targetElement.addEventListener('shown.bs.collapse', function () {
|
|
element.textContent = 'Hide Responses';
|
|
element.classList.remove('btn-primary');
|
|
element.classList.add('btn-info');
|
|
});
|
|
|
|
targetElement.addEventListener('hidden.bs.collapse', function () {
|
|
element.textContent = 'View Responses';
|
|
element.classList.remove('btn-info');
|
|
element.classList.add('btn-primary');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
}
|