Widget styling re-factor..

app/Abstracts/Widget.php

@@ -17,7 +17,7 @@ abstract class Widget
     public $default_name = '';
 
     public $default_settings = [
-        'width' => 'w-full lg:w-2/4 lg:px-6 my-8',
+        'width' => '50',
     ];
 
     public $description = '';

app/Listeners/Update/V31/Version315.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Listeners\Update\V31;
+
+use App\Abstracts\Listeners\Update as Listener;
+use App\Events\Install\UpdateFinished as Event;
+use App\Models\Common\Widget;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Str;
+
+class Version315 extends Listener
+{
+    const ALIAS = 'core';
+
+    const VERSION = '3.1.5';
+
+    /**
+     * Handle the event.
+     *
+     * @param  $event
+     * @return void
+     */
+    public function handle(Event $event)
+    {
+        if ($this->skipThisUpdate($event)) {
+            return;
+        }
+
+        Log::channel('stdout')->info('Updating to 3.1.5 version...');
+
+        $this->updateWidgets();
+
+        Log::channel('stdout')->info('Done!');
+    }
+
+    public function updateWidgets()
+    {
+        Log::channel('stdout')->info('Updating widgets...');
+
+        $widgets = Widget::cursor();
+
+        foreach ($widgets as $widget) {
+            Log::channel('stdout')->info('Updating widget:' . $widget->id);
+
+            $widget_settings = $widget->settings;
+
+            if (empty($widget_settings->width)) {
+                Log::channel('stdout')->info('Skip widget:' . $widget->id);
+
+                continue;
+            }
+
+            if (! empty($widget_settings->raw_width)) {
+                Log::channel('stdout')->info('Already new classs widget:' . $widget->id);
+
+                continue;
+            }
+
+            unset($widget_settings->raw_width);
+
+            if (Str::contains($widget_settings->width, 'lg:w-1/4')) {
+                $widget_settings->width = 25;
+            } elseif (Str::contains($widget_settings->width, 'lg:w-1/3')) {
+                $widget_settings->width = 33;
+            } elseif (Str::contains($widget_settings->width, 'lg:w-2/4')) {
+                $widget_settings->width = 50;
+            } else {
+                $widget_settings->width = 100;
+            }
+
+            $widget->settings = $widget_settings;
+
+            $widget->save();
+
+            Log::channel('stdout')->info('Widget updated:' . $widget->id);
+        }
+
+        Log::channel('stdout')->info('Widgets updated.');
+    }
+}

app/Models/Common/Widget.php

@@ -70,6 +70,63 @@ public function getAliasAttribute()
         return Str::kebab($arr[1]);
     }
 
