From 57a5517e19956f20d1deece917bcf10891481ec3 Mon Sep 17 00:00:00 2001
From: afornerot <afornerot@cadoles.com>
Date: Fri, 17 Jul 2020 16:06:18 +0200
Subject: [PATCH] system de tag sur les icones (ref #190)

---
 .../src/Cadoles/PortalBundle/Entity/Icon.php  | 29 +++++++++++
 .../Cadoles/PortalBundle/Form/IconType.php    |  5 ++
 .../Resources/views/Icon/edit.html.twig       |  3 ++
 .../Resources/views/Icon/select.html.twig     | 50 +++++++++++++++++--
 4 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/ninegate-1.0/src/Cadoles/PortalBundle/Entity/Icon.php b/src/ninegate-1.0/src/Cadoles/PortalBundle/Entity/Icon.php
index a7a75e53..a06b708c 100644
--- a/src/ninegate-1.0/src/Cadoles/PortalBundle/Entity/Icon.php
+++ b/src/ninegate-1.0/src/Cadoles/PortalBundle/Entity/Icon.php
@@ -27,6 +27,11 @@ class Icon
      */
     private $label;
 
+    /**
+     * @ORM\Column(type="string", length=250, nullable=true)
+     */
+    private $tags;
+
     /**
      * @ORM\ManyToOne(targetEntity="Cadoles\CoreBundle\Entity\User", inversedBy="icons")
      * @ORM\JoinColumn(nullable=true)
@@ -398,4 +403,28 @@ class Icon
     {
         return $this->groups;
     }
+
+    /**
+     * Set tags
+     *
+     * @param string $tags
+     *
+     * @return Icon
+     */
+    public function setTags($tags)
+    {
+        $this->tags = $tags;
+
+        return $this;
+    }
+
+    /**
+     * Get tags
+     *
+     * @return string
+     */
+    public function getTags()
+    {
+        return $this->tags;
+    }
 }
diff --git a/src/ninegate-1.0/src/Cadoles/PortalBundle/Form/IconType.php b/src/ninegate-1.0/src/Cadoles/PortalBundle/Form/IconType.php
index c20aba58..40846a03 100644
--- a/src/ninegate-1.0/src/Cadoles/PortalBundle/Form/IconType.php
+++ b/src/ninegate-1.0/src/Cadoles/PortalBundle/Form/IconType.php
@@ -34,6 +34,11 @@ class IconType extends AbstractType
                 "disabled"    => ($options["mode"]=="delete"?true:false)
             )
         );
+
+        $builder->add('tags', TextType::class, [
+            'label'         => 'Tags',
+            'required'      => false
+        ]);        
     }
 
     public function configureOptions(OptionsResolver $resolver)
diff --git a/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/edit.html.twig b/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/edit.html.twig
index 3bc15ac6..b518cd5f 100755
--- a/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/edit.html.twig
+++ b/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/edit.html.twig
@@ -57,6 +57,9 @@
             <div style="width:200px; margin: 10px auto;text-align:center;">
                 Privilégiez des images carrées de minimum 90px par 90px et avec un fond transparent
             </div>
+
+            {{ form_row(form.tags) }}
+
         </div>
     </div>
 {{ form_end(form) }}
diff --git a/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/select.html.twig b/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/select.html.twig
index c6d02ba0..5b960048 100644
--- a/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/select.html.twig
+++ b/src/ninegate-1.0/src/Cadoles/PortalBundle/Resources/views/Icon/select.html.twig
@@ -2,6 +2,8 @@
 
 {% block pagewrapper %}
     <div class="row">
+        
+
         <div class="col-md-12" style="margin-bottom:15px">
             <a onclick="window.parent.$('#mymodal').modal('hide');" class="btn btn-default">Fermer</a>
             {% if access=="user" %}
@@ -12,19 +14,61 @@
         </div>  
 
         <div class="col-md-12">
+            <label class="control-label" for="group_label">Recherche</label>
+            <input type="text" id="icon_search" name="icon_search" class="form-control form-control" style="margin-bottom:15px">
+
             {% if iconsuser is not empty %}
                 <h3>Mes Icônes</h3>
-                {% for icon in iconsuser %}
-                    <img onClick="window.parent.selIcon({{ icon.id }},'{{icon.label}}')" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="/{{ alias }}/{{ icon.label }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
+                    {% for icon in iconsuser %}
+                    {% set tag = "" %}
+                    {% if icon.tags %}
+                        {% set tag = icon.tags %}
+                    {% endif %}
+                    {% if icon.label starts with 'uploads/icon/icon_' %}
+                        {% set tag = tag ~ icon.label|replace({'uploads/icon/icon_':'', '.png':''}) %}
+                    {% endif %}
+
+                    <img onClick="window.parent.selIcon({{ icon.id }},'{{icon.label}}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="/{{ alias }}/{{ icon.label }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
                 {% endfor %}                  
 
                 <h3>Icônes Communs</h3>
             {% endif %}
             {% for icon in icons %}
-                <img onClick="window.parent.selIcon({{ icon.id }},'{{icon.label}}')" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="/{{ alias }}/{{ icon.label }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
+                {% set tag = "" %}
+                {% if icon.tags %}
+                    {% set tag = icon.tags %}
+                {% endif %}
+                {% if icon.label starts with 'uploads/icon/icon_' %}
+                    {% set tag = tag ~ icon.label|replace({'uploads/icon/icon_':'', '.png':''}) %}
+                {% endif %}
+                <img onClick="window.parent.selIcon({{ icon.id }},'{{icon.label}}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="/{{ alias }}/{{ icon.label }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
             {% endfor %}                  
         </div>
     </div>
 {% endblock %}
 
+{% block localjavascript %}
+    $('document').ready(function(){
+        $( "#icon_search" ).focus();
+    });
+
+    $( "#icon_search" ).on("keyup", function() {
+        if($( "#icon_search" ).val()=="")
+            $(".grid-item-img").show();
+        else {
+            tags=$( "#icon_search" ).val().toLowerCase().split(' ');
+            
+            $(".grid-item-img").hide();
+            tags.forEach(function(tag){
+                $(".grid-item-img").each(function(index) {
+                    icontags=$( this ).attr("data");
+                    if (typeof icontags !== 'undefined') {
+                        if(icontags.includes(tag)) $(this).show();
+                    }
+                });
+            });
+        }
+    });
+{% endblock %}
+