refactor educational components and API routes; update form handling in various actions and Vue components, enhance user interface for form display, and improve data retrieval logic in CreateAdmissionPlan job

This commit is contained in:
F4ilji
2025-07-27 12:52:04 +05:00
parent 9a1fcbbf9d
commit a4bdde6382
20 changed files with 961 additions and 72 deletions
@@ -4,7 +4,6 @@ namespace App\Containers\AdditionalEducation\Actions;
use App\Containers\AdditionalEducation\Data\Resources\AdditionalEducationResource; use App\Containers\AdditionalEducation\Data\Resources\AdditionalEducationResource;
use App\Containers\AdditionalEducation\Tasks\FindAdditionalEducationBySlugTask; use App\Containers\AdditionalEducation\Tasks\FindAdditionalEducationBySlugTask;
use App\Ship\Actions\Action;
use App\Ship\Contracts\SeoServiceInterface; use App\Ship\Contracts\SeoServiceInterface;
use Illuminate\Http\Request; use Illuminate\Http\Request;
@@ -22,8 +21,8 @@ class GetAdditionalEducationBySlugAction
$settingsPage = $request->attributes->get('settings_page') ?? []; $settingsPage = $request->attributes->get('settings_page') ?? [];
if (array_key_exists('custom_form', $settingsPage)) { if (array_key_exists('form', $settingsPage)) {
$form = $settingsPage['custom_form']; $form = $settingsPage['form'];
} else { } else {
$form = null; $form = null;
} }
@@ -23,8 +23,16 @@ class GetEducationalProgramAction
$formsEdu = $this->getEducationalFormsTask->run(); $formsEdu = $this->getEducationalFormsTask->run();
$seo = $this->getSeoForModelTask->run($this->seoPageProvider, $programModel); $seo = $this->getSeoForModelTask->run($this->seoPageProvider, $programModel);
$settingsPage = request()->attributes->get('settings_page') ?? [];
if (array_key_exists('form', $settingsPage)) {
$form = $settingsPage['form'];
} else {
$form = null;
}
$program = new EducationalProgramResource($programModel); $program = new EducationalProgramResource($programModel);
return compact('program', 'formsEdu', 'seo'); return compact('program', 'formsEdu', 'seo', 'form');
} }
} }
@@ -0,0 +1,137 @@
<?php
namespace App\Containers\Education\Jobs;
use App\Containers\Education\Models\AdmissionCampaign;
use App\Containers\Education\Models\AdmissionPlan;
use App\Containers\Education\Models\EducationalProgram;
use App\Services\Vicon\DirectionStudy\AdmissionPlanService;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Log;
class CreateAdmissionPlan implements ShouldQueue
{
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
/**
* Create a new job instance.
*/
private AdmissionPlanService $admissionPlanService;
public function __construct()
{
$this->admissionPlanService = app(AdmissionPlanService::class);
}
/**
* Execute the job.
*/
public function handle(): void
{
AdmissionPlan::truncate();
try {
$items = $this->admissionPlanService->getCampaigns();
if (empty($items)) {
Log::warning('Empty campaigns list received');
return; // или обработка пустого случая
}
$campaign = $this->admissionPlanService->findActiveCampaign($items);
if (empty($campaign)) {
Log::warning('No active campaign found in the list');
return;
}
$levels_codes = $this->admissionPlanService->getLevelEducationCodes($campaign);
if (empty($levels_codes)) {
Log::warning('No education level codes found for campaign');
return;
}
foreach ($levels_codes as $code) {
$admissionPlans = $this->admissionPlanService->getAdmissionPlans($code);
// Проверка на пустой результат или отсутствие нужного свойства
if (empty($admissionPlans) || !isset($admissionPlans->competitons_groups)) {
Log::warning("Empty admission plans or missing property for code: {$code}", [
'admissionPlans' => $admissionPlans
]);
continue;
}
$filteredPlans = $this->admissionPlanService->filterEmptyNaprOrProg($admissionPlans->competitons_groups);
if (empty($filteredPlans)) {
Log::info("No valid plans after filtering for code: {$code}");
continue;
}
$items = $this->admissionPlanService->transformData($filteredPlans);
if (empty($items)) {
Log::info("No items after transformation for code: {$code}");
continue;
}
foreach ($items as $item) {
// Проверка структуры $item
if (!isset($item['id'], $item['plan']->competitions, $item['plan']->exams)) {
Log::warning("Invalid item structure", ['item' => $item]);
continue;
}
$eduPrograms = EducationalProgram::where('inner_code', $item['id'])->get();
if ($eduPrograms->isEmpty()) {
Log::info("No educational programs found for inner_code: {$item['id']}");
continue;
}
try {
$contestData = $this->admissionPlanService->convertToSaveContestData($item['plan']->competitions);
$examData = $this->admissionPlanService->convertToSaveExamData($item['plan']->exams);
foreach ($eduPrograms as $eduProgram) {
$eduProgram->admission_plans()->updateOrCreate([
'admission_campaigns_id' => $this->getActiveCampaign()->id,
'exams' => $examData,
'contests' => $contestData,
]);
}
} catch (\Exception $e) {
Log::error("Error processing admission plan for item: {$item['id']}", [
'error' => $e->getMessage(),
'item' => $item
]);
continue;
}
}
}
} catch (\Exception $e) {
Log::error('Error in admission plans processing', [
'error' => $e->getMessage(),
'trace' => $e->getTraceAsString()
]);
}
}
private function getActiveCampaign()
{
$activeCampaign = AdmissionCampaign::where('status', 1)->first();
if (!$activeCampaign) {
throw new \Exception('No active admission campaign found');
}
return $activeCampaign;
}
}
@@ -0,0 +1,67 @@
<?php
namespace App\Containers\Education\Jobs;
use App\Containers\Education\Models\DirectionStudy;
use App\Services\Vicon\DirectionStudy\DirectionStudyService;
use App\Ship\Enums\Education\LevelEducational;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Str;
class CreateDirectionStudy implements ShouldQueue
{
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
private $directionStudyService;
/**
* Create a new job instance.
*/
public function __construct()
{
$this->directionStudyService = new DirectionStudyService();
}
/**
* Execute the job.
*/
public function handle(): void
{
$naprs = [];
$naprsUuid = $this->directionStudyService->getAllNaprsUuid();
foreach ($naprsUuid as $uuid) {
array_push($naprs, $this->directionStudyService->getNapr($uuid));
}
foreach ($naprs as $napr) {
$slug = $this->generateUniqueSlug($napr->name_napr, DirectionStudy::class, LevelEducational::from($napr->lvl_edu));
DirectionStudy::updateOrCreate(
['uuid' => $napr->uuid],
[
'name' => $napr->name_napr,
'slug' => $slug,
'code' => $napr->kod_napr,
'lvl_edu' => $napr->lvl_edu,
]
);
};
}
private function generateUniqueSlug($name, $model, $levelEducational) {
$slug = Str::slug($name);
$originalSlug = $slug;
$slug = $originalSlug . '-' . Str::lower($levelEducational->name);
$count = 1;
while ($model::where('slug', $slug)->exists()) {
$slug = $originalSlug . '-' . $count;
$count++;
}
return $slug;
}
}
@@ -0,0 +1,83 @@
<?php
namespace App\Containers\Education\Jobs;
use App\Containers\Education\Models\DirectionStudy;
use App\Containers\Education\Models\EducationalProgram;
use App\Services\Vicon\EducationalProgram\EducationalProgramService;
use App\Ship\Enums\Education\LevelEducational;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Str;
class CreateEducationalProgram implements ShouldQueue
{
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
/**
* Create a new job instance.
*/
private EducationalProgramService $educatinalProgramService;
public function __construct()
{
$this->educatinalProgramService = app(EducationalProgramService::class);
}
/**
* Execute the job.
*/
public function handle(): void
{
$programs = [];
$programsUuid = $this->educatinalProgramService->getAllProgramsUuid();
foreach ($programsUuid as $uuid) {
$program = $this->educatinalProgramService->getProgram($uuid);
if ($program !== null) {
array_push($programs, $program);
} else {
Log::error("Не удалось получить данные о программе с UUID: $uuid");
}
}
foreach ($programs as $program) {
$direction = DirectionStudy::where('uuid', $program->napr_uuid)->first();
if ($direction !== null) {
$slug = $this->generateUniqueSlug($program->name_op, EducationalProgram::class, LevelEducational::from($program->lvl_edu));
EducationalProgram::updateOrCreate(
['uuid' => $program->uuid],
[
'name' => $program->name_op,
'slug' => $slug, // Добавляем slug
'inner_code' => $program->inner_code,
'lvl_edu' => $program->lvl_edu,
'status' => $program->status,
'learning_forms' => $program->learning_forms,
'direction_study_id' => $direction->id,
]
);
} else {
Log::error("Не удалось найти направление обучения с UUID: {$program->napr_uuid}");
}
}
}
private function generateUniqueSlug($name, $model, $levelEducational) {
$slug = Str::slug($name);
$originalSlug = $slug;
$slug = $originalSlug . '-' . Str::lower($levelEducational->name);
$count = 1;
while ($model::where('slug', $slug)->exists()) {
$slug = $originalSlug . '-' . $count;
$count++;
}
return $slug;
}
}
@@ -0,0 +1,28 @@
<?php
namespace App\Containers\Education\Jobs;
use App\Containers\Education\Models\AdmissionCampaign;
use App\Containers\Education\Models\AdmissionPlan;
use App\Containers\Education\Models\EducationalProgram;
use App\Services\Vicon\DirectionStudy\AdmissionPlanService;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Log;
class UpdateAdmissionCampaign implements ShouldQueue
{
use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
public function __construct(private string|int $id){}
public function handle(): void
{
// $ac = AdmissionCampaign::query()->find($this->id);
// $ap = AdmissionPlan::query()->all();
// $uep = $ap->
}
}
@@ -0,0 +1,77 @@
<?php
namespace App\Containers\Education\UI\API\Controllers;
use App\Containers\Education\Jobs\UpdateAdmissionCampaign;
use App\Containers\Education\Models\AdmissionCampaign;
use App\Containers\Education\Models\AdmissionPlan;
use App\Http\Controllers\Controller;
use App\Jobs\CreateAdmissionPlan;
use App\Jobs\CreateDirectionStudy;
use App\Jobs\CreateEducationalProgram;
use App\Services\Vicon\EducationalProgram\EducationalProgramService;
use App\Ship\Enums\Education\BudgetEducation;
use App\Ship\Enums\Education\FormEducation;
class UpdateAdmissionCampaignDataApiController extends Controller
{
public function update(string|int $id)
{
$this->updateAdmissionCampaignData($id);
return redirect()->route('index');
}
private function updateAdmissionCampaignData($id) : void
{
$ac = AdmissionCampaign::query()->find($id);
$ap = AdmissionPlan::with('educationalProgram')->get();
$info = [];
$ap->map(function ($item) use (&$info) {
$lvlEduKey = is_object($item->educationalProgram->lvl_edu)
? $item->educationalProgram->lvl_edu->value
: $item->educationalProgram->lvl_edu;
// Инициализируем поля для нового ключа, если он еще не существует
if (!isset($info[$lvlEduKey])) {
$info[$lvlEduKey] = [
'total_programs' => 0,
'och_count' => 0,
'zaoch_count' => 0,
'budget_places' => 0,
'non_budget_places' => 0
];
}
// Увеличиваем счетчик total_programs
$info[$lvlEduKey]['total_programs'] += 1;
// Итерируемся по contests и агрегируем данные
// Передаем $info и $lvlEduKey по ссылке во внутреннее замыкание
foreach ($item->contests as $contest) {
$formEdu = $contest['form_education'];
$formBudget = $contest['places']['form_budget'];
$places = $contest['places']['count'];
// Агрегируем значения
$info[$lvlEduKey]['och_count'] += ($formEdu == 1) ? $places : 0;
$info[$lvlEduKey]['zaoch_count'] += ($formEdu == 3) ? $places : 0;
$info[$lvlEduKey]['budget_places'] += ($formBudget == 1) ? $places : 0;
$info[$lvlEduKey]['non_budget_places'] += ($formBudget == 4) ? $places : 0;
}
});
$result = [];
foreach ($info as $edu_name_key => $data) {
// Создаем новый массив, добавляя 'edu_name' как свойство
$data['edu_name'] = $edu_name_key;
// Добавляем преобразованный массив в результат
$result[] = $data;
}
$ac->update(['info' => $result]);
// dispatch(new UpdateAdmissionCampaign($id));
}
}
@@ -2,11 +2,8 @@
namespace App\Containers\Education\UI\API\Controllers; namespace App\Containers\Education\UI\API\Controllers;
use App\Containers\Education\Jobs\CreateAdmissionPlan;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use App\Jobs\CreateAdmissionPlan;
use App\Jobs\CreateDirectionStudy;
use App\Jobs\CreateEducationalProgram;
use App\Services\Vicon\EducationalProgram\EducationalProgramService;
class UpdateAdmissionPlansDataApiController extends Controller class UpdateAdmissionPlansDataApiController extends Controller
{ {
@@ -2,9 +2,9 @@
namespace App\Containers\Education\UI\API\Controllers; namespace App\Containers\Education\UI\API\Controllers;
use App\Containers\Education\Jobs\CreateDirectionStudy;
use App\Containers\Education\Jobs\CreateEducationalProgram;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use App\Jobs\CreateDirectionStudy;
use App\Jobs\CreateEducationalProgram;
class UpdateEduDataApiController extends Controller class UpdateEduDataApiController extends Controller
{ {
@@ -1,6 +1,7 @@
<?php <?php
use App\Containers\Education\UI\API\Controllers\AcademicYearController; use App\Containers\Education\UI\API\Controllers\AcademicYearController;
use App\Containers\Education\UI\API\Controllers\UpdateAdmissionCampaignDataApiController;
use App\Containers\Education\UI\API\Controllers\UpdateAdmissionPlansDataApiController; use App\Containers\Education\UI\API\Controllers\UpdateAdmissionPlansDataApiController;
use App\Containers\Education\UI\API\Controllers\UpdateEduDataApiController; use App\Containers\Education\UI\API\Controllers\UpdateEduDataApiController;
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
@@ -10,4 +11,5 @@ Route::get('/getAcademicYear', AcademicYearController::class)->name('academic.ye
Route::middleware(['web', 'superadmin'])->group(function () { Route::middleware(['web', 'superadmin'])->group(function () {
Route::get('/get-edu-program-data', [UpdateEduDataApiController::class, 'index']); Route::get('/get-edu-program-data', [UpdateEduDataApiController::class, 'index']);
Route::get('/get-admission-plans-data', [UpdateAdmissionPlansDataApiController::class, 'index']); Route::get('/get-admission-plans-data', [UpdateAdmissionPlansDataApiController::class, 'index']);
Route::get('/update-admission-campaign-data/{id}', [UpdateAdmissionCampaignDataApiController::class, 'update']);
}); });
+12 -3
View File
@@ -142,12 +142,21 @@ class PageForm
->label('Скрыть хлебные крошки') ->label('Скрыть хлебные крошки')
->helperText('Скрывает навигационную цепочку вверху страницы') ->helperText('Скрывает навигационную цепочку вверху страницы')
->columnSpan(1), ->columnSpan(1),
Select::make('settings.custom_form')->label('Прикрепить форму для страницы') ])
->columns(2),
Section::make('Отображение плавающей формы на странице')
->description('Управление плавающей формой на странице')
->collapsible()
->schema([
Select::make('settings.form.id')->label('Прикрепить форму для страницы')
->searchable() ->searchable()
->preload() ->preload()
->options(CustomForm::query() ->options(CustomForm::query()
->where('status', CustomFormStatus::PUBLISHED)->pluck('title', 'form_id')) ->where('status', CustomFormStatus::PUBLISHED)->pluck('title', 'form_id'))
->columnSpanFull() ->columnSpanFull(),
Textinput::make('settings.form.title')->label('Заголовок плавающего окна'),
Textinput::make('settings.form.description')->label('Описание плавающего окна'),
Textinput::make('settings.form.button')->label('Текст кнопки'),
]) ])
->columns(2), ->columns(2),
]), ]),
@@ -155,4 +164,4 @@ class PageForm
]) ])
]); ]);
} }
} }
@@ -4,6 +4,7 @@ namespace App\Filament\Resources\AdmissionCampaignResource\Pages;
use App\Filament\Resources\AdmissionCampaignResource; use App\Filament\Resources\AdmissionCampaignResource;
use Filament\Actions; use Filament\Actions;
use Filament\Notifications\Notification;
use Filament\Resources\Pages\EditRecord; use Filament\Resources\Pages\EditRecord;
class EditAdmissionCampaign extends EditRecord class EditAdmissionCampaign extends EditRecord
@@ -13,6 +14,50 @@ class EditAdmissionCampaign extends EditRecord
protected function getHeaderActions(): array protected function getHeaderActions(): array
{ {
return [ return [
Actions\Action::make('fetchData') // Кастомная кнопка
->label('Обновить данные о местах набора')
->color('primary') // Цвет кнопки
->icon('heroicon-o-arrow-path') // Иконка
->action(function () {
// Отправляем запрос в фоновом режиме
$this->js(<<<JS
fetch('/api/get-admission-plans-data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
}
})
.then(response => response.json())
.then(() => {
// Показываем уведомление об успешном завершении
window.dispatchEvent(new CustomEvent('filament-notify', {
detail: {
type: 'success',
title: 'Данные обновлены',
body: 'Данные успешно обновлены.'
}
}));
})
.catch(() => {
// Показываем уведомление об ошибке
window.dispatchEvent(new CustomEvent('filament-notify', {
detail: {
type: 'danger',
title: 'Ошибка',
body: 'Произошла ошибка при обновлении данных.'
}
}));
});
JS);
// Показываем уведомление
Notification::make()
->title('Данные обновляются')
->body('Данные обновляются в фоновом режиме.')
->success()
->send();
}),
Actions\DeleteAction::make(), Actions\DeleteAction::make(),
]; ];
} }
+1 -1
View File
@@ -35,4 +35,4 @@ class AccessCheck
// Если все проверки пройдены, продолжаем выполнение запроса // Если все проверки пройдены, продолжаем выполнение запроса
return $next($request); return $next($request);
} }
} }
+3 -1
View File
@@ -3,6 +3,7 @@
namespace App\Jobs; namespace App\Jobs;
use App\Containers\Education\Models\AdmissionCampaign; use App\Containers\Education\Models\AdmissionCampaign;
use App\Containers\Education\Models\AdmissionPlan;
use App\Containers\Education\Models\EducationalProgram; use App\Containers\Education\Models\EducationalProgram;
use App\Services\Vicon\DirectionStudy\AdmissionPlanService; use App\Services\Vicon\DirectionStudy\AdmissionPlanService;
use Illuminate\Bus\Queueable; use Illuminate\Bus\Queueable;
@@ -32,6 +33,7 @@ class CreateAdmissionPlan implements ShouldQueue
*/ */
public function handle(): void public function handle(): void
{ {
AdmissionPlan::truncate();
try { try {
$items = $this->admissionPlanService->getCampaigns(); $items = $this->admissionPlanService->getCampaigns();
@@ -98,7 +100,7 @@ class CreateAdmissionPlan implements ShouldQueue
$examData = $this->admissionPlanService->convertToSaveExamData($item['plan']->exams); $examData = $this->admissionPlanService->convertToSaveExamData($item['plan']->exams);
foreach ($eduPrograms as $eduProgram) { foreach ($eduPrograms as $eduProgram) {
$eduProgram->admission_plans()->create([ $eduProgram->admission_plans()->updateOrCreate([
'admission_campaigns_id' => $this->getActiveCampaign()->id, 'admission_campaigns_id' => $this->getActiveCampaign()->id,
'exams' => $examData, 'exams' => $examData,
'contests' => $contestData, 'contests' => $contestData,
@@ -18,11 +18,13 @@ import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vu
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue"; import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue"; import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue"; import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
import Form from "@/componentss/features/forms/Form.vue";
export default { export default {
name: "Show", name: "Show",
components: { components: {
Form,
BaseBreadcrumbs, BaseBreadcrumbs,
BasicIcon, BreadcrumbsItem, BasicIcon, BreadcrumbsItem,
FormBuilder, FormBuilder,
@@ -193,7 +195,7 @@ export default {
<div class="hs-accordion-group"> <div class="hs-accordion-group">
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two"> <div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two"> <button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
Запишитесь на консультацию по курсу {{ form?.title }}
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path> <path d="M5 12h14"></path>
<path d="M12 5v14"></path> <path d="M12 5v14"></path>
@@ -207,11 +209,11 @@ export default {
<div class="flex rounded-xl"> <div class="flex rounded-xl">
<div class="grow rounded-xl"> <div class="grow rounded-xl">
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400"> <p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
Заполните форму обратной связи и с вами свяжется специалист центра дополнительного образования {{ form?.description }}
</p> </p>
<div class="mt-5 inline-flex gap-x-2"> <div class="mt-5 inline-flex gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal"> <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
Записаться {{ form?.button }}
</button> </button>
</div> </div>
</div> </div>
@@ -238,7 +240,7 @@ export default {
</button> </button>
</div> </div>
<div class="p-2 overflow-y-auto"> <div class="p-2 overflow-y-auto">
<FormBlock :form-id="form" /> <Form :form-id="form.id" />
</div> </div>
</div> </div>
</div> </div>
@@ -251,4 +253,4 @@ export default {
</style> </style>
@@ -15,6 +15,7 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue"; import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue"; import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue"; import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
import Form from "@/componentss/features/forms/Form.vue";
export default { export default {
@@ -51,6 +52,7 @@ export default {
} }
}, },
components: { components: {
Form,
BaseBreadcrumbs, BreadcrumbsItem, BaseBreadcrumbs, BreadcrumbsItem,
BasicPageContainer, BasicPageContainer,
BasicPageWrapper, BasicPageWrapper,
@@ -76,6 +78,9 @@ export default {
}, },
breadcrumbs: { breadcrumbs: {
type: Object type: Object
},
form: {
type: String
} }
}, },
} }
@@ -232,6 +237,61 @@ export default {
<BasicFooter /> <BasicFooter />
</BasicPageWrapper> </BasicPageWrapper>
<div class="fixed bottom-0 end-0 z-60 sm:max-w-xl w-full mx-auto p-6">
<div class="hs-accordion-group">
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
{{ form?.title }}
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
<div id="hs-basic-active-bordered-collapse-two" class="hs-accordion-content w-full overflow-hidden transition-[height] rounded-xl duration-300" role="region" aria-labelledby="hs-active-bordered-heading-two">
<div class="px-8 pb-4 pt-0 bg-white rounded-xl shadow-2xs">
<div class="flex rounded-xl">
<div class="grow rounded-xl">
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
{{ form?.description }}
</p>
<div class="mt-5 inline-flex gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
{{ form?.button }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="form" id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
<div class="flex justify-between items-center py-3 px-4 border-gray-200 dark:border-neutral-700">
<h3 id="hs-vertically-centered-scrollable-modal-label" class="font-bold text-gray-800 dark:text-white">
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="p-2 overflow-y-auto">
<Form :form-id="form.id" />
</div>
</div>
</div>
</div>
</template> </template>
+119 -51
View File
@@ -1,21 +1,35 @@
<template> <template>
<MetaTags :seo="seo" /> <MetaTags :seo="seo" />
<MainPageNavBar :sections="$page.props.navigation" /> <MainPageNavBar :sections="$page.props.navigation" />
<BasicPageWrapper> <BasicPageWrapper>
<div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl w-full px-4 py-10 md:flex md:flex-row md:py-10"> <div
<PageSubSectionLinks v-if="!settings?.hide_page_sub_section_links" :sub-section-pages="subSectionPages" :current-section="page.data.section"/> class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl w-full px-4 py-10 md:flex md:flex-row md:py-10"
<NavigateLinks v-if="!settings?.hide_page_navigate_links" :header-navs="headerNavs"/> >
<PageSubSectionLinks
v-if="!settings?.hide_page_sub_section_links"
:sub-section-pages="subSectionPages"
:current-section="page.data.section"
/>
<NavigateLinks
v-if="!settings?.hide_page_navigate_links"
:header-navs="headerNavs"
/>
<div class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style=""> <div class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
<div class="space-y-2 md:space-y-5"> <div class="space-y-2 md:space-y-5">
<BaseBreadcrumbs v-if="!settings?.hide_breadcrumbs" :breadcrumbs="breadcrumbs"> <BaseBreadcrumbs
<BreadcrumbsItem :title="breadcrumbs.page.data.title" :url="route('page.view', breadcrumbs.page.data.path)" /> v-if="!settings?.hide_breadcrumbs"
:breadcrumbs="breadcrumbs"
>
<BreadcrumbsItem
:title="breadcrumbs.page.data.title"
:url="route('page.view', breadcrumbs.page.data.path)"
/>
</BaseBreadcrumbs> </BaseBreadcrumbs>
<BasicTitle :header="page.data.title"/> <BasicTitle :header="page.data.title" />
<div id="page-area"> <div id="page-area">
<Builder :blocks="page.data.content"/> <Builder :blocks="page.data.content" />
</div> </div>
</div> </div>
</div> </div>
@@ -24,14 +38,65 @@
<BasicFooter /> <BasicFooter />
</BasicPageWrapper> </BasicPageWrapper>
<div v-if="settings?.form.id" class="fixed bottom-0 end-0 z-60 sm:max-w-xl w-full mx-auto p-6">
<div class="hs-accordion-group">
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
{{ settings?.form.title }}
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
<div id="hs-basic-active-bordered-collapse-two" class="hs-accordion-content w-full overflow-hidden transition-[height] rounded-xl duration-300" role="region" aria-labelledby="hs-active-bordered-heading-two">
<div class="px-8 pb-4 pt-0 bg-white rounded-xl shadow-2xs">
<div class="flex rounded-xl">
<div class="grow rounded-xl">
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
{{ settings?.form.description }}
</p>
<div class="mt-5 inline-flex gap-x-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
{{ settings?.form.button }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="settings?.form.id" id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
<div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
<div class="flex justify-between items-center py-3 px-4 border-gray-200 dark:border-neutral-700">
<h3 id="hs-vertically-centered-scrollable-modal-label" class="font-bold text-gray-800 dark:text-white">
</h3>
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
<span class="sr-only">Close</span>
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="p-2 overflow-y-auto">
<Form :form-id="settings?.form.id" />
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { Link, Head } from "@inertiajs/vue3";
import {Link, Head} from "@inertiajs/vue3";
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue"; import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
import MetaTags from "@/componentss/shared/SEO/MetaTags.vue"; import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
import BasicFooter from "@/footers/BasicFooter.vue"; import BasicFooter from "@/footers/BasicFooter.vue";
@@ -53,37 +118,41 @@ import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue"; import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue"; import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue"; import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
import FormBlock from "@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue";
import Form from "@/componentss/features/forms/Form.vue";
export default { export default {
name: "Page", name: "Page",
data() { data() {
return { return {
headerNavs: (this.page?.data?.content || []).filter(block => block?.type === 'heading').map(block => ({ headerNavs: (this.page?.data?.content || [])
id: block?.data?.id, .filter((block) => block?.type === "heading")
text: block?.data?.content .map((block) => ({
})), id: block?.data?.id,
settings: this.page?.data?.settings || {} text: block?.data?.content,
} })),
settings: this.page?.data?.settings || {},
};
}, },
props: { props: {
navigation: { navigation: {
type: Object, type: Object,
}, },
page: { page: {
type: Object, type: Object,
}, },
subSectionPages: { subSectionPages: {
type: Object, type: Object,
}, },
breadcrumbs: { breadcrumbs: {
type: Object, type: Object,
}, },
seo: { seo: {
type: Object, type: Object,
} },
}, },
components: { components: {
Form,
BreadcrumbsItem, BreadcrumbsItem,
BasicIcon, BasicIcon,
BaseBreadcrumbs, BaseBreadcrumbs,
@@ -102,20 +171,19 @@ export default {
Builder, Builder,
BasicFooter, BasicFooter,
MetaTags, MetaTags,
MainPageNavBar, MainPageNavBar,
PageSubSectionLinks, PageSubSectionLinks,
PageBreadcrumbs, PageBreadcrumbs,
Link, Link,
Head Head,
}, FormBlock,
methods: {}, },
methods: {
},
computed: {} computed: {},
} };
</script> </script>
<style> <style></style>
</style>
@@ -0,0 +1,58 @@
<template>
<div v-if="loading" class="flex flex-col space-y-4">
<div class="flex-col animate-pulse mt-10">
<div class="w-[25rem] mx-auto h-8 bg-gray-200 rounded-full"></div>
<div class="mt-5 mx-auto w-[40rem] h-60 relative z-1000 border rounded-xl sm:mt-10 md:p-10 bg-gray-200">
</div>
</div>
</div>
<div v-else>
<div>
<FormModalBuilder :blocks="form" />
</div>
</div>
</template>
<script>
import axios from "axios";
import {Link} from "@inertiajs/vue3";
import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vue";
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
import FormModalBuilder from "@/componentss/features/forms/components/builder/FormModalBuilder.vue";
export default {
name: "Form",
components: {FormModalBuilder, SubmitBlock, FormBuilder, axios, Link },
data() {
return {
form: null,
loading: true, // Состояние загрузки
}
},
methods: {
getForm(id) {
axios.get(route('client.widget.form.single', id))
.then(response => {
this.form = response.data;
this.loading = false; // Установить состояние загрузки в false
})
.catch(error => {
console.error('Ошибка:', error);
});
}
},
mounted() {
this.getForm(this.formId);
},
props: {
formId: {
type: String,
default: null,
}
},
}
</script>
<style>
</style>
@@ -0,0 +1,247 @@
<template>
<div v-if="success" class="relative flex flex-col bg-white shadow-lg rounded-xl dark:bg-neutral-900">
<div class="pb-10 px-5 text-center overflow-y-auto">
<!-- Icon -->
<span class="mb-4 inline-flex justify-center items-center size-11 rounded-full border-4 border-green-50 bg-green-100 text-green-500 dark:bg-green-700 dark:border-green-600 dark:text-green-100">
<svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
</svg>
</span>
<!-- End Icon -->
<h3 id="hs-task-created-alert-label" class="mb-8 text-xl font-bold text-gray-800 dark:text-neutral-200">
Успех!
</h3>
<p class="text-gray-500 dark:text-neutral-500">
{{ message }}
</p>
</div>
</div>
<div v-else>
<div class="max-w-[85rem] sm:px-6 lg:px-8 lg:py-7 mx-auto">
<div class="mx-auto max-w-2xl">
<div class="text-center px-2">
<h2 class="text-2xl text-gray-800 font-semibold sm:text-3xl">
{{ blocks.data.title }}
</h2>
<p class="mt-5 text-sm text-gray-500">{{ blocks.data.description }}</p>
</div>
<!-- Card -->
<div class="relative z-1000 bg-white rounded-xl p-5 md:p-8">
<form class="space-y-4" @submit="submitForm">
<component
v-for="(block, index) in blocks.data.columns"
:key="index"
:is="getComponent(block.type)"
:block="block"
:error="errors && errors[block.data.name_field] ? errors[block.data.name_field] : null"
/>
<PersonalDataBlock v-if="blocks.data.settings.personal_data" />
<CaptchaBlock v-if="blocks.data.settings.captcha" />
<div class="mt-10">
<button
type="submit"
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primary-light disabled:opacity-50 disabled:pointer-events-none"
:disabled="!isFormAvailable"
>
{{ blocks.data.button }}
</button>
<p v-if="!isFormAvailable" class="mt-2 text-sm text-red-600">
{{ availabilityMessage }}
</p>
</div>
</form>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- <transition name="fade">-->
<!-- <SuccessNotification v-if="success" :text="message" />-->
<!-- </transition>-->
</template>
<script>
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
import axios from "axios";
import SuccessNotification from "@/componentss/shared/notifications/SuccessNotification.vue";
import {defineAsyncComponent} from "vue";
import PersonalDataBlock from "@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue";
import CaptchaBlock from "@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue";
export default {
name: "FormModalBuilder",
components: {
CaptchaBlock,
PersonalDataBlock,
SuccessNotification,
SubmitBlock,
},
data() {
return {
formData: {},
errors: null,
success: false,
message: null,
currentTime: new Date(),
timeInterval: null
};
},
computed: {
isFormAvailable() {
if (!this.blocks.data.settings.period) return true;
const startTime = new Date(this.blocks.data.settings.period.start_time);
const endTime = new Date(this.blocks.data.settings.period.end_time);
return this.currentTime >= startTime && this.currentTime <= endTime;
},
availabilityMessage() {
if (!this.blocks.data.settings.period) return '';
const startTime = new Date(this.blocks.data.settings.period.start_time);
const endTime = new Date(this.blocks.data.settings.period.end_time);
if (this.currentTime < startTime) {
return `Форма будет доступна с ${this.formatDateTime(startTime)}`;
} else if (this.currentTime > endTime) {
return `Форма была доступна до ${this.formatDateTime(endTime)}`;
}
return '';
}
},
mounted() {
this.updateCurrentTime();
this.timeInterval = setInterval(this.updateCurrentTime, 60000);
},
beforeUnmount() {
if (this.timeInterval) {
clearInterval(this.timeInterval);
}
},
methods: {
updateCurrentTime() {
this.currentTime = new Date();
},
formatDateTime(date) {
return date.toLocaleString('ru-RU', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
},
getComponent(type) {
const componentMap = {
text: () => import('@/componentss/shared/builder/formBuilder/blocks/TextBlock.vue'),
phone: () => import('@/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue'),
email: () => import('@/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue'),
textarea: () => import('@/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue'),
multiple_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue'),
single_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue'),
date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
};
return defineAsyncComponent(componentMap[type] || null);
},
submitForm(event) {
if (!this.isFormAvailable) {
event.preventDefault();
return;
}
event.preventDefault();
this.formData = this.getFormData(event.target.elements);
this.sendDataToServer();
},
getFormData(formElements) {
const formData = {};
for (let i = 0; i < formElements.length; i++) {
const element = formElements[i];
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
const fieldName = this.normalizeFieldName(element.name);
if (element.tagName === 'INPUT') {
if (element.type === 'checkbox') {
this.handleCheckbox(formData, fieldName, element);
} else if (fieldName && fieldName !== 'choices') {
formData[fieldName] = element.value;
}
} else if (element.tagName === 'TEXTAREA') {
formData[fieldName] = element.value;
} else if (element.tagName === 'SELECT') {
formData[fieldName] = element.value;
}
}
}
return formData;
},
normalizeFieldName(name) {
return name.endsWith('[]') ? name.slice(0, -2) : name;
},
handleCheckbox(formData, fieldName, element) {
if (!formData[fieldName]) {
formData[fieldName] = [];
}
if (element.checked) {
formData[fieldName].push(element.value);
}
},
sendDataToServer() {
axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
.then(this.handleResponse)
.catch(this.handleError);
},
handleResponse(response) {
if (response.data.status === 'ok') {
this.success = true;
this.message = response.data.message;
this.errors = null;
}
},
handleError(error) {
this.errors = error.response.data || ['Неизвестная ошибка'];
this.success = false;
}
},
props: {
blocks: {
type: Object,
},
},
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
@@ -8,7 +8,7 @@
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label> <label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
<div class="relative"> <div class="relative">
<select :name="block.data.name_field" :disabled="isActiveProgramPage" v-model="activeProgramPage" class="py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"> <select :name="block.data.name_field" :disabled="isActiveProgramPage" v-model="activeProgramPage" class="py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
<option selected="">Open this select menu</option> <option :value="null" selected="">Без выбора</option>
<option :value="additionalProgram.name" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.name }}</option> <option :value="additionalProgram.name" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.name }}</option>
</select> </select>
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3"> <div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">