ui enhances; removing text placeholders

2amigos · Sep 15, 2023 · 8ed1e69 · 8ed1e69
1 parent b3c51e4
commit 8ed1e69
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 43 deletions.
diff --git a/app/Livewire/QrCodeComponent.php b/app/Livewire/QrCodeComponent.php
@@ -18,6 +18,7 @@ class QrCodeComponent extends Component
     use LivewireAlert;
 
     protected QrCode $qrCode;
+    public string $uri;
     public int $format;
     public array $options;
     public array $colors = [
@@ -29,27 +30,19 @@ class QrCodeComponent extends Component
     public ?string $logoPath = null;
 
     public function mount()
-    {
-        $this->init();
-    }
-
-    protected function init($notify = false)
     {
         $this->format = FormatEnum::Text->value;
-        $this->options = [
-            'text' => 'https://2am.tech',
-        ];
+        $this->options = ['text' => 'https://2am.tech'];
+        $this->qrCode = QrCodeFactory::build($this->format, $this->options);
 
-        $this->build(notify: $notify);
+        $this->setUri();
     }
 
     #[On('create-qr-code')]
     public function create(int $format, array $options)
     {
         $this->format = $format;
         $this->options = $options;
-
-        $this->build();
     }
 
     #[On('apply-colors')]
@@ -59,8 +52,6 @@ public function applyColors(array $foreground, array $background)
             'background' => $background,
             'foreground' => $foreground,
         ];
-
-        $this->build();
     }
 
     #[On('apply-label')]
@@ -73,31 +64,25 @@ public function applyLabel(string $label, int $size, string $alignment)
             'align' => $alignment,
         ]
         : null;
-
-        $this->build();
     }
 
     #[On('apply-margin')]
     public function applyMargin(int $margins)
     {
         $this->margins = $margins;
-
-        $this->build();
     }
 
     #[On('apply-logo')]
     public function applyLogo(string $path)
     {
         $this->logoPath = $path;
-
-        $this->build();
     }
 
-    public function build($notify = true)
+    public function build()
     {
-        $this->normalizeOptions();
-
         try {
+            $this->normalizeOptions();
+
             /** @var QrCode $qrCode */
             $qrCode = QrCodeFactory::build($this->format, $this->options);
 
@@ -127,21 +112,18 @@ public function build($notify = true)
             }
 
             $this->qrCode = $qrCode;
+            $this->setUri();
 
-            if ($notify) {
-                $this->alert('success', 'QR Code updated!');
-            }
+            $this->alert('success', 'QR Code updated!');
         } catch (Exception $exception) {
             $this->init();
             $this->alert('error', $exception->getMessage());
         }
     }
 
-    public function getUri()
+    public function setUri()
     {
-        return isset($this->qrCode)
-            ? $this->qrCode->writeDataUri()
-            : '';
+        $this->uri = $this->qrCode->writeDataUri();
     }
 
     public function download(string $extension)
@@ -159,8 +141,8 @@ public function download(string $extension)
     }
 
     /**
-     * set the options the meet current's format data type
      * @return void
+     * @throws Exception
      */
     protected function normalizeOptions(): void
     {
@@ -173,6 +155,19 @@ protected function normalizeOptions(): void
                 ->timezone(null)
                 ->getTimestamp();
         }
+
+        if ($this->format === FormatEnum::Youtube->value) {
+            $url = $this->options['videoId'];
+
+            $matches = null;
+            preg_match('/(?<=v=).*(?=&)/', $url, $matches);
+
+            if (!is_array($matches) || empty($matches)) {
+                throw new Exception('Invalid URl');
+            }
+
+            $this->options['videoId'] = $matches[0];
+        }
     }
 
     public function render()

