#97: add emojis to foodvendor

assets/app.js

@@ -14,9 +14,11 @@ import './javascript/theme.js';
 import './javascript/emoji-footprint.js';
 import './javascript/modes.js';
 import './javascript/htmx.js';
+import emojiButtonListener from './javascript/emoji-button.js';
 import 'bootstrap';
 import { initRadioState } from './javascript/radioState.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     initRadioState();
+    emojiButtonListener();
 });

assets/javascript/emoji-button.js

@@ -0,0 +1,14 @@
+const emojiButtonListener = function () {
+    const buttons = document.querySelectorAll('.emoji-buttons .btn.btn-primary');
+
+    buttons.forEach(button => {
+        button.addEventListener('click', function() {
+            const emojiField = document.querySelector('#food_vendor_emojis');
+            if (emojiField) {
+                emojiField.value += this.textContent;
+            }
+        });
+    });
+}
+
+export default emojiButtonListener;

importmap.php

@@ -1,4 +1,4 @@
-<?php declare(strict_types=1);
+<?php
 
 /**
  * Returns the importmap for this application.
@@ -27,6 +27,6 @@ return [
         'type' => 'css',
     ],
     'htmx.org' => [
-        'version' => '1.9.12',
+        'version' => '2.0.5',
     ],
 ];

src/Entity/FoodVendor.php

@@ -7,23 +7,27 @@ use App\Repository\FoodVendorRepository;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
+use InvalidArgumentException;
 use Symfony\Bridge\Doctrine\IdGenerator\UlidGenerator;
 use Symfony\Bridge\Doctrine\Types\UlidType;
 use Symfony\Component\Serializer\Annotation\Groups;
 use Symfony\Component\Uid\Ulid;
 
+use Symfony\Component\Validator\Constraints\Length;
+use function mb_strlen;
+
 #[ORM\Entity(repositoryClass: FoodVendorRepository::class)]
 #[ApiResource]
 class FoodVendor
 {
     #[ORM\Column(length: 50)]
-    #[Groups(['food_order:latest'])]
+    #[Groups(['food_order:latest', 'food_vendor:read'])]
     private string|null $name = null;
 
     #[ORM\Column(length: 50, nullable: true, options: [
         'default' => '',
     ])]
-    #[Groups(['food_order:latest'])]
+    #[Groups(['food_order:latest', 'food_vendor:read'])]
     private string|null $phone = null;
 
     /**
@@ -42,6 +46,14 @@ class FoodVendor
     #[Groups(['food_order:latest'])]
     private string|null $menuLink = null;
 
+    /**
+     * String of emojis (max 30 characters)
+     */
+    #[ORM\Column(length: 30, nullable: true)]
+    #[Groups(['food_order:latest', 'food_vendor:read'])]
+    #[Length(max: 10)]
+    private string|null $emojis = null;
+
     public function __construct(
         #[ORM\Id]
         #[ORM\GeneratedValue(strategy: 'CUSTOM')]
@@ -155,4 +167,19 @@ class FoodVendor
         $this->phone = $phone;
         return $this;
     }
+
+    public function getEmojis(): string|null
+    {
+        return $this->emojis;
+    }
+
+    public function setEmojis(string|null $emojis): static
+    {
+        if ($emojis !== null && mb_strlen($emojis) > 30) {
+            throw new InvalidArgumentException('A maximum of 30 characters is allowed for emojis');
+        }
+
+        $this->emojis = $emojis;
+        return $this;
+    }
 }

src/Form/FoodVendorType.php

@@ -17,6 +17,7 @@ final class FoodVendorType extends AbstractType
             ->add('name')
             ->add('menuLink')
             ->add('phone')
+            ->add('emojis')
         ;
     }
 

templates/food_vendor/edit.html.twig

@@ -9,5 +9,121 @@
         {{ include('food_vendor/_form.html.twig', {'button_label': 'Update'}) }}
     </div>
 
