From a50d5eb24141398ac4adc2e8dfd8076ab0744e23 Mon Sep 17 00:00:00 2001
From: Qais Yousuf <mr.qais.yousuf@gmail.com>
Date: Fri, 22 Mar 2024 10:32:56 +0100
Subject: [PATCH] Edit question and Save question functionality added to the
 edit questionnaire

---
 .../Admin/Views/Questionnaire/Edit.cshtml     | 233 +++++++++++++++---
 1 file changed, 202 insertions(+), 31 deletions(-)

diff --git a/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml b/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
index a2c16f8..0911f84 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
@@ -3,6 +3,7 @@
 @{
     ViewData["Title"] = "Edit";
 }
+
 <style>
     .question-separator {
         display: flex;
@@ -22,7 +23,6 @@
         margin: 0;
     }
 
-
 </style>
 <div class="container mt-4">
     <div class="card justify-content-center p-4 shadow rounded">
@@ -44,14 +44,30 @@
                     </div>
                     <div class="card shadow rounded p-4">
                         <div id="questionsContainer">
+                          
+
                             @for (int i = 0; i < Model.Questions.Count; i++)
                             {
-                                <hr />
+                                 
                                 <div class="question">
+                                    <div class="question-separator">
+                                        <!-- Container for the first half of the line -->
+                                        <div class="line-container">
+                                            <hr class="border border-primary border-4 opacity-75 line-start">
+                                        </div>
+                                        <!-- Container for the next question text -->
+                                        <div class="next-question-container">
+                                            <p class="next-question">Next Question</p>
+                                        </div>
+                                        <!-- Container for the second half of the line -->
+                                        <div class="line-container">
+                                            <hr class="border border-primary border-4 opacity-75 line-end">
+                                        </div>
+                                    </div>
                                     <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>
+                                        <button type="button" class="btn btn-primary m-4 btn-sm editQuestion"><i class="bi bi-pencil-square"></i> Edit question</button>
                                     </div>
                                     <div class="question-details" style="display: none;">
                                         <div class="form-group">
@@ -78,16 +94,18 @@
                                                 </div>
                                             }
                                         </div>
-                                        <button type="button" class="btn btn-primary addAnswer">Add Answer</button>
+                                        <button type="button" class="btn btn-primary btn-sm addAnswer">Add new Answer</button>
                                     </div>
-                                    <button type="button" class="btn btn-success saveQuestion" style="display: none;">Save</button>
+                                    <button type="button" class="btn btn-success btn-sm m-5 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
                                 </div>
                             }
                         </div>
                     </div>
-
-                    <button type="submit" class="btn btn-primary">Update</button>
-                    | <a asp-action="Index" class="btn btn-info">Back to list</a>
+                    <div class="m-4">
+                        <button type="submit" class="btn btn-primary">Update questionnaire</button>
+                        | <a asp-action="Index" class="btn btn-info">Back to list</a>
+                    </div>
+                   
                 </form>
             </div>
         </div>
@@ -97,6 +115,80 @@
 
 
 
+@* <div class="container mt-4">
+    <div class="card justify-content-center p-4 shadow rounded">
+        <div class="card-body">
+            <h5 class="card-title">Edit Survey</h5>
+
+            <div class="row">
+                <form asp-action="Edit">
+                    <input type="hidden" asp-for="Id" />
+                    <div class="form-group">
+                        <label asp-for="Title" class="control-label"></label>
+                        <input asp-for="Title" class="form-control" />
+                        <span asp-validation-for="Title" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="Description" class="control-label"></label>
+                        <textarea asp-for="Description" class="form-control"></textarea>
+                        <span asp-validation-for="Description" class="text-danger"></span>
+                    </div>
+                    <div class="card shadow rounded p-4 m-4">
+                        <div id="questionsContainer" class="m-4">
+                            @for (int i = 0; i < Model.Questions.Count; i++)
+                            {
+                                <div class="question">
+                                    <input type="hidden" asp-for="Questions[i].Id" />
+                                    <div class="form-group">
+                                        <label asp-for="Questions[i].Text" class="control-label"></label>
+                                        <input asp-for="Questions[i].Text" class="form-control" />
+                                        <span asp-validation-for="Questions[i].Text" class="text-danger"></span>
+                                    </div>
+                                    <div class="form-group">
+                                        <label asp-for="Questions[i].Type" class="control-label"></label>
+                                        <select asp-for="Questions[i].Type" asp-items="@ViewBag.QuestionTypes" class="form-control"></select>
+                                        <span asp-validation-for="Questions[i].Type" class="text-danger"></span>
+                                    </div>
+                                    <div class="answers m-4">
+                                        @for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
+                                        {
+                                            <div class="answer">
+                                                <input type="hidden" asp-for="Questions[i].Answers[j].Id" />
+                                                <div class="form-group">
+                                                    <label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
+                                                    <input asp-for="Questions[i].Answers[j].Text" class="form-control" />
+                                                    <span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
+                                                    <button type="button" class="btn btn-danger mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
+                                                </div>
+
+                                            </div>
+                                        }
+                                    </div>
+                                    <button type="button" class="btn btn-primary btn-sm addAnswer"><i class="bi bi-floppy"></i> Add new Answer</button>
+
+                                </div>
+                                
+                               
+                            }
+
+                        </div>
+                    </div>
+
+
+
+                    <button type="submit" class="btn btn-primary">Update</button>
+                    | <a asp-action="Index" class="btn btn-info">Back to list</a>
+                </form>
+
+            </div>
+        </div>
+    </div>
+</div> *@
+
+
+
+
+
 
 
 