diff --git a/app/Livewire/Traits/FormsTrait.php b/app/Livewire/Traits/FormsTrait.php
@@ -68,7 +68,7 @@ protected function getRulesByForamt(int $format): array
                 'password' => 'string|required',
             ],
             FormatEnum::Youtube->value => [
-                'videoId' => 'string',
+                'videoId' => 'regex:(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))',
             ],
             FormatEnum::MeCard->value => [
                 'firstName' => 'string|required',

diff --git a/resources/views/components/icons/tools.blade.php b/resources/views/components/icons/tools.blade.php
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
+</svg>
diff --git a/resources/views/components/inputs/upload.blade.php b/resources/views/components/inputs/upload.blade.php
@@ -3,7 +3,7 @@
         <div class="w-full flex flex-row shadow h-10
             items-center p-3 mt-4 rounded text-gray-500">
             <span class="flex relative basis-11/12">
-                Upload a file
+                {{ $this->file ? $this->file->getClientOriginalName() : __('Upload a file') }}
             </span>
             <div class="w-max relative justify-content-end">
                 <x-icons.upload/>

diff --git a/resources/views/components/options/colors.blade.php b/resources/views/components/options/colors.blade.php
@@ -1,7 +1,7 @@
 <div>
     <h1 class="text-black text-[18px] font-bold mb-3"> Colors </h1>
-    <span>
-        Loren ipsum dolor describe function
+    <span class="text-gray-400">
+        Define the colors for both QR Code lines and backgorund
     </span>
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10 mt-8">

diff --git a/resources/views/components/options/label.blade.php b/resources/views/components/options/label.blade.php
@@ -1,7 +1,7 @@
 <div>
     <h1 class="text-black text-[18px] font-bold mb-3"> Label </h1>
-    <span>
-        Loren ipsum dolor describe function
+    <span class="text-gray-400">
+        Define a Label and how it will be displayed under your generated QR Code
     </span>
     <x-inputs.text wire:model.lazy="label" :placeholder="'Label'" class="mt-3"/>
     <x-error :for="'label'"/>

diff --git a/resources/views/components/options/logo.blade.php b/resources/views/components/options/logo.blade.php
@@ -1,7 +1,7 @@
 <div>
     <h1 class="text-black text-[18px] font-bold mb-3"> Logo </h1>
-    <span>
-        Loren ipsum dolor describe function
+    <span class="text-gray-400">
+        Set up a logo for your QR Code
     </span>
 
     <x-inputs.upload :model="'file'" />

diff --git a/resources/views/components/options/margin.blade.php b/resources/views/components/options/margin.blade.php
@@ -1,7 +1,7 @@
 <div>
     <h1 class="text-black text-[18px] font-bold mb-3"> Margin </h1>
-    <span>
-        Loren ipsum dolor describe function
+    <span class="text-gray-400">
+        Define the margins for your QR Code
     </span>
 
     <x-inputs.text type="int" wire:model.lazy="margins" class="mt-3" />

diff --git a/resources/views/forms/youtube.blade.php b/resources/views/forms/youtube.blade.php
@@ -1,7 +1,7 @@
 <div>
     <label for="videoId">
-        Video ID <span class="text-tred">*</span>
+        Video URL <span class="text-tred">*</span>
     </label>
-    <x-inputs.text wire:model.lazy="form.videoId" id="videoId"/>
+    <x-inputs.text wire:model.lazy="form.videoId" id="videoId" placeholder="https://www.youtube.com/watch?v=..."/>
     <x-error :for="'form.videoId'"/>
 </div>
diff --git a/resources/views/livewire/qr_code_component.blade.php b/resources/views/livewire/qr_code_component.blade.php
@@ -2,11 +2,18 @@
     <div class="w-full flex justify-center">
         <div class="flex w-72 bg-gray-50 rounded-lg shadow">
             <div class="border-4 border-tred rounded-md">
-                <img src="{{$this->getUri()}}"/>
+                <img src="{{$uri}}"/>
             </div>
         </div>
     </div>
     <div class="pt-3">
+        <x-inputs.success-button wire:click.debounce.400ms="build()" class="w-full flex flex-row mt-3">
+            <div class="basis-10/12">
+                Create QR Code
+            </div>
+            <x-icons.tools/>
+        </x-inputs.success-button>
+
         <x-inputs.success-button wire:click="download('png')" class="w-full flex flex-row mt-3">
             <div class="basis-10/12">
                 Download PNG