148 lines
No EOL
6.8 KiB
Text
148 lines
No EOL
6.8 KiB
Text
@model IEnumerable<QuestionnaireViewModel>
|
|
|
|
@{
|
|
ViewData["Title"] = "Questionnaire";
|
|
}
|
|
|
|
|
|
<div class="container-fluid d-flex justify-content-center">
|
|
|
|
<partial name="_Notification" />
|
|
|
|
<div class="card bg-default mb-3 p-4 shadow ">
|
|
<div class="card-header">Questionnaire</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Questionnaire list</h4>
|
|
<p>
|
|
<a asp-action="Create" class="btn btn-primary"><span><i class="bi bi-plus-square-fill"></i></span> Create New</a>
|
|
</p>
|
|
<table class="table table-responsive table-light table-hover ">
|
|
<thead class="w-auto">
|
|
<tr>
|
|
|
|
<th scope="col">Id</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Description</th>
|
|
<th scope="col">Total Questions</th>
|
|
<th scope="col"> <span class="badge badge-primary">Questions</span> | <span class="badge badge-info">Type</span> | <span class="badge badge-success">Answers </span></th>
|
|
|
|
<th scope="col" class="d-flex justify-content-end">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="w-auto">
|
|
@foreach (var item in Model)
|
|
{
|
|
<tr class="table-secondary">
|
|
|
|
<td>@item.Id</td>
|
|
@* <td> @item.Title</td> *@
|
|
<td>
|
|
<div class="title-container">
|
|
<div class="title-text">
|
|
<span class="item-title">@Html.Raw(item.Title.Length >= 30 ? item.Title.Substring(0, 30) : item.Title)</span>
|
|
<span class="more-title" style="display:none;">@(item.Title.Length > 30 ? item.Title.Substring(30) : "")</span>
|
|
<a href="#" id="ReadMore" class="read-more-title-btn">Read More</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
@* <td>@Html.Raw(item.Description)</td> *@
|
|
<td>
|
|
<!-- Display only a portion of the description initially -->
|
|
<div class="description-container">
|
|
<div class="description-text">
|
|
<span class="item-description">@Html.Raw(item.Description.Length >= 30 ? item.Description.Substring(0, 30) : item.Title)</span>
|
|
<span class="more-text" style="display:none;">@(item.Description.Length > 30 ? item.Description.Substring(30) : "")</span>
|
|
<a href="#" id="ReadMore" class=" read-more-btn">Read More</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td>
|
|
@* <button type="button" class="btn btn-primary btn-sm">
|
|
|
|
</button> *@
|
|
<span class="badge shadow rounded text-bg-primary p-2">
|
|
Questions <span class="badge text-bg-secondary shadow rounded p-1">@item.Questions?.Count()</span>
|
|
</span>
|
|
|
|
</td>
|
|
<td class="h5">
|
|
|
|
@foreach (var question in item.Questions.Take(1))
|
|
{
|
|
|
|
<span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span>
|
|
<span class="badge p-1 m-1 bg-info shadow-sm">Type: @question.Type</span>
|
|
foreach (var answer in question.Answers)
|
|
{
|
|
<span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span>
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</td>
|
|
|
|
<td class="d-flex justify-content-end">
|
|
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Delete</a> |
|
|
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary btn-sm"><i class="bi bi-pencil-square"></i> Edit</a>|
|
|
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-sm"><i class="bi bi-pencil-square"></i> Details</a> |
|
|
<a asp-action="SendQuestionnaire" asp-route-id="@item.Id" class="btn btn-success btn-sm"><i class="bi bi-pencil-square"></i> Send</a>
|
|
|
|
</td>
|
|
</tr>
|
|
}
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@section Scripts{
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.read-more-btn').click(function () {
|
|
var $descriptionText = $(this).closest('.description-container').find('.description-text');
|
|
var $moreText = $descriptionText.find('.more-text');
|
|
var $toggleMore = $descriptionText.find('.toggle-more');
|
|
|
|
if ($moreText.is(':visible')) {
|
|
$moreText.slideUp();
|
|
$toggleMore.fadeIn();
|
|
} else {
|
|
$moreText.slideDown();
|
|
$toggleMore.fadeOut();
|
|
}
|
|
|
|
$(this).text(function (i, text) {
|
|
return text === "Read More" ? "Read Less" : "Read More";
|
|
});
|
|
});
|
|
$('.read-more-title-btn').click(function () {
|
|
var $titleText = $(this).closest('.title-container').find('.title-text');
|
|
var $moreTitle = $titleText.find('.more-title');
|
|
var $toggleMore = $titleText.find('.toggle-more');
|
|
|
|
if ($moreTitle.is(':visible')) {
|
|
$moreTitle.slideUp();
|
|
$toggleMore.fadeIn();
|
|
} else {
|
|
$moreTitle.slideDown();
|
|
$toggleMore.fadeOut();
|
|
}
|
|
|
|
$(this).text(function (i, text) {
|
|
return text === "Read More" ? "Read Less" : "Read More";
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
} |