YashDeshpande
/
Forms_Laravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed add button sliding bug and resolved issue with bin icon visibility

This commit is contained in:
yash 2024-07-17 12:09:33 +05:30
parent 554afee573
commit d78e27a180
5 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

41
public/js/script.js
View File

@ -227,6 +227,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
function deleteOption(span) { function deleteOption(span) {
console.log("Yash");
const optionDiv = span.parentElement; const optionDiv = span.parentElement;
optionDiv.remove(); optionDiv.remove();
updateAddButtonPosition(); updateAddButtonPosition();
@ -247,7 +248,7 @@ document.addEventListener("DOMContentLoaded", function () {
newQuestionDiv.className = "question"; newQuestionDiv.className = "question";
newQuestionDiv.innerHTML = ` newQuestionDiv.innerHTML = `
<div class="question mb-4 p-3 border rounded bg-white"> <div class="question mb-4 p-3 border rounded bg-white">
<select class="form-control question_type mb-3" onchange="changeQuestionType(this)"> <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
<option value="">Select Question Type</option> <option value="">Select Question Type</option>
<option value="multiple_choice">Multiple Choice</option> <option value="multiple_choice">Multiple Choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
@ -255,16 +256,16 @@ document.addEventListener("DOMContentLoaded", function () {
</select> </select>
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" /> <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
<div class="options-container mb-3"> <div class="options-container mb-3">
<div class="option d-flex align-items-center mb-2"> <div class="option d-flex align-items-center">
<input type="text" name="option" class="form-control option-input" placeholder="Option 1" /> <input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span> <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
</div> </div>
</div> </div>
<button class="btn btn-secondary mb-2" onclick="addOption(this)"> <button class="btn btn-secondary" onclick="addOption(this)">
Add Option Add Option
</button> </button>
<button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);"> <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
<img src="public/images/bin.png" alt="" width="20px" height="20px" /> <img src="/images/bin.png" alt="" width="20px" height="20px" />
</button> </button>
</div> </div>
`; `;
@ -277,28 +278,35 @@ document.addEventListener("DOMContentLoaded", function () {
let questionContainer = element.closest(".question"); let questionContainer = element.closest(".question");
if (questionContainer) { if (questionContainer) {
questionContainer.remove(); questionContainer.remove();
questionCount--;
updateAddButtonPosition(); updateAddButtonPosition();
} }
} }
function updateAddButtonPosition() { function updateAddButtonPosition() {
const questions = questionsSection.querySelectorAll(".question"); 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 sidebar = document.getElementById("moveableDiv");
const offset = selectQuestionType.offsetTop - sidebar.offsetHeight;
sidebar.style.transform = `translateY(${offset}px)`; if (questions.length > 0) {
console.log(`Moving sidebar to: ${offset}px`); const lastQuestion = questions[questions.length - 1];
const offsetTop = lastQuestion.offsetTop;
const sidebarHeight = sidebar.offsetHeight;
const containerHeight = questionsSection.offsetHeight;
// Calculate the position of the last question relative to the top of the container
const newPosition = offsetTop + lastQuestion.offsetHeight;
// Ensure the sidebar stays within the bounds of the container
if (newPosition + sidebarHeight <= containerHeight) {
sidebar.style.transform = `translateY(${newPosition}px)`;
console.log(`Moving sidebar to: ${newPosition}px`);
} else { } else {
console.warn("No .question_type found in last question."); sidebar.style.transform = `translateY(${containerHeight - sidebarHeight}px)`;
console.log(`Moving sidebar to bottom of container`);
} }
} else { } else {
const sidebar = document.getElementById("moveableDiv");
sidebar.style.transform = `translateY(0px)`; sidebar.style.transform = `translateY(0px)`;
console.log(`Moving sidebar to: 0px`); console.log("No questions, moving sidebar to top");
} }
} }
@ -369,6 +377,7 @@ document.addEventListener("DOMContentLoaded", function () {
window.addNewQuestion = addNewQuestion; window.addNewQuestion = addNewQuestion;
window.deleteQuestion = deleteQuestion; window.deleteQuestion = deleteQuestion;
window.addOption = addOption; window.addOption = addOption;
window.deleteOption = deleteOption;
window.changeQuestionType = changeQuestionType; window.changeQuestionType = changeQuestionType;
window.saveForm = saveForm; window.saveForm = saveForm;

14
resources/views/forms/create.blade.php
View File

@ -54,18 +54,18 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="question_form bg-light p-4 rounded shadow-sm"> <div style="background-color: #f0ebf8; max-width: 100%" class="question_form p-4 rounded">
<div class="section"> <div class="section">
<div class="question_title_section mb-4"> <div class="question_title_section mb-1">
<div class="question_form_top"> <div class="question_form_top">
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" /> <input type="text" id="form-title" name="title" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
<input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" /> <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="questions_section"> <div class="section" id="questions_section">
<div class="question mb-4 p-3 border rounded bg-white"> <div class="question mb-4 p-3 border rounded bg-white">
<select class="form-control question_type mb-3" onchange="changeQuestionType(this)"> <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
<option value="">Select Question Type</option> <option value="">Select Question Type</option>
<option value="multiple_choice">Multiple Choice</option> <option value="multiple_choice">Multiple Choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
@ -73,15 +73,15 @@
</select> </select>
<input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" /> <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
<div class="options-container mb-3"> <div class="options-container mb-3">
<div class="option d-flex align-items-center mb-2"> <div class="option d-flex align-items-center">
<input type="text" name="option" class="form-control option-input" placeholder="Option 1" /> <input type="text" name="option" class="form-control option-input" placeholder="Option 1" />
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span> <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
</div> </div>
</div> </div>
<button class="btn btn-secondary mb-2" onclick="addOption(this)"> <button class="btn btn-secondary" onclick="addOption(this)">
Add Option Add Option
</button> </button>
<button class="btn btn-outline-danger btn-sm" id="moveUpButton" onclick="deleteQuestion(this);"> <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" /> <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
</button> </button>
</div> </div>

46
resources/views/forms/edit.blade.php
View File

@ -21,43 +21,43 @@
</head> </head>
<body class="bg-light"> <body class="bg-light">
<div class="form_header shadow-md px-6 py-4 flex justify-between items-center" style="padding: 20px;"> <nav class="bg-white p-1 shadow-md">
<div class="form_header_left"> <div class="container mx-auto flex justify-between items-center">
<img src={{ asset('images/google-form.png') }} class="form_header_icon" height="45px" width="40px" /> <span style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans"><a href="{{ url('/') }}" style="color: rgb(103,58,183)"
<input type="text" name="title" id="form-title-nav" placeholder="Untitled Form" class="form_name" /> class="text-3xl font-bold font-sans">LaraForms</a> - Edit</span>
<img src={{ asset('images/folder.png') }} alt="" class="form_header_icon" height="20px" <div class="relative dropdown">
width="20px" /> <button id="profileMenuButton" class="flex items-center focus:outline-none">
<img src={{ asset('images/star.svg') }} alt="" class="form_header_icon" /> <img src="{{ asset('images/user.png') }}" alt="Profile"
</div> class="w-10 h-10 rounded-full border-2 border-white">
<div class="form_header_right"> </button>
<span><img src={{ asset('images/palette-svgrepo-com.svg') }} alt="pallette" height="20px" <div id="profileMenu"
width="20px" /></span> class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
<span><img src={{ asset('images/view.png') }} alt="eye" height="20px" width="20px" <form method="POST" action="{{ route('logout') }}">
onclick="previewForm()" /></span> @csrf
<span><img src={{ asset('images/undo.png') }} alt="" height="20px" width="20px" /></span> <button type="submit" class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">
<span><img src={{ asset('images/forward.png') }} alt="" height="20px" width="20px" /></span> Logout
<button class="btn">Send</button> </button>
<span><img src={{ asset('images/menu.png') }} alt="menu" height="30px" width="30px" /></span> </form>
<span><img src={{ asset('images/user.png') }} alt="" height="30px" width="30px" /></span>
</div> </div>
</div> </div>
</div>
</nav>
<div style="max-width: 700px" class="container"> <div style="max-width: 700px" class="container">
<form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}" class="bg-white p-4 rounded shadow-sm"> <form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}" class="bg-white p-4 rounded shadow-sm">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="form-group"> <div class="form-group">
<input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" placeholder="Untitled Form" value="{{ $form->title }}" /> <input type="text" id="form-title" name="title" class="form-control form-control-lg text-black" placeholder="Untitled Form" value="{{ $form->title }}" />
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" value="{{ $form->description }}" /> <input type="text" name="description" id="form-description" class="form-control form-control-sm text-black" placeholder="Form Description" value="{{ $form->description }}" />
</div> </div>
<div id="questions-section"> <div id="questions-section">
@foreach ($questions as $index => $question) @foreach ($questions as $index => $question)
<div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}"> <div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
<div class="form-group"> <div class="form-group">
<label for="question-type-{{ $index }}">Question Type</label> {{-- <label for="question-type-{{ $index }}">Question Type</label> --}}
<select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]"> <select class="form-control question-type" id="question-type-{{ $index }}" name="questions[{{ $index }}][type]">
<option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option> <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
<option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option> <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
@ -65,7 +65,7 @@
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="question-text-{{ $index }}">Question Text</label> {{-- <label for="question-text-{{ $index }}">Question Text</label> --}}
<input type="text" id="question-text-{{ $index }}" name="questions[{{ $index }}][text]" class="form-control question-input" value="{{ $question->question_text }}" required> <input type="text" id="question-text-{{ $index }}" name="questions[{{ $index }}][text]" class="form-control question-input" value="{{ $question->question_text }}" required>
</div> </div>
<div class="form-group options-container"> <div class="form-group options-container">

10
resources/views/responses/viewResponses.blade.php
View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="{{ asset('css/index.css') }}"> <link rel="stylesheet" href="{{ asset('css/index.css') }}">
</head> </head>
<body style="background-color: #f0ebf8" class="font-roboto text-gray-800"> <body style="background-color: rgb(253, 251, 251)" class="font-roboto text-gray-800">
<!-- Header --> <!-- Header -->
<div class="bg-white shadow-md px-6 py-4 flex justify-between items-center"> <div class="bg-white shadow-md px-6 py-4 flex justify-between items-center">
@ -55,16 +55,16 @@
@else @else
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden"> <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
<thead class="bg-gray-200 text-gray-600 text-sm leading-normal"> <thead class="bg-gray-200 text-black text-sm leading-normal">
<tr> <tr>
<th class="py-3 px-6 text-left">User</th> <th class="py-3 px-6 text-left">User</th>
<th class="py-3 px-6 text-left">Submitted At</th> <th class="py-3 px-6 text-left">Submitted At</th>
<th class="py-3 px-6 text-left">Actions</th> <th class="py-3 px-6 text-left">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-600 text-sm font-light"> <tbody class="text-black text-sm font-light">
@foreach ($responses as $responseGroup) @foreach ($responses as $responseGroup)
<tr class="border-b border-gray-200 hover:bg-gray-100"> <tr class="border-b border-gray-200 text-gray-700 hover:bg-gray-100">
<td class="py-3 px-6 text-left"> <td class="py-3 px-6 text-left">
{{ $responseGroup->first()->user->name ?? 'Anonymous' }} {{ $responseGroup->first()->user->name ?? 'Anonymous' }}
</td> </td>
@ -74,7 +74,7 @@
<td class="py-3 px-6 text-left"> <td class="py-3 px-6 text-left">
<a href="{{ route('responses.viewResponse', ['form' => $form, 'responseId' => $responseGroup->first()->response_id]) }}" <a href="{{ route('responses.viewResponse', ['form' => $form, 'responseId' => $responseGroup->first()->response_id]) }}"
target="_blank" target="_blank"
class="text-blue-600 hover:text-blue-700 focus:outline-none">View Response</a> class="text-blue-600 hover:text-blue-700 hover:underline focus:outline-none">View Response</a>
</td> </td>
</tr> </tr>
@endforeach @endforeach