ADD delivery calendar public files

app/Filament/Pages/CalendarTest.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Filament\Pages;
+
+use App\Models\ProfitCenter;
+use App\Models\ProfitCenterSupplierSchedule;
+use App\Models\Supplier;
+use Filament\Pages\Page;
+
+class CalendarTest extends Page
+{
+    protected static string | \BackedEnum | null $navigationIcon = 'heroicon-o-calendar';
+
+    protected string $view = 'filament.pages.calendar-test';
+
+    protected static ?string $title = 'Naptár Teszt';
+
+    protected static bool $shouldRegisterNavigation = false;
+
+    public ?int $supplierId = null;
+
+    public ?int $profitCenterId = null;
+
+    public function mount(): void
+    {
+        $first = ProfitCenterSupplierSchedule::first();
+
+        if ($first) {
+            $this->supplierId = $first->supplier_id;
+            $this->profitCenterId = $first->profit_center_id;
+        }
+    }
+
+    public function getSuppliers(): array
+    {
+        return Supplier::orderBy('name')->pluck('name', 'id')->toArray();
+    }
+
+    public function getProfitCenters(): array
+    {
+        if (!$this->supplierId) {
+            return ProfitCenter::orderBy('name')->pluck('name', 'id')->toArray();
+        }
+
+        $pcIds = ProfitCenterSupplierSchedule::where('supplier_id', $this->supplierId)
+            ->pluck('profit_center_id');
+
+        return ProfitCenter::whereIn('id', $pcIds)->orderBy('name')->pluck('name', 'id')->toArray();
+    }
+
+    public function updatedSupplierId(): void
+    {
+        $this->profitCenterId = null;
+
+        $first = ProfitCenterSupplierSchedule::where('supplier_id', $this->supplierId)->first();
+
+        if ($first) {
+            $this->profitCenterId = $first->profit_center_id;
+        }
+
+        $this->dispatch('calendar-filter-changed', supplierId: $this->supplierId, profitCenterId: $this->profitCenterId);
+    }
+
+    public function updatedProfitCenterId(): void
+    {
+        $this->dispatch('calendar-filter-changed', supplierId: $this->supplierId, profitCenterId: $this->profitCenterId);
+    }
+
+}

public/js/guava/calendar/components/calendar-context-menu.js

@@ -0,0 +1,6 @@
+function d({getContextMenuActionsUsing:o}){return{open:!1,size:{width:0,height:0},position:{x:0,y:0},mountData:{},context:null,actions:[],isLoading:!1,onCloseCallback:null,menu:{"x-show"(){return this.open},"x-bind:style"(){return`
+                    position: absolute;
+                    z-index: 40;
+                    top: ${this.position.y}px;
+                    left: ${this.position.x}px;
+                `},"x-on:click.away"(){this.closeMenu()}},init:async function(){let t=this.$el.querySelector('[x-bind="menu"]');this.size={width:t.offsetWidth,height:t.offsetHeight},this.$el.addEventListener("calendar--open-menu",e=>this.openMenu(e))},loadActions:async function(t,e={}){this.isLoading=!0,this.actions=[],o(t,e).then(n=>{this.actions=n}).finally(()=>this.isLoading=!1)},openMenu:async function(t,e=null){this.$nextTick(()=>{let n=t.clientX,i=t.clientY,s=t.pageX,c=t.pageY,a=n+this.size.width>window.innerWidth?n+this.size.width-window.innerWidth:0,h=i+this.size.height>window.innerHeight?i+this.size.height-window.innerHeight:0;if(this.position.x=s-a,this.position.y=c-h,this.open=!0,e){let l=e.getAttribute("data-event-id");document.querySelectorAll(`.ec-event[data-event-id="${l}"]`).forEach(u=>u.classList.add("gu-context-menu-open"))}})},closeMenu:function(){this.open=!1,document.querySelectorAll(".ec-event.gu-context-menu-open").forEach(t=>t.classList.remove("gu-context-menu-open")),this.onCloseCallback&&this.onCloseCallback()}}}export{d as default};

