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

Minor UI enhancements

This commit is contained in:
yash 2024-07-24 12:03:52 +05:30
parent 128fac86ac
commit 9f113236c5
2 changed files with 193 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,237 +6,110 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>Edit Form - {{ $form->title }}</title> <title>Edit Form - {{ $form->title }}</title>
<link href="https: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}"> <link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="preconnect" href="https: <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https: <link rel="preconnect" href="https: <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel=" stylesheet" href="https: <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
<link href=" https: rel="stylesheet"> rel="stylesheet">
< style > <style>
.shadow - custom { .shadow-custom {
box - shadow: 0 10 px 15 px - 3 px rgba(0, 0, 0, 0.1), 0 4 px 6 px - 2 px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} < }
/style> < / </style>
head > </head>
< <body class="bg-purple-100">
body class = "bg-purple-100" > <nav class="bg-white p-1 shadow-md">
< <div class="container mx-auto flex justify-between items-center">
nav class = "bg-white p-1 shadow-md" > <span style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans"><a href="{{ url('/') }}"
< style="color: rgb(103,58,183)" class="text-3xl font-bold font-sans">LaraForms</a> - Edit</span>
div class = "container mx-auto flex justify-between items-center" > <div class="relative dropdown">
< <button id="profileMenuButton" class="flex items-center focus:outline-none">
span style = "color: rgb(103,58,183)" <img src="{{ asset('images/user.png') }}" alt="Profile"
class = "text-3xl font-bold font-sans" > < a href = "{{ url('/') }}" class="w-10 h-10 rounded-full border-2 border-white">
style = "color: rgb(103,58,183)" </button>
class = "text-3xl font-bold font-sans" > LaraForms < /a> - Edit</span > <div id="profileMenu"
< class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
div class = "relative dropdown" > <form method="POST" action="{{ route('logout') }}">
< @csrf
button id = "profileMenuButton" <button type="submit"
class = "flex items-center focus:outline-none" > class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">Logout</button>
< </form>
img src = "{{ asset('images/user.png') }}" </div>
alt = "Profile" </div>
class = "w-10 h-10 rounded-full border-2 border-white" > </div>
< </nav>
/button> <
div id = "profileMenu"
class = "dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2" >
<
form method = "POST"
action = "{{ route('logout') }}" >
@csrf <
button type = "submit"
class = "block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left" > Logout < /button> < /
form > <
/div> < /
div > <
/div> < /
nav >
< <div style="max-width: 700px" class="container">
div style = "max-width: 700px" <form id="edit-form" method="POST" action="{{ route('forms.update', $form) }}"
class = "container" > 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 style="border:none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" id="form-title" name="title" class="form-control form-control-lg text-black"
< placeholder="Untitled Form" value="{{ $form->title }}" />
input type = "text" </div>
id = "form-title" <div class="form-group">
name = "title" <input style="border:none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" name="description" id="form-description"
class = "form-control form-control-lg text-black" class="form-control form-control-sm text-black" placeholder="Form Description"
placeholder = "Untitled Form" value="{{ $form->description }}" />
value = "{{ $form->title }}" / > </div>
< <div id="questions-section">
/div> <
div class = "form-group" >
<
input type = "text"
name = "description"
id = "form-description"
class = "form-control form-control-sm text-black"
placeholder = "Form Description"
value = "{{ $form->description }}" / >
<
/div> <
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" <div class="form-group">
data - index = "{{ $index }}" > <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>
div class = "form-group" > <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
< <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
select class = "form-control question-type" <option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>
id = "question-type-{{ $index }}" </select>
name = "questions[{{ $index }}][type]" > </div>
< <div class="form-group">
option value = "multiple_choice" <input type="text" id="question-text-{{ $index }}"
{{ $question->type === 'multiple_choice' ? 'selected' : '' }} > Multiple Choice < /option> < name="questions[{{ $index }}][text]" class="form-control question-input"
option value = "checkbox" value="{{ $question->question_text }}" required>
{{ $question->type === 'checkbox' ? 'selected' : '' }} > Checkbox < /option> < </div>
option value = "dropdown" <div class="form-group form-check">
{{ $question->type === 'dropdown' ? 'selected' : '' }} > Dropdown < /option> < <input type="checkbox" id="question-required-{{ $index }}"
option value = "text" name="questions[{{ $index }}][required]" class="form-check-input"
{{ $question->type === 'text' ? 'selected' : '' }} > Text < /option> < / {{ $question->required ? 'checked' : '' }}>
select > < <label for="question-required-{{ $index }}" class="form-check-label">Required</label>
/div> < </div>
div class = "form-group" > <div class="form-group options-container" style="{{ $question->type === 'text' ? 'display:none;' : '' }}">
< <label>Options</label>
input type = "text"
id = "question-text-{{ $index }}"
name = "questions[{{ $index }}][text]"
class = "form-control question-input"
value = "{{ $question->question_text }}"
required >
<
/div> <
div class = "form-group form-check" >
<
input type = "checkbox"
id = "question-required-{{ $index }}"
name = "questions[{{ $index }}][required]"
class = "form-check-input"
{{ $question->required ? 'checked' : '' }} >
<
label
for = "question-required-{{ $index }}"
class = "form-check-label" > Required < /label> < /
div > <
div class = "form-group options-container"
style = "{{ $question->type === 'text' ? 'display:none;' : '' }}" >
<
label > Options < /label>
@if (is_array($question->options)) @if (is_array($question->options))
@foreach ($question->options as $optionIndex => $option) @foreach ($question->options as $optionIndex => $option)
< <div class="option d-flex align-items-center mb-2">
div class = "option d-flex align-items-center mb-2" > <input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" value="{{ $option }}">
< <span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">&#10005;</span>
input type = "text"
name = "questions[{{ $index }}][options][{{ $optionIndex }}]"
class = "form-control option-input"
value = "{{ $option }}" >
<
span class = "delete-option ml-2 text-danger"
onclick = "deleteOption(this)"
style = "cursor: pointer;" > & #10005;</span>
</div> </div>
@endforeach @endforeach
@endif @endif
<button type= "button" <button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
class = "btn btn-secondary" <button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
onclick = "addOption(this)" > Add Option < /button> < <img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
button class = "btn btn-md" </button>
id = "moveUpButton" </div>
onclick = "deleteQuestion(this);" > </div>
< @endforeach
img src = "{{ asset('images/bin.png') }}" <div class="sidebar">
alt = "" <div id="moveableDiv">
width = "20px" <button class="btn btn-light shadow-sm" type="button" onclick="addNewQuestion();">
height = "20px" / > <img src="{{ asset('images/add.png') }}" alt="ADD" width="20px" height="20px" />
< </button>
/button> < / </div>
div > < </div>
/div> </div>
@endforeach < <button type="submit" class="btn btn-success mb-4">Save</button>
div class = "sidebar" > </form>
< </div>
div id = "moveableDiv" >
<
button class = "btn btn-light shadow-sm"
type = "button"
onclick = "addNewQuestion();" >
<
img src = "{{ asset('images/add.png') }}"
alt = "ADD"
width = "20px"
height = "20px" / >
<
/button> < /
div > <
/div> < /
div > <
button type = "submit"
class = "btn btn-success mb-4" > Save < /button> < /
form > <
/div>
<
script src = "https: <
script src = "https: <
script >
$(document).ready(function() {
$('#edit-form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
var formData = form.serialize();
$.ajax({
type: 'POST',
url: url,
data: formData,
success: function(response) {
Swal.fire({
title: 'Success!',
text: 'Form edited successfully.',
icon: 'success',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
window.location.href =
"{{ route('forms.show', $form) }}";
}
});
},
error: function(xhr, status, error) {
Swal.fire({
title: 'Error!',
text: 'An error occurred while editing the form. Please try again.',
icon: 'error',
confirmButtonText: 'OK'
});
}
});
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function addOption(button) { function addOption(button) {
const optionsContainer = $(button).closest('.options-container'); const optionsContainer = $(button).closest('.options-container');
const optionIndex = optionsContainer.find('.option').length; const optionIndex = optionsContainer.find('.option').length;
@ -309,10 +182,8 @@
$(element).find('.question-input').attr('id', `question-text-${index}`); $(element).find('.question-input').attr('id', `question-text-${index}`);
$(element).find('.form-check-input').attr('name', `questions[${index}][required]`); $(element).find('.form-check-input').attr('name', `questions[${index}][required]`);
$(element).find('.form-check-input').attr('id', `question-required-${index}`); $(element).find('.form-check-input').attr('id', `question-required-${index}`);
$(element).find('.options-container').find('.option-input').each((optionIndex, $(element).find('.options-container').find('.option-input').each((optionIndex, optionElement) => {
optionElement) => { $(optionElement).attr('name', `questions[${index}][options][${optionIndex}]`);
$(optionElement).attr('name',
`questions[${index}][options][${optionIndex}]`);
}); });
}); });
} }
@ -352,12 +223,12 @@
} }
} }
$(document).ready(function() { $(document).ready(function () {
$('#profileMenuButton').click(function() { $('#profileMenuButton').click(function () {
$('#profileMenu').toggleClass('hidden'); $('#profileMenu').toggleClass('hidden');
}); });
$(document).click(function(event) { $(document).click(function (event) {
if (!$(event.target).closest('#profileMenuButton, #profileMenu').length) { if (!$(event.target).closest('#profileMenuButton, #profileMenu').length) {
$('#profileMenu').addClass('hidden'); $('#profileMenu').addClass('hidden');
} }
@ -373,3 +244,11 @@
</body> </body>
</html> </html>

8
resources/views/responses/viewResponse.blade.php
View File

@ -14,7 +14,7 @@
</head> </head>
<body class="font-open-sans"> <body class="font-open-sans">
<header class="bg-white shadow-md py-1"> <header class="bg-white shadow-md py-1">
<div class="container d-flex justify-content-start align-items-center"> <div class="container d-flex justify-content-start align-items-center shadow-md">
<a href="/forms" class="d-flex align-items-center"> <a href="/forms" class="d-flex align-items-center">
<img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" height="40px" width="40px" /> <img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" height="40px" width="40px" />
</a> </a>
@ -24,7 +24,7 @@
<div mt-4"> <div mt-4">
<!-- Responses Section --> <!-- Responses Section -->
<div class="question_form bg-light p-4 rounded shadow-sm" id="responses_section"> <div class="question_form bg-light p-4 rounded shadow-md" id="responses_section">
<div class="section"> <div class="section">
<div class="question_title_section mb-4"> <div class="question_title_section mb-4">
<div class="question_form_top"> <div class="question_form_top">
@ -33,14 +33,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="questions_section"> <div class="section shadow-md" id="questions_section">
@foreach ($responses as $response) @foreach ($responses as $response)
@php @php
$question = $questions[$response->question_id] ?? null; $question = $questions[$response->question_id] ?? null;
$decodedAnswers = json_decode($response->answers, true); $decodedAnswers = json_decode($response->answers, true);
@endphp @endphp
@if ($question) @if ($question)
<div class="question mb-4 p-3 border rounded bg-white"> <div class="question mb-4 p-3 border rounded bg-white shadow-md">
<h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3> <h3 class="text-lg font-medium mb-2">{{ $question->question_text }}</h3>
@if ($question->type == 'dropdown') @if ($question->type == 'dropdown')
<select disabled class="form-control"> <select disabled class="form-control">