Minor UI enhancements
This commit is contained in:
yash
parent
128fac86ac
commit
9f113236c5
|
|
@ -6,237 +6,110 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<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="preconnect" href="https:
|
||||
<link href="https: <link rel="preconnect" href="https:
|
||||
<script src="https:
|
||||
<link rel=" stylesheet" href="https:
|
||||
<link href=" https: rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
.shadow-custom {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
} <
|
||||
/style> < /
|
||||
head >
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<
|
||||
body class = "bg-purple-100" >
|
||||
<
|
||||
nav class = "bg-white p-1 shadow-md" >
|
||||
<
|
||||
div class = "container mx-auto flex justify-between items-center" >
|
||||
<
|
||||
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 = "relative dropdown" >
|
||||
<
|
||||
button id = "profileMenuButton"
|
||||
class = "flex items-center focus:outline-none" >
|
||||
<
|
||||
img src = "{{ asset('images/user.png') }}"
|
||||
alt = "Profile"
|
||||
<body class="bg-purple-100">
|
||||
<nav class="bg-white p-1 shadow-md">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<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="relative dropdown">
|
||||
<button id="profileMenuButton" class="flex items-center focus:outline-none">
|
||||
<img src="{{ asset('images/user.png') }}" alt="Profile"
|
||||
class="w-10 h-10 rounded-full border-2 border-white">
|
||||
<
|
||||
/button> <
|
||||
div id = "profileMenu"
|
||||
</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 >
|
||||
<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" >
|
||||
<
|
||||
form id = "edit-form"
|
||||
method = "POST"
|
||||
action = "{{ route('forms.update', $form) }}"
|
||||
<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">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<
|
||||
div class = "form-group" >
|
||||
<
|
||||
input type = "text"
|
||||
id = "form-title"
|
||||
name = "title"
|
||||
class = "form-control form-control-lg text-black"
|
||||
placeholder = "Untitled Form"
|
||||
value = "{{ $form->title }}" / >
|
||||
<
|
||||
/div> <
|
||||
div class = "form-group" >
|
||||
<
|
||||
input type = "text"
|
||||
name = "description"
|
||||
id = "form-description"
|
||||
class = "form-control form-control-sm text-black"
|
||||
placeholder = "Form Description"
|
||||
<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 }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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-sm text-black" placeholder="Form Description"
|
||||
value="{{ $form->description }}" />
|
||||
<
|
||||
/div> <
|
||||
div id = "questions-section" >
|
||||
</div>
|
||||
<div id="questions-section">
|
||||
@foreach ($questions as $index => $question)
|
||||
<
|
||||
div class = "question mb-4 p-3 border rounded bg-light"
|
||||
data - index = "{{ $index }}" >
|
||||
<
|
||||
div class = "form-group" >
|
||||
<
|
||||
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 = "checkbox"
|
||||
{{ $question->type === 'checkbox' ? 'selected' : '' }} > Checkbox < /option> <
|
||||
option value = "dropdown"
|
||||
{{ $question->type === 'dropdown' ? 'selected' : '' }} > Dropdown < /option> <
|
||||
option value = "text"
|
||||
{{ $question->type === 'text' ? 'selected' : '' }} > Text < /option> < /
|
||||
select > <
|
||||
/div> <
|
||||
div class = "form-group" >
|
||||
<
|
||||
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"
|
||||
<div class="question mb-4 p-3 border rounded bg-light" data-index="{{ $index }}">
|
||||
<div class="form-group">
|
||||
<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="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
|
||||
<option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
|
||||
<option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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>
|
||||
<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))
|
||||
@foreach ($question->options as $optionIndex => $option)
|
||||
<
|
||||
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>
|
||||
<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;">✕</span>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
<button type= "button"
|
||||
class = "btn btn-secondary"
|
||||
onclick = "addOption(this)" > Add Option < /button> <
|
||||
button class = "btn btn-md"
|
||||
id = "moveUpButton"
|
||||
onclick = "deleteQuestion(this);" >
|
||||
<
|
||||
img src = "{{ asset('images/bin.png') }}"
|
||||
alt = ""
|
||||
width = "20px"
|
||||
height = "20px" / >
|
||||
<
|
||||
/button> < /
|
||||
div > <
|
||||
/div>
|
||||
@endforeach <
|
||||
div class = "sidebar" >
|
||||
<
|
||||
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'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
||||
<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
|
||||
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="sidebar">
|
||||
<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://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) {
|
||||
const optionsContainer = $(button).closest('.options-container');
|
||||
const optionIndex = optionsContainer.find('.option').length;
|
||||
|
|
@ -309,10 +182,8 @@
|
|||
$(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('id', `question-required-${index}`);
|
||||
$(element).find('.options-container').find('.option-input').each((optionIndex,
|
||||
optionElement) => {
|
||||
$(optionElement).attr('name',
|
||||
`questions[${index}][options][${optionIndex}]`);
|
||||
$(element).find('.options-container').find('.option-input').each((optionIndex, optionElement) => {
|
||||
$(optionElement).attr('name', `questions[${index}][options][${optionIndex}]`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -373,3 +244,11 @@
|
|||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</head>
|
||||
<body class="font-open-sans">
|
||||
<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">
|
||||
<img src="{{ asset('images/google-form.png') }}" alt="Google Form Icon" height="40px" width="40px" />
|
||||
</a>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<div mt-4">
|
||||
<!-- 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="question_title_section mb-4">
|
||||
<div class="question_form_top">
|
||||
|
|
@ -33,14 +33,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="questions_section">
|
||||
<div class="section shadow-md" id="questions_section">
|
||||
@foreach ($responses as $response)
|
||||
@php
|
||||
$question = $questions[$response->question_id] ?? null;
|
||||
$decodedAnswers = json_decode($response->answers, true);
|
||||
@endphp
|
||||
@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>
|
||||
@if ($question->type == 'dropdown')
|
||||
<select disabled class="form-control">
|
||||
|
|
|
|||
Loading…
Reference in New Issue