public/js/guava/calendar/components/calendar-event.js

@@ -0,0 +1 @@
+function o({event:t,timeText:r,view:d,hasContextMenu:n}){return{event:t,contextMenu:null,init:function(){n&&this.initializeContextMenu(),this.$el.setAttribute("data-event-id",t.id),this.$el.addEventListener("mouseenter",()=>{document.querySelectorAll(`.ec-event[data-event-id="${t.id}"]`).forEach(e=>{e.classList.add("gu-hover")})}),this.$el.addEventListener("mouseleave",()=>{document.querySelectorAll(`.ec-event[data-event-id="${t.id}"]`).forEach(e=>{e.classList.remove("gu-hover")})})},initializeContextMenu:function(){let e=document.querySelector("[calendar-context-menu]");this.contextMenu=Alpine.$data(e)},onClick:function(e){if(e.event.extendedProps.url){window.open(this.event.extendedProps.url,this.event.extendedProps.url_target??"_blank");return}let i={event:e.event,view:e.view,tzOffset:-new Date().getTimezoneOffset()};if(n){this.contextMenu.loadActions("eventClick",i),this.contextMenu.openMenu(e.jsEvent,this.$el);return}this.$wire.onEventClickJs(i)}}}export{o as default};

public/js/guava/calendar/components/calendar.js

@@ -0,0 +1,6 @@
+function M({view:c="dayGridMonth",locale:v="en",firstDay:f=1,dayMaxEvents:w=!1,eventContent:l=null,eventClickEnabled:m=!1,eventDragEnabled:i=!1,eventResizeEnabled:d=!1,noEventsClickEnabled:h=!1,dateClickEnabled:D=!1,dateSelectEnabled:u=!1,datesSetEnabled:E=!1,viewDidMountEnabled:O=!1,eventAllUpdatedEnabled:S=!1,hasDateClickContextMenu:p=null,hasDateSelectContextMenu:z=null,hasEventClickContextMenu:g=null,hasNoEventsClickContextMenu:x=null,resources:$=null,resourceLabelContent:r=null,theme:o=null,options:C={},eventAssetUrl:y}){return{init:function(){let n=this.mountCalendar();window.addEventListener("calendar--refresh",()=>{n.refetchEvents()}),this.$wire.on("calendar--set",e=>{n.setOption(e.key,e.value)})},mountCalendar:function(){return EventCalendar.create(this.$el.querySelector("[data-calendar]"),this.getSettings())},getSettings:function(){let n={view:c,locale:v,firstDay:f,dayMaxEvents:w,eventSources:[{events:e=>this.$wire.getEventsJs({...e,tzOffset:-new Date().getTimezoneOffset()})}],resources:$,selectable:u,eventStartEditable:i,eventDurationEditable:d};return l!==null&&(n.eventContent=e=>{let t=e.event.extendedProps.model,s=l[t]??l._default;if(s!==void 0)return{html:s}}),r!==null&&(n.resourceLabelContent=e=>{let t=e.resource.extendedProps.model,s=r[t]??r._default;if(s!==void 0)return{html:this.wrapContent(s,e)}}),D&&(n.dateClick=e=>{let t={date:e.date,dateStr:e.dateStr,allDay:e.allDay,view:e.view,resource:e.resource,tzOffset:-new Date().getTimezoneOffset()};p?this.openContextMenu(e.jsEvent,t,"dateClick"):this.$wire.onDateClickJs(t)}),u&&(n.select=e=>{let t={start:e.start,startStr:e.startStr,end:e.end,endStr:e.endStr,allDay:e.allDay,view:e.view,resource:e.resource,tzOffset:-new Date().getTimezoneOffset()};z?this.openContextMenu(e.jsEvent,t,"dateSelect"):this.$wire.onDateSelectJs(t)}),E&&(n.datesSet=e=>{this.$wire.onDatesSetJs({start:e.start,startStr:e.startStr,end:e.end,endStr:e.endStr,view:e.view,tzOffset:-new Date().getTimezoneOffset()})}),m&&(n.eventClick=e=>{Alpine.$data(e.el).onClick(e)}),n.eventResize=async e=>{let t=e.event.durationEditable,s=d;t!==void 0&&(s=t),s&&await this.$wire.onEventResizeJs({event:e.event,oldEvent:e.oldEvent,endDelta:e.endDelta,view:e.view,tzOffset:-new Date().getTimezoneOffset()}).then(a=>{a===!1&&e.revert()})},n.eventDrop=async e=>{let t=e.event.startEditable,s=i;t!==void 0&&(s=t),s&&await this.$wire.onEventDropJs({event:e.event,oldEvent:e.oldEvent,oldResource:e.oldResource,newResource:e.newResource,delta:e.delta,view:e.view,tzOffset:-new Date().getTimezoneOffset()}).then(a=>{a===!1&&e.revert()})},n.eventDidMount=e=>{e.el.setAttribute("x-load"),e.el.setAttribute("x-load-src",y),e.el.setAttribute("x-data",`calendarEvent({
+                    event: ${JSON.stringify(e.event)},
+                    timeText: "${e.timeText}",
+                    view: ${JSON.stringify(e.view)},
+                    hasContextMenu: ${g},
+                })`)},h&&(n.noEventsClick=e=>{let t={view:e.view,tzOffset:-new Date().getTimezoneOffset()};x?this.openContextMenu(e.jsEvent,t,"noEventsClick"):this.$wire.onNoEventsClickJs(t)}),O&&(n.viewDidMount=e=>{this.$wire.onViewDidMountJs({view:e.view,tzOffset:-new Date().getTimezoneOffset()})}),S&&(n.eventAllUpdated=e=>{this.$wire.onEventAllUpdatedJs({view:e.view,tzOffset:-new Date().getTimezoneOffset()})}),o&&(n.theme=function(e){return{...e,...o}}),{...n,...C}},wrapContent:function(n,e){let t=document.createElement("div");return t.innerHTML=n,t.setAttribute("x-data",JSON.stringify(e)),t.classList.add("w-full"),t.outerHTML},openContextMenu:function(n,e,t){let s=document.querySelector("[calendar-context-menu]"),a=Alpine.$data(s);a.loadActions(t,e),a.openMenu(n)}}}export{M as default};