+    <div class="mb-4 emoji-buttons" data-role="emoji-selector">
+        <button class="btn btn-primary">🍕</button>
+        <button class="btn btn-primary">🍔</button>
+        <button class="btn btn-primary">🌮</button>
+        <button class="btn btn-primary">🍜</button>
+        <button class="btn btn-primary">🥗</button>
+        <button class="btn btn-primary">☕</button>
+        <button class="btn btn-primary">🍣</button>
+        <button class="btn btn-primary">🍤</button>
+        <button class="btn btn-primary">🍦</button>
+        <button class="btn btn-primary">🍩</button>
+        <button class="btn btn-primary">🍪</button>
+        <button class="btn btn-primary">🍰</button>
+        <button class="btn btn-primary">🍫</button>
+        <button class="btn btn-primary">🍿</button>
+        <button class="btn btn-primary">🍩</button>
+        <button class="btn btn-primary">🍭</button>
+        <button class="btn btn-primary">🍮</button>
+        <button class="btn btn-primary">🍯</button>
+        <button class="btn btn-primary">🍎</button>
+        <button class="btn btn-primary">🍊</button>
+        <button class="btn btn-primary">🍋</button>
+        <button class="btn btn-primary">🍌</button>
+        <button class="btn btn-primary">🍉</button>
+        <button class="btn btn-primary">🍇</button>
+        <button class="btn btn-primary">🍓</button>
+        <button class="btn btn-primary">🍈</button>
+        <button class="btn btn-primary">🍒</button>
+        <button class="btn btn-primary">🍍</button>
+        <button class="btn btn-primary">🥭</button>
+        <button class="btn btn-primary">🥥</button>
+        <button class="btn btn-primary">🥝</button>
+        <button class="btn btn-primary">🍅</button>
+        <button class="btn btn-primary">🍆</button>
+        <button class="btn btn-primary">🥑</button>
+        <button class="btn btn-primary">🥦</button>
+        <button class="btn btn-primary">🥒</button>
+        <button class="btn btn-primary">🌽</button>
+        <button class="btn btn-primary">🥕</button>
+        <button class="btn btn-primary">🧄</button>
+        <button class="btn btn-primary">🧅</button>
+        <button class="btn btn-primary">🥔</button>
+        <button class="btn btn-primary">🍠</button>
+        <button class="btn btn-primary">🥐</button>
+        <button class="btn btn-primary">🥯</button>
+        <button class="btn btn-primary">🍞</button>
+        <button class="btn btn-primary">🥖</button>
+        <button class="btn btn-primary">🥨</button>
+        <button class="btn btn-primary">🧀</button>
+        <button class="btn btn-primary">🥚</button>
+        <button class="btn btn-primary">🍳</button>
+        <button class="btn btn-primary">🥞</button>
+        <button class="btn btn-primary">🧇</button>
+        <button class="btn btn-primary">🥓</button>
+        <button class="btn btn-primary">🥩</button>
+        <button class="btn btn-primary">🍗</button>
+        <button class="btn btn-primary">🍖</button>
+        <button class="btn btn-primary">🌭</button>
+        <button class="btn btn-primary">🍔</button>
+        <button class="btn btn-primary">🍟</button>
+        <button class="btn btn-primary">🍕</button>
+        <button class="btn btn-primary">🥪</button>
+        <button class="btn btn-primary">🌮</button>
+        <button class="btn btn-primary">🌯</button>
+        <button class="btn btn-primary">🥙</button>
+        <button class="btn btn-primary">🧆</button>
+        <button class="btn btn-primary">🥘</button>
+        <button class="btn btn-primary">🍲</button>
+        <button class="btn btn-primary">🥣</button>
+        <button class="btn btn-primary">🥗</button>
+        <button class="btn btn-primary">🍿</button>
+        <button class="btn btn-primary">🧈</button>
+        <button class="btn btn-primary">🧂</button>
+        <button class="btn btn-primary">🥫</button>
+        <button class="btn btn-primary">🍱</button>
+        <button class="btn btn-primary">🍛</button>
+        <button class="btn btn-primary">🍚</button>
+        <button class="btn btn-primary">🍙</button>
+        <button class="btn btn-primary">🍘</button>
+        <button class="btn btn-primary">🍢</button>
+        <button class="btn btn-primary">🍡</button>
+        <button class="btn btn-primary">🍧</button>
+        <button class="btn btn-primary">🍨</button>
+        <button class="btn btn-primary">🍦</button>
+        <button class="btn btn-primary">🥧</button>
+        <button class="btn btn-primary">🍰</button>
+        <button class="btn btn-primary">🎂</button>
+        <button class="btn btn-primary">🍮</button>
+        <button class="btn btn-primary">🍭</button>
+        <button class="btn btn-primary">🍬</button>
+        <button class="btn btn-primary">🍫</button>
+        <button class="btn btn-primary">🍿</button>
+        <button class="btn btn-primary">🍩</button>
+        <button class="btn btn-primary">🍪</button>
+        <button class="btn btn-primary">🌰</button>
+        <button class="btn btn-primary">🥜</button>
+        <button class="btn btn-primary">🍯</button>
+        <button class="btn btn-primary">🥛</button>
+        <button class="btn btn-primary">🍼</button>
+        <button class="btn btn-primary">☕</button>
+        <button class="btn btn-primary">🍵</button>
+        <button class="btn btn-primary">🍶</button>
+        <button class="btn btn-primary">🍾</button>
+        <button class="btn btn-primary">🍷</button>
+        <button class="btn btn-primary">🍸</button>
+        <button class="btn btn-primary">🍹</button>
+        <button class="btn btn-primary">🍺</button>
+        <button class="btn btn-primary">🍻</button>
+        <button class="btn btn-primary">🥂</button>
+        <button class="btn btn-primary">🥃</button>
+        <button class="btn btn-primary">🥤</button>
+        <button class="btn btn-primary">🧃</button>
+        <button class="btn btn-primary">🧉</button>
+        <button class="btn btn-primary">🧊</button>
+    </div>
+
     <a class="btn btn-secondary" href="{{ path('app_food_vendor_index') }}">back to list</a>
 {% endblock %}

tests/Unit/Entity/FoodVendorTest.php

@@ -5,6 +5,7 @@ namespace App\Tests\Unit\Entity;
 use App\Entity\FoodOrder;
 use App\Entity\FoodVendor;
 use App\Entity\MenuItem;
+use InvalidArgumentException;
 use Symfony\Component\Uid\Ulid;
 
 use function describe;
@@ -20,6 +21,17 @@ describe(FoodVendor::class, function (): void {
         $vendor->setPhone('1234567890');
         $this->assertEquals('1234567890', $vendor->getPhone());
 
+        // Test emojis field
+        $this->assertNull($vendor->getEmojis());
+        $emojis = '😀😂🎉👍❤️';
+        $vendor->setEmojis($emojis);
+        $this->assertEquals($emojis, $vendor->getEmojis());
+
+        // Test emojis validation
+        $tooManyEmojis = '😀😂🎉👍❤️🚀🎈🎁🎊🎋🎍🎎🎏🎐🎑🎒🎓🎔🎕🎖🎗🎘🎙🎚🎛🎜🎝🎞🎟🎠🎡🎢';
+        $this->expectException(InvalidArgumentException::class);
+        $vendor->setEmojis($tooManyEmojis);
+
         $this->assertCount(0, $vendor->getFoodOrders());
         $order1 = new FoodOrder;
         $vendor->addFoodOrder($order1);