```
✨ feat(dashboard/contrats): Ajoute le formulaire de création de contrat
Ajoute le formulaire de création de contrat avec gestion des adresses, des détails techniques et des prestations.
```
This commit is contained in:
@@ -5,6 +5,7 @@ import TomSelect from "tom-select";
|
||||
import { RepeatLine } from "./libs/RepeatLine.js";
|
||||
import { DevisManager } from "./libs/DevisManager.js";
|
||||
import { initTomSelect } from "./libs/initTomSelect.js";
|
||||
import { SearchProduct } from "./libs/SearchProduct.js";
|
||||
// --- INITIALISATION SENTRY ---
|
||||
Sentry.init({
|
||||
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
|
||||
@@ -36,6 +37,9 @@ function initAdminLayout() {
|
||||
customElements.define('devis-manager', DevisManager, { extends: 'div' });
|
||||
}
|
||||
|
||||
if (!customElements.get('search-product')) {
|
||||
customElements.define('search-product', SearchProduct, { extends: 'button' });
|
||||
}
|
||||
// Sidebar & UI
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebar-overlay');
|
||||
|
||||
143
assets/libs/SearchProduct.js
Normal file
143
assets/libs/SearchProduct.js
Normal file
@@ -0,0 +1,143 @@
|
||||
export class SearchProduct extends HTMLButtonElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.allProducts = []; // Stockage local pour la recherche
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', () => this.openModal());
|
||||
}
|
||||
|
||||
async openModal() {
|
||||
let modal = document.getElementById('modal-search-product');
|
||||
if (!modal) {
|
||||
modal = this.createModalStructure();
|
||||
document.body.appendChild(modal);
|
||||
this.setupSearchEvent(modal);
|
||||
}
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
const container = modal.querySelector('#results-container');
|
||||
const searchInput = modal.querySelector('#modal-search-input');
|
||||
|
||||
searchInput.value = ''; // Reset recherche
|
||||
container.innerHTML = '<div class="text-white p-8 text-center animate-pulse tracking-widest text-[10px] uppercase font-black">Synchronisation catalogue...</div>';
|
||||
|
||||
try {
|
||||
const response = await fetch('/crm/products/json');
|
||||
this.allProducts = await response.json();
|
||||
this.renderProducts(this.allProducts, container, modal);
|
||||
searchInput.focus();
|
||||
} catch (error) {
|
||||
container.innerHTML = '<div class="text-red-400 p-8 text-center">Erreur catalogue.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
createModalStructure() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'modal-search-product';
|
||||
div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md hidden animate-in fade-in duration-300';
|
||||
div.innerHTML = `
|
||||
<div class="bg-slate-900 border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[3rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
|
||||
<div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
|
||||
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 animate-pulse"></span>
|
||||
Sélection Produit
|
||||
</h3>
|
||||
<button type="button" onclick="this.closest('#modal-search-product').classList.add('hidden')" class="p-2 text-slate-400 hover:text-white transition-colors">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<input type="text" id="modal-search-input" placeholder="RECHERCHER UN NOM, UNE RÉFÉRENCE..."
|
||||
class="w-full bg-slate-950/50 border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-purple-500/20 focus:border-purple-500 transition-all uppercase placeholder:text-slate-600">
|
||||
<svg class="w-5 h-5 absolute left-4 top-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="results-container" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>
|
||||
|
||||
<div class="p-4 bg-white/5 text-center">
|
||||
<p class="text-[9px] text-slate-500 font-black uppercase tracking-widest line-clamp-1">Appuyez sur Échap pour fermer</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
setupSearchEvent(modal) {
|
||||
const input = modal.querySelector('#modal-search-input');
|
||||
const container = modal.querySelector('#results-container');
|
||||
|
||||
input.oninput = () => {
|
||||
const query = input.value.toLowerCase().trim();
|
||||
const filtered = this.allProducts.filter(p =>
|
||||
p.name.toLowerCase().includes(query)
|
||||
);
|
||||
this.renderProducts(filtered, container, modal);
|
||||
};
|
||||
|
||||
// Fermeture sur Echap
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') modal.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
renderProducts(products, container, modal) {
|
||||
container.innerHTML = '';
|
||||
|
||||
if (products.length === 0) {
|
||||
container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucun produit trouvé</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
products.forEach(product => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-purple-500/10 hover:border-purple-500/40 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2';
|
||||
|
||||
const imgHtml = product.image
|
||||
? `<img src="${product.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg group-hover:scale-110 transition-transform">`
|
||||
: `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">IMG</div>`;
|
||||
|
||||
card.innerHTML = `
|
||||
${imgHtml}
|
||||
<div class="flex-grow">
|
||||
<div class="text-white font-black text-xs uppercase tracking-wider mb-1">${product.name}</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="text-purple-400 text-[10px] font-mono">1J: ${product.price1day}€</span>
|
||||
<span class="text-slate-500 text-[10px] font-mono">SUP: ${product.priceSup}€</span>
|
||||
<span class="text-amber-500/80 text-[10px] font-mono">CAUTION: ${product.caution}€</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-purple-500/0 group-hover:bg-purple-500/20 flex items-center justify-center text-purple-500 transition-all">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.onclick = () => {
|
||||
this.fillFormLine(product);
|
||||
modal.classList.add('hidden');
|
||||
};
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
fillFormLine(product) {
|
||||
const row = this.closest('.form-repeater__row');
|
||||
if (row) {
|
||||
row.querySelector('input[name*="[name]"]').value = product.name;
|
||||
row.querySelector('input[name*="[priceHt1Day]"]').value = product.price1day;
|
||||
row.querySelector('input[name*="[priceHtSupDay]"]').value = product.priceSup;
|
||||
row.querySelector('input[name*="[caution]"]').value = product.caution;
|
||||
|
||||
const fieldset = row.querySelector('fieldset');
|
||||
fieldset.classList.add('border-emerald-500/50', 'bg-emerald-500/5');
|
||||
setTimeout(() => fieldset.classList.remove('border-emerald-500/50', 'bg-emerald-500/5'), 800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
35
migrations/Version20260121151117.php
Normal file
35
migrations/Version20260121151117.php
Normal file
@@ -0,0 +1,35 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace DoctrineMigrations;
|
||||
|
||||
use Doctrine\DBAL\Schema\Schema;
|
||||
use Doctrine\Migrations\AbstractMigration;
|
||||
|
||||
/**
|
||||
* Auto-generated Migration: Please modify to your needs!
|
||||
*/
|
||||
final class Version20260121151117 extends AbstractMigration
|
||||
{
|
||||
public function getDescription(): string
|
||||
{
|
||||
return '';
|
||||
}
|
||||
|
||||
public function up(Schema $schema): void
|
||||
{
|
||||
// this up() migration is auto-generated, please modify it to your needs
|
||||
$this->addSql('CREATE TABLE contrats_line (id SERIAL NOT NULL, contrat_id INT DEFAULT NULL, name VARCHAR(255) NOT NULL, price1_day_ht DOUBLE PRECISION NOT NULL, price_sup_day_ht DOUBLE PRECISION NOT NULL, caution DOUBLE PRECISION NOT NULL, type VARCHAR(255) NOT NULL, PRIMARY KEY(id))');
|
||||
$this->addSql('CREATE INDEX IDX_61D68661823061F ON contrats_line (contrat_id)');
|
||||
$this->addSql('ALTER TABLE contrats_line ADD CONSTRAINT FK_61D68661823061F FOREIGN KEY (contrat_id) REFERENCES contrats (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
|
||||
}
|
||||
|
||||
public function down(Schema $schema): void
|
||||
{
|
||||
// this down() migration is auto-generated, please modify it to your needs
|
||||
$this->addSql('CREATE SCHEMA public');
|
||||
$this->addSql('ALTER TABLE contrats_line DROP CONSTRAINT FK_61D68661823061F');
|
||||
$this->addSql('DROP TABLE contrats_line');
|
||||
}
|
||||
}
|
||||
@@ -35,7 +35,19 @@ class ContratsController extends AbstractController
|
||||
$devis = $devisRepository->find($request->get('idDevis',0));
|
||||
|
||||
$c = new Contrats();
|
||||
$lines =[
|
||||
[
|
||||
'id' => 0,
|
||||
'name' => '',
|
||||
'priceHt1Day' => 0,
|
||||
'priceHtSupDay' => 0,
|
||||
'caution' => 0,
|
||||
]
|
||||
];
|
||||
if($devis instanceof Devis){
|
||||
$line = $devis->getDevisLines()[0];
|
||||
$c->setDateAt($line->getStartAt());
|
||||
$c->setEndAt($line->getEndAt());
|
||||
$c->setCustomer($devis->getCustomer());
|
||||
$c->setDevis($devis);
|
||||
$c->setAddressEvent($devis->getAddressShip()->getAddress());
|
||||
@@ -43,6 +55,16 @@ class ContratsController extends AbstractController
|
||||
$c->setAddress3Event($devis->getAddressShip()->getAddress3());
|
||||
$c->setZipCodeEvent($devis->getAddressShip()->getZipcode());
|
||||
$c->setTownEvent($devis->getAddressShip()->getCity());
|
||||
$lines = [];
|
||||
foreach ($devis->getDevisLines() as $line){
|
||||
$lines[] =[
|
||||
'id' => $line->getId(),
|
||||
'name' => $line->getProduct()->getName()." - ".$line->getProduct()->getRef(),
|
||||
'priceHt1Day' => $line->getPriceHt(),
|
||||
'priceHtSupDay' => $line->getPriceHtSup(),
|
||||
'caution' => $line->getProduct()->getCaution(),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
$form = $this->createForm(ContratsType::class,$c);
|
||||
@@ -53,6 +75,7 @@ class ContratsController extends AbstractController
|
||||
return $this->render('dashboard/contrats/add.twig',[
|
||||
'devis' => $devis,
|
||||
'form'=> $form->createView(),
|
||||
'lines' => $lines,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -44,6 +44,7 @@ class ProductController extends AbstractController
|
||||
'image' => $uploaderHelper->asset($product, 'imageFile'),
|
||||
'price1day' => $product->getPriceDay(),
|
||||
'priceSup' => $product->getPriceSup(),
|
||||
'caution' => $product->getCaution(),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -82,9 +82,16 @@ class Contrats
|
||||
#[ORM\Column]
|
||||
private ?\DateTimeImmutable $endAt = null;
|
||||
|
||||
/**
|
||||
* @var Collection<int, ContratsLine>
|
||||
*/
|
||||
#[ORM\OneToMany(targetEntity: ContratsLine::class, mappedBy: 'contrat')]
|
||||
private Collection $contratsLines;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->contratsPayments = new ArrayCollection();
|
||||
$this->contratsLines = new ArrayCollection();
|
||||
}
|
||||
|
||||
public function getId(): ?int
|
||||
@@ -361,4 +368,34 @@ class Contrats
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Collection<int, ContratsLine>
|
||||
*/
|
||||
public function getContratsLines(): Collection
|
||||
{
|
||||
return $this->contratsLines;
|
||||
}
|
||||
|
||||
public function addContratsLine(ContratsLine $contratsLine): static
|
||||
{
|
||||
if (!$this->contratsLines->contains($contratsLine)) {
|
||||
$this->contratsLines->add($contratsLine);
|
||||
$contratsLine->setContrat($this);
|
||||
}
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function removeContratsLine(ContratsLine $contratsLine): static
|
||||
{
|
||||
if ($this->contratsLines->removeElement($contratsLine)) {
|
||||
// set the owning side to null (unless already changed)
|
||||
if ($contratsLine->getContrat() === $this) {
|
||||
$contratsLine->setContrat(null);
|
||||
}
|
||||
}
|
||||
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
|
||||
110
src/Entity/ContratsLine.php
Normal file
110
src/Entity/ContratsLine.php
Normal file
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
|
||||
namespace App\Entity;
|
||||
|
||||
use App\Repository\ContratsLineRepository;
|
||||
use Doctrine\ORM\Mapping as ORM;
|
||||
|
||||
#[ORM\Entity(repositoryClass: ContratsLineRepository::class)]
|
||||
class ContratsLine
|
||||
{
|
||||
#[ORM\Id]
|
||||
#[ORM\GeneratedValue]
|
||||
#[ORM\Column]
|
||||
private ?int $id = null;
|
||||
|
||||
#[ORM\ManyToOne(inversedBy: 'contratsLines')]
|
||||
private ?Contrats $contrat = null;
|
||||
|
||||
#[ORM\Column(length: 255)]
|
||||
private ?string $name = null;
|
||||
|
||||
#[ORM\Column]
|
||||
private ?float $price1DayHt = null;
|
||||
|
||||
#[ORM\Column]
|
||||
private ?float $priceSupDayHt = null;
|
||||
|
||||
#[ORM\Column]
|
||||
private ?float $caution = null;
|
||||
|
||||
#[ORM\Column(length: 255)]
|
||||
private ?string $type = null;
|
||||
|
||||
public function getId(): ?int
|
||||
{
|
||||
return $this->id;
|
||||
}
|
||||
|
||||
public function getContrat(): ?Contrats
|
||||
{
|
||||
return $this->contrat;
|
||||
}
|
||||
|
||||
public function setContrat(?Contrats $contrat): static
|
||||
{
|
||||
$this->contrat = $contrat;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getName(): ?string
|
||||
{
|
||||
return $this->name;
|
||||
}
|
||||
|
||||
public function setName(string $name): static
|
||||
{
|
||||
$this->name = $name;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getPrice1DayHt(): ?float
|
||||
{
|
||||
return $this->price1DayHt;
|
||||
}
|
||||
|
||||
public function setPrice1DayHt(float $price1DayHt): static
|
||||
{
|
||||
$this->price1DayHt = $price1DayHt;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getPriceSupDayHt(): ?float
|
||||
{
|
||||
return $this->priceSupDayHt;
|
||||
}
|
||||
|
||||
public function setPriceSupDayHt(float $priceSupDayHt): static
|
||||
{
|
||||
$this->priceSupDayHt = $priceSupDayHt;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getCaution(): ?float
|
||||
{
|
||||
return $this->caution;
|
||||
}
|
||||
|
||||
public function setCaution(float $caution): static
|
||||
{
|
||||
$this->caution = $caution;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getType(): ?string
|
||||
{
|
||||
return $this->type;
|
||||
}
|
||||
|
||||
public function setType(string $type): static
|
||||
{
|
||||
$this->type = $type;
|
||||
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
43
src/Repository/ContratsLineRepository.php
Normal file
43
src/Repository/ContratsLineRepository.php
Normal file
@@ -0,0 +1,43 @@
|
||||
<?php
|
||||
|
||||
namespace App\Repository;
|
||||
|
||||
use App\Entity\ContratsLine;
|
||||
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
|
||||
use Doctrine\Persistence\ManagerRegistry;
|
||||
|
||||
/**
|
||||
* @extends ServiceEntityRepository<ContratsLine>
|
||||
*/
|
||||
class ContratsLineRepository extends ServiceEntityRepository
|
||||
{
|
||||
public function __construct(ManagerRegistry $registry)
|
||||
{
|
||||
parent::__construct($registry, ContratsLine::class);
|
||||
}
|
||||
|
||||
// /**
|
||||
// * @return ContratsLine[] Returns an array of ContratsLine objects
|
||||
// */
|
||||
// public function findByExampleField($value): array
|
||||
// {
|
||||
// return $this->createQueryBuilder('c')
|
||||
// ->andWhere('c.exampleField = :val')
|
||||
// ->setParameter('val', $value)
|
||||
// ->orderBy('c.id', 'ASC')
|
||||
// ->setMaxResults(10)
|
||||
// ->getQuery()
|
||||
// ->getResult()
|
||||
// ;
|
||||
// }
|
||||
|
||||
// public function findOneBySomeField($value): ?ContratsLine
|
||||
// {
|
||||
// return $this->createQueryBuilder('c')
|
||||
// ->andWhere('c.exampleField = :val')
|
||||
// ->setParameter('val', $value)
|
||||
// ->getQuery()
|
||||
// ->getOneOrNullResult()
|
||||
// ;
|
||||
// }
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="max-w-6xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700 pb-20">
|
||||
<div class=" mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700 pb-24">
|
||||
{{ form_start(form) }}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
@@ -43,14 +43,12 @@
|
||||
{{ form_widget(form.notes, {
|
||||
'attr': {
|
||||
'class': 'w-full bg-rose-500/5 border border-rose-500/10 rounded-2xl text-rose-100 placeholder:text-rose-500/30 focus:ring-rose-500/20 focus:border-rose-500/40 transition-all py-3.5 px-5 text-xs italic',
|
||||
'placeholder': 'Ex: Client exigeant, chien, accès compliqué...',
|
||||
'placeholder': 'Client exigeant, chien, accès compliqué...',
|
||||
'rows': '6'
|
||||
}
|
||||
}) }}
|
||||
<div class="absolute top-4 right-4 text-rose-500/30 group-hover:text-rose-500 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<div class="absolute top-4 right-4 text-rose-500/30">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,7 +59,7 @@
|
||||
{# --- BLOC 02 & 03 : ADRESSE & TECHNIQUE --- #}
|
||||
<div class="md:col-span-8 flex flex-col gap-8">
|
||||
|
||||
{# LIEU DE L'ÉVÉNEMENT #}
|
||||
{# LIEU DE L'ÉVÉNEMENT (Tous les champs d'adresse) #}
|
||||
<div class="backdrop-blur-xl bg-slate-900/40 border border-white/5 rounded-[2.5rem] p-8 shadow-2xl">
|
||||
<h3 class="text-sm font-black text-emerald-500 uppercase tracking-widest mb-8 flex items-center">
|
||||
<span class="w-6 h-6 bg-emerald-600/20 rounded-lg flex items-center justify-center mr-3 text-[10px]">02</span>
|
||||
@@ -75,11 +73,11 @@
|
||||
</div>
|
||||
<div>
|
||||
{{ form_label(form.address2Event, 'Complément d\'adresse 1', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_widget(form.address2Event, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
|
||||
{{ form_widget(form.address2Event, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5', 'placeholder': 'Bâtiment, étage...'}}) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_label(form.address3Event, 'Complément d\'adresse 2', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_widget(form.address3Event, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
|
||||
{{ form_widget(form.address3Event, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5', 'placeholder': 'Code, interphone...'}}) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_label(form.zipCodeEvent, 'Code Postal', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
@@ -90,13 +88,13 @@
|
||||
{{ form_widget(form.townEvent, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5'}}) }}
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
{{ form_label(form.details, 'Précisions de livraison', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_widget(form.details, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5', 'rows': '2'}}) }}
|
||||
{{ form_label(form.details, 'Précisions de livraison / Notes d\'accès', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_widget(form.details, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-blue-500/20 focus:border-blue-500 transition-all py-3.5 px-5', 'rows': '2', 'placeholder': 'Ex: Portail étroit, se garer dans la cour...'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# CONTRAINTES TECHNIQUES #}
|
||||
{# TECHNIQUE (Bloc 03) #}
|
||||
<div class="backdrop-blur-xl bg-slate-900/60 border border-amber-500/10 rounded-[2.5rem] p-8 shadow-2xl">
|
||||
<h3 class="text-sm font-black text-amber-500 uppercase tracking-widest mb-8 flex items-center">
|
||||
<span class="w-6 h-6 bg-amber-600/20 rounded-lg flex items-center justify-center mr-3 text-[10px]">03</span>
|
||||
@@ -116,7 +114,7 @@
|
||||
{{ form_widget(form.access, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-amber-500/20 focus:border-amber-500 transition-all py-3.5 px-5'}}) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ form_label(form.distancePower, 'Point électrique', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_label(form.distancePower, 'Distance Point électrique', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block'}}) }}
|
||||
{{ form_widget(form.distancePower, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-amber-500/20 focus:border-amber-500 transition-all py-3.5 px-5'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,31 +122,98 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- BLOC 04 : PÉRIODE DE LOCATION (Nouveau bloc Bento horizontal) --- #}
|
||||
{# --- BLOC 04 : PÉRIODE --- #}
|
||||
<div class="mt-8 backdrop-blur-xl bg-blue-600/5 border border-blue-500/10 rounded-[2.5rem] p-8 shadow-2xl">
|
||||
<h3 class="text-sm font-black text-blue-400 uppercase tracking-widest mb-8 flex items-center justify-center">
|
||||
<span class="w-6 h-6 bg-blue-600/20 rounded-lg flex items-center justify-center mr-3 text-[10px]">04</span>
|
||||
Période de location
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<div class="group">
|
||||
<div>
|
||||
{{ form_label(form.dateAt, 'Début de l\'événement', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block text-center'}}) }}
|
||||
{{ form_widget(form.dateAt, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white text-center focus:ring-blue-500/40 focus:border-blue-500 transition-all py-5 px-5 text-lg font-black'}}) }}
|
||||
{{ form_widget(form.dateAt, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white text-center focus:ring-blue-500/40 focus:border-blue-500 transition-all py-4 px-5 font-black'}}) }}
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>
|
||||
{{ form_label(form.endAt, 'Fin de l\'événement', {'label_attr': {'class': 'text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-1 mb-2 block text-center'}}) }}
|
||||
{{ form_widget(form.endAt, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white text-center focus:ring-blue-500/40 focus:border-blue-500 transition-all py-5 px-5 text-lg font-black'}}) }}
|
||||
{{ form_widget(form.endAt, {'attr': {'class': 'w-full bg-slate-950/50 border-white/5 rounded-2xl text-white text-center focus:ring-blue-500/40 focus:border-blue-500 transition-all py-4 px-5 font-black'}}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- BARRE D'ACTIONS --- #}
|
||||
<div class="mt-12 flex items-center justify-end backdrop-blur-xl bg-slate-900/40 p-6 rounded-[3rem] border border-white/5 shadow-xl">
|
||||
{# --- BLOC 05 : REPEATER PRESTATIONS --- #}
|
||||
<div class="form-repeater mt-12" data-component="repeater" is="repeat-line">
|
||||
<div class="flex items-center justify-between mb-8 px-8">
|
||||
<h3 class="text-sm font-black text-purple-500 uppercase tracking-widest flex items-center">
|
||||
<span class="w-6 h-6 bg-purple-600/20 rounded-lg flex items-center justify-center mr-3 text-[10px]">05</span>
|
||||
Détail des prestations
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<ol class="form-repeater__rows space-y-6" data-ref="rows">
|
||||
{% for key, line in lines %}
|
||||
<li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
|
||||
<input type="hidden" value="{{ line.id }}" name="lines[{{ key }}][id]">
|
||||
<fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-purple-500/30 transition-all shadow-xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-end">
|
||||
|
||||
{# 1. PRODUIT AVEC BOUTON RECHERCHE #}
|
||||
<div class="lg:col-span-4">
|
||||
<label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
|
||||
<div class="relative flex items-center">
|
||||
<input type="text" name="lines[{{ key }}][name]" value="{{ line.name }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">
|
||||
|
||||
{# BOUTON RECHERCHER #}
|
||||
<button is="search-product" type="button" class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search" title="Rechercher un produit">
|
||||
Rechercher un produit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# 2. PRIX 1J #}
|
||||
<div class="lg:col-span-2">
|
||||
<label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Prix 1J HT</label>
|
||||
<input type="text" name="lines[{{ key }}][priceHt1Day]" value="{{ line.priceHt1Day }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 px-5 text-sm font-mono">
|
||||
</div>
|
||||
|
||||
{# 3. PRIX SUP #}
|
||||
<div class="lg:col-span-2">
|
||||
<label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Prix J Sup. HT</label>
|
||||
<input type="text" name="lines[{{ key }}][priceHtSupDay]" value="{{ line.priceHtSupDay }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 px-5 text-sm font-mono">
|
||||
</div>
|
||||
|
||||
{# 4. CAUTION #}
|
||||
<div class="lg:col-span-3">
|
||||
<label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">Caution (€)</label>
|
||||
<input type="text" name="lines[{{ key }}][caution]" value="{{ line.caution }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 px-5 text-sm font-mono">
|
||||
</div>
|
||||
|
||||
{# 5. SUPPRIMER #}
|
||||
<div class="lg:col-span-1 flex justify-end">
|
||||
<button type="button" data-ref="removeButton" class="w-12 h-12 flex items-center justify-center bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-xl transition-all shadow-lg group/del">
|
||||
<svg class="w-5 h-5 group-hover/del:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
||||
<div class="mt-8 px-4">
|
||||
<button type="button" data-ref="addButton" class="w-full py-5 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-4 group">
|
||||
<span class="text-2xl group-hover:rotate-180 transition-transform duration-500">+</span>
|
||||
<span>Ajouter une prestation</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# --- BARRE D'ACTIONS FINALE --- #}
|
||||
<div class="mt-16 flex items-center justify-end backdrop-blur-xl bg-slate-900/40 p-6 rounded-[3rem] border border-white/5 shadow-xl">
|
||||
<button type="submit" class="group px-16 py-5 bg-blue-600 hover:bg-blue-500 text-white text-[11px] font-black uppercase tracking-[0.3em] rounded-[2rem] transition-all shadow-lg shadow-blue-600/30 flex items-center hover:scale-[1.02] active:scale-95">
|
||||
Valider et Créer le contrat
|
||||
<svg class="w-5 h-5 ml-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 ml-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user