Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webform #1549

Merged
merged 6 commits into from
Aug 30, 2024
Merged

webform #1549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
61af02a
webform
suraj-webkul Aug 30, 2024
8af5556
Fix webform.
suraj-webkul Aug 30, 2024
acc633b
fix pint failed test cases.
suraj-webkul Aug 30, 2024
40cf2e3
revert some changes.
suraj-webkul Aug 30, 2024
29defd0
revert some changes
suraj-webkul Aug 30, 2024
a372317
fix failed teset cases.
suraj-webkul Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file removed packages/Webkul/WebForm/src/Resources/assets/js/app.js
View file
Open in desktop
Empty file.
1 change: 0 additions & 1 deletion packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ class="{{ request()->cookie('dark_mode') ? 'dark' : '' }}"
name="base-url"
content="{{ url()->to('/') }}"
>
<meta

@stack('meta')

Expand Down
140 changes: 57 additions & 83 deletions packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,106 +11,80 @@

var formHTML = `{!! view('web_form::settings.web-forms.form-js.form', compact('webForm'))->render() !!}`;

content.innerHTML = '<div id="krayin-content-container-' + webFormId + '" class="krayin-content-container krayin_' + webFormId + '">' + formHTML + '</div>';
content.innerHTML = '<div id="krayin-content-container-' + webFormId + '" class="krayin-content-container krayin_'+webFormId+'">' + formHTML + '</div>';

var script = document.createElement('script');

script.src = '{{ asset('vendor/webkul/web-form/assets/js/web-form.js') }}';

script.onload = function() {
flatpickr(".form-group.date input", {
allowInput: true,
altFormat: "Y-m-d",
dateFormat: "Y-m-d",
weekNumbers: true,
});

flatpickr(".form-group.datetime input", {
allowInput: true,
altFormat: "Y-m-d H:i:S",
dateFormat: "Y-m-d H:i:S",
enableTime: true,
time_24hr: true,
weekNumbers: true,
});

var data = null;

$('.button-group button').on('click', function() {
data = $("#krayinWebForm").serializeArray();

$("#krayinWebForm").validate({
submitHandler: function(form) {

document.querySelector('#loaderDiv').classList.add('loaderDiv');

document.querySelector('#imgSpinner').classList.add('imgSpinner');

$.ajax({
url: "{{ route('admin.settings.web_forms.form_store', $webForm->id) }}",
type: 'post',
data: data,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
dataType: 'json',
success: function (data) {

document.querySelector('#loaderDiv').classList.remove('loaderDiv');

document.querySelector('#imgSpinner').classList.remove('imgSpinner');
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('krayinWebForm').addEventListener('submit', function(event) {
event.preventDefault();

var validator = $("#krayinWebForm").validate();
const form = document.getElementById("krayinWebForm");

if (data.message) {
$('.alert-wrapper .alert p').text(data.message);
const formData = new FormData(document.querySelector('#krayinWebForm'));
const data = new URLSearchParams(formData).toString();

fetch("{{ route('admin.settings.web_forms.form_store', $webForm->id) }}", {
method: 'POST',
body: data,
headers: {
'Accept': 'application/json, text/javascript, */*; q=0.01',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'X-CSRF-TOKEN': "{{ csrf_token() }}",
}
})
.then(response => response.json())
.then(response => {
document.querySelectorAll('.error-message').forEach(function(errorElement) {
errorElement.textContent = '';
});

$('.alert-wrapper').show();
} else {
window.location.href = data.redirect;
}
if (response.message) {
let messageElement = document.querySelector('#message');

$("#krayinWebForm").trigger("reset");
},
messageElement.style.display = 'block';

error: function (data) {
messageElement.textContent = response.message;

document.querySelector('#loaderDiv').classList.remove('loaderDiv');
setTimeout(function() {
messageElement.style.display = 'none';
}, 5000);

document.querySelector('#imgSpinner').classList.remove('imgSpinner');

var validator = $("#krayinWebForm").validate();
document.querySelector('#krayinWebForm').reset();
}

for (var key in data.responseJSON.errors) {
var inputNames = [];

key.split('.').forEach(function(chunk, index) {
if(index) {
inputNames.push('[' + chunk + ']')
} else {
inputNames.push(chunk)
}
})

var inputName = inputNames.join('');
if (response.errors) {
showError(response.errors);
}
})
.catch(error => {});
});
});

function showError(errors) {
for (var key in errors) {
var inputNames = [];

key.split('.').forEach(function(chunk, index) {
if(index) {
inputNames.push('[' + chunk + ']')
} else {
inputNames.push(chunk)
}
})

var error = {};

error[inputName] = data.responseJSON.errors[key][0];
var inputName = inputNames.join('');

validator.showErrors(error);
}
}
});
}
});
});
const input = document.querySelector(`[name="${inputName}"]`);

$('.alert-wrapper .icon').on('click', function() {
$('.alert-wrapper').hide();
if (input) {
const inputError = document.querySelector(`[id="${inputName}-error"]`);

});
inputError.textContent = errors[key][0];
}
}
};

