Changes
This commit is contained in:
f4ilji
@@ -3,10 +3,127 @@
|
||||
namespace App\Filament\Resources\EducationalProgramResource\Pages;
|
||||
|
||||
use App\Filament\Resources\EducationalProgramResource;
|
||||
use App\Filament\Resources\PostResource;
|
||||
use Carbon\Carbon;
|
||||
use Filament\Actions;
|
||||
use Filament\Notifications\Actions\Action;
|
||||
use Filament\Notifications\Notification;
|
||||
use Filament\Resources\Pages\CreateRecord;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
class CreateEducationalProgram extends CreateRecord
|
||||
{
|
||||
protected static string $resource = EducationalProgramResource::class;
|
||||
|
||||
protected array $seoData;
|
||||
|
||||
|
||||
protected function mutateFormDataBeforeCreate(array $data): array
|
||||
{
|
||||
$this->seoData = $this->generateSeo($data);
|
||||
$data['search_data'] = $this->generateSearchData($data['content']);
|
||||
return $data;
|
||||
}
|
||||
|
||||
protected function afterCreate(): void
|
||||
{
|
||||
$this->record->seo()->create($this->seoData);
|
||||
}
|
||||
|
||||
private function generateSeo(array $data) : array
|
||||
{
|
||||
$title = $data['title'];
|
||||
$rowData = $this->getBlockBySeoActiveState('paragraph', $data['content']);
|
||||
if ($rowData === null) {
|
||||
$rowData = $this->getFirstBlockByName('paragraph', $data['content']);
|
||||
}
|
||||
if ($rowData !== null) {
|
||||
$description = strip_tags($rowData['data']['content']);
|
||||
} else {
|
||||
$description = null;
|
||||
} $image = ($data['preview'] !== null) ? $data['preview'] : null;
|
||||
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
'image' => $image,
|
||||
];
|
||||
}
|
||||
|
||||
private function generateSearchData(array $data) : string
|
||||
{
|
||||
$result = "";
|
||||
foreach ($data as $block) {
|
||||
$result .= $this->getDataFromBlocks($block);
|
||||
}
|
||||
// Удаляем лишние пробелы и переносы строк
|
||||
$result = preg_replace('/\s+/', ' ', $result);
|
||||
$result = trim($result);
|
||||
|
||||
return strtolower($result);
|
||||
}
|
||||
private function getFirstBlockByName(string $name, array $content) : array|null
|
||||
{
|
||||
$data = null;
|
||||
foreach ($content as $block) {
|
||||
$data = ($block['type'] === $name) ? $block : null;
|
||||
break;
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
private function getBlockBySeoActiveState(string $name, array $content) : array|null
|
||||
{
|
||||
$data = [];
|
||||
foreach ($content as $block) {
|
||||
if ($block['type'] === $name) {
|
||||
$data[] = $block;
|
||||
}
|
||||
}
|
||||
$block = null;
|
||||
foreach ($data as $item) {
|
||||
if ($item['data']['seo_active'] === true) {
|
||||
$block = $item;
|
||||
}
|
||||
}
|
||||
return $block;
|
||||
}
|
||||
|
||||
private function getDataFromBlocks($block) : string
|
||||
{
|
||||
$data = "";
|
||||
switch ($block['type']) {
|
||||
case 'paragraph':
|
||||
$data .= strip_tags($block['data']['content']) . " ";
|
||||
break;
|
||||
case 'heading':
|
||||
$data .= strip_tags($block['data']['content']) . " ";
|
||||
break;
|
||||
case 'files':
|
||||
foreach ($block['data']['file'] as $file) {
|
||||
$data .= $file['title'] . " ";
|
||||
}
|
||||
break;
|
||||
case 'person':
|
||||
$data .= $block['data']['name'] . " ";
|
||||
break;
|
||||
case 'stepper':
|
||||
$data .= $block['data']['step_name'] . " ";
|
||||
foreach ($block['data']['steps'] as $step) {
|
||||
$data .= $step['title'] . " ";
|
||||
$data .= strip_tags($step['content']) . " ";
|
||||
}
|
||||
break;
|
||||
case 'tabs':
|
||||
foreach ($block['data']['tab'] as $item) {
|
||||
foreach ($item['content'] as $block) {
|
||||
$data .= $this->getDataFromBlocks($block);
|
||||
};
|
||||
};
|
||||
break;
|
||||
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2,14 +2,133 @@
|
||||
|
||||
namespace App\Filament\Resources\EducationalProgramResource\Pages;
|
||||
|
||||
use App\Enums\PostStatus;
|
||||
use App\Filament\Resources\EducationalProgramResource;
|
||||
use Carbon\Carbon;
|
||||
use Filament\Actions;
|
||||
use Filament\Resources\Pages\EditRecord;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
class EditEducationalProgram extends EditRecord
|
||||
{
|
||||
protected static string $resource = EducationalProgramResource::class;
|
||||
|
||||
|
||||
protected array $seoData;
|
||||
|
||||
|
||||
protected function mutateFormDataBeforeSave(array $data): array
|
||||
{
|
||||
$this->seoData = $this->generateSeo($data);
|
||||
$data['search_data'] = $this->generateSearchData($data['content']);
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
protected function afterSave(): void
|
||||
{
|
||||
$this->record->seo()->update($this->seoData);
|
||||
}
|
||||
|
||||
|
||||
private function getBlockBySeoActiveState(string $name, array $content) : array|null
|
||||
{
|
||||
$data = [];
|
||||
foreach ($content as $block) {
|
||||
if ($block['type'] === $name) {
|
||||
$data[] = $block;
|
||||
}
|
||||
}
|
||||
$block = null;
|
||||
foreach ($data as $item) {
|
||||
if ($item['data']['seo_active'] === true) {
|
||||
$block = $item;
|
||||
}
|
||||
}
|
||||
return $block;
|
||||
}
|
||||
|
||||
private function generateSeo(array $data) : array
|
||||
{
|
||||
$title = $data['title'];
|
||||
$rowData = $this->getBlockBySeoActiveState('paragraph', $data['content']);
|
||||
if ($rowData === null) {
|
||||
$rowData = $this->getFirstBlockByName('paragraph', $data['content']);
|
||||
}
|
||||
if ($rowData !== null) {
|
||||
$description = strip_tags($rowData['data']['content']);
|
||||
} else {
|
||||
$description = null;
|
||||
}
|
||||
$image = ($this->record->preview !== null) ? $this->record->preview : null;
|
||||
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
'image' => $image,
|
||||
];
|
||||
}
|
||||
|
||||
private function getDataFromBlocks($block) : string
|
||||
{
|
||||
$data = "";
|
||||
switch ($block['type']) {
|
||||
case 'paragraph':
|
||||
$data .= strip_tags($block['data']['content']) . " ";
|
||||
break;
|
||||
case 'heading':
|
||||
$data .= strip_tags($block['data']['content']) . " ";
|
||||
break;
|
||||
case 'files':
|
||||
foreach ($block['data']['file'] as $file) {
|
||||
$data .= $file['title'] . " ";
|
||||
}
|
||||
break;
|
||||
case 'person':
|
||||
$data .= $block['data']['name'] . " ";
|
||||
break;
|
||||
case 'stepper':
|
||||
$data .= $block['data']['step_name'] . " ";
|
||||
foreach ($block['data']['steps'] as $step) {
|
||||
$data .= $step['title'] . " ";
|
||||
$data .= strip_tags($step['content']) . " ";
|
||||
}
|
||||
break;
|
||||
case 'tabs':
|
||||
foreach ($block['data']['tab'] as $item) {
|
||||
foreach ($item['content'] as $block) {
|
||||
$data .= $this->getDataFromBlocks($block);
|
||||
};
|
||||
};
|
||||
break;
|
||||
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
private function generateSearchData(array $data) : string
|
||||
{
|
||||
$result = "";
|
||||
foreach ($data as $block) {
|
||||
$result .= $this->getDataFromBlocks($block);
|
||||
}
|
||||
// Удаляем лишние пробелы и переносы строк
|
||||
$result = preg_replace('/\s+/', ' ', $result);
|
||||
$result = trim($result);
|
||||
|
||||
return strtolower($result);
|
||||
}
|
||||
private function getFirstBlockByName(string $name, array $content) : array|null
|
||||
{
|
||||
$data = null;
|
||||
foreach ($content as $block) {
|
||||
$data = ($block['type'] === $name) ? $block : null;
|
||||
break;
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
protected function getHeaderActions(): array
|
||||
{
|
||||
return [
|
||||
|
||||
@@ -50,7 +50,7 @@ class CreatePage extends CreateRecord
|
||||
}
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit($description, 160),
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
];
|
||||
}
|
||||
private function getFirstBlockByName(string $name, array $content) : array|null
|
||||
|
||||
@@ -36,7 +36,7 @@ class EditPage extends EditRecord
|
||||
}
|
||||
}
|
||||
|
||||
$this->record->seo()->create($this->seoData);
|
||||
$this->record->seo()->update($this->seoData);
|
||||
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@ class EditPage extends EditRecord
|
||||
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit($description, 160),
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
];
|
||||
}
|
||||
private function getFirstBlockByName(string $name, array $content) : array|null
|
||||
|
||||
@@ -69,7 +69,7 @@ class CreatePost extends CreateRecord
|
||||
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit($description, 160),
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
'image' => $image,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -87,7 +87,7 @@ class EditPost extends EditRecord
|
||||
|
||||
return [
|
||||
'title' => $title,
|
||||
'description' => Str::limit($description, 160),
|
||||
'description' => Str::limit(htmlspecialchars($description, ENT_QUOTES, 'UTF-8'), 160),
|
||||
'image' => $image,
|
||||
];
|
||||
}
|
||||
@@ -200,7 +200,6 @@ class EditPost extends EditRecord
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
private function postToSocialMedia($settings, $content, $title, $publish_date) : void
|
||||
{
|
||||
if ($this->record->status === PostStatus::PUBLISHED) {
|
||||
|
||||
@@ -66,7 +66,9 @@ class ClientEventController extends Controller
|
||||
$breadcrumbs = null;
|
||||
}
|
||||
|
||||
return Inertia::render('Client/Events/Show', compact('event', 'breadcrumbs'));
|
||||
$seo = $event->seo;
|
||||
|
||||
return Inertia::render('Client/Events/Show', compact('event', 'breadcrumbs', 'seo'));
|
||||
}
|
||||
|
||||
private function getCurrentDate(Request $request): array
|
||||
|
||||
@@ -142,7 +142,10 @@ class ClientPostController extends Controller
|
||||
} else {
|
||||
$breadcrumbs = null;
|
||||
}
|
||||
return Inertia::render('Client/Posts/Show', compact('post', 'breadcrumbs'));
|
||||
|
||||
$seo = $post->seo;
|
||||
|
||||
return Inertia::render('Client/Posts/Show', compact('post', 'breadcrumbs', 'seo'));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@ use App\Models\EducationalProgram;
|
||||
use App\Models\Event;
|
||||
use App\Models\MainSection;
|
||||
use App\Models\MainSlider;
|
||||
use App\Models\Page;
|
||||
use App\Models\Post;
|
||||
use App\Services\Filament\Icon\ArrayToCollectionService;
|
||||
use App\Services\Vicon\EducationalProgram\EducationalProgramService;
|
||||
@@ -32,12 +33,26 @@ use Inertia\Inertia;
|
||||
|
||||
class MainController extends Controller
|
||||
{
|
||||
|
||||
public function index()
|
||||
{
|
||||
$info = AdmissionCampaign::get()->first()->info ?? [];
|
||||
$admissionCampaign = $this->getAdmissionCampaign();
|
||||
$educations = $this->getEducationsData();
|
||||
$sliders = $this->getActiveSliders();
|
||||
$posts = $this->getRecentPosts();
|
||||
$events = $this->getUpcomingEvents();
|
||||
|
||||
$admissionCampaign = collect($info)->reduce(function ($carry, $a) {
|
||||
$path = route('index', null, false);
|
||||
$page = Page::where('path', $path)->first();
|
||||
$seo = $page->seo;
|
||||
|
||||
return Inertia::render('Main', compact('posts', 'events', 'sliders', 'educations', 'seo'));
|
||||
}
|
||||
|
||||
private function getAdmissionCampaign()
|
||||
{
|
||||
$info = AdmissionCampaign::first()->info ?? [];
|
||||
|
||||
return collect($info)->reduce(function ($carry, $a) {
|
||||
$lvl = LevelEducational::from((int)$a['edu_name'])->name;
|
||||
$carry[$lvl] = [
|
||||
'total_programs' => $a['total_programs'],
|
||||
@@ -50,29 +65,51 @@ class MainController extends Controller
|
||||
];
|
||||
return $carry;
|
||||
}, []);
|
||||
}
|
||||
|
||||
$educations = [
|
||||
'admission_campaign' => $admissionCampaign,
|
||||
private function getEducationsData()
|
||||
{
|
||||
return [
|
||||
'admission_campaign' => $this->getAdmissionCampaign(),
|
||||
'additional_education' => [
|
||||
'educations_count' => AdditionalEducation::where('is_active', true)->count(),
|
||||
'categories_count' => AdditionalEducationCategory::where('is_active', true)->count()
|
||||
'categories_count' => AdditionalEducationCategory::where('is_active', true)->count(),
|
||||
],
|
||||
|
||||
];
|
||||
$today = new DateTime();
|
||||
$event_date_start = $today->format('Y-m-d');
|
||||
$sliders = ClientMainSliderResource::collection(MainSlider::query()->where('is_active', true)->orderBy('sort', 'asc')->get());
|
||||
$posts = PostThumbnailResource::collection(Post::query()
|
||||
->select('title', 'slug', 'authors', 'preview_text', 'category_id', 'preview', 'search_data', 'publish_at', 'created_at')
|
||||
->with('category')
|
||||
->where('publish_at', '<', Carbon::now())
|
||||
->where('status', '=', PostStatus::PUBLISHED)
|
||||
->orderBy('publish_at', 'desc')->limit(3)
|
||||
->get());
|
||||
$events = EventThumbnailResource::collection(Event::query()
|
||||
->select('title', 'slug', 'event_date_start', 'address', 'is_online', 'category_id')
|
||||
->where('event_date_start', '>=', $event_date_start)
|
||||
->orderBy('event_date_start', 'asc')->limit(3)->get());
|
||||
return Inertia::render('Main', compact('posts', 'events', 'sliders', 'educations'));
|
||||
}
|
||||
|
||||
private function getActiveSliders()
|
||||
{
|
||||
return ClientMainSliderResource::collection(
|
||||
MainSlider::where('is_active', true)
|
||||
->orderBy('sort', 'asc')
|
||||
->get()
|
||||
);
|
||||
}
|
||||
|
||||
private function getRecentPosts()
|
||||
{
|
||||
return PostThumbnailResource::collection(
|
||||
Post::select('title', 'slug', 'authors', 'preview_text', 'category_id', 'preview', 'search_data', 'publish_at', 'created_at')
|
||||
->with('category')
|
||||
->where('publish_at', '<', Carbon::now())
|
||||
->where('status', '=', PostStatus::PUBLISHED)
|
||||
->orderBy('publish_at', 'desc')
|
||||
->limit(3)
|
||||
->get()
|
||||
);
|
||||
}
|
||||
|
||||
private function getUpcomingEvents()
|
||||
{
|
||||
$event_date_start = (new DateTime())->format('Y-m-d');
|
||||
|
||||
return EventThumbnailResource::collection(
|
||||
Event::select('title', 'slug', 'event_date_start', 'address', 'is_online', 'category_id')
|
||||
->where('event_date_start', '>=', $event_date_start)
|
||||
->orderBy('event_date_start', 'asc')
|
||||
->limit(3)
|
||||
->get()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,23 +21,6 @@ use Inertia\Inertia;
|
||||
|
||||
class PageController extends Controller
|
||||
{
|
||||
public function getRegisteredPages()
|
||||
{
|
||||
$pages = PageResource::collection(Page::query()
|
||||
->when(request()->input('search'), function ($query, $search) {
|
||||
$query->where('title', 'like', "%{$search}%");
|
||||
})
|
||||
->where('is_registered', true)
|
||||
->where('is_visible', true)
|
||||
->orderBy('id', 'desc')
|
||||
->paginate(request()->input('perPage', 9))
|
||||
->withQueryString());
|
||||
$filters = [
|
||||
'search' => request()->input('search'),
|
||||
];
|
||||
return Inertia::render('AdminPanel/Pages/Registered', compact('pages', 'filters'));
|
||||
}
|
||||
|
||||
public function render($path)
|
||||
{
|
||||
$page = Page::where('path', '=', $path)->with('section.pages.section', 'section.mainSection')->first();
|
||||
@@ -57,11 +40,11 @@ class PageController extends Controller
|
||||
$breadcrumbs = null;
|
||||
}
|
||||
|
||||
$seo = $page->seo;
|
||||
|
||||
|
||||
$page = new PageResource($page);
|
||||
|
||||
|
||||
|
||||
$error = $page->code;
|
||||
|
||||
|
||||
@@ -70,9 +53,27 @@ class PageController extends Controller
|
||||
abort($error);
|
||||
}
|
||||
|
||||
return Inertia::render($page->template, compact('page', 'subSectionPages', 'breadcrumbs'));
|
||||
return Inertia::render($page->template, compact('page', 'subSectionPages', 'breadcrumbs', 'seo'));
|
||||
}
|
||||
|
||||
public function getRegisteredPages()
|
||||
{
|
||||
$pages = PageResource::collection(Page::query()
|
||||
->when(request()->input('search'), function ($query, $search) {
|
||||
$query->where('title', 'like', "%{$search}%");
|
||||
})
|
||||
->where('is_registered', true)
|
||||
->where('is_visible', true)
|
||||
->orderBy('id', 'desc')
|
||||
->paginate(request()->input('perPage', 9))
|
||||
->withQueryString());
|
||||
$filters = [
|
||||
'search' => request()->input('search'),
|
||||
];
|
||||
return Inertia::render('AdminPanel/Pages/Registered', compact('pages', 'filters'));
|
||||
}
|
||||
|
||||
|
||||
|
||||
public function index()
|
||||
{
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@keyframes fade{0%{opacity:0}to{opacity:1}}.fade-enter-active,.fade-leave-active{transition:all .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress{height:2px;background:#26acb8;z-index:10000;transform-origin:0 50%;animation:grow-progress auto linear;animation-timeline:scroll()}.example-initial-animation{animation:initial-animation 2s ease}@keyframes initial-animation{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}
|
||||
@@ -1 +0,0 @@
|
||||
.no-scrollbar[data-v-6d0eb2ca]::-webkit-scrollbar{display:none}.no-scrollbar[data-v-6d0eb2ca]{-ms-overflow-style:none;scrollbar-width:none}.active-button[data-v-6d0eb2ca]{--tw-bg-opacity: 1;background-color:rgb(28 100 242 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}
|
||||
@@ -1 +0,0 @@
|
||||
@keyframes grow-progress-ffdaa09f{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress[data-v-ffdaa09f]{top:0;height:2px;background:#294f8c;z-index:99;width:100%;position:fixed;transform-origin:0 50%;animation:grow-progress-ffdaa09f auto linear;animation-timeline:scroll()}
|
||||
@@ -1 +0,0 @@
|
||||
@keyframes fade-f864d284{0%{opacity:0}to{opacity:1}}.fade-enter-active[data-v-f864d284],.fade-leave-active[data-v-f864d284]{transition:all .3s ease}.fade-enter-from[data-v-f864d284],.fade-leave-to[data-v-f864d284]{opacity:0}@keyframes grow-progress-f864d284{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress[data-v-f864d284]{height:2px;background:#26acb8;z-index:10000;transform-origin:0 50%;animation:grow-progress-f864d284 auto linear;animation-timeline:scroll()}.active[data-v-f864d284]{color:#00f!important}.example-initial-animation[data-v-f864d284]{animation:initial-animation-f864d284 2s ease}@keyframes initial-animation-f864d284{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:1rem}.paragraph-container ol li{list-style-position:inside;list-style-type:decimal}.paragraph-container ul li{list-style-position:inside;list-style-type:disc}.paragraph-container li ol{margin-left:2.5rem}.paragraph-container ul{margin-bottom:1rem}.paragraph-container hr{margin-top:1rem;margin-bottom:1rem}.paragraph-container strong{font-size:1.25rem;line-height:1.75rem}.div-table{overflow-x:auto}.paragraph-container table{margin-top:1rem;margin-bottom:1rem;width:100%;border-collapse:collapse;overflow:hidden}.paragraph-container th,.paragraph-container td{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));padding:.75rem;text-align:left}.paragraph-container th{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));font-weight:600;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.paragraph-container tr{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.paragraph-container td{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.step-content a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.step-content a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.step-content ol li{list-style-position:inside;list-style-type:decimal}.step-content ul li{list-style-position:inside;list-style-type:disc}.step-content li ol{margin-left:2.5rem}.fslightbox-container{margin:0!important}
|
||||
@@ -1 +0,0 @@
|
||||
.fslightbox-container{margin:0!important}
|
||||
@@ -1 +0,0 @@
|
||||
.fade-enter-active[data-v-a4691de4],.fade-leave-active[data-v-a4691de4]{transition:all .5s ease}.fade-enter-from[data-v-a4691de4],.fade-leave-to[data-v-a4691de4]{opacity:0;transform:translateY(30px)}
|
||||
@@ -1 +0,0 @@
|
||||
.fade-enter-active,.fade-leave-active{transition:all .5s ease}.my-slider-progress-bar{transition:width 60ms ease}.fade-enter-from,.fade-leave-to{opacity:0;transform:translateY(30px)}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:1rem}.paragraph-container ol li{list-style-position:inside;list-style-type:decimal}.paragraph-container ul li{list-style-position:inside;list-style-type:disc}.paragraph-container li ol{margin-left:2.5rem}.paragraph-container ul{margin-bottom:1rem}.paragraph-container hr{margin-top:1rem;margin-bottom:1rem}.paragraph-container strong{font-size:1.25rem;line-height:1.75rem}.div-table{overflow-x:auto}.paragraph-container table{margin-top:1rem;margin-bottom:1rem;width:100%;border-collapse:collapse;overflow:hidden}.paragraph-container th,.paragraph-container td{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));padding:.75rem;text-align:left}.paragraph-container th{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));font-weight:600;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.paragraph-container tr{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.paragraph-container td{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}
|
||||
@@ -1 +0,0 @@
|
||||
.fslightbox-container[data-v-394afbbe]{margin:0!important}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:.5rem}.paragraph-container ol li{list-style-position:inside;list-style-type:decimal}.paragraph-container ul li{list-style-position:inside;list-style-type:disc}.paragraph-container li ol{margin-left:2.5rem}.paragraph-container ul{margin-bottom:.5rem}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:1.5rem}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:1rem}.paragraph-container ol li{list-style-position:inside;list-style-type:decimal}.paragraph-container ul li{list-style-position:inside;list-style-type:disc}.paragraph-container li ol{margin-left:2.5rem}.paragraph-container ul{margin-bottom:1rem}.paragraph-container hr{margin-top:1rem;margin-bottom:1rem}.paragraph-container strong{font-size:1.25rem;line-height:1.75rem}.div-table{overflow-x:auto}.paragraph-container table{margin-top:1rem;margin-bottom:1rem;width:100%;border-collapse:collapse;overflow:hidden}.paragraph-container th,.paragraph-container td{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));padding:.75rem;text-align:left}.paragraph-container th{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity));font-weight:600;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}.paragraph-container tr{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.paragraph-container td{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.paragraph-container tr:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.step-content a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.step-content a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.step-content ol li{list-style-position:inside;list-style-type:decimal}.step-content ul li{list-style-position:inside;list-style-type:disc}.step-content li ol{margin-left:2.5rem}.fslightbox-container{margin:0!important}.styled-scrollbar{overflow:hidden}.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:.5rem}@keyframes fade{0%{opacity:0}to{opacity:1}}.fade-enter-active,.fade-leave-active{transition:all .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress{height:2px;background:#26acb8;z-index:10000;transform-origin:0 50%;animation:grow-progress auto linear;animation-timeline:scroll()}.active{color:#00f!important}.example-initial-animation{animation:initial-animation 2s ease}@keyframes initial-animation{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:.5rem}
|
||||
@@ -1 +0,0 @@
|
||||
.styled-scrollbar{overflow:hidden}.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:.5rem}@keyframes fade{0%{opacity:0}to{opacity:1}}.fade-enter-active,.fade-leave-active{transition:all .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress{height:2px;background:#26acb8;z-index:10000;transform-origin:0 50%;animation:grow-progress auto linear;animation-timeline:scroll()}.active{color:#00f!important}.example-initial-animation{animation:initial-animation 2s ease}@keyframes initial-animation{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}
|
||||
@@ -1 +0,0 @@
|
||||
.paragraph-container a{--tw-text-opacity: 1;color:rgb(30 87 163 / var(--tw-text-opacity));text-decoration-line:underline}.paragraph-container p{margin-bottom:.5rem}@keyframes fade{0%{opacity:0}to{opacity:1}}.fade-enter-active,.fade-leave-active{transition:all .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}#progress{height:2px;background:#26acb8;z-index:10000;transform-origin:0 50%;animation:grow-progress auto linear;animation-timeline:scroll()}.active{color:#00f!important}.example-initial-animation{animation:initial-animation 2s ease}@keyframes initial-animation{0%{transform:rotate(0)}50%{transform:rotate(360deg)}to{transform:rotate(0)}}
|
||||
@@ -1 +0,0 @@
|
||||
.step-content a{--tw-text-opacity: 1;color:rgb(38 172 184 / var(--tw-text-opacity));text-decoration-line:underline}.step-content a:hover{--tw-text-opacity: 1;color:rgb(44 98 136 / var(--tw-text-opacity));text-decoration-line:underline}.step-content ol li{list-style-position:inside;list-style-type:decimal}.step-content ul li{list-style-position:inside;list-style-type:disc}.step-content li ol{margin-left:2.5rem}
|
||||
@@ -1 +0,0 @@
|
||||
const s=(t,r)=>{const o=t.__vccOpts||t;for(const[c,e]of r)o[c]=e;return o};export{s as _};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
|
||||
defineProps({
|
||||
title: String,
|
||||
description: String,
|
||||
image: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="title ? `${title} - Нижнетагильский государственый-педагогический институт` : 'Нижнетагильский государственый-педагогический институт'">
|
||||
<meta name="description" :content="description">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:title" :content="title ? `${title} - Нижнетагильский государственый-педагогический институт` : 'Нижнетагильский государственый-педагогический институт'">
|
||||
<meta property="og:description" :content="description">
|
||||
<meta property="og:image" content="/img/thumbnail-1.png">
|
||||
</Head>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
|
||||
<Link :href="route(link)" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</Link>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "BaseBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
link: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="flex justify-between pb-4 items-center">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div class="grow">
|
||||
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BaseIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.mainSection" class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.mainSection.data.title, 25) }}
|
||||
</span>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.subSection" class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.subSection.data.title, 25) }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('page.view', breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.page.data.title, 25) }}
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BaseIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('page.view', breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
{{ textLimit(breadcrumbs.page.data.title, 25) }}
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseBreadcrumbs",
|
||||
components: {BaseIcon, Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
isMobileDevice() {
|
||||
if (typeof window !== 'undefined') {
|
||||
return window.innerWidth < 1024; // Проверка на мобильные устройства
|
||||
}
|
||||
return false; // По умолчанию возвращаем false, когда не в браузере
|
||||
},
|
||||
handleSectionClick(breadcrumb) {
|
||||
if (this.isMobileDevice()) {
|
||||
this.toggleMobileNavSection(breadcrumb)
|
||||
} else {
|
||||
this.toggleDesktopNavSection(breadcrumb)
|
||||
}
|
||||
},
|
||||
handleSubSectionClick(mainSectionBreadcrumb, breadcrumb) {
|
||||
if (this.isMobileDevice()) {
|
||||
this.toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
||||
} else {
|
||||
this.toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
||||
}
|
||||
},
|
||||
highlightNavItem(item) {
|
||||
item.classList.add('animate-pulse');
|
||||
|
||||
setTimeout(() => {
|
||||
item.classList.remove('animate-pulse');
|
||||
}, 4000);
|
||||
},
|
||||
openMobileNavMenu() {
|
||||
const openMobileNavBtn = document.getElementById('open-mobile-btn');
|
||||
openMobileNavBtn.click();
|
||||
},
|
||||
toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
||||
this.openMobileNavMenu()
|
||||
const mobileNavElement = document.getElementById('open-mobile-nav');
|
||||
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + mainSectionBreadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + mainSectionBreadcrumb.data.slug);
|
||||
if (!sectionNavBlock.classList.contains('active')) {
|
||||
sectionNavBlockBtn.click()
|
||||
}
|
||||
const subSectionNavBlock = mobileNavElement.querySelector('#nav-sub-section-accordion-' + breadcrumb.data.slug);
|
||||
const subSectionNavBlockBtn = mobileNavElement.querySelector('#nav-sub-section-accordion-btn-' + breadcrumb.data.slug);
|
||||
if (subSectionNavBlock.classList.contains('active')) {
|
||||
subSectionNavBlockBtn.click()
|
||||
}
|
||||
|
||||
this.highlightNavItem(subSectionNavBlock)
|
||||
},
|
||||
toggleMobileNavSection(breadcrumb) {
|
||||
const mobileNavElement = document.getElementById('open-mobile-nav');
|
||||
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + breadcrumb.data.slug);
|
||||
if (sectionNavBlock.classList.contains('active')) {
|
||||
sectionNavBlockBtn.click()
|
||||
}
|
||||
this.openMobileNavMenu()
|
||||
|
||||
this.highlightNavItem(sectionNavBlock)
|
||||
|
||||
},
|
||||
toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
||||
const desktopNavElement = document.getElementById('desktop-nav');
|
||||
const sectionNavTitle = desktopNavElement.querySelector('#nav-sub-section-title-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + mainSectionBreadcrumb.data.slug);
|
||||
sectionNavBlockBtn.click()
|
||||
this.highlightNavItem(sectionNavTitle)
|
||||
},
|
||||
toggleDesktopNavSection(breadcrumb) {
|
||||
const desktopNavElement = document.getElementById('desktop-nav');
|
||||
const sectionNavBlock = desktopNavElement.querySelector('#nav-section-menu-' + breadcrumb.data.slug);
|
||||
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + breadcrumb.data.slug);
|
||||
sectionNavBlockBtn.click()
|
||||
// this.highlightNavItem(sectionNavBlock)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
props: {
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
pageTitle: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageSkeleton v-if="loading" />
|
||||
<div v-else>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseBuilder",
|
||||
components: {PageSkeleton},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // Флаг загрузки
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadAllComponents() {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
|
||||
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
|
||||
};
|
||||
|
||||
// Создайте массив промисов для загрузки всех компонентов
|
||||
const promises = Object.values(componentMap).map(load => load());
|
||||
|
||||
// Дождитесь завершения всех загрузок
|
||||
await Promise.all(promises);
|
||||
this.loading = false; // Установите флаг загрузки в false
|
||||
},
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
|
||||
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
blocks: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.loadAllComponents(); // Загрузить все компоненты при создании
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Найти еще
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div v-if="headerNavs.length > 0" class="sticky top-[100px] h-[calc(100vh-121px)]">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
|
||||
<ul class="styled-scrollbar max-h-[70vh] space-y-1.5 overflow-y-auto py-2 text-sm">
|
||||
<li class="anchor-li" v-for="pageNav in headerNavs" :key="pageNav.id">
|
||||
<a :class="{ 'translate-x-2 text-primaryBlue' : currentNavSection === generateSlug(pageNav.text), 'bg-transperant text-gray-600 hover:text-gray-900' : currentNavSection !== generateSlug(pageNav.text) }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
:href="'#' + generateSlug(pageNav.text)">{{ pageNav.text }}</a>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "BaseNavigateLinks",
|
||||
components: { Link },
|
||||
data() {
|
||||
return {
|
||||
currentNavSection: null,
|
||||
scrollTop: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText;
|
||||
LimitedText = text.substring(0, symbols);
|
||||
return LimitedText + "...";
|
||||
}
|
||||
return text;
|
||||
},
|
||||
generateSlug(text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: "ru",
|
||||
});
|
||||
},
|
||||
onScroll(e) {
|
||||
const windowTop = window.scrollY;
|
||||
this.scrollTop = windowTop > 100;
|
||||
|
||||
const headings = document.querySelectorAll("h2");
|
||||
const visor = document.querySelector("#visor");
|
||||
let lastVisibleHeading = null;
|
||||
|
||||
const visorRect = visor.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли визор в пределах видимости
|
||||
if (visorRect.top > window.scrollY) {
|
||||
this.currentNavSection = null;
|
||||
lastVisibleHeading = null; // Сбрасываем заголовок, если визор не виден
|
||||
return; // Выходим из функции, если визор не виден
|
||||
}
|
||||
|
||||
for (let i = 0; i < headings.length; i++) {
|
||||
const heading = headings[i];
|
||||
const rect = heading.getBoundingClientRect();
|
||||
|
||||
// Проверяем, находится ли заголовок в видимой области и касается ли он элемента visor
|
||||
if (
|
||||
rect.top >= 0 &&
|
||||
rect.bottom <= window.innerHeight &&
|
||||
rect.bottom >= visorRect.top &&
|
||||
rect.top <= visorRect.bottom
|
||||
) {
|
||||
// Проверяем, изменился ли заголовок
|
||||
if (heading !== lastVisibleHeading) {
|
||||
this.currentNavSection = heading.id;
|
||||
lastVisibleHeading = heading;
|
||||
}
|
||||
break; // Выходим из цикла, если нашли видимый заголовок
|
||||
}
|
||||
}
|
||||
},
|
||||
scrollToTop() {
|
||||
window.scrollTo(0, 0);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll);
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener("scroll", this.onScroll);
|
||||
},
|
||||
props: {
|
||||
headerNavs: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
|
||||
<div class="animate-pulse">
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "BaseSkeleton",
|
||||
components: { Link },
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Найти еще
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
|
||||
<div class="sticky top-[100px] hidden h-[calc(100vh-121px)] max-w-[20%] min-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="subSectionPages"
|
||||
class="styled-scrollbar flex h-[calc(100vh-200px)] flex-col overflow-y-scroll pr-2 pb-4">
|
||||
<div class="text-gray-1000 mb-2 text-md font-medium">{{ currentSection }}</div>
|
||||
<div class="flex gap-x-1">
|
||||
<ul class="px-0.5 last-of-type:mb-0 mb-8">
|
||||
<li v-for="page in subSectionPages.data" :key="page.id" class="my-1.5 flex">
|
||||
<a :class="{'text-white font-semibold bg-primaryBlue': isSameRoute(page.path), 'text-gray-600 hover:text-[#2C6288]': !isSameRoute(page.path) }"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'"
|
||||
class="relative duration-300 flex gap-x-1 w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">
|
||||
{{
|
||||
page.title
|
||||
}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "BaseSubSectionLinks",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
currentNavSection: null,
|
||||
scrollTop: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
isSameRoute(route) {
|
||||
if (this.$page.props.ziggy.location === this.$page.props.ziggy.url + '/' + route) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
props: {
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
currentSection: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.styled-scrollbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageSkeleton v-if="loading" />
|
||||
<div v-else>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import HeadingBlock from "@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Pages/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue";
|
||||
import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseTabBuilder",
|
||||
components: {PageSkeleton},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // Флаг загрузки
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadAllComponents() {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
|
||||
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
|
||||
};
|
||||
|
||||
// Создайте массив промисов для загрузки всех компонентов
|
||||
const promises = Object.values(componentMap).map(load => load());
|
||||
|
||||
// Дождитесь завершения всех загрузок
|
||||
await Promise.all(promises);
|
||||
this.loading = false; // Установите флаг загрузки в false
|
||||
},
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
|
||||
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.loadAllComponents(); // Загрузить все компоненты при создании
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<h1 class="text-2xl mb-10 font-bold md:text-3xl">{{ header }}</h1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "BaseTitle",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="mb-4">
|
||||
<a class="" :href="'/storage/'+ file.path" download type="button">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="min-w-[30px] min-h-[30px] bg-[#303030] flex justify-center items-center rounded-md mr-2">
|
||||
<BaseIcon :name="file.expansion" class="w-5 h-5 flex-shrink-0" />
|
||||
</div>
|
||||
<div>{{ textLimit(file.title, 70) }}</div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400">{{ file.size }}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: {BaseIcon, FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText;
|
||||
LimitedText = text.substring(0, symbols);
|
||||
return LimitedText + "...";
|
||||
}
|
||||
return text;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<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>
|
||||
<FormBuilder :blocks="form" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
|
||||
export default {
|
||||
name: "FormBlock",
|
||||
components: {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() {
|
||||
const id = this.block?.data.form || this.formId
|
||||
this.getForm(id);
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
formId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div >
|
||||
<h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "HeadingBlock",
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ImageBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="ms-4 mt-2 w-full border px-4 py-4 rounded-xl shadow-sm">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-2 py-5 sm:px-3 lg:px-4 lg:py-7 mx-auto">
|
||||
<!-- Grid -->
|
||||
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-1 shrink-0 size-7 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<div class="grow">
|
||||
<ol class="flex items-center whitespace-nowrap">
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.page }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 class="mt-1 group-hover:text-blue-600 font-semibold text-gray-700">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PageItemBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
breadcrumbs: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPage(id) {
|
||||
axios.get(route('client.widget.page.single', id))
|
||||
.then(response => {
|
||||
this.page = response.data.data.page;
|
||||
this.breadcrumbs = response.data.data.breadcrumbs;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.block.data.page)
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="group block rounded-xl overflow-hidden animate-pulse">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="w-full h-full bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
<!-- Card Blog -->
|
||||
<div class="px-0 py-10 sm:px-2 lg:py-14 mx-auto">
|
||||
<!-- Title -->
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight">Полезные ресурсы</h2>
|
||||
<p class="mt-1 text-gray-600">We've helped some great companies brand, design and get to market.</p>
|
||||
</div>
|
||||
<!-- End Title -->
|
||||
|
||||
<!-- Grid -->
|
||||
<div class="flex overflow-x-auto space-x-6 mb-10 lg:mb-14 p-4">
|
||||
<!-- Card -->
|
||||
|
||||
<a v-for="item in resource.data.content" class="group flex-shrink-0 w-64 flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" :href="item.link">
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<img v-if="item.image" class="w-full backdrop-blur-xl object-cover rounded-t-xl h-[150px]" :src="'/storage/' + item.image" alt="Blog Image">
|
||||
<div v-else :class="randomBgClass()" class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr" />
|
||||
</div>
|
||||
<div class="p-4 md:p-5">
|
||||
<p class="mt-2 text-xs uppercase text-gray-600">{{ item.model_select }}</p>
|
||||
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ item.link_text }}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
|
||||
<!-- Card -->
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
|
||||
export default {
|
||||
name: "PageResourceList",
|
||||
components: {FormBuilder, axios, Link },
|
||||
data() {
|
||||
return {
|
||||
resource: null,
|
||||
loading: true,
|
||||
colors: ['from-primaryBlue', 'from-primaryRed'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getResource(id) {
|
||||
axios.get(route('client.widget.page.resource.index', id))
|
||||
.then(response => {
|
||||
this.resource = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
});
|
||||
},
|
||||
randomBgClass() {
|
||||
return this.colors[Math.floor(Math.random() * this.colors.length)];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const id = this.block?.data.resource || this.resourceId
|
||||
this.getResource(id);
|
||||
},
|
||||
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
resourceId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-light paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ParagraphBlock",
|
||||
methods: {
|
||||
wrapTables(data) {
|
||||
if (data.type === 'paragraph' && data.data && data.data.content) {
|
||||
// Используем регулярное выражение для поиска всех таблиц
|
||||
const wrappedContent = data.data.content.replace(/<table([^>]*)>([\s\S]*?)<\/table>/g, (match, attrs, content) => {
|
||||
return `<div class="div-table"><table${attrs}>${content}</table></div>`;
|
||||
});
|
||||
|
||||
// Возвращаем новый объект с обновленным контентом
|
||||
return {
|
||||
...data,
|
||||
data: {
|
||||
...data.data,
|
||||
content: wrappedContent
|
||||
}
|
||||
};
|
||||
}
|
||||
return data; // Если тип не 'paragraph', возвращаем объект без изменений
|
||||
}
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container hr {
|
||||
@apply my-4
|
||||
}
|
||||
|
||||
.paragraph-container strong {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.div-table {
|
||||
@apply overflow-x-auto
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container table {
|
||||
@apply w-full border-collapse mt-4 mb-4 overflow-hidden; /* Ширина 100%, стыковка границ, отступы, закругленные края */
|
||||
}
|
||||
|
||||
.paragraph-container th, .paragraph-container td {
|
||||
@apply border border-gray-300 p-3 text-left; /* Границы, отступы, выравнивание текста */
|
||||
}
|
||||
|
||||
.paragraph-container th {
|
||||
@apply bg-gray-100 text-gray-800 font-semibold; /* Фон заголовка, цвет текста, жирный шрифт */
|
||||
}
|
||||
|
||||
.paragraph-container tr {
|
||||
@apply transition-colors duration-200; /* Плавный переход цветов */
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-200; /* Фон строки при наведении */
|
||||
}
|
||||
|
||||
.paragraph-container td {
|
||||
@apply text-gray-600; /* Цвет текста ячеек */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 ">
|
||||
<div class="flex items-center gap-x-4 text-nowrap">
|
||||
<img @click="toggler = !toggler" loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow overflow-x-auto">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.data.name }}
|
||||
</p>
|
||||
<template v-for="item in block.data.info">
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ item.column }}: {{ item.content }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.photo]"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "PersonBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.data.preview ? 'storage/images/' + post.data.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPost(id) {
|
||||
axios.get(route('client.widget.post.single', id), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.post = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPost(this.block.data.post);
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.preview ? 'storage/images/' + post.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="flex justify-center">
|
||||
<a :href="route('client.post.index', { category: block.data.category })" class="group inline-flex items-center gap-x-1 text-sm font-semibold text-[#1A5AAF]">
|
||||
Все новости
|
||||
<svg class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1" 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="m9 18 6-6-6-6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPosts() {
|
||||
axios.get(route('client.widget.post.index'), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.posts = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(step, index) in block.data.steps">
|
||||
<div class="flex gap-x-3">
|
||||
<div class="w-16 text-end min-w-[4rem]">
|
||||
<span class="text-xs text-gray-500">{{ block.data.step_name }} {{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
|
||||
<div class="relative z-10 size-7 flex justify-center items-center">
|
||||
<div class="size-2 rounded-full bg-primaryBlue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-w-[70%] pt-0.5 pb-8 overflow-wrap break-words">
|
||||
<h3 class="flex gap-x-1.5 font-semibold text-gray-800">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 step-content" v-html="step.content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "StepperBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.step-content a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.step-content a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
|
||||
.step-content ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.step-content ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.step-content li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-2 flex-wrap" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-for="(tab, index) in block.data.tab" type="button"
|
||||
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
:class="(activeTab === index) ? 'active' : ''"
|
||||
@click="activeTab = index"
|
||||
:id="generateSlug(tab.title) + '-item'"
|
||||
:data-hs-tab="'#' + generateSlug(tab.title)"
|
||||
aria-selected="false"
|
||||
:aria-controls="generateSlug(tab.title)" role="tab">
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<template v-for="(tab, index) in block.data.tab">
|
||||
|
||||
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
|
||||
role="tabpanel" :aria-labelledby="generateSlug(tab.title) + '-item'">
|
||||
<PageTabBuilder :blocks="tab.content" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import PageTabBuilder from "@/Components/BuilderUi/Pages/PageTabBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "TabBlock",
|
||||
components: {
|
||||
PageTabBuilder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<video class="h-full w-full rounded-lg" controls>
|
||||
<source
|
||||
:src="domainPath + '/storage/' + block.data.path"
|
||||
:type="block.data.mime"
|
||||
/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.title }}
|
||||
</figcaption>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "VideoBlock",
|
||||
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ul v-if="loading" class="mt-5 space-y-3 flex flex-col animate-pulse">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-8 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
|
||||
<div v-else class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<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">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option :value="additionalProgram.title" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.title }}</option>
|
||||
</select>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<!-- <p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>-->
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "AdditionalEducationalChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
additionalEducationalPrograms: null,
|
||||
loading: true, // Состояние загрузки
|
||||
activeProgramPage: null,
|
||||
isActiveProgramPage: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPrograms() {
|
||||
return axios.get(route('client.widget.additional.program.index'))
|
||||
.then(response => {
|
||||
this.additionalEducationalPrograms = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
},
|
||||
isAdditionalEducationalRoute() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location);
|
||||
return this.$page.props.ziggy.location === route('client.additionalEducation.show', slug);
|
||||
},
|
||||
getSlugFromUrl(url) {
|
||||
const segments = url.split('/');
|
||||
return segments[segments.length - 1];
|
||||
},
|
||||
findItemBySlug() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location)
|
||||
return this.additionalEducationalPrograms.data.find(item => item.slug === slug) || null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrograms().then(() => {
|
||||
if (this.isAdditionalEducationalRoute()) {
|
||||
this.isActiveProgramPage = true;
|
||||
this.activeProgramPage = this.findItemBySlug().title;
|
||||
}
|
||||
});
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
type="date"
|
||||
:id="block.data.name_field + '-id'"
|
||||
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
|
||||
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
|
||||
:placeholder="block.data.title_field"
|
||||
>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DateBlock",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ul v-if="loading" class="mt-5 space-y-3 flex flex-col animate-pulse">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-8 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
|
||||
<div v-else class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<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">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option :value="additionalProgram.name" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.name }}</option>
|
||||
</select>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<!-- <p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>-->
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "EducationalChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
additionalEducationalPrograms: null,
|
||||
loading: true, // Состояние загрузки
|
||||
activeProgramPage: null,
|
||||
isActiveProgramPage: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPrograms() {
|
||||
return axios.get(route('client.widget.educational.program.index'))
|
||||
.then(response => {
|
||||
this.additionalEducationalPrograms = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
},
|
||||
isAdditionalEducationalRoute() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location);
|
||||
return this.$page.props.ziggy.location === route('client.program.show', slug);
|
||||
},
|
||||
getSlugFromUrl(url) {
|
||||
const segments = url.split('/');
|
||||
return segments[segments.length - 1];
|
||||
},
|
||||
findItemBySlug() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location)
|
||||
return this.additionalEducationalPrograms.data.find(item => item.slug === slug) || null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrograms().then(() => {
|
||||
if (this.isAdditionalEducationalRoute()) {
|
||||
this.isActiveProgramPage = true;
|
||||
this.activeProgramPage = this.findItemBySlug().name;
|
||||
}
|
||||
});
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
:min="block.data.rules.min"
|
||||
:max="block.data.rules.max"
|
||||
type="email"
|
||||
:id="block.data.name_field + '-id'"
|
||||
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
|
||||
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
|
||||
:placeholder="block.data.title_field"
|
||||
>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EmailBlock",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="space-y-2">
|
||||
<div v-for="column in block.data.columns" class="flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
:name="block.data.name_field + '[]'"
|
||||
:value="column.name_field"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="column.name_field + '-id'">
|
||||
<label :for="column.name_field + '-id'" class="text-sm text-gray-500 ms-3">{{ column.title_field }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MultipleChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
:min="block.data.rules.min"
|
||||
:max="block.data.rules.max"
|
||||
type="tel"
|
||||
:id="block.data.name_field + '-id'"
|
||||
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
|
||||
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
|
||||
:placeholder="block.data.title_field"
|
||||
>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PhoneBlock",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="space-y-2">
|
||||
<div v-for="column in block.data.columns" class="flex">
|
||||
<input
|
||||
type="radio"
|
||||
:name="block.data.name_field"
|
||||
:value="column.name_field"
|
||||
name="hs-default-radio"
|
||||
class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="column.name_field + '-id'">
|
||||
<label :for="column.name_field + '-id'" class="text-sm text-gray-500 ms-2">{{ column.title_field }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SingleChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
|
||||
<div class="mt-6 grid">
|
||||
<button type="submit" class="w-full py-3 px-4 inline-flex justify-center 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-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">{{ block }}</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "SubmitBlock",
|
||||
methods: {
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<textarea
|
||||
v-model="textarea"
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
:minlength="block.data.rules.min"
|
||||
:maxlength="block.data.rules.max"
|
||||
type="text"
|
||||
:id="block.data.name_field + '-id'"
|
||||
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
|
||||
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
|
||||
:placeholder="block.data.title_field"
|
||||
/>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<p class="text-sm text-primaryBlue">{{ textarea.length }} / {{ block.data.rules.max }}</p>
|
||||
</div>
|
||||
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextAreaBlock",
|
||||
data() {
|
||||
return {
|
||||
textarea: "",
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="text"
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
:minlength="block.data.rules.min"
|
||||
:maxlength="block.data.rules.max"
|
||||
type="text"
|
||||
:id="block.data.name_field + '-id'"
|
||||
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
|
||||
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
|
||||
:placeholder="block.data.title_field"
|
||||
>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<p v-if="block.data.rules.show_length" class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextBlock",
|
||||
data() {
|
||||
return {
|
||||
text: "",
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<!-- Icon -->
|
||||
<span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
|
||||
<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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
|
||||
<path d="m9 12 2 2 4-4"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<!-- End Icon -->
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<h3 id="hs-bordered-success-style-label" class="text-gray-800 font-semibold dark:text-white">
|
||||
Успешно отправлено!
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-neutral-400">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="max-w-[85rem] py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="text-center">
|
||||
<h2 class="text-xl text-gray-800 font-bold sm:text-3xl">
|
||||
{{ blocks.data.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
|
||||
<form @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"
|
||||
/>
|
||||
<SubmitBlock :block="blocks.data.button" />
|
||||
</form>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<SuccessNotification v-if="success" :text="message" />
|
||||
</transition>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubmitBlock from "@/Components/BuilderUi/Pages/FormBlocks/SubmitBlock.vue";
|
||||
import axios from "axios";
|
||||
import SuccessNotification from "@/Components/Notifications/SuccessNotification.vue";
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "FormBuilder",
|
||||
components: {
|
||||
SuccessNotification,
|
||||
SubmitBlock,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
errors: null,
|
||||
success: false,
|
||||
message: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
text: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue'),
|
||||
phone: () => import('@/Components/BuilderUi/Pages/FormBlocks/PhoneBlock.vue'),
|
||||
email: () => import('@/Components/BuilderUi/Pages/FormBlocks/EmailBlock.vue'),
|
||||
textarea: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue'),
|
||||
multiple_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue'),
|
||||
single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
|
||||
date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue'),
|
||||
additional_education_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
|
||||
educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
|
||||
submitForm(event) {
|
||||
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>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ page.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<AppHead
|
||||
:title="seo.title"
|
||||
:description="seo.description"
|
||||
/>
|
||||
|
||||
|
||||
<div class="flex flex-col h-screen justify-between">
|
||||
@@ -41,6 +41,7 @@ import PageTitle from "@/Components/BuilderUi/Pages/PageTitle.vue";
|
||||
import PageNavigateLinks from "@/Components/BuilderUi/Pages/PageNavigateLinks.vue";
|
||||
import PageSubSectionLinks from "@/Components/BuilderUi/Pages/PageSubSectionLinks.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import AppHead from "@/Components/AppHead.vue";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -68,8 +69,12 @@ export default {
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AppHead,
|
||||
MainPageNavBar,
|
||||
PageSubSectionLinks,
|
||||
PageNavigateLinks,
|
||||
|
||||
@@ -12,11 +12,13 @@ import ClientEventSelectDate from "@/Components/ClientEventSelectDate.vue";
|
||||
import ClientEventFilter from "@/Components/ClientEventFilter.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import EventItemBreadcrumbs from "@/Components/BuilderUi/Events/EventItemBreadcrumbs.vue";
|
||||
import AppHead from "@/Components/AppHead.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AppHead,
|
||||
EventItemBreadcrumbs,
|
||||
MainPageNavBar,
|
||||
ClientEventFilter, ClientEventSelectDate,
|
||||
@@ -39,6 +41,9 @@ export default {
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -57,10 +62,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ event.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<AppHead
|
||||
:title="seo.title"
|
||||
:description="seo.description"
|
||||
/>
|
||||
|
||||
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
|
||||
<div class="flex flex-col h-screen">
|
||||
|
||||
@@ -6,11 +6,17 @@ import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import BaseTitle from "@/Components/BaseComponents/BaseBuilderUi/BaseTitle.vue";
|
||||
import BaseBuilder from "@/Components/BaseComponents/BaseBuilderUi/BaseBuilder.vue";
|
||||
import BaseBackButton from "@/Components/BaseComponents/BaseBuilderUi/BaseBackButton.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
BaseBackButton,
|
||||
BaseBuilder,
|
||||
BaseTitle,
|
||||
MainPageNavBar,
|
||||
ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
@@ -128,26 +134,14 @@ export default {
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()"
|
||||
class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500"
|
||||
href="#">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ exhibition.data.title }}
|
||||
</h1>
|
||||
<BaseBackButton title="Назад" link="client.library.exhibition.index" />
|
||||
<BaseTitle :header="exhibition.data.title" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ exhibition.data.category }}
|
||||
@@ -157,41 +151,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-for="block in blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content"
|
||||
v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url"/>
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<BaseBuilder :blocks="blocks" />
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
|
||||
@@ -6,11 +6,16 @@ import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
|
||||
import ClientFooterDown from "@/Components/ClientFooterDown.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import BaseBackButton from "@/Components/BaseComponents/BaseBuilderUi/BaseBackButton.vue";
|
||||
import BaseTitle from "@/Components/BaseComponents/BaseBuilderUi/BaseTitle.vue";
|
||||
import BaseBuilder from "@/Components/BaseComponents/BaseBuilderUi/BaseBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
BaseBuilder,
|
||||
BaseTitle, BaseBackButton,
|
||||
MainPageNavBar,
|
||||
ClientImageSlider, ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
|
||||
data() {
|
||||
@@ -54,19 +59,8 @@ export default {
|
||||
<div>
|
||||
<div class="space-y-5 md:space-y-10">
|
||||
<div class="space-y-3">
|
||||
<a onclick="history.back()"
|
||||
class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500"
|
||||
href="#">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/>
|
||||
</svg>
|
||||
Назад
|
||||
</a>
|
||||
<h1 class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ post.data.title }}
|
||||
</h1>
|
||||
<BaseBackButton title="Назад" link="client.library.exhibition.index" />
|
||||
<BaseTitle :header="post.data.title" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -83,41 +77,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template v-for="block in blocks" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content"
|
||||
v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url"/>
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<BaseBuilder :blocks="blocks" />
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
|
||||
@@ -18,10 +18,12 @@ import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import PostBreadcrumbs from "@/Components/BuilderUi/Posts/PostBreadcrumbs.vue";
|
||||
import AppHead from "@/Components/AppHead.vue";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AppHead,
|
||||
PostBreadcrumbs,
|
||||
MainPageNavBar,
|
||||
AdminIndexHeader, ClientPost, ClientPostSearch, ClientPostFilter, PostBadge,
|
||||
@@ -57,6 +59,9 @@ export default {
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -65,10 +70,11 @@ export default {
|
||||
}}
|
||||
</script>
|
||||
<template>
|
||||
<Head>
|
||||
<title>{{ post.data.title }}</title>
|
||||
<meta name="description" content="Your page description">
|
||||
</Head>
|
||||
<AppHead
|
||||
:title="seo.title"
|
||||
:description="seo.description"
|
||||
/>
|
||||
|
||||
<ClientScrollTimeline/>
|
||||
|
||||
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
|
||||
|
||||
@@ -18,11 +18,13 @@ import AdditionalEducationProgramItemBreadcrumbs
|
||||
import ProgramTitle from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramTitle.vue";
|
||||
import ProgramBuilder from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBuilder.vue";
|
||||
import ProgramBackButton from "@/Components/BuilderUi/Programs/ProgramBackButton.vue";
|
||||
import BaseBuilder from "@/Components/BaseComponents/BaseBuilderUi/BaseBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
BaseBuilder,
|
||||
ProgramBackButton, ProgramBuilder, ProgramTitle, AdditionalEducationProgramItemBreadcrumbs,
|
||||
ProgramItemBreadcrumbs,
|
||||
FormBlock,
|
||||
@@ -201,114 +203,7 @@ export default {
|
||||
</button>
|
||||
<div id="hs-basic-bordered-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-two">
|
||||
<div class="pb-4 px-5">
|
||||
<template v-for="block in program.data.about_program" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'" />
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<BaseBuilder :blocks="program.data.about_program" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -326,114 +221,7 @@ export default {
|
||||
</button>
|
||||
<div id="hs-basic-bordered-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-three">
|
||||
<div class="pb-4 px-5">
|
||||
<template v-for="block in program.data.program_features" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'" />
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<BaseBuilder :blocks="program.data.program_features" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<Head>
|
||||
<title>Главная</title>
|
||||
<meta name="description" content="Your page description">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta property="og:title" content="Заголовок страницы">
|
||||
<meta property="og:description" content="Описание страницы">
|
||||
<meta property="og:image" content="URL_изображения">
|
||||
</Head>
|
||||
<AppHead
|
||||
:title="seo.title"
|
||||
:description="seo.description"
|
||||
/>
|
||||
<MainPageNavBar :sections="$page.props.navigation" :slider-ref="sliderRef" />
|
||||
<ClientMainSlider @slider-mounted="setSliderRef" :slidersCarousel="sliders" />
|
||||
<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
|
||||
@@ -243,6 +239,7 @@ import ClientPost from "@/Components/ClientPost.vue";
|
||||
import LevelEducational from "../Enum/LevelEducational.js";
|
||||
import BaseMetaHead from "@/Components/BaseComponents/BaseMetaHead.vue";
|
||||
import PageResourceList from "@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue";
|
||||
import AppHead from "@/Components/AppHead.vue";
|
||||
|
||||
|
||||
|
||||
@@ -274,10 +271,14 @@ export default {
|
||||
},
|
||||
icons: {
|
||||
type: String,
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AppHead,
|
||||
PageResourceList,
|
||||
BaseMetaHead,
|
||||
ClientPost,
|
||||
|
||||
+1
-2
@@ -7,10 +7,9 @@ import { createInertiaApp } from '@inertiajs/vue3';
|
||||
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
|
||||
import {linksReform} from "@/mixins/LinksReform.js";
|
||||
|
||||
const appName = import.meta.env.VITE_APP_NAME || 'НТГСПИ';
|
||||
// const appName = import.meta.env.VITE_APP_NAME || 'НТГСПИ';
|
||||
|
||||
createInertiaApp({
|
||||
title: (title) => `${title} - ${appName}`,
|
||||
resolve: name => {
|
||||
const pages = import.meta.glob('./Pages/**/*.vue')
|
||||
return pages[`./Pages/${name}.vue`]()
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
{{-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--}}
|
||||
|
||||
<title inertia>{{ config('app.name', 'Laravel') }}</title>
|
||||
{{-- <title inertia>{{ config('app.name', 'Laravel') }}</title>--}}
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
|
||||
Reference in New Issue
Block a user