обновлена форма добавления клиентов: сделан выбор нескольких жк

app/Modules/ClientCreateForm/Http/Livewire/ClientCreateLivewire.php

@@ -161,6 +161,10 @@ public function addPhoneForCurrentContact()
             $this->contacts[$this->currentContactIndex]['phones'][] = '';
         }
     }
+
+    public function removeObject($complexId) {
+        unset($this->selectedObjects[$complexId]);
+    }
     public function updated($propertyName)
     {
         $this->status = FormStatus::IN_PROCESS;

app/Modules/ClientCreateForm/Views/livewire/form.blade.php

@@ -1,8 +1,8 @@
 <?php
 use Modules\ClientCreateForm\Http\Livewire\FormStatus;
 ?>
-<div class="flex-fill">
+<div class="flex-fill clients-form__container" style="position:relative">
-    <div class="w-100 text-center" wire:loading wire:target="save, resetData, back">
+    <div class="loading-spinner rounded-4 align-items-center d-none d-flex justify-content-center position-absolute" wire:loading.class.remove="d-none">
         <div class="spinner-border " style="width: 4rem; height: 4rem;" role="status">
             <span class="visually-hidden">Загрузка формы...</span>
         </div>
@@ -23,7 +23,7 @@
     @endif
 
     @if($availableAgents && $complexes)
-        <div class="w-100" wire:loading.remove wire:target="save, resetData, back">
+        <div class="w-100" wire:loading.class="form-loading">
             @if ($status == FormStatus::NEW || $status == FormStatus::IN_PROCESS || $status == FormStatus::READY)
                 <ul class="nav nav-tabs border-0 pb-0">
                     @foreach ($contacts as $contactIndex => $contactItem)
@@ -61,7 +61,7 @@ class="bi bi-person-fill-add mt-1" viewBox="0 0 16 16">
                         <div class="row mx-2 g-2">
                             <div class="col-12 col-xl-6">
                                 <div class="form-floating mb-3 m-xl-0">
-                                    <input wire:model.live="contacts.{{ $currentContactIndex }}.firstName"
+                                    <input wire:model.blur="contacts.{{ $currentContactIndex }}.firstName"
                                         id="contacts.{{ $currentContactIndex }}.firstName" type="text"
                                         class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.firstName') is-invalid @enderror"
                                         name="contacts.{{ $currentContactIndex }}.firstName" required
@@ -76,7 +76,7 @@ class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.firs
                             </div>
                             <div class="col-12 col-xl-6">
                                 <div class="form-floating mb-3 m-xl-0">
-                                    <input wire:model.live="contacts.{{ $currentContactIndex }}.secondName"
+                                    <input wire:model.blur="contacts.{{ $currentContactIndex }}.secondName"
                                         id="contacts.{{ $currentContactIndex }}.secondName" type="text"
                                         class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.secondName') is-invalid @enderror"
                                         name="contacts.{{ $currentContactIndex }}.secondName" required
@@ -93,7 +93,7 @@ class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.seco
                             @foreach ($contacts[$currentContactIndex]['phones'] as $phoneKey => $phone)
                                 <div class="col-12 hstack gap-2">
                                     <div class="form-floating me-auto w-100">
-                                        <input wire:model.live="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}"
+                                        <input wire:model.blur="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}"
                                             id="contacts.{{ $currentContactIndex }}.phones.{{ $phoneKey }}" type="text"
                                             data-phone-pattern
                                             class="form-control rounded-4 @error('contacts.' . $currentContactIndex . '.phones.' . $phoneKey) is-invalid @enderror"
@@ -144,9 +144,29 @@ class="bi bi-plus-circle" viewBox="0 0 16 16">
                         </div>
                     </div>
                 </div>
-                <div class="btn-group w-100">
+                <div class="btn-group btn-secondary w-100 d-flex rounded-4">
-                    <button class="btn btn-light d-flex justify-content-between rounded-4 p-3 align-items-center dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                    <button type="button" class="btn btn-light border overflow-hidden w-100 rounded-start-4">
-                        Выберите жилой комплекс
+                        @if(count($selectedObjects)) 
+                            <div class="d-flex gap-2 row-fade overflow-hidden">
+                            @foreach($selectedObjects as $selectedComplexId=>$object)
+                                @foreach ($complexes as $complex)
+                                    @if($complex['id'] == $selectedComplexId)
+                                        <div class="border rounded text-nowrap d-flex bg-light ">
+                                            <span class="ps-2 pt-2 pb-2 text-truncate">{{ $complex['name'] }}</span>
+                                            <span wire:click="removeObject({{ $complex['id'] }})" class="btn btn-light btn-sm m-1">
+                                                <i class="bi bi-x-lg"></i>
+                                            </span>
+                                        </div>
+                                    @endif
+                                @endforeach
+                            @endforeach
+                            </div>
+                        @else
+                            <div class="m-2">Выберите жилой комплекс</div>
+                        @endif
+                    </button>
+                    <button type="button" style="width:30px" class="btn btn-secondary dropdown-toggle dropdown-toggle-split " data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+                        <span class="visually-hidden">Toggle Dropdown</span>
                     </button>
                     <ul class="dropdown-menu">
                         @foreach ($complexes as $complex)
@@ -161,17 +181,20 @@ class="bi bi-plus-circle" viewBox="0 0 16 16">
                         @endforeach
                     </ul>
                 </div>
+                
                 @if(count($selectedObjects))
-                    <div class="d-flex flex-column gap-2 rounded-bottom-4 p-2" style="padding-top:25px!important;margin-top:-20px;background-color: #ffffff3b;">
+                    <div class="d-flex flex-column gap-2 rounded-bottom-4 p-2 border" style="padding-top:25px!important;margin-top:-20px;background-color: #ffffff3b;">
                     @foreach($selectedObjects as $selectedComplexId=>$object)
                         @if(ComplexHasPlan7ApiData($selectedComplexId))
                         <div class="px-2 py-1 bg-light border border-1 rounded-4 bg-light">    
-                            <label for="complexId">Помещение в ЖК 
+                            <label for="complexId">
+                                <small>Помещение в ЖК 
                                 @foreach ($complexes as $complex)
                                     @if($complex['id'] == $selectedComplexId)
                                         {{ $complex['name'] }}
                                     @endif
                                 @endforeach
+                                </small>
                             </label>
                             <div>
                                 @livewire('plan7Selector', [

resources/css/form.css

@@ -0,0 +1,46 @@
+ .clients-form__container {
+     .form-wrap {
+         position: relative;
+         min-height: 350px;
+         max-height: 600px;
+         overflow: visible;
+
+     }
+
+     .form-wrap__inner {
+         position: absolute;
+         top: 0;
+         left: 0;
+         right: 0;
+         min-height: 100%;
+
+     }
+
+     .form-loading {
+         filter: blur(2px);
+     }
+
+     .loading-spinner {
+         position: absolute;
+         top: 0;
+         height: calc(100% + 10px);
+         width: calc(100% + 10px);
+         margin: -5px;
+         box-shadow: 0 0 5px #08080854;
+         background-color: #08080854;
+         z-index: 3;
+     }
+
+     .row-fade::after {
+         content: "";
+         position: absolute;
+         top: 0;
+         right: 0;
+         width: 60px;
+         height: calc(100% + 2px);
+         pointer-events: none;
+         background: linear-gradient(to right, transparent, #fff);
+         margin: -1px;
+         filter: blur(1px);
+     }
+ }

resources/views/layouts/app.blade.php

@@ -13,7 +13,7 @@
     <!-- Fonts -->
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/multiselect.js', 'resources/js/zoomable.js', 'resources/css/app.css', 'resources/css/docs.css', 'resources/css/plan7.css', 'resources/css/zoomable.css', 'resources/css/multiselect.css'])
+    @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/multiselect.js', 'resources/js/zoomable.js', 'resources/css/app.css', 'resources/css/form.css', 'resources/css/docs.css', 'resources/css/plan7.css', 'resources/css/zoomable.css', 'resources/css/multiselect.css'])
     @include('layouts.design')
     <script src="https://plan7.ru/catalog/exp/cat.js"></script>
 </head>

resources/views/user/dashboard.blade.php

@@ -58,22 +58,7 @@ class="btn list-group-item list-group-item-action p-3 bg-white rounded border bo
         @endif
     </div>
     <style>
-        .form-wrap {
-            position: relative;
-            min-height:350px;
-            max-height: 600px;
-            overflow: visible; /* чтобы нижняя часть могла выйти наружу */
         
-        }
-
-            .form-wrap__inner {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                min-height: 100%;
-                
-            }
     </style>
     <div class="mt-3">
         <div class="d-flex">

vite.config.js

@@ -10,6 +10,7 @@ export default defineConfig({
                 'resources/js/multiselect.js',
                 'resources/js/zoomable.js',
                 'resources/css/app.css',
+                'resources/css/form.css',
                 'resources/css/zoomable.css',
                 'resources/css/plan7.css',
                 'resources/css/docs.css',