content.appendChild(script);
})()
63 changes: 60 additions & 3 deletions packages/Webkul/WebForm/src/Resources/views/settings/web-forms/form-js/form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class="flex h-[100vh] items-center justify-center"
<!-- Logo -->
<img
class="h-10 w-[110px]"
src="{{ url('vendor/webkul/admin/assets/images/logo.svg') }}""
src="{{ vite()->asset('images/logo.svg') }}"
alt="krayin"
/>

Expand All @@ -20,10 +20,17 @@ class="h-10 w-[110px]"
<p>{{ $webForm->description }}</p>

<div class="box-shadow flex min-w-[476px] flex-col rounded-lg">
<!-- Message -->
<div
id="message"
class="mb-4 hidden rounded-lg bg-green-50 p-4 text-sm text-green-800 dark:bg-gray-800 dark:text-green-400"
role="alert"
></div>

<!-- Login Form -->
<form
style="background-color: {{ $webForm->form_background_color }}"
action="{{ route('admin.session.store') }}"
id="krayinWebForm"
>
<div class="p-4 dark:border-gray-800">
@foreach ($webForm->attributes as $attribute)
Expand Down Expand Up @@ -53,6 +60,11 @@ class="mb-1.5 flex items-center gap-1 text-sm font-normal text-gray-800 dark:tex
class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
/>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('date')
Expand All @@ -65,6 +77,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
/>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('textarea')
Expand All @@ -75,6 +92,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
></textarea>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('email')
Expand All @@ -94,6 +116,11 @@ class="control"
value="work"
/>

<p
id="{{ $fieldName }}[0][value]-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('phone')
Expand All @@ -113,6 +140,11 @@ class="control"
value="work"
/>

<p
id="{{ $fieldName }}[0][value]-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('select')
Expand All @@ -139,6 +171,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex

</select>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('multiselect')
Expand All @@ -163,6 +200,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex

</select>

<p
id="{{ $fieldName }}[]-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('checkbox')
Expand All @@ -186,6 +228,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
</span>
@endforeach
</div>

<p
id="{{ $fieldName }}[]-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

Expand All @@ -198,6 +245,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
/>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('boolean')
Expand All @@ -210,6 +262,11 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
<option value="0">No</option>
</select>

<p
id="{{ $fieldName }}-error"
class="error-message mt-1 text-xs italic text-red-600"
></p>

@break;

@case('address')
Expand All @@ -225,7 +282,7 @@ class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal tex
<button
type="submit"
style="background-color: {{ $webForm->form_submit_button_color }} !important"
class="flex justify-center w-full bg-brandColor border border-brandColor cursor-pointer focus:opacity-[0.9] font-semibold gap-x-1 hover:opacity-[0.9] items-center place-content-center px-3 py-1.5 rounded-md text-gray-50 transition-all"
class="flex w-full cursor-pointer place-content-center items-center justify-center gap-x-1 rounded-md border border-brandColor bg-brandColor px-3 py-1.5 font-semibold text-gray-50 transition-all hover:opacity-[0.9] focus:opacity-[0.9]"
>
{{ $webForm->submit_button_label }}
</button>
Expand Down
0 ...c/Resources/assets/fonts/Roboto-Black.ttf → ...rm/build/assets/Roboto-Black-2e337683.ttf
View file
Open in desktop
File renamed without changes.
0 ...urces/assets/fonts/Roboto-BlackItalic.ttf → ...ld/assets/Roboto-BlackItalic-c2d13e2d.ttf
View file
Open in desktop
File renamed without changes.
0 ...rc/Resources/assets/fonts/Roboto-Bold.ttf → ...orm/build/assets/Roboto-Bold-baf44ce8.ttf
View file
Open in desktop
File renamed without changes.
0 ...ources/assets/fonts/Roboto-BoldItalic.ttf → ...ild/assets/Roboto-BoldItalic-467a9ef7.ttf
View file
Open in desktop
File renamed without changes.
0 .../Resources/assets/fonts/Roboto-Italic.ttf → ...m/build/assets/Roboto-Italic-8aaf23ac.ttf
View file
Open in desktop
File renamed without changes.
0 ...c/Resources/assets/fonts/Roboto-Light.ttf → ...rm/build/assets/Roboto-Light-2835b358.ttf
View file
Open in desktop
File renamed without changes.
0 ...urces/assets/fonts/Roboto-LightItalic.ttf → ...ld/assets/Roboto-LightItalic-3ec128e7.ttf
View file
Open in desktop
File renamed without changes.
0 .../Resources/assets/fonts/Roboto-Medium.ttf → ...m/build/assets/Roboto-Medium-4ac8e036.ttf
View file
Open in desktop
File renamed without changes.
0 ...rces/assets/fonts/Roboto-MediumItalic.ttf → ...d/assets/Roboto-MediumItalic-8524736b.ttf
View file
Open in desktop
File renamed without changes.
0 ...Resources/assets/fonts/Roboto-Regular.ttf → .../build/assets/Roboto-Regular-319cff6e.ttf
View file
Open in desktop
File renamed without changes.
0 ...rc/Resources/assets/fonts/Roboto-Thin.ttf → ...orm/build/assets/Roboto-Thin-bf9760a4.ttf
View file
Open in desktop
File renamed without changes.
0 ...ources/assets/fonts/Roboto-ThinItalic.ttf → ...ild/assets/Roboto-ThinItalic-cacbe64b.ttf
View file
Open in desktop
File renamed without changes.
Loading
Loading