Skip to content

Commit

Permalink
Merge pull request #1549 from suraj-webkul/webform
Browse files Browse the repository at this point in the history 
webform
  • Loading branch information
@devansh-webkul
devansh-webkul committed Aug 30, 2024
2 parents 47645df + a372317 commit 03fa4bf
Show file tree
Hide file tree
Showing 24 changed files with 244 additions and 91 deletions.
Empty file removed packages/Webkul/WebForm/src/Resources/assets/js/app.js
View file
Empty file.
1 change: 0 additions & 1 deletion packages/Webkul/WebForm/src/Resources/views/components/layouts/index.blade.php
View file
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
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
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
File renamed without changes.
0 ...urces/assets/fonts/Roboto-BlackItalic.ttf → ...ld/assets/Roboto-BlackItalic-c2d13e2d.ttf
View file
File renamed without changes.
0 ...rc/Resources/assets/fonts/Roboto-Bold.ttf → ...orm/build/assets/Roboto-Bold-baf44ce8.ttf
View file
File renamed without changes.
0 ...ources/assets/fonts/Roboto-BoldItalic.ttf → ...ild/assets/Roboto-BoldItalic-467a9ef7.ttf
View file
File renamed without changes.
0 .../Resources/assets/fonts/Roboto-Italic.ttf → ...m/build/assets/Roboto-Italic-8aaf23ac.ttf
View file
File renamed without changes.
0 ...c/Resources/assets/fonts/Roboto-Light.ttf → ...rm/build/assets/Roboto-Light-2835b358.ttf
View file
File renamed without changes.
0 ...urces/assets/fonts/Roboto-LightItalic.ttf → ...ld/assets/Roboto-LightItalic-3ec128e7.ttf
View file
File renamed without changes.
0 .../Resources/assets/fonts/Roboto-Medium.ttf → ...m/build/assets/Roboto-Medium-4ac8e036.ttf
View file
File renamed without changes.
0 ...rces/assets/fonts/Roboto-MediumItalic.ttf → ...d/assets/Roboto-MediumItalic-8524736b.ttf
View file
File renamed without changes.
0 ...Resources/assets/fonts/Roboto-Regular.ttf → .../build/assets/Roboto-Regular-319cff6e.ttf
View file
File renamed without changes.
0 ...rc/Resources/assets/fonts/Roboto-Thin.ttf → ...orm/build/assets/Roboto-Thin-bf9760a4.ttf
View file
File renamed without changes.
0 ...ources/assets/fonts/Roboto-ThinItalic.ttf → ...ild/assets/Roboto-ThinItalic-cacbe64b.ttf
View file
File renamed without changes.
Loading

0 comments on commit 03fa4bf

Please sign in to comment.