wip

app/app/Http/Test.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http;
+
+use Livewire\Attributes\Layout;
+use Livewire\Component;
+
+#[Layout('layouts.app', ['title' => 'Add Property'])]
+class Test extends Component
+{
+
+    #[Validate('required|string|numeric|digits:5|regex:/^\d{5}$/', as: 'zip / postal code')]
+    public ?int $address_postal;
+
+    public function render()
+    {
+        return view('test');
+    }
+}

app/app/Livewire/Forms/HostPropertyForm.php

@@ -10,93 +10,103 @@ class HostPropertyForm extends Form
 {
     // Basic
     #[Validate('required|string|max:250|unique:properties,name', as: 'property name')]
-    public $name;
+    public ?string $name;
 
     #[Validate('required|string|max:250', as: 'street address')]
-    public $address_line1;
+    public ?string $address_line1;
 
     #[Validate('nullable|string|max:250', as: 'address line 2')]
-    public $address_line2;
+    public ?string $address_line2;
 
     #[Validate('required|string|max:250', as: 'city')]
-    public $address_city;
+    public ?string $address_city;
 
     #[Validate('required|string|alpha|size:2', as: 'state')]
-    public $address_state;
+    public ?string $address_state;
 
-    #[Validate('required|string|numeric|digits:5|regex:/^\d{5}$/', as: 'zip / postal code', onUpdate: false)]
-    public $address_postal;
+    #[Validate('required|string|numeric|digits:5|regex:/^\d{5}$/', as: 'zip / postal code')]
+    public ?int $address_postal;
 
     #[Validate('required|string|alpha|size:2', as: 'country')]
-    public $address_country;
+    public ?string $address_country;
 
 
     // Listing
     #[Validate('required|string|max:250', as: 'headline')]
-    public $listing_headline;
+    public ?string $listing_headline;
 
     #[Validate('required|string|max:3000', as: 'description')]
-    public $listing_description;
+    public string $listing_description = "";
 
     #[Validate('required|integer|numeric|min:1|max:16', as: 'guest count')]
-    public $guest_count;
+    public int $guest_count = 1;
 
     #[Validate('required|integer|numeric|min:0|max:99', as: 'bed count')]
-    public $bed_count;
+    public int $bed_count = 0;
 
     #[Validate('required|integer|numeric|min:0|max:99', as: 'bedroom count')]
-    public $bedroom_count;
+    public int $bedroom_count = 0;
 
     #[Validate('required|decimal:0,1|numeric|min:0|max:99', as: 'bathroom count')]
-    public $bathroom_count;
+    public int $bathroom_count = 0;
 
-    #[Validate('required|string', as: 'property type')]
-    public $property_type;
+    #[Validate('required|integer|exists:App\Models\PropertyType,id', as: 'property type')]
+    public ?int $property_type;
 
     // #[Validate('required|array', as: 'amenities')]
     #[Validate([
         'amenities' => 'required|array',
-        'amenities.*' => 'required|integer'
+        'amenities.*' => 'required'
     ], as: [
         'amenities' => 'amenities',
-        'amenities.*' => 'amenities',
+        'amenities.*' => 'amenity item',
     ], message: [
         'amenities.required' => 'Amenities are required.',
     ])]
-    public $amenities;
+    public array $amenities = [];
 
     // Rates
     #[Validate('required|numeric|min:1|max:1000|decimal:0,2', as: 'base rate', onUpdate: false)]
-    public $base_rate;
+    public ?int $base_rate;
 
     #[Validate('required|numeric|min:0|max:99', as: 'tax rate', onUpdate: false)]
-    public $tax_rate;
+    public ?int $tax_rate;
 
     #[Validate([
-        'fees' => '',
+        'fees' => 'nullable|array:name,amount,type',
         'fees.*.name' => 'required|string|max:250',
         'fees.*.amount' => 'required|numeric|min:0|max:1000|decimal:0,2',
-        'fees.*.type' => 'required|',
+        'fees.*.type' => 'required|in:fixed,variable',
+    ], as: [
+        'fees.*.name' => 'fee name',
+        'fees.*.amount' => 'fee amount',
+        'fees.*.type' => 'fee type',
     ])]
-    public array $fees;
+    public array $fees = [];
 
     // Photos
-    #[Validate('required|', as: '')]
-    public $selected_photos;
+    #[Validate([
+        'photos' => 'required',
+        'photos.*' => 'required|image|mimes:jpg,jpeg,png,webp,bmp|extensions:jpg,jpeg,png,webp,bmp|max:10240',
+    ], as: [
+        'photos.' => 'photos',
+        'photos.*' => 'photo',
+    ])]
+    public array $photos = [];
 
     // Options
-    #[Validate('required|', as: '')]
-    public $duration_min;
+    #[Validate('required|string|max:250|unique:properties,slug|regex:^[a-z0-9]+(?:-[a-z0-9]+)*$', as: 'url', onUpdate: false)]
+    public ?string $slug;
 
-    #[Validate('required|', as: '')]
-    public $duration_max;
+    #[Validate('required|integer|min:1|max:99', as: 'minimum nights')]
+    public int $duration_min = 1;
 
-    #[Validate('required|', as: '')]
-    public $slug;
+    #[Validate('required|integer|min:1|max:99', as: 'maximum nights')]
+    public int $duration_max = 14;
 
