feat: formulário para adição de clientes.
This commit is contained in:
lukibeg
parent
bb782575fa
commit
74ba08dd96
|
|
@ -1,38 +1,31 @@
|
|||
<div x-data="{ showModal: @entangle('showModal') }"
|
||||
x-cloak
|
||||
@keydown.escape.window="showModal = false"
|
||||
<div x-data="{ showClientModal: false }" x-cloak @keydown.escape.window="showClientModal = false"
|
||||
x-on:open-add-client.window="showClientModal = true" x-on:client-added.window="showClientModal = false"
|
||||
class="relative z-50">
|
||||
|
||||
<div x-show="showModal"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
|
||||
<div x-show="showClientModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-25" x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-0" x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-white/50 transition-opacity"></div>
|
||||
|
||||
<div x-show="showModal"
|
||||
x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
|
||||
x-transition:enter-start="translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
<div x-show="showClientModal" x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
|
||||
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="translate-x-full"
|
||||
class="fixed inset-y-0 right-0 flex max-w-full pl-10"
|
||||
@click.away="showModal = false"> <div class="w-screen max-w-3xl">
|
||||
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
||||
class="fixed inset-y-0 right-0 flex max-w-full pl-10" @click.away="showClientModal = false">
|
||||
<div class="w-screen max-w-3xl">
|
||||
|
||||
<form wire:submit="save" class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
|
||||
|
||||
<div class="bg-blue-600 px-4 py-6 sm:px-6">
|
||||
<div class="bg-white px-4 py-6 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold leading-6 text-white" id="slide-over-title">
|
||||
<h2 class="text-lg font-semibold leading-6 text-black" id="slide-over-title">
|
||||
Adicionar Novo Cliente
|
||||
</h2>
|
||||
<button type="button" @click="showModal = false"
|
||||
class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<button type="button" @click="showClientModal = false"
|
||||
class="rounded-md text-blue-200 hover:text-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<span class="sr-only">Fechar painel</span>
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -49,29 +42,38 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="name" class="form-label">Nome Fantasia</label>
|
||||
<input type="text" wire:model="form.name" id="name" class="form-input">
|
||||
@error('form.name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<label for="client_name" class="form-label">Nome Fantasia *</label>
|
||||
<input type="text" wire:model="form.client_name" id="client_name"
|
||||
class="form-input">
|
||||
@error('form.client_name') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="legal_name" class="form-label">Razão Social</label>
|
||||
<input type="text" wire:model="form.legal_name" id="legal_name" class="form-input">
|
||||
@error('form.legal_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<label for="legal_name" class="form-label">Razão Social *</label>
|
||||
<input type="text" wire:model="form.legal_name" id="legal_name"
|
||||
class="form-input">
|
||||
@error('form.legal_name') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="cnpj" class="form-label">CNPJ</label>
|
||||
<label for="cnpj" class="form-label">CNPJ *</label>
|
||||
<input type="text" wire:model="form.cnpj" id="cnpj" class="form-input">
|
||||
@error('form.cnpj') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
@error('form.cnpj') <span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="profile_image_path" class="form-label">Logo do Cliente</label>
|
||||
<input type="file" wire:model="form.profile_image_path" id="profile_image_path" class="form-file-input">
|
||||
<input type="file" wire:model="form.profile_image_path" id="profile_image_path"
|
||||
class="form-file-input">
|
||||
|
||||
<div wire:loading wire:target="form.profile_image_path" class="text-sm text-blue-600 mt-1">
|
||||
<div wire:loading wire:target="form.profile_image_path"
|
||||
class="text-sm text-blue-600 mt-1">
|
||||
Enviando...
|
||||
</div>
|
||||
@error('form.profile_image_path') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
@error('form.profile_image_path') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -82,11 +84,13 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="pbx_hosting" class="form-label">Hospedagem PBX</label>
|
||||
<input type="text" wire:model="form.pbx_hosting" id="pbx_hosting" class="form-input" placeholder="Ex: Vultr, Local, AWS">
|
||||
<input type="text" wire:model="form.pbx_hosting" id="pbx_hosting"
|
||||
class="form-input" placeholder="Ex: Vultr, Local, AWS">
|
||||
</div>
|
||||
<div>
|
||||
<label for="activation_date" class="form-label">Data de Ativação</label>
|
||||
<input type="date" wire:model="form.activation_date" id="activation_date" class="form-input">
|
||||
<input type="date" wire:model="form.activation_date" id="activation_date"
|
||||
class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label for="carrier" class="form-label">Operadora</label>
|
||||
|
|
@ -94,16 +98,20 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
</div>
|
||||
<div>
|
||||
<label for="access_type" class="form-label">Tipo de Acesso</label>
|
||||
<input type="text" wire:model="form.access_type" id="access_type" class.="form-input" placeholder="Ex: SSH, AnyDesk, VPN">
|
||||
<input type="text" wire:model="form.access_type" id="access_type"
|
||||
class.="form-input" placeholder="Ex: SSH, AnyDesk, VPN">
|
||||
</div>
|
||||
<div>
|
||||
<label for="server_ip" class="form-label">IP do Servidor</label>
|
||||
<input type="text" wire:model="form.server_ip" id="server_ip" class="form-input">
|
||||
@error('form.server_ip') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<input type="text" wire:model="form.server_ip" id="server_ip"
|
||||
class="form-input">
|
||||
@error('form.server_ip') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="root_password" class="form-label">Senha (root)</label>
|
||||
<input type="password" wire:model="form.root_password" id="root_password" class="form-input">
|
||||
<input type="password" wire:model="form.root_password" id="root_password"
|
||||
class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,25 +123,31 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="whatsapp_number" class="form-label">Número do WhatsApp</label>
|
||||
<input type="text" wire:model="form.whatsapp_number" id="whatsapp_number" class="form-input">
|
||||
<input type="text" wire:model="form.whatsapp_number" id="whatsapp_number"
|
||||
class="form-input">
|
||||
</div>
|
||||
<div>
|
||||
<label for="whatsapp_activation_date" class="form-label">Data Ativação WhatsApp</label>
|
||||
<input type="date" wire:model="form.whatsapp_activation_date" id="whatsapp_activation_date" class="form-input">
|
||||
<label for="whatsapp_activation_date" class="form-label">Data Ativação
|
||||
WhatsApp</label>
|
||||
<input type="date" wire:model="form.whatsapp_activation_date"
|
||||
id="whatsapp_activation_date" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <div class="form-sidebar-column">
|
||||
</div>
|
||||
<div class="form-sidebar-column">
|
||||
<div class="form-sticky-sidebar-modal">
|
||||
<div class="form-section-card">
|
||||
<h2 class="form-section-title">Módulos & Recursos</h2>
|
||||
<div class="form-checkbox-group">
|
||||
<label class="form-checkbox-item">
|
||||
<input type="checkbox" wire:model="form.has_call_center" class="form-checkbox">
|
||||
<input type="checkbox" wire:model="form.has_call_center"
|
||||
class="form-checkbox">
|
||||
<span>Possui Call Center?</span>
|
||||
</label>
|
||||
<label class="form-checkbox-item">
|
||||
<input type="checkbox" wire:model="form.has_voice_gateway" class="form-checkbox">
|
||||
<input type="checkbox" wire:model="form.has_voice_gateway"
|
||||
class="form-checkbox">
|
||||
<span>Possui Gateway de Voz?</span>
|
||||
</label>
|
||||
<label class="form-checkbox-item">
|
||||
|
|
@ -143,22 +157,29 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="modules" class="form-label">Módulos Adicionais (JSON)</label>
|
||||
<textarea wire:model="form.modules" id="modules" rows="3" class="form-input" placeholder="Ex: {"bi": true}"></textarea>
|
||||
@error('form.modules') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<textarea wire:model="form.modules" id="modules" rows="3" class="form-input"
|
||||
placeholder="Ex: {"bi": true}"></textarea>
|
||||
@error('form.modules') <span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> </div> </div> <div class="flex-shrink-0 border-t border-gray-200 px-4 py-4 sm:px-6">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 border-t border-gray-200 px-4 py-4 sm:px-6">
|
||||
<div class="flex justify-end space-x-3">
|
||||
|
||||
<button type="button" @click="showModal = false" class="form-button-secondary">
|
||||
<button type="button" @click="showClientModal = false" class="form-button-secondary">
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
<button type="submit" class="form-button-primary">
|
||||
Salvar Cliente
|
||||
|
||||
<div wire:loading wire:target="save" class="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
|
||||
<div wire:loading wire:target="save"
|
||||
class="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent">
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -166,4 +187,6 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue