add email autocompletion on event invitation modal / intergrate Email…

… entity

assets/controllers/autocompleter_controller.js

@@ -0,0 +1,85 @@
+import {Controller} from '@hotwired/stimulus';
+import {Toast} from "bootstrap";
+
+export default class extends Controller {
+
+    static targets = ['input', 'list', 'item', 'selected']
+    static values = {
+        path: String,
+        isVisible: false
+    }
+
+    connect() {
+        this.outputArray = []
+    }
+
+    filter(event) {
+        if (event.key === 'Enter') {
+            this.addUnknownEmail()
+        }
+
+        const inputValue = this.inputTarget.value.toLowerCase()
+        this.itemTargets.forEach((item) => {
+            const itemValue = item.getAttribute('data-email-value').toLowerCase()
+            if (itemValue.includes(inputValue)) {
+                item.style.display = "block"
+            } else {
+                item.style.display = "none"
+            }
+        });
+    }
+
+    add(event) {
+        let emailAddress = event.target.getAttribute('data-email-value').toLowerCase()
+        if (this.canAddEmailToOutputArray(emailAddress)) {
+            this.outputArray.push(emailAddress)
+            let badge = this.createEmailBadge(emailAddress)
+            this.selectedTarget.appendChild(badge)
+            this.disableItem(event.target)
+        }
+    }
+
+    remove(event) {
+        let badge = event.target.parentElement.parentElement
+        let emailAddress = badge.getAttribute('data-email-value').toLowerCase()
+        let emailToRemove = this.outputArray.indexOf(emailAddress);
+        this.outputArray.splice(emailToRemove, 1);
+        this.enableItem(emailAddress)
+        badge.remove();
+    }
+
+    disableItem(item) {
+        item.classList.add('disabled')
+    }
+
+    enableItem(emailAddress) {
+        let item = this.itemTargets.filter((item) => {
+            return item.getAttribute('data-email-value').toLowerCase() === emailAddress
+        })[0]
+        if (item) {
+            item.classList.remove('disabled')
+        }
+    }
+
+    canAddEmailToOutputArray(emailAddress) {
+        return !this.outputArray.includes(emailAddress);
+    }
+
+    addUnknownEmail() {
+        let emailAddress = this.inputTarget.value.toLowerCase()
+        if (this.canAddEmailToOutputArray(emailAddress)) {
+            this.outputArray.push(emailAddress)
+            let badge = this.createEmailBadge(emailAddress)
+            this.selectedTarget.appendChild(badge)
+            this.inputTarget.value = ''
+        }
+
+    }
+
+    createEmailBadge(emailAddress) {
+        let badge = document.createElement('div')
+        badge.setAttribute('data-email-value', emailAddress)
+        badge.innerHTML = `<div class="d-flex justify-content-between align-items-center badge rounded-pill text-bg-dark-grey m-1"><div class="lead me-3">${emailAddress}</div><div class="bi bi-x-circle fs-5 link-danger" data-action="click->autocompleter#remove"></div></div>`
+        return badge
+    }
+}

assets/styles/_variables.scss

@@ -96,6 +96,7 @@ $input-box-shadow: 0 !default;
 
 $input-focus-border-color: $gray-400 !default;
 $input-focus-color: $black;
+$input-placeholder-color: $black;
 $input-focus-box-shadow:  0 !default;
 $input-group-addon-bg: $gray-100 !default;
 

assets/styles/app.scss

@@ -10,15 +10,20 @@
 
 .text-bg-dark-grey {
   color: #333 !important;
-  background-color: rgba(0,0,0,0.07) !important;
+  background-color: rgba(0, 0, 0, 0.07) !important;
 }
 
-body{
+.text-dark-grey {
+  color: rgba(73, 80, 87, 0.75) !important;
+}
+
+
+body {
   padding: 0;
   margin: 0;
 }
 
-.z-90001{
+.z-90001 {
   z-index: 90001 !important;
 }
 
@@ -30,30 +35,31 @@ body{
   filter: blur(var(--value, .2rem))
 }
 
-.min-vh-10{
+.min-vh-10 {
   min-height: 10vh;
 }
 
-.min-vh-25{
-   min-height: 25vh;
+.min-vh-25 {
+  min-height: 25vh;
 }
-.min-vh-50{
-   min-height: 50vh;
+
+.min-vh-50 {
+  min-height: 50vh;
 }
 
-.min-vh-60{
+.min-vh-60 {
   min-height: 60vh;
 }
 
-.min-vh-70{
+.min-vh-70 {
   min-height: 70vh;
 }
 
-.min-vh-80{
+.min-vh-80 {
   min-height: 80vh;
 }
 
-.min-vh-90{
+.min-vh-90 {
   min-height: 90vh;
 }
 
@@ -96,7 +102,7 @@ body{
   z-index: 90000;
 }
 
-.messages_container{
+.messages_container {
   min-height: 50vh;
   max-height: 50vh;
   overflow-x: hidden;

composer.json

@@ -7,6 +7,7 @@
         "php": "^8.2",
         "ext-ctype": "*",
         "ext-iconv": "*",
+        "api-platform/core": "^3.2",
         "doctrine/doctrine-bundle": "^2.10",
         "doctrine/doctrine-fixtures-bundle": "^3.4",
         "doctrine/doctrine-migrations-bundle": "^3.2",