save and edit functionlity is enabled for the questionnaire

This commit is contained in:
Qais Yousuf 2024-03-21 16:19:27 +01:00
parent 69810186eb
commit 729ffc869b
2 changed files with 79 additions and 33 deletions

View file

@ -3,7 +3,27 @@
@{ @{
ViewData["Title"] = "Edit"; ViewData["Title"] = "Edit";
} }
<style>
.question-separator {
display: flex;
align-items: center;
}
.line-container {
flex-grow: 1;
}
.next-question-container {
margin: 0 10px; /* Adjust margin as needed */
text-align: center;
}
.next-question {
margin: 0;
}
</style>
<div class="container mt-4"> <div class="container mt-4">
<div class="card justify-content-center p-4 shadow rounded"> <div class="card justify-content-center p-4 shadow rounded">
<div class="card-body"> <div class="card-body">
@ -22,12 +42,18 @@
<textarea asp-for="Description" class="form-control"></textarea> <textarea asp-for="Description" class="form-control"></textarea>
<span asp-validation-for="Description" class="text-danger"></span> <span asp-validation-for="Description" class="text-danger"></span>
</div> </div>
<div class="card shadow rounded"> <div class="card shadow rounded p-4">
<div id="questionsContainer"> <div id="questionsContainer">
@for (int i = 0; i < Model.Questions.Count; i++) @for (int i = 0; i < Model.Questions.Count; i++)
{ {
<hr />
<div class="question"> <div class="question">
<input type="hidden" asp-for="Questions[i].Id" /> <input type="hidden" asp-for="Questions[i].Id" />
<div class="question-title">
@Model.Questions[i].Text
<button type="button" class="btn btn-primary editQuestion">Edit</button>
</div>
<div class="question-details" style="display: none;">
<div class="form-group"> <div class="form-group">
<label asp-for="Questions[i].Text" class="control-label"></label> <label asp-for="Questions[i].Text" class="control-label"></label>
<input asp-for="Questions[i].Text" class="form-control" /> <input asp-for="Questions[i].Text" class="form-control" />
@ -49,24 +75,20 @@
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span> <span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
<button type="button" class="btn btn-danger removeAnswer">Remove Answer</button> <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
</div> </div>
</div> </div>
} }
</div> </div>
<button type="button" class="btn btn-primary addAnswer">Add Answer</button> <button type="button" class="btn btn-primary addAnswer">Add Answer</button>
</div>
<button type="button" class="btn btn-success saveQuestion" style="display: none;">Save</button>
</div> </div>
} }
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Update</button> <button type="submit" class="btn btn-primary">Update</button>
| <a asp-action="Index" class="btn btn-info">Back to list</a> | <a asp-action="Index" class="btn btn-info">Back to list</a>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
@ -75,6 +97,10 @@
@section Scripts { @section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
<script> <script>
@ -109,7 +135,27 @@
$(document).on('click', '.removeAnswer', function () { $(document).on('click', '.removeAnswer', function () {
$(this).closest('.form-group').remove(); $(this).closest('.form-group').remove();
}); });
// Function to toggle question edit mode
$(document).on('click', '.editQuestion', function () {
var questionContainer = $(this).closest('.question');
questionContainer.find('.question-title').hide();
questionContainer.find('.question-details').show();
questionContainer.find('.editQuestion').hide();
questionContainer.find('.saveQuestion').show();
}); });
// Function to save question details
$(document).on('click', '.saveQuestion', function () {
var questionContainer = $(this).closest('.question');
questionContainer.find('.question-title').show();
questionContainer.find('.question-details').hide();
questionContainer.find('.editQuestion').show();
questionContainer.find('.saveQuestion').hide();
});
});
</script> </script>
@ -141,8 +187,8 @@
}); });
}); });
</script> </script>
*@
} *@
} }

View file

@ -65,7 +65,7 @@
<td class="d-flex justify-content-end"> <td class="d-flex justify-content-end">
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-s"><i class="bi bi-trash"></i> Delete</a> | <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-s"><i class="bi bi-trash"></i> Delete</a> |
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-success btn-s"><i class="bi bi-pencil-square"></i> Edit</a>| <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary"><i class="bi bi-pencil-square"></i> Edit</a>|
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-s"><i class="bi bi-pencil-square"></i> Details</a> <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-s"><i class="bi bi-pencil-square"></i> Details</a>
</td> </td>
</tr> </tr>