- Added Category model and table migrations

- Added on day click event (enable / disable via config) - Changed internal UUID trait to HasUuids in Models - Added all day events to widget - Now only organizer can update event via dragging it - Added next / previous year buttons - Added php artisan timex:install command - Disabled forms if user is not an organizer
buildix · Dec 3, 2022 · 0391e57 · 0391e57
1 parent 4818ea5
commit 0391e57
Show file tree

Hide file tree

Showing 17 changed files with 246 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 ![timex-logo](https://user-images.githubusercontent.com/2136612/202689778-eb013a03-b0fa-4c0e-941c-7d999c09fd6f.jpeg)
 
 
-## TIMEX - calendar plugin for [filament](https://github.com/filamentphp/filament)
+## TiMEX - calendar plugin for [filament](https://github.com/filamentphp/filament)
 
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/buildix/timex.svg?style=flat-square)](https://packagist.org/packages/buildix/timex)
 [![Total Downloads](https://img.shields.io/packagist/dt/buildix/timex.svg?style=flat-square)](https://packagist.org/packages/buildix/timex)
@@ -18,6 +18,13 @@ You can install the package via composer:
 composer require buildix/timex
 ```
 
+After your fresh installation, you may install all neccessary assets via the following command:
+
+```bash
+php artisan timex:install
+```
+<hr>
+<details><summary>Publishing vendor assets</summary>
 You can publish and run the migrations with:
 
 ```bash
@@ -34,7 +41,7 @@ In your newly created migration file add the following:
 
 ```php
 Schema::create('timex-events', function ($table) {
-        $table->json("participants")->nullable;
+        $table->json("participants")->nullable();
     });
 ```
 
@@ -43,7 +50,8 @@ You can publish the config file with:
 ```bash
 php artisan vendor:publish --tag="timex-config"
 ```
-
+</details>
+<br>
 <details><summary>TiMEX Config</summary>
 <p>
 
@@ -53,7 +61,7 @@ php artisan vendor:publish --tag="timex-config"
 return [
     /*
     |--------------------------------------------------------------------------
-    | TIMEX Icon set
+    | TiMEX Icon set
     |--------------------------------------------------------------------------
     |
     | Don't change that prefix, otherwise icon set will not work.
@@ -64,7 +72,7 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | TIMEX Mini widget
+    | TiMEX Mini widget
     |--------------------------------------------------------------------------
     |
     | You can disable or enable individually widgets or entirely the whole view.
@@ -79,7 +87,7 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | TIMEX Calendar configurations
+    | TiMEX Calendar configurations
     |--------------------------------------------------------------------------
     |
     | Change according to your locale.
@@ -95,10 +103,10 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | TIMEX Resources & Pages
+    | TiMEX Resources & Pages
     |--------------------------------------------------------------------------
     |
-    | By default TIMEX out of box will work, just make sure you make migration.
+    | By default TiMEX out of box will work, just make sure you make migration.
     | But you can also make your own Model and Filament resource and update config accordingly
     |
     */
@@ -129,12 +137,15 @@ return [
             ],
         ],
         'buttons' => [
+            'hideYearNavigation' => false,
             'today' => [
                 'static' => false,
                 'format' => 'D MMM'
             ],
             'outlined' => true,
             'icons' => [
+                'previousYear' => 'heroicon-o-chevron-double-left',
+                'nextYear' => 'heroicon-o-chevron-double-right',
                 'previousMonth' => 'heroicon-o-chevron-left',
                 'nextMonth' => 'heroicon-o-chevron-right',
                 'createEvent' => 'heroicon-o-plus'
@@ -164,7 +175,7 @@ return [
 
     /*
     |--------------------------------------------------------------------------
-    | TIMEX Event categories
+    | TiMEX Event categories
     |--------------------------------------------------------------------------
     |
     | Categories names are used to define colors & icons.
@@ -223,10 +234,11 @@ return [
 
 </p>
 </details>
+<hr>
 
 ## Usage
 
-After your fresh installation, TIMEX calendar is working out of the box (make sure to run migration) and start managing your time.
+After your fresh installation, TiMEX calendar is working out of the box (make sure to run migration) and start managing your time.
 
 ### EventItem
 

diff --git a/config/timex.php b/config/timex.php
@@ -42,6 +42,7 @@
         'start' => Carbon::MONDAY,
         'end' =>  Carbon::SUNDAY
     ],
+    'isDayClickEnabled' => true,
 
     'dayName' => 'minDayName', // minDayName or dayName or shortDayName
 
@@ -81,12 +82,15 @@
             ],
         ],
         'buttons' => [
+            'hideYearNavigation' => false,
             'today' => [
                 'static' => false,
                 'format' => 'D MMM'
             ],
             'outlined' => true,
             'icons' => [
+                'previousYear' => 'heroicon-o-chevron-double-left',
+                'nextYear' => 'heroicon-o-chevron-double-right',
                 'previousMonth' => 'heroicon-o-chevron-left',
                 'nextMonth' => 'heroicon-o-chevron-right',
                 'createEvent' => 'heroicon-o-plus'
@@ -112,6 +116,9 @@
         'event' => [
             'name' => 'timex_events',
         ],
+        'category' => [
+            'name' => 'timex_categories',
+        ],
     ],
 
     /*
@@ -139,7 +146,7 @@
     |
     */
             'model' => [
-                'class' => \App\Models\Category::class, // \App\Models\Category::class
+                'class' => \Buildix\Timex\Models\Category::class, // \App\Models\Category::class
                 'key' => 'id', // "id" is a DB column - you can change by any primary key
                 'value' => 'value', // "value" is a DB column - it used for Select options and displays on Resource page
                 'icon' => 'icon', // "icon" is a DB column - define here any heroicon- icon

diff --git a/database/migrations/create_timex_tables.php.stub b/database/migrations/create_timex_tables.php.stub
@@ -24,6 +24,13 @@ return new class extends Migration
             $table->timestamps();
         });
 
+        Schema::create(config('timex.tables.category.name'), function (Blueprint $table){
+            $table->uuid('id')->primary();
+            $table->string('value');
+            $table->string('icon')->nullable();
+            $table->string('color')->nullable();
+        });
+
     }
 
     /**
@@ -34,5 +41,6 @@ return new class extends Migration
     public function down()
     {
         Schema::dropIfExists(config('timex.tables.event.name'));
+        Schema::dropIfExists(config('timex.tables.category.name'));
     }
 };
diff --git a/resources/dist/timex.js b/resources/dist/timex.js
@@ -31,3 +31,18 @@ window.addEventListener('monthLoaded', event => {
     })
 });
 
+function addBorder(evt)
+{
+    const element = document.getElementById(evt.srcElement.id);
+    element.style.backgroundColor = "gray";
+    element.style.opacity = "0.4";
+    element.style.color = "white";
+}
+
+function removeBorder(evt)
+{
+    const element = document.getElementById(evt.srcElement.id);
+    element.removeAttribute('style');
+
+}
+
diff --git a/resources/views/calendar/day.blade.php b/resources/views/calendar/day.blade.php
@@ -6,20 +6,21 @@
     $isFirstOfMonth = $timestamp == $firstDayOfMonth;
 
 @endphp
-<div
-    class="timex-day"
-{{--    style="height: 130px;"--}}
->
+<div class="timex-day">
     <div
         @class([
             'text-gray-400' => !$isCurrentMonthDay || $isWeekend,
             'border-t dark:border-gray-600',
             'pl-2 pt-1 py-1'
-    ])>
+        ])
+        wire:click="$emitUp('onDayClick','{{$timestamp}}')">
         <span
+            id="day-{{$timestamp}}"
+            onmouseenter="addBorder(event)"
+            onmouseleave="removeBorder(event)"
             @class(
                 [
-                    'relative inline-flex items-center justify-center text-sm ml-auto rtl:ml-0 rtl:mr-auto font-medium tracking-tight rounded-xl whitespace-normal',
+                    'relative cursor-pointer inline-flex items-center justify-center text-sm ml-auto rtl:ml-0 rtl:mr-auto font-medium tracking-tight rounded-xl whitespace-normal',
                     'text-white bg-primary-500' => $isCurrentDay,
                     'rounded-full px-3 py-0.5 h-6 -mb-2',
                 ]
@@ -54,6 +55,7 @@ class="timex-day"
                 :color="$event->getColor()"
                 :event-i-d="$event->getEventID()"
                 :icon="$event->getIcon()"
+                :is-all-day="$event->getIsAllDay()"
                 :organizer="$event->getOrganizer()"
                 :start="$event->getStart()"
                 :start-time="$event->getStartTime()"

diff --git a/resources/views/calendar/event.blade.php b/resources/views/calendar/event.blade.php
@@ -59,10 +59,14 @@
             {{$subject}}
         </div>
         <div @class([
-                'col-span-2 ml-2' => !$isWidgetEvent,
-                'col-span-2 ml-4' => $isWidgetEvent
+                'col-span-2 ml-2 truncate' => !$isWidgetEvent,
+                'col-span-2 ml-4 truncate' => $isWidgetEvent
             ])>
-            {{\Carbon\Carbon::parse($startTime)->isoFormat('H:mm')}}
+            @if($isAllDay)
+                {{__('timex::timex.event.allDay')}}
+            @else
+                {{\Carbon\Carbon::parse($startTime)->isoFormat('H:mm')}}
+            @endif
         </div>
     </div>
 

diff --git a/resources/views/widgets/mini/event-widget.blade.php b/resources/views/widgets/mini/event-widget.blade.php
@@ -11,6 +11,7 @@
                 :start="$event->getStart()"
                 :start-time="$event->getStartTime()"
                 :icon="$event->getIcon()"
+                :is-all-day="$event->getIsAllDay()"
                 :is-widget-event="true"/>
         </div>
     @endforeach

diff --git a/src/Calendar/Event.php b/src/Calendar/Event.php
@@ -6,16 +6,19 @@
 
 class Event extends Component
 {
-    public $subject;
+
     public $body;
-    public $start;
-    public $startTime;
-    public $eventID;
+    public $category;
     public $color;
+    public $eventID;
     public $icon;
-    public $category;
-    public $organizer;
+    public $isAllDay;
     public $isWidgetEvent = false;
+    public $organizer;
+    public $start;
+    public $startTime;
+    public $subject;
+
 
     public function render()
     {

diff --git a/src/Calendar/Month.php b/src/Calendar/Month.php
@@ -26,7 +26,9 @@ class Month extends Component
         'modelUpdated' => 'loaded',
         'onTodayClick' => 'onTodayClick',
         'onPrevClick' => 'onPreviousMonthClick',
-        'onNextClick' => 'onNextMonthClick'
+        'onNextClick' => 'onNextMonthClick',
+        'onNextYearClick' => 'onNextYearClick',
+        'onPreviousYearClick' => 'onPreviousYearClick',
     ];
 
 
@@ -123,6 +125,24 @@ public function onNextMonthClick()
         $this->emitUp('monthNameChanged',$this->monthName,$this->today->year);
     }
 
+    public function onNextYearClick()
+    {
+        $this->today = $this->today->addYear();
+        $this->monthName = $this->today->monthName;
+        $this->setCalendar();
+        $this->loaded();
+        $this->emitUp('monthNameChanged',$this->monthName,$this->today->year);
+    }
+
+    public function onPreviousYearClick()
+    {
+        $this->today = $this->today->subYear();
+        $this->monthName = $this->today->monthName;
+        $this->setCalendar();
+        $this->loaded();
+        $this->emitUp('monthNameChanged',$this->monthName,$this->today->year);
+    }
+
     public function onTodayClick()
     {
         $this->today = Carbon::today();