add new city from frontend

app/Http/Livewire/City/Form/CityForm.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Http\Livewire\City\Form;
+
+use App\Models\City;
+use Livewire\Component;
+
+class CityForm extends Component
+{
+    public ?City $city = null;
+
+    public string $fromUrl = '';
+
+    protected $queryString = [
+        'fromUrl' => [
+            'except' => null,
+        ],
+    ];
+
+    public function rules()
+    {
+        return [
+            'city.country_id' => 'required',
+            'city.name'       => 'required|string',
+            'city.longitude'  => 'required',
+            'city.latitude'   => 'required',
+        ];
+    }
+
+    public function mount()
+    {
+        if (!$this->city) {
+            $this->city = new City();
+        }
+    }
+
+    public function save()
+    {
+        $this->validate();
+        $this->city->save();
+
+        return redirect($this->fromUrl);
+    }
+
+    public function render()
+    {
+        return view('livewire.city.form.city-form');
+    }
+}

app/Http/Livewire/Tables/CityTable.php

@@ -35,7 +35,14 @@ class CityTable extends DataTableComponent
                  ];
              })
              ->setColumnSelectStatus(false)
-             ->setPerPage(10);
+             ->setPerPage(10)
+             ->setConfigurableAreas([
+                'toolbar-left-end' => [
+                    'columns.cities.areas.toolbar-left-end', [
+                        'country' => $this->country,
+                    ],
+                ],
+            ]);
     }
 
     public function columns(): array

resources/views/columns/cities/areas/toolbar-left-end.blade.php

@@ -0,0 +1,8 @@
+<div class="w-full mb-4 md:w-auto md:mb-0" x-data="{currentUrl: window.location.href}">
+    <a x-bind:href="'http://localhost/city/form/?fromUrl='+currentUrl" target="_blank">
+        <x-button>
+            <i class="fa fa-thin fa-plus"></i>
+            {{ __('New City') }}
+        </x-button>
+    </a>
+</div>

resources/views/livewire/city/form/city-form.blade.php

@@ -0,0 +1,66 @@
+<div class="container p-4 mx-auto bg-21gray my-2">
+
+    <div class="pb-5 flex flex-row justify-between">
+        <h3 class="text-lg font-medium leading-6 text-gray-200">{{ __('City') }}</h3>
+        <div class="flex flex-row space-x-2 items-center">
+            <div>
+                <x-button :href="route('welcome')">
+                    <i class="fa fa-thin fa-arrow-left"></i>
+                    {{ __('Back') }}
+                </x-button>
+            </div>
+        </div>
+    </div>
+
+    <form class="space-y-8 divide-y divide-gray-700 pb-24">
+        <div class="space-y-8 divide-y divide-gray-700 sm:space-y-5">
+            <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+
+                <x-input.group :for="md5('city.country_id')" :label="__('Country')">
+                    <x-select
+                        :clearable="false"
+                        wire:model="city.country_id"
+                        :searchable="true"
+                        :async-data="[
+                            'api' => route('api.countries.index'),
+                            'method' => 'GET', // default is GET
+                        ]"
+                        :template="[
+                            'name'   => 'user-option',
+                            'config' => ['src' => 'flag']
+                        ]"
+                        option-label="name"
+                        option-value="id"
+                    />
+                </x-input.group>
+
+                <x-input.group :for="md5('city.name')" :label="__('Name')">
+                    <x-input autocomplete="off" wire:model.debounce="city.name"
+                             :placeholder="__('Name')"/>
+                </x-input.group>
+
+                <x-input.group :for="md5('city.longitude')" :label="__('Longitude')">
+                    <x-input autocomplete="off" wire:model.debounce="city.longitude"
+                             :placeholder="__('Longitude')"/>
+                    <div class="text-amber-500 text-xs py-2"><a target="_blank" href="https://www.latlong.net/">https://www.latlong.net/</a>
+                    </div>
+                </x-input.group>
+
+                <x-input.group :for="md5('city.latitude')" :label="__('Latitude')">
+                    <x-input autocomplete="off" wire:model.debounce="city.latitude"
+                             :placeholder="__('Latitude')"/>
+                    <div class="text-amber-500 text-xs py-2"><a target="_blank" href="https://www.latlong.net/">https://www.latlong.net/</a>
+                    </div>
+                </x-input.group>
+
+                <x-input.group :for="md5('meetupEvent.link')" label="">
+                    <x-button primary wire:click="save">
+                        <i class="fa fa-thin fa-save"></i>
+                        {{ __('Save') }}
+                    </x-button>
+                </x-input.group>
+
+            </div>
+        </div>
+    </form>
+</div>

resources/views/navigation-menu.blade.php

@@ -13,15 +13,6 @@
                 <!-- Navigation Links -->
                 <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex sm:items-center">
 
-                    @if(str(request()->route()->getName())->contains('bookCases.'))
-                        <div>
-                            <x-button xs amber href="/nova/resources/cities" target="_blank">
-                                <i class="fa fa-thin fa-plus"></i>
-                                {{ __('New City') }}
-                            </x-button>
-                        </div>
-                    @endif
-
                     @if(str(request()->route()->getName())->contains('meetup.'))
                         <div>
                             <x-button xs amber href="/nova/resources/meetups" target="_blank">

routes/web.php

@@ -26,7 +26,9 @@ Route::middleware([])
 /*
  * News
  * */
-Route::middleware([])
+Route::middleware([
+    'auth'
+])
      ->as('news.')
      ->prefix('/news')
      ->group(function () {
@@ -34,6 +36,19 @@ Route::middleware([])
               ->name('form');
      });
 
+/*
+ * Cities
+ * */
+Route::middleware([
+    'auth'
+])
+     ->as('city.')
+     ->prefix('/city')
+     ->group(function () {
+         Route::get('/form/{city?}', \App\Http\Livewire\City\Form\CityForm::class)
+              ->name('form');
+     });
+
 Route::middleware([])
      ->get('/news/{libraryItem:slug}', \App\Http\Livewire\News\InternArticleView::class)
      ->name('article.view');