From 85354f3b63d925a991781e6076bd302ecde92f77 Mon Sep 17 00:00:00 2001
From: Bozhidar <bobi@microweber.com>
Date: Fri, 26 Apr 2024 21:53:15 +0300
Subject: [PATCH] update

---
 web/app/Filament/Pages/Modules.php            | 53 ++++---------
 .../views/filament/pages/modules.blade.php    | 76 +++++++++++++++----
 2 files changed, 75 insertions(+), 54 deletions(-)

diff --git a/web/app/Filament/Pages/Modules.php b/web/app/Filament/Pages/Modules.php
index 614bc08..c44ea85 100644
--- a/web/app/Filament/Pages/Modules.php
+++ b/web/app/Filament/Pages/Modules.php
@@ -16,6 +16,9 @@ class Modules extends Page
 
     protected static ?int $navigationSort = 1;
 
+    public $installLogPulling = false;
+    public $installLog = '';
+
     protected function getViewData(): array
     {
 
@@ -54,44 +57,18 @@ class Modules extends Page
             'categories' => $modules,
         ];
 
+    }
 
-        return [
-            'categories' => [
-                'Security' => [
-                    [
-                        'name' => 'Lets Encrypt',
-                        'description' => 'Automatically secure your website with a free SSL certificate from Lets Encrypt.',
-                        'url' => url('admin/letsencrypt'),
-                        'iconUrl' => url('images/modules/letsencrypt.png'),
-                        'category' => 'Security',
-                    ],
-                ],
-                'Content Management' => [
-                    [
-                        'name' => 'Microweber',
-                        'description' => 'A drag and drop website builder and a powerful next-generation CMS.',
-                        'url' => url('admin/microweber'),
-                        'iconUrl' => url('images/modules/microweber.png'),
-                        'category' => 'Content Management',
-                    ],
-                    [
-                        'name' => 'WordPress',
-                        'description' => 'WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database.',
-                        'url' => url('admin/wordpress'),
-                        'iconUrl' => url('images/modules/wordpress.svg'),
-                        'category' => 'Content Management',
-                    ],
-                ],
-                'E-Commerce' => [
-                    [
-                        'name' => 'OpenCart',
-                        'description' => 'A free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.',
-                        'url' => url('admin/opencart'),
-                        'iconUrl' => url('images/modules/opencart.png'),
-                        'category' => 'E-Commerce',
-                    ],
-                ],
-            ],
-        ];
+    public function getInstallLog()
+    {
+        $this->installLog = time();
+    }
+
+    public function openInstallModal($module)
+    {
+
+        $this->installLogPulling = true;
+
+        $this->dispatch('open-modal', id: 'install-module-modal', props: ['module' => $module]);
     }
 }
diff --git a/web/resources/views/filament/pages/modules.blade.php b/web/resources/views/filament/pages/modules.blade.php
index d6ed3b1..287ae34 100644
--- a/web/resources/views/filament/pages/modules.blade.php
+++ b/web/resources/views/filament/pages/modules.blade.php
@@ -1,5 +1,33 @@
 <x-filament-panels::page>
 
+    <x-filament::modal width="4xl" id="install-module-modal">
+
+        <x-filament::modal.heading>
+            Install Module
+        </x-filament::modal.heading>
+
+        <x-filament::modal.description>
+            <div class="">
+                @if ($this->installLogPulling)
+                    <div class="w-full">
+                        <div id="js-install-log" wire:poll="getInstallLog"
+                             class="text-left text-sm font-medium text-gray-950 dark:text-yellow-500 h-[20rem] overflow-y-scroll">
+                            {!! $this->installLog !!}
+                        </div>
+
+                        <script>
+                            window.setInterval(function() {
+                                var elem = document.getElementById('js-install-log');
+                                elem.scrollTop = elem.scrollHeight;
+                            }, 2000);
+                        </script>
+                    </div>
+                @endif
+            </div>
+        </x-filament::modal.description>
+
+    </x-filament::modal>
+
     <div class="">
 
         @foreach($categories as $categoryName=>$modules)
@@ -10,31 +38,47 @@
 
             <div class="grid grid-cols-3 gap-6 mb-6">
         @foreach($modules as $module)
-        <x-filament::section>
-            <a href="{{$module['url']}}">
-            <div class="flex gap-3">
-
+            <div class="sm:flex gap-2 px-6 py-6 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
                 <div class="mb-2">
                     <div class="w-12">
                         <x-filament::icon :icon="$module['logoIcon']"
                                           class="w-12 h-12 text-primary-500"/>
                     </div>
                 </div>
+                <div class="flex justify-between w-full">
+                    <div class="flex flex-col">
+                        <p>
+                            {{$module['name']}}
+                        </p>
 
-                <div class="flex flex-col ">
-
-                    <p>
-                        {{$module['name']}}
-                    </p>
-
-                    <p class="text-xs mt-1">
-                        {{$module['category']}}
-                    </p>
+                        <p class="text-xs mt-1">
+                            {{$module['category']}}
+                        </p>
+                    </div>
+                    <div>
+                        <x-filament::dropdown>
+                            <x-slot name="trigger">
+                                <button>
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 20 20">
+                                        <path fill="currentColor" d="M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6m0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0"></path>
+                                    </svg>
+                                </button>
+                            </x-slot>
 
+                            <x-filament::dropdown.list>
+                                <x-filament::dropdown.list.item wire:click="openInstallModal('{{$module['name']}}')">
+                                    <div class="flex gap-2 items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24">
+                                            <path fill="currentColor" d="M11 2v5H8l4 4l4-4h-3V2h7a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm8 14H5v4h14zm-2 1v2h-2v-2z"></path>
+                                        </svg>
+                                        Install
+                                    </div>
+                                </x-filament::dropdown.list.item>
+                            </x-filament::dropdown.list>
+                        </x-filament::dropdown>
+                    </div>
                 </div>
-            </div>
-            </a>
-        </x-filament::section>
+        </div>
         @endforeach
 
             </div>