resources/views/filament/pages/calendar-test.blade.php

@@ -0,0 +1,163 @@
+<x-filament-panels::page>
+    {{-- Szűrő panel --}}
+    <div class="mb-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+                <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Beszállító
+                </label>
+                <select
+                    wire:model.live="supplierId"
+                    class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                >
+                    <option value="">— Válasszon beszállítót —</option>
+                    @foreach ($this->getSuppliers() as $id => $name)
+                        <option value="{{ $id }}" @selected($supplierId == $id)>{{ $name }}</option>
+                    @endforeach
+                </select>
+            </div>
+            <div>
+                <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Profitcenter
+                </label>
+                <select
+                    wire:model.live="profitCenterId"
+                    class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                >
+                    <option value="">— Válasszon profitcentert —</option>
+                    @foreach ($this->getProfitCenters() as $id => $name)
+                        <option value="{{ $id }}" @selected($profitCenterId == $id)>{{ $name }}</option>
+                    @endforeach
+                </select>
+            </div>
+        </div>
+    </div>
+
+    {{-- Jelmagyarázat --}}
+    <div class="mb-4 flex flex-wrap items-center gap-4 text-sm">
+        <span class="font-semibold text-gray-700 dark:text-gray-300">Jelmagyarázat:</span>
+        <span class="inline-flex items-center gap-1.5">
+            <span class="inline-block w-4 h-4 rounded" style="background-color: #4CAF50;"></span>
+            Szállítási nap
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+            <span class="inline-block w-4 h-4 rounded" style="background-color: #EF4444;"></span>
+            Ünnepnap
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+            <span class="inline-block w-4 h-4 rounded" style="background-color: #F59E0B;"></span>
+            Áthelyezett munkanap
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+            <span class="inline-block w-4 h-4 rounded" style="background-color: #3B82F6;"></span>
+            Megrendelési határidő
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+            <span class="inline-block w-4 h-4 rounded" style="background-color: #E5E7EB;"></span>
+            Hétvége (inaktív)
+        </span>
+    </div>
+
+    {{-- Naptár widget spinner overlay-jel --}}
+    <div class="relative"
+         x-data="{ loading: false }"
+         x-init="
+             window.addEventListener('filament-fullcalendar--refresh', () => { loading = true; });
+             $wire.on('calendar-events-done', () => { loading = false; });
+         ">
+        <div x-show="loading"
+             x-transition:enter="transition-opacity duration-150"
+             x-transition:leave="transition-opacity duration-300"
+             class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-white/80 dark:bg-gray-900/80"
+             style="min-height: 200px; display: none;">
+            <div class="flex flex-col items-center gap-3">
+                <svg class="h-10 w-10 animate-spin text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.84 3 7.938l3-2.647z"></path>
+                </svg>
+                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Naptár betöltése...</span>
+            </div>
+        </div>
+
+        @livewire(\App\Filament\Widgets\DeliveryCalendarWidget::class, [
+            'supplierId' => $supplierId,
+            'profitCenterId' => $profitCenterId,
+        ])
+    </div>
+
+    <style>
+        /* Kompakt multi-hónap nézet a képhez hasonlóan */
+        .filament-fullcalendar {
+            --fc-small-font-size: 0.8em;
+            --fc-page-bg-color: transparent;
+            --fc-neutral-bg-color: transparent;
+        }
+        /* Hónap fejléc */
+        .filament-fullcalendar .fc-multimonth-title {
+            font-size: 0.9rem !important;
+            font-weight: 600;
+            padding: 4px 0 !important;
+            color: #453821;
+        }
+        /* Kompaktabb cellaméretek */
+        .filament-fullcalendar .fc-multimonth .fc-daygrid-day {
+            min-height: 0 !important;
+        }
+        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-frame {
+            min-height: 24px !important;
+            padding: 1px !important;
+        }
+        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-top {
+            justify-content: center;
+        }
+        .filament-fullcalendar .fc-multimonth .fc-daygrid-day-number {
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 1px 3px !important;
+        }
+        /* Napfejléc (H, K, Sz, Cs, P, Szo, V) */
+        .filament-fullcalendar .fc-multimonth .fc-col-header-cell {
+            font-size: 0.7rem;
+            padding: 2px 0 !important;
+            font-weight: 700;
+            color: #6B7280;
+        }
+        /* Háttér események jobban kitöltik a cellát */
+        .filament-fullcalendar .fc-multimonth .fc-bg-event {
+            opacity: 0.85 !important;
+            border-radius: 3px;
+        }
+        /* Mai nap kiemelés */
+        .filament-fullcalendar .fc-day-today {
+            background-color: rgba(59, 130, 246, 0.1) !important;
+        }
+        .filament-fullcalendar .fc-day-today .fc-daygrid-day-number {
+            font-weight: 800;
+            color: #1D4ED8;
+        }
+        /* Hónapok közötti térköz csökkentése */
+        .filament-fullcalendar .fc-multimonth-month {
+            padding: 0 4px !important;
+        }
+        /* Fejléc toolbar */
+        .filament-fullcalendar .fc-toolbar {
+            margin-bottom: 0.5em !important;
+        }
+        .filament-fullcalendar .fc-toolbar-title {
+            font-size: 1rem !important;
+            color: #453821;
+        }
+        /* Szegély finomítás */
+        .filament-fullcalendar .fc-multimonth {
+            border: none !important;
+        }
+        .filament-fullcalendar .fc-multimonth-daygrid {
+            border: none !important;
+        }
+        /* Hétvége napok szürke szöveg */
+        .filament-fullcalendar .fc-day-sat .fc-daygrid-day-number,
+        .filament-fullcalendar .fc-day-sun .fc-daygrid-day-number {
+            color: #9CA3AF;
+        }
+    </style>
+</x-filament-panels::page>

test.txt

@@ -0,0 +1 @@
+hello