+    /**
+     * Get the alias based on class.
+     *
+     * @return object
+     */
+    public function getSettingsAttribute($value)
+    {
+        $settings = ! empty($value) ? json_decode($value) : (object) [];
+
+        $settings->raw_width = false;
+
+        if (isset($settings->width)) {
+
+            $raw_width = $settings->width;
+            $width = $this->getWidthAttribute($settings->width);
+
+            if ($raw_width != $width) {
+                $settings->raw_width = $raw_width;
+            }
+
+            $settings->width = $width;
+        }
+
+        return $settings;
+    }
+
+    /**
+     * Get the alias based on class.
+     *
+     * @return string
+     */
+    public function getWidthAttribute($value)
+    {
+        $width = $value;
+
+        switch ($width) {
+            case '25':
+                $width = 'w-full lg:w-1/4 lg:px-6';
+                break;
+            case '33':
+                $width = 'w-full lg:w-1/3 px-6';
+                break;
+            case '50':
+                $width = 'w-full lg:w-2/4 lg:px-6';
+                break;
+            case '100':
+                $width = 'w-full px-6';
+                break;
+        }
+
+        if (empty($width)) {
+            $width = 'w-full lg:w-2/4 lg:px-6';
+        }
+
+        return $width;
+    }
+
     /**
      * Create a new factory instance for the model.
      *

app/Widgets/CashFlow.php

@@ -17,7 +17,7 @@ class CashFlow extends Widget
     public $default_name = 'widgets.cash_flow';
 
     public $default_settings = [
-        'width' => 'w-full my-8 lg:px-6',
+        'width' => '100',
     ];
 
     public $description = 'widgets.description.cash_flow';

public/css/app.css

@@ -70145,6 +70145,12 @@ body{
             align-items: center;
   }
 
+  .lg\:justify-start{
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+  }
+
   .lg\:justify-end{
     -webkit-box-pack: end;
         -ms-flex-pack: end;

resources/assets/js/components/AkauntingWidget.vue

@@ -165,19 +165,19 @@ export default {
             widthOptions: [
                 {
                     label: '25%',
-                    value: 'w-full lg:w-1/4 lg:px-6'
+                    value: '25'
                 },
                 {
                     label: '33%',
-                    value: 'w-full lg:w-1/3 lg:px-6'
+                    value: '33'
                 },
                 {
                     label: '50%',
-                    value: 'w-full lg:w-2/4 lg:px-6'
+                    value: '50'
                 },
                 {
                     label: '100%',
-                    value: 'w-full lg:px-6'
+                    value: '100'
                 }
             ],
             form: {

resources/assets/js/views/common/dashboards.js

@@ -96,7 +96,7 @@ const dashboard = new Vue({
                 self.widget.id = widget_id;
                 self.widget.name = response.data.name;
                 self.widget.class = response.data.class;
-                self.widget.width = response.data.settings.width;
+                self.widget.width = (response.data.settings.raw_width) ? response.data.settings.raw_width : response.data.settings.width;
                 self.widget.action = 'edit';
                 self.widget.sort = response.data.sort;
 

resources/views/common/dashboards/show.blade.php

@@ -128,7 +128,7 @@ class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-10
 
         <akaunting-widget
             v-if="widget_modal"
-            :title="'{{ trans_choice('general.widgets', 1) }}'"
+            :title="'{{ trans('general.title.edit') }}'.replace(':type', widget.name)"
             :show="widget_modal"
             :widget_id="widget.id"
             :name="widget.name"

resources/views/components/widgets/header.blade.php

@@ -7,7 +7,7 @@
 
         <div class="flex items-center">
             @if ($report = $class->getReportUrl())
-                @if (1)
+                @if ($class->model?->settings?->raw_width == '25' || $class->model?->settings?->width == 'w-full lg:w-1/4 lg:px-6')
                     <x-link href="{{ $report }}" class="lg:flex hidden text-purple hover:bg-gray-100 rounded-xl w-8 h-8 items-center justify-center text-sm text-right" override="class">
                         <x-tooltip id="tooltip-view-report" placement="top" message="{{ trans('widgets.view_report') }}" class="text-black left-5">
                             <x-icon icon="visibility" class="text-lg font-normal"></x-icon>
@@ -18,11 +18,11 @@
                         {{ trans('widgets.view_report') }}
                     </x-link>
                 @else
-                <x-link href="{{ $report }}" class="text-purple text-sm mr-3 text-right" override="class">
-                    <x-link.hover color="to-purple">
-                        {{ trans('widgets.view_report') }}
-                    </x-link.hover>
-                </x-link>
+                    <x-link href="{{ $report }}" class="text-purple text-sm mr-3 text-right" override="class">
+                        <x-link.hover color="to-purple">
+                            {{ trans('widgets.view_report') }}
+                        </x-link.hover>
+                    </x-link>
                 @endif
             @endif
 

resources/views/widgets/cash_flow.blade.php

@@ -1,4 +1,4 @@
-<div id="widget-{{ $class->model->id }}" class="w-full my-8 px-12">
+<div id="widget-{{ $class->model->id }}" class="w-full my-8 px-6">
     @include($class->views['header'], ['header_class' => ''])
 
     <div class="flex flex-col-reverse lg:flex-row mt-3">

safelist.txt

@@ -100,4 +100,10 @@ ltr:float-left
 rtl:float-right
 rtl:float-left
 rtl:rotate-180
-hover:bg-purple-200
+hover:bg-purple-200
+lg:w-1/4
+lg:px-6
+lg:w-1/3
+px-6
+lg:w-2/4
+lg:px-6