-    #[Validate('required|', as: '')]
-    public $visibility;
+    #[Validate('required|string|in:private,unlisted,public', as: 'visibility')]
+    public ?string $visibility;
 
-    #[Validate('required|', as: '')]
-    public $calendar_color;
+    #[Validate('required|regex:/^#[0-9A-Fa-f]{6}$/', as: 'color')]
+    public string $calendar_color = "#2563eb";
 }

app/resources/css/app.css

@@ -65,16 +65,16 @@
         @apply -page-x-padding -page-y-padding;
     }
     .page-x-padding {
-        @apply px-4 tablet:px-6;
+        @apply px-4 tablet-lg:px-6;
     }
     .-page-x-padding {
-        @apply -mx-4 tablet:-mx-6;
+        @apply -mx-4 tablet-lg:-mx-6;
     }
     .page-y-padding {
-        @apply py-4 tablet:py-6;
+        @apply py-4 tablet-lg:py-6;
     }
     .-page-y-padding {
-        @apply -my-4 tablet:-my-6;
+        @apply -my-4 tablet-lg:-my-6;
     }
 
     .page-container {
@@ -84,7 +84,7 @@
         @apply page-padding mb-8 border-b border-gray-300 bg-white;
     }
     .page-title {
-        @apply text-2xl font-bold text-gray-700 tablet:font-bold;
+        @apply text-2xl font-bold text-gray-700 tablet-lg:font-bold;
     }
     .page-desc {
         @apply mt-2 text-muted;
@@ -101,20 +101,20 @@
 
     /* Cards */
     /* .card-container {
-        @apply mx-0 w-full tablet-sm:mx-6;
+        @apply mx-0 w-full tablet:mx-6;
     } */
     .card {
-        @apply has-border bg-white tablet-sm:rounded-xl;
+        @apply has-border bg-white tablet:rounded-xl;
     }
     .card-padding {
-        /* @apply px-6 py-8 tablet-sm:px-8; */
+        /* @apply px-6 py-8 tablet:px-8; */
         @apply page-padding;
     }
     .card-flex {
         @apply flex flex-col space-y-8;
     }
     /* .card-padding-sm {
-        @apply px-6 py-6 tablet-sm:px-8;
+        @apply px-6 py-6 tablet:px-8;
     } */
     .card-header {
         @apply flex flex-col space-y-2;
@@ -147,7 +147,7 @@
         @apply grid grid-cols-1 gap-x-8 gap-y-4 laptop:grid-cols-3;
     }
     /* .form-section-details {
-        @apply page-x-padding flex flex-col justify-center space-y-0 tablet-sm:p-0;
+        @apply page-x-padding flex flex-col justify-center space-y-0 tablet:p-0;
     }
     .form-section-header {
         @apply text-lg font-semibold;
@@ -193,7 +193,7 @@
     }
     .form-input {
         @apply w-full border-0 bg-transparent p-0 placeholder:text-muted-light focus-within:placeholder-muted-lighter focus:outline-none focus:ring-0;
-        /* @apply has-border block w-full rounded-md border-0 bg-gray-100 px-3 py-2 text-lg leading-6 ring-inset placeholder:text-muted-light hover:shadow hover:ring-1 hover:ring-gray-400/60 focus:bg-white focus:placeholder-gray-200 focus:ring-2 focus:ring-inset focus:ring-primary dark:bg-gray-900/70 dark:ring-gray-700 dark:placeholder:text-gray-700 dark:focus:ring-primary tablet-sm:text-base; */
+        /* @apply has-border block w-full rounded-md border-0 bg-gray-100 px-3 py-2 text-lg leading-6 ring-inset placeholder:text-muted-light hover:shadow hover:ring-1 hover:ring-gray-400/60 focus:bg-white focus:placeholder-gray-200 focus:ring-2 focus:ring-inset focus:ring-primary dark:bg-gray-900/70 dark:ring-gray-700 dark:placeholder:text-gray-700 dark:focus:ring-primary tablet:text-base; */
     }
     .form-input-error {
         @apply !ring-2 !ring-red-500;
@@ -349,15 +349,15 @@
         @apply mx-auto flex max-w-screen-laptop flex-col space-y-10;
     }
     .frontend-section {
-        @apply flex flex-col space-y-5 tablet-sm:p-10;
+        @apply flex flex-col space-y-5 tablet:p-10;
     }
     .frontend-title {
         @apply text-3xl font-semibold;
     }
 
     /* Properties */
     .frontend-property-grid {
-        @apply grid grid-cols-1 gap-10 tablet-sm:grid-cols-3;
+        @apply grid grid-cols-1 gap-10 tablet:grid-cols-3;
     }
 }
 
@@ -433,4 +433,7 @@
     .label-space {
         @apply !mt-[31px];
     }
+    .color-input > input{
+        @apply p-0.5
+    }
 }

app/resources/js/_masks.js

@@ -0,0 +1,17 @@
+
+/**
+ * This mask is to validate a url slug
+ *
+ * @param {string} text - the text to mask
+ * @returns
+ */
+function slugify(text) {
+    return text.toString().toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with dashes
+        .replace(/[^\w\-]+/g, '') // Remove non-word characters
+        .replace(/\-\-+/g, '-') // Replace multiple dashes with a single dash
+        .replace(/^-+/, '') // Remove leading dashes
+    // .replace(/-+$/, ''); // Remove trailing dashes
+}
+
+window.slugify = slugify