@@ -110,7 +202,8 @@
         <partial name="_ValidationScriptsPartial" />
     }
 
-    <script>
+    
+        <script>
         $(document).ready(function () {
             // Function to add a new answer
             $(document).on('click', '.addAnswer', function () {
@@ -121,11 +214,11 @@
                 var newAnswerIndex = questionContainer.find('.answers .form-group').length;
 
                 var answerHtml = `
-                        <div class="form-group">
-                            <label class="control-label">Answer</label>
-                            <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
-                            <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
-                        </div>`;
+                    <div class="form-group">
+                        <label class="control-label">Answer</label>
+                        <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
+                        <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
+                    </div>`;
 
                 // Append the new answer to the specific question
                 questionContainer.find('.answers').append(answerHtml);
@@ -143,52 +236,130 @@
                 questionContainer.find('.question-details').show();
                 questionContainer.find('.editQuestion').hide();
                 questionContainer.find('.saveQuestion').show();
+
+                // Add a line below the editQuestion button
+                // var lineHtml = '<hr class="border border-primary border-4 opacity-75 mt-3 mb-3">';
+                // questionContainer.find('.editQuestion').before(lineHtml);
             });
 
             // Function to save question details
             $(document).on('click', '.saveQuestion', function () {
                 var questionContainer = $(this).closest('.question');
-                questionContainer.find('.question-title').show();
+                var titleTextElement = questionContainer.find('.question-title');
+
+                // Apply styles for success (green text color)
+                titleTextElement.css('color', '#28a745'); // Set the success text color
+
+                // Add checkmark icon before the text
+                titleTextElement.prepend('<span class="check-icon">&#x2714; </span>');
+
+                // Show the original question title
+                titleTextElement.show();
+
+                // Hide the question details
                 questionContainer.find('.question-details').hide();
+
+                // Show the edit button and hide the save button
                 questionContainer.find('.editQuestion').show();
                 questionContainer.find('.saveQuestion').hide();
             });
+
         });
 
+        // $(document).ready(function () {
+        //     // Function to add a new answer
+        //     $(document).on('click', '.addAnswer', function () {
+        //         var questionContainer = $(this).closest('.question');
+        //         var newQuestionIndex = questionContainer.index();
+
+        //         // Correctly find the length of answers for the specific question
+        //         var newAnswerIndex = questionContainer.find('.answers .form-group').length;
+
+        //         var answerHtml = `
+        //                 <div class="form-group">
+        //                     <label class="control-label">Answer</label>
+        //                     <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
+        //                     <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
+        //                 </div>`;
+
+        //         // Append the new answer to the specific question
+        //         questionContainer.find('.answers').append(answerHtml);
+        //     });
+
+        //     // Function to remove an answer (including dynamically added answers)
+        //     $(document).on('click', '.removeAnswer', function () {
+        //         $(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');
+        //         var titleTextElement = questionContainer.find('.question-title');
+
+        //         // Apply styles for success (green text color)
+        //         titleTextElement.css('color', '#28a745'); // Set the success text color
+
+        //         // Add checkmark icon before the text
+        //         titleTextElement.prepend('<span class="check-icon">&#x2714; </span>');
+
+        //         // Show the original question title
+        //         titleTextElement.show();
+
+        //         // Hide the question details
+        //         questionContainer.find('.question-details').hide();
+
+        //         // Show the edit button and hide the save button
+        //         questionContainer.find('.editQuestion').show();
+        //         questionContainer.find('.saveQuestion').hide();
+        //     });
+
+        // });
 
     </script>
 
+   
 
-
-
-    @* this script is working for adding mutiple answers for a question *@
-
-
-       @* <script>
+   @*  <script>
         $(document).ready(function () {
             // Function to add a new answer
             $(document).on('click', '.addAnswer', function () {
                 var questionContainer = $(this).closest('.question');
                 var newQuestionIndex = questionContainer.index();
-                var newAnswerIndex = questionContainer.find('.answers .form-group').length; // Correct way to find the length
+
+                // Correctly find the length of answers for the specific question
+                var newAnswerIndex = questionContainer.find('.answers .form-group').length;
 
                 var answerHtml = `
-                    <div class="form-group">
-                        <label class="control-label">Answer Text</label>
-                        <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
-                    </div>`;
+                           <div class="form-group">
+                               <label class="control-label">Answer</label>
+                               <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
+                                       <button type="button" class="btn btn-danger mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
+                           </div>`;
 
-                $(this).siblings('.answers').append(answerHtml);
+                // Append the new answer to the specific question
+                questionContainer.find('.answers').append(answerHtml);
             });
 
-            // Function to remove an answer
+            // Function to remove an answer (including dynamically added answers)
             $(document).on('click', '.removeAnswer', function () {
                 $(this).closest('.form-group').remove();
             });
+
+
+
         });
-    </script>
-    
-} *@
+    </script> *@
+
 }
 
 
+