207 lines
9.3 KiB
Text
207 lines
9.3 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: #aed5ff;
|
|
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">
|
|
|
|
<h6 class="text-primary font-weight-bold"><i class="bi bi-person"></i> @Model.UserName (@Model.UserEmail)</h6>
|
|
<p class="text-info"><i class="bi bi-calculator"></i> Total responses: @Model.Responses.Count()</p>
|
|
|
|
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="pdf" class="btn btn-info btn-sm">
|
|
<i class="bi bi-filetype-pdf"></i> Generate PDF Report
|
|
</a>
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="excel" class="btn btn-info btn-sm">
|
|
<i class="bi bi-file-excel"></i> Generate Excel Report
|
|
</a>
|
|
</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-2 shadow">@response.Questionnaire.Title <i class="bi bi-arrow-right-circle-fill"></i></span>
|
|
</div>
|
|
<div class="step-content">
|
|
|
|
<div class="card p-4">
|
|
<div class="step-header">
|
|
<h6 class="text-primary font-weight-bold"><i class="bi bi-ui-checks"></i> @response.Questionnaire.Title</h6>
|
|
<h6 class="text-success"><i class="bi bi-calendar2-week"></i> Submitted on: @response.SubmissionDate</h6>
|
|
<p class="text-info"><i class="bi bi-question-square"></i> Total questions: @response.Questionnaire.Questions.Count()</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>
|
|
|
|
|
|
|
|
|
|
@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>
|
|
}
|