From 554afee573e3dc1777c8abc90c8e01da5938ce8d Mon Sep 17 00:00:00 2001 From: Yash Date: Wed, 17 Jul 2024 01:28:18 +0530 Subject: [PATCH] Fixed Save form issue, Made the UI consistent --- public/js/script.js | 363 ++++++++++++++---- resources/views/forms/create.blade.php | 38 +- resources/views/forms/edit.blade.php | 130 +++---- resources/views/forms/show.blade.php | 77 ++-- .../views/responses/viewResponse.blade.php | 160 ++++---- 5 files changed, 482 insertions(+), 286 deletions(-) diff --git a/public/js/script.js b/public/js/script.js index b91e120..27b014c 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -1,3 +1,216 @@ +// document.addEventListener("DOMContentLoaded", function () { +// const questionsSection = document.getElementById("questions_section"); + +// function addOption(button) { +// const optionContainer = button.previousElementSibling; +// const optionDiv = document.createElement("div"); +// optionDiv.className = "option"; +// optionDiv.innerHTML = ` +// +// ✕ +// `; +// optionContainer.appendChild(optionDiv); +// updateAddButtonPosition(); +// } + +// function deleteOption(span) { +// const optionDiv = span.parentElement; +// optionDiv.remove(); +// updateAddButtonPosition(); +// } + +// function changeQuestionType(select) { +// const questionInput = select.nextElementSibling; +// questionInput.style.display = "block"; +// const optionsContainer = select.nextElementSibling.nextElementSibling; +// optionsContainer.innerHTML = +// ''; +// } + +// let questionCount = document.querySelectorAll(".question").length; + +// function addNewQuestion() { +// const newQuestionDiv = document.createElement("div"); +// newQuestionDiv.className = "question"; +// newQuestionDiv.innerHTML = ` +// +// +//
+//
+// +// ✕ +//
+//
+// +// +// `; +// questionsSection.appendChild(newQuestionDiv); +// questionCount++; +// updateAddButtonPosition(); +// } + + // function saveForm() { + // const formTitle = document.getElementById("form-title").value; + // const formDescription = + // document.getElementById("form-description").value; + // const questions = document.querySelectorAll(".question"); + // let formData = []; + + // questions.forEach((question, index) => { + // const questionType = question.querySelector("select").value; + // const questionText = + // question.querySelector(".question-input").value; + // const options = Array.from( + // question.querySelectorAll(".option-input") + // ).map((input) => input.value); + // formData.push({ + // type: questionType, + // text: questionText, // Ensure this matches the key in the PHP validation + // options: options, + // }); + // }); + + // // Get CSRF token + // const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]'); + // let csrfToken = ""; + // if (csrfTokenMeta) { + // csrfToken = csrfTokenMeta.getAttribute("content"); + // } else { + // console.error("CSRF token meta tag not found."); + // // Handle the error condition gracefully or abort further execution + // return; + // } + + // const data = { + // title: formTitle, + // description: formDescription, + // questions: formData, + // }; + + // console.log("Form Data:", data); // Log form data + // console.log("CSRF Token:", csrfToken); // Log CSRF token + + // // Send AJAX request to save the form data + // fetch("/forms", { + // method: "POST", + // headers: { + // "Content-Type": "application/json", + // "X-CSRF-TOKEN": csrfToken, + // }, + // body: JSON.stringify(data), + // }) + // .then((response) => { + // if (!response.ok) { + // throw new Error("Network response was not ok"); + // } + // return response.json(); + // }) + // .then((result) => { + // console.log("Server Response:", result); // Log server response + // if (result.success) { + // alert("Form saved successfully!"); + // window.location.href = "/forms"; // Redirect to forms index page + // } else { + // alert("Failed to save form."); + // } + // }) + // .catch((error) => { + // console.error("Error saving form:", error); + // alert("An error occurred while saving the form."); + // }); + // } + +// window.addNewQuestion = addNewQuestion; +// window.deleteQuestion = deleteQuestion; +// window.addOption = addOption; +// window.changeQuestionType = changeQuestionType; +// window.saveForm = saveForm; + +// window.previewForm = function (formId) { +// const formTitle = document.getElementById("form-title").value; +// const formDescription = +// document.getElementById("form-description").value; +// const questions = document.querySelectorAll(".question"); +// let formData = []; + +// questions.forEach((question, index) => { +// const questionType = question.querySelector("select").value; +// const questionText = +// question.querySelector(".question-input").value; +// const options = Array.from( +// question.querySelectorAll(".option-input") +// ).map((input) => input.value); +// formData.push({ +// type: questionType, +// text: questionText, +// options: options, +// }); +// }); + +// const formParams = new URLSearchParams({ +// title: formTitle, +// description: formDescription, +// data: JSON.stringify(formData), +// }); + +// window.location.href = '/forms/' + formId + '/preview'; +// }; + +// window.addNewQuestion = addNewQuestion; +// window.deleteQuestion = deleteQuestion; +// window.addOption = addOption; +// window.changeQuestionType = changeQuestionType; +// }); + +// function deleteQuestion(element) { +// let questionContainer = element.closest(".question"); +// if (questionContainer) { +// questionContainer.remove(); +// updateAddButtonPosition(); +// } +// } + +// function deleteOption(span) { +// const optionDiv = span.parentElement; +// optionDiv.remove(); +// updateAddButtonPosition(); +// } + +// function updateAddButtonPosition() { +// const questionsSection = document.getElementById("questions_section"); +// const lastQuestion = questionsSection.lastElementChild; + +// // Check if lastQuestion exists before accessing its properties +// if (lastQuestion) { +// const selectQuestionType = lastQuestion.querySelector(".question_type"); + +// // Ensure selectQuestionType is not null before accessing offsetTop +// if (selectQuestionType) { +// const sidebar = document.getElementById("moveableDiv"); +// const offset = selectQuestionType.offsetTop - sidebar.offsetHeight; +// sidebar.style.transform = `translateY(${offset}px)`; +// console.log(`Moving sidebar to: ${offset}px`); +// } else { +// console.warn("No .question_type found in last question."); +// } +// } else { +// const sidebar = document.getElementById("moveableDiv"); +// sidebar.style.transform = `translateY(0px)`; +// console.log(`Moving sidebar to: 0px`); +// } +// } + + + + + document.addEventListener("DOMContentLoaded", function () { const questionsSection = document.getElementById("questions_section"); @@ -6,8 +219,8 @@ document.addEventListener("DOMContentLoaded", function () { const optionDiv = document.createElement("div"); optionDiv.className = "option"; optionDiv.innerHTML = ` - - ✕ + + ✕ `; optionContainer.appendChild(optionDiv); updateAddButtonPosition(); @@ -33,58 +246,85 @@ document.addEventListener("DOMContentLoaded", function () { const newQuestionDiv = document.createElement("div"); newQuestionDiv.className = "question"; newQuestionDiv.innerHTML = ` - - -
-
- - ✕ +
+ + +
+
+ + ✕ +
+
+ +
-
- - `; questionsSection.appendChild(newQuestionDiv); questionCount++; updateAddButtonPosition(); } + function deleteQuestion(element) { + let questionContainer = element.closest(".question"); + if (questionContainer) { + questionContainer.remove(); + updateAddButtonPosition(); + } + } + + function updateAddButtonPosition() { + const questions = questionsSection.querySelectorAll(".question"); + const lastQuestion = questions[questions.length - 1]; + + if (lastQuestion) { + const selectQuestionType = lastQuestion.querySelector(".question_type"); + if (selectQuestionType) { + const sidebar = document.getElementById("moveableDiv"); + const offset = selectQuestionType.offsetTop - sidebar.offsetHeight; + sidebar.style.transform = `translateY(${offset}px)`; + console.log(`Moving sidebar to: ${offset}px`); + } else { + console.warn("No .question_type found in last question."); + } + } else { + const sidebar = document.getElementById("moveableDiv"); + sidebar.style.transform = `translateY(0px)`; + console.log(`Moving sidebar to: 0px`); + } + } + function saveForm() { const formTitle = document.getElementById("form-title").value; - const formDescription = - document.getElementById("form-description").value; + const formDescription = document.getElementById("form-description").value; const questions = document.querySelectorAll(".question"); let formData = []; questions.forEach((question, index) => { const questionType = question.querySelector("select").value; - const questionText = - question.querySelector(".question-input").value; - const options = Array.from( - question.querySelectorAll(".option-input") - ).map((input) => input.value); + const questionText = question.querySelector(".question-input").value; + const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value); formData.push({ type: questionType, - text: questionText, // Ensure this matches the key in the PHP validation + text: questionText, options: options, }); }); - // Get CSRF token const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]'); let csrfToken = ""; if (csrfTokenMeta) { csrfToken = csrfTokenMeta.getAttribute("content"); } else { console.error("CSRF token meta tag not found."); - // Handle the error condition gracefully or abort further execution return; } @@ -94,10 +334,9 @@ document.addEventListener("DOMContentLoaded", function () { questions: formData, }; - console.log("Form Data:", data); // Log form data - console.log("CSRF Token:", csrfToken); // Log CSRF token + console.log("Form Data:", data); + console.log("CSRF Token:", csrfToken); - // Send AJAX request to save the form data fetch("/forms", { method: "POST", headers: { @@ -113,10 +352,10 @@ document.addEventListener("DOMContentLoaded", function () { return response.json(); }) .then((result) => { - console.log("Server Response:", result); // Log server response + console.log("Server Response:", result); if (result.success) { alert("Form saved successfully!"); - window.location.href = "/forms"; // Redirect to forms index page + window.location.href = "/forms"; } else { alert("Failed to save form."); } @@ -135,18 +374,14 @@ document.addEventListener("DOMContentLoaded", function () { window.previewForm = function (formId) { const formTitle = document.getElementById("form-title").value; - const formDescription = - document.getElementById("form-description").value; + const formDescription = document.getElementById("form-description").value; const questions = document.querySelectorAll(".question"); let formData = []; - questions.forEach((question, index) => { + questions.forEach((question) => { const questionType = question.querySelector("select").value; - const questionText = - question.querySelector(".question-input").value; - const options = Array.from( - question.querySelectorAll(".option-input") - ).map((input) => input.value); + const questionText = question.querySelector(".question-input").value; + const options = Array.from(question.querySelectorAll(".option-input")).map((input) => input.value); formData.push({ type: questionType, text: questionText, @@ -163,46 +398,10 @@ document.addEventListener("DOMContentLoaded", function () { window.location.href = '/forms/' + formId + '/preview'; }; - window.addNewQuestion = addNewQuestion; - window.deleteQuestion = deleteQuestion; - window.addOption = addOption; - window.changeQuestionType = changeQuestionType; + // Assuming there's a button with id "add-question-button" + document.getElementById("add-question-button").addEventListener("click", addNewQuestion); + + document.getElementById("questions_section").addEventListener("DOMNodeInserted", updateAddButtonPosition); + document.getElementById("questions_section").addEventListener("DOMNodeRemoved", updateAddButtonPosition); }); -function deleteQuestion(element) { - let questionContainer = element.closest(".question"); - if (questionContainer) { - questionContainer.remove(); - updateAddButtonPosition(); - } -} - -function deleteOption(span) { - const optionDiv = span.parentElement; - optionDiv.remove(); - updateAddButtonPosition(); -} - -function updateAddButtonPosition() { - const questionsSection = document.getElementById("questions_section"); - const lastQuestion = questionsSection.lastElementChild; - - // Check if lastQuestion exists before accessing its properties - if (lastQuestion) { - const selectQuestionType = lastQuestion.querySelector(".question_type"); - - // Ensure selectQuestionType is not null before accessing offsetTop - if (selectQuestionType) { - const sidebar = document.getElementById("moveableDiv"); - const offset = selectQuestionType.offsetTop - sidebar.offsetHeight; - sidebar.style.transform = `translateY(${offset}px)`; - console.log(`Moving sidebar to: ${offset}px`); - } else { - console.warn("No .question_type found in last question."); - } - } else { - const sidebar = document.getElementById("moveableDiv"); - sidebar.style.transform = `translateY(0px)`; - console.log(`Moving sidebar to: 0px`); - } -} diff --git a/resources/views/forms/create.blade.php b/resources/views/forms/create.blade.php index 77f2f4e..e26974a 100644 --- a/resources/views/forms/create.blade.php +++ b/resources/views/forms/create.blade.php @@ -54,51 +54,47 @@
-
-
+
-
+
- - + +
-
- - -
-
- - ✕ + +
+
+ + ✕
- -
-
+
- -
+ +
+
+ + + +
- -

-
-

Edit Form

-
-
+
+ pallette + eye + + + + menu + +
+
+ + +
+ @csrf @method('PUT')
- +
- +
@foreach ($questions as $index => $question) -
-
- -
- - -
-
- - -
-
- - @if(is_array($question->options)) - @foreach ($question->options as $optionIndex => $option) -
- - ✕ +
+
+ +
- @endforeach - @endif - +
+ + +
+
+ + @if(is_array($question->options)) + @foreach ($question->options as $optionIndex => $option) +
+ + ✕ +
+ @endforeach + @endif + +
+
- -
-
@endforeach
- - + +
+ diff --git a/resources/views/responses/viewResponse.blade.php b/resources/views/responses/viewResponse.blade.php index b951d83..5f0949d 100644 --- a/resources/views/responses/viewResponse.blade.php +++ b/resources/views/responses/viewResponse.blade.php @@ -12,77 +12,6 @@ - -
-
- - Google Form Icon - -

{{ $form->title }} - Response Detail

-
-
- -
-
-

Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}

- - @foreach ($responses as $response) - @php - $question = $questions[$response->question_id] ?? null; - $decodedAnswers = json_decode($response->answers, true); - @endphp - - @if ($question) -
-

{{ $question->question_text }}

- @if ($question->type == 'dropdown') - - @elseif (in_array($question->type, ['multiple_choice', 'checkbox'])) -
- @foreach (json_decode($question->options) as $option) - - @endforeach -
- @else -

{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}

- @endif -
- @else -

Question not found for ID: {{ $response->question_id }}

- @endif - @endforeach -
-
- - - - --}} - - - - - - - - - - - - - - Response Detail - - -
@@ -139,4 +68,93 @@ + --}} + + + + + + + + + + + Response Detail - {{ $form->title }} + + + + + + + + + +
+
+
+ + Google Form Icon + +

{{ $form->title }} - Response Detail

+
+
+
+
+
+
+
+ + +
+
+
+
+

Response from {{ $responses->first()->user->name ?? 'Anonymous' }} - {{ $responses->first()->submitted_at }}

+ + @foreach ($responses as $response) + @php + $question = $questions[$response->question_id] ?? null; + $decodedAnswers = json_decode($response->answers, true); + @endphp + + @if ($question) +
+

{{ $question->question_text }}

+ @if ($question->type == 'dropdown') + + @elseif (in_array($question->type, ['multiple_choice', 'checkbox'])) +
+ @foreach (json_decode($question->options) as $option) +
+ + {{ $option }} +
+ @endforeach +
+ @else +

{{ is_array($decodedAnswers) ? implode(', ', $decodedAnswers) : $decodedAnswers }}

+ @endif +
+ @else +

Question not found for ID: {{ $response->question_id }}

+ @endif + @endforeach +
+
+ +
+ + Return to Forms + +
+ + + +