[Done] moved mail and edit to tabs, removed slug url for projects, new settings tab

laravel_app/app/Http/Controllers/ProjectController.php

@@ -14,9 +14,9 @@ public function index()
 
     public function show(string $projectName,?string $currentTab = null)
     {
-        if($project = Project::firstWhere('name',$projectName)) {
+        if($project = Project::firstWhere([['name',$projectName]])) {
             $availableTabs = ['downloads', 'mosaics', 'reports', 'mailings', 'settings'];
-            return in_array($currentTab, $availableTabs) ? view('projects.show', compact(['project', 'currentTab'])) : redirect(route('project.show', [$projectName, 'downloads']));
+            return in_array($currentTab, $availableTabs) ? view('projects.show', compact(['project', 'currentTab'])) : redirect(route('project.show', [$projectName,'downloads']));
         }
         return abort(404);
     }

laravel_app/app/Livewire/Projects/Menu.php

@@ -8,6 +8,7 @@ class Menu extends Component
 {
     public string $activeTab = "downloads";
     public string $projectName = '';
+    public string $projectId= '';
     public function mount()
     {
 

laravel_app/app/Livewire/Projects/Tabs/Settings.php

@@ -20,36 +20,22 @@ class Settings extends Component
 
     public $confirmingReportDeletion = false;
 
-    public $showProjectModal = false;
-
-    public $showMailSettingsModal = false;
-
     public $projectIdBeingDeleted;
 
     public array $pivotFiles;
     public array $spanFiles;
-    public $harvestDataFiles;
+    public array $harvestDataFiles;
+
+    public $isDirty = false;
+
 
     /**
      * Mount the component.
      *
      * @return void
      */
-    public function mount()
+    public function mount(Project $project)
     {
-        $this->resetFormData();
-    }
-
-
-    public function editProject(Project $project)
-    {
-        $this->showProjectModal = true;
-        $this->loadFormData($project);
-    }
-
-    public function editMailSettings(Project $project)
-    {
-        $this->showMailSettingsModal = true;
         $this->loadFormData($project);
     }
 
@@ -62,23 +48,19 @@ private function loadFormData(Project $project)
                 'email' => '',
             ]
         ];
+        $this->formData['pivot_file'] = null;
+        $this->formData['span_file'] = null;
+        $this->formData['harvest_file'] = null;
     }
-
-    public function openCreateProjectModal()
-    {
-        $this->resetFormData();
-        $this->showProjectModal = true;
-    }
-
     public function saveProject()
     {
         $this->resetErrorBag();
         $this->mergeFormData();
         $this->validateForm();
         Project::saveWithFormData($this->formData);
-        $this->resetFormData();
+        //dd(route('project.show',[$this->formData['name'],$this->formData['id'],'settings']));
-        $this->showProjectModal = false;
+        return redirect()->route('project.show',[$this->formData['name'],$this->formData['id'],'settings']);
-        $this->dispatch('saved');
+        //$this->dispatch('saved');
     }
 
     public function saveMailSettings()
@@ -86,11 +68,29 @@ public function saveMailSettings()
         $this->resetErrorBag();
         $this->validateEmailSettingsForm();
         Project::saveWithFormData($this->formData);
-        $this->resetFormData();
-        $this->showMailSettingsModal = false;
         $this->dispatch('saved');
     }
 
+    public function saveSettings()
+    {
+        $this->resetErrorBag();
+        $this->mergeFormData();
+        $this->validateForm();
+        $this->validateEmailSettingsForm();
+        $this->shouldReload();
+        Project::saveWithFormData($this->formData);
+        if($this->isDirty) redirect()->route('project.show',[$this->formData['name'],$this->formData['id'],'settings']);
+        $this->dispatch('saved');
+    }
+
+    public function shouldReload()
+    {
+        if (Project::find($this->formData['id'])?->name == $this->formData['name']) return;
+        $this->isDirty = true;
+    }
+
+
+
     public function addEmailRecipient()
     {
         $this->formData['mail_recipients'][] =
@@ -147,10 +147,6 @@ public function getProjectsProperty()
         return Project::all();
     }
 
-//    public function render()
-//    {
-//        return view('livewire.project-manager');
-//    }
 
     private function resetFormData()
     {
@@ -168,6 +164,11 @@ private function resetFormData()
         $this->addEmailRecipient();
     }
 
+    public function todo()
+    {
+
+    }
+
     private function validateForm()
     {
         $projectIdentifier = $this->formData['id'] ?? null;

laravel_app/resources/views/components/action-message.blade.php

@@ -5,6 +5,6 @@
     x-show.transition.out.opacity.duration.1500ms="shown"
     x-transition:leave.opacity.duration.1500ms
     style="display: none;"
-    {{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
+    {{ $attributes->merge(['class' => 'text-sm text-gray-600 text-center']) }}>
     {{ $slot->isEmpty() ? 'Saved.' : $slot }}
 </div>

laravel_app/resources/views/components/button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge([ 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

laravel_app/resources/views/components/project-manager-grid.blade.php

@@ -21,17 +21,9 @@
                 @foreach ($projectManager->projects->sortBy('name') as $project)
                     <div class="flex items-center justify-between">
                         <div class="break-all">
-                            <a href="{!! route('project.show', $project->name) !!}">{{ $project->name }}</a>
+                            <a href="{!! route('project.show', [$project->name]) !!}">{{ $project->name }}</a>
                         </div>
                         <div class="flex items-center ml-2">
-                            <button class="cursor-pointer ml-6 text-sm text-gray-500"
-                                    wire:click="editMailSettings({{ $project->id }})">
-                                {{ __('Mail') }}
-                            </button>
-                            <button class="cursor-pointer ml-6 text-sm text-gray-500"
-                                    wire:click="editProject({{ $project->id }})">
-                                {{ __('Edit') }}
-                            </button>
                             <button class="cursor-pointer ml-6 text-sm text-red-500"
                                     wire:click="confirmReportDeletion({{ $project->id }})">
                                 {{ __('Delete') }}

laravel_app/resources/views/livewire/projects/tabs/settings.blade.php

@@ -1,10 +1,10 @@
-<div class="flex flex-col divide-y gap-4">
+<div class="flex flex-col divide-y space-y-4">
     <div id="edit">
-        <div class="flex justify-between my-2 py-2">
+        <div class="flex flex-col my-2 py-2">
             <div class="text-xl font-bold ">
                 {{ __('Reports') }}
             </div>
-            <div class="text-gray-500 text-lg">
+            <div class="text-gray-500 text-md">
                 {{__('Report generator for generating reports')}}
             </div>
         </div>
@@ -55,54 +55,49 @@
                 @enderror
             </div>
         </form>
-
-        <div name="actions">
-            <x-action-message class="mr-3" on="saved">
-                {{ __('Saved.') }}
-            </x-action-message>
-            <x-secondary-button class="mr-3"
-                                type="button"
-                                x-on:click="$wire.showProjectModal = false"
-            >
-                {{ __('Cancel') }}
-            </x-secondary-button>
-            <x-button>
-                {{ __('Save') }}
-            </x-button>
-
-        </div>
     </div>
-    <div id-="mail" x-data="{showMail:false}" class="flex flex-col">
+    <div id-="mail"
+         x-data="{showMail: null}"
+         x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
+         class="flex flex-col">
         <div class="flex justify-between my-4">
-            <div class="">
+            <div>
-                <label class="inline-flex items-center cursor-pointer gap-4">
+                <span class="text-xl font-bold dark:text-gray-300">{{__('Mail')}}</span>
-                    <input type="checkbox" class="sr-only peer" @click="showMail = $el.checked">
+                <div class="text-gray-500 text-md">
-                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
+                    {{ __('Schedule a mail for this Project') }}
-                    <span class="text-xl font-bold dark:text-gray-300">{{__('Mail')}}</span>
+                </div>
-                </label>
-            </div>
-
-            <div class="text-gray-500 text-lg">
-                {{ __('Schedule a mail for this Project') }}
             </div>
+            <label class="inline-flex items-center cursor-pointer gap-4">
+                <input x-ref="subject" type="checkbox" class="sr-only peer" @click="showMail = $el.checked" x-init="$el.checked = showMail">
+                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
+            </label>
         </div>
-        <form submit="saveMailSettings" x-show="showMail">
+        <form submit="saveMailSettings" >
             <div class="col-span-6 sm:col-span-4">
                 <x-label for="email_subject" value="{{ __('Subject') }}"/>
-                <x-input id="email_subject" type="text" class="mt-1 block w-full" wire:model="formData.mail_subject"
+                <x-input id="email_subject" type="text"
+                         class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                         wire:model="formData.mail_subject"
+                         x-bind:disabled="!showMail"
                          autofocus/>
                 <x-input-error for="mail_subject" class="mt-2"/>
             </div>
             <div class="col-span-6 sm:col-span-4">
                 <x-label for="email_template" value="{{ __('Template') }}"/>
                 <textarea id="email_template" type="text"
-                          class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+                          class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
-                          wire:model="formData.mail_template"></textarea>
+                          wire:model="formData.mail_template"
+                          x-bind:disabled="!showMail"
+                >
+                </textarea>
                 <x-input-error for="mail_template" class="mt-2"/>
             </div>
             <div class="col-span-6 sm:col-span-4">
                 <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
-                <select id="email_frequency" class="mt-1 block w-full rounded-md border-gray-300" wire:model="formData.mail_frequency">
+                <select id="email_frequency" class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
+                        wire:model="formData.mail_frequency"
+                        x-bind:disabled="!showMail"
+                >
                     @foreach(App\Helper::getMailFrequencies() as $frequency)
                         <option value="{{ $frequency }}">{{ $frequency }}</option>
                     @endforeach
@@ -111,7 +106,10 @@ class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus
             </div>
             <div class="col-span-6 sm:col-span-4">
                 <x-label for="mail_day" value="{{ __('Day') }}"/>
-                <select id="mail_day" wire:model="formData.mail_day" class="mt-1 block w-full  rounded-md border-gray-300">
+                <select id="mail_day"
+                        wire:model="formData.mail_day"
+                        x-bind:disabled="!showMail"
+                        class="mt-1 block w-full  rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
                     @foreach(App\Helper::getDays() as $day)
                         <option value="{{ $day }}">{{ $day }}</option>
                     @endforeach
@@ -126,7 +124,9 @@ class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus
                     <div class="col-span-6 sm:colspan-4 grid-cols-6 gap-1 my-1 py-2 flex justify-between">
                         <div class="">
                             <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
-                            <x-input id="mail_recipient_{{ $key }}_name" type="text" class="mt-1 block w-full"
+                            <x-input id="mail_recipient_{{ $key }}_name" type="text"
+                                     class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                                     x-bind:disabled="!showMail"
                                      wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
                             <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
                         </div>
@@ -135,7 +135,8 @@ class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus
                             <x-label for="bounding_box_{{ $key }}_top_left_latitude"
                                      value="{{ __('Email') }}"/>
                             <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
-                                     class="mt-1 block w-full"
+                                     class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
+                                     x-bind:disabled="!showMail"
                                      wire:model="formData.mail_recipients.{{ $key }}.email"
                                      autofocus/>
                             <x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
@@ -143,7 +144,7 @@ class="mt-1 block w-full"
                         <div class="flex">
                             @if( count($formData['mail_recipients']) > 1)
                                 <button
-                                    class="cursor-pointer ml-6 text-sm text-red-500 py-3 self-end"
+                                    class="cursor-pointer text-sm text-red-500 py-3 mx-2 self-end"
                                     type="button"
                                     wire:click="deleteEmailRecipient({{ $key }})"
                                     wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
@@ -155,29 +156,25 @@ class="cursor-pointer ml-6 text-sm text-red-500 py-3 self-end"
                     </div>
                 @endforeach
             </div>
-
+            <div x-show="showMail" class="flex">
-
-            <div name="actions">
-                <x-action-message class="mr-3" on="saved">
-                    {{ __('Saved.') }}
-                </x-action-message>
                 <x-secondary-button class="mr-3"
                                     type="button"
                                     wire:click="addEmailRecipient"
                 >
                     {{ __('Add recipient') }}
                 </x-secondary-button>
-                <x-secondary-button class="mr-3"
-                                    type="button"
-                                    x-on:click="$wire.showMailSettingsModal = false"
-                >
-                    {{ __('Cancel') }}
-                </x-secondary-button>
-                <x-button>
-                    {{ __('Save') }}
-                </x-button>
-
             </div>
         </form>
     </div>
+    <div class="flex justify-end items-center py-4">
+        <span>
+            <x-action-message class="mr-3 text-indigo-500 font-semibold rounded p-2" on="saved">
+                {{ __('Saved.') }}
+            </x-action-message>
+        </span>
+        <x-button type="button"
+                  wire:click="saveSettings">
+            {{__('Save settings')}}
+        </x-button>
+    </div>
 </div>

laravel_app/resources/views/projects/show.blade.php

@@ -5,7 +5,7 @@
         </h2>
     </x-slot>
     <div id="main" class="flex">
-        <livewire:projects.menu :project-name="$project->name" :active-tab="$currentTab"></livewire:projects.menu>
+        <livewire:projects.menu :project-name="$project->name" :project-id="$project->id"  :active-tab="$currentTab"></livewire:projects.menu>
         <div class="flex-1 p-4 ml-2 rounded-lg bg-white shadow">
             @switch($currentTab)
                 @case('downloads')

laravel_app/resources/views/vendor/livewire-dropzone/livewire/dropzone.blade.php

@@ -11,7 +11,7 @@
     @drop.prevent="onDrop"
     class="w-full antialiased"
 >
-    <div class="flex flex-col items-start h-full w-full max-w-2xl justify-center bg-white dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500">
+    <div class="flex flex-col items-start h-full w-full justify-center bg-white dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500">
         @if(! is_null($error))
             <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
                 <div class="flex gap-3 items-start">