From b9d50263c4cfea56755472029203090b5ae08c22 Mon Sep 17 00:00:00 2001
From: Urban Rotnik <urban.rotnik@gmail.com>
Date: Thu, 7 Nov 2019 14:37:01 +0100
Subject: [PATCH] Add simple emoji picker

---
 .../status_column_type.js                     | 50 +++++++++++++++----
 app/assets/stylesheets/repositories.scss      | 13 +++++
 .../manage_column_partials/_status.html.erb   | 49 ++++++++----------
 3 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
index 2150873cc..4ee6ded3f 100644
--- a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
+++ b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
@@ -7,11 +7,18 @@ var RepositoryStatusColumnType = (function() {
     return `
     <div class="status-item-container loading">
       <div class="status-item-icon"></div>
-        <input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
-               class="status-item-field"
-               type="text"/>
-        <span class="status-item-icon-trash fas fa-trash"></span>
-      </div>
+      <input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
+             class="status-item-field"
+             type="text"/>
+      <span class="status-item-icon-trash fas fa-trash"></span>
+    </div>
+    <div class="emojis-picker">
+      <span data-emoji-code="128540">&#128540;</span>
+      <span data-emoji-code="128520">&#128520;</span>
+      <span data-emoji-code="128526">&#128526;</span>
+      <span data-emoji-code="128531">&#128531;</span>
+      <span data-emoji-code="128535">&#128535;</span>
+      <span data-emoji-code="128536">&#128536;</span>
     </div>`;
   }
 
@@ -19,6 +26,8 @@ var RepositoryStatusColumnType = (function() {
     var $manageModal = $(manageModal);
     var addStatusOptionBtn = '.add-status';
     var deleteStatusOptionBtn = '.status-item-icon-trash';
+    var icon = '.status-item-icon';
+    var emojis = '.emojis-picker>span';
 
     $manageModal.off('click', addStatusOptionBtn).on('click', addStatusOptionBtn, function() {
       var newStatusRow = $(statusTemplate()).insertBefore($(this));
@@ -32,15 +41,38 @@ var RepositoryStatusColumnType = (function() {
     });
 
     $manageModal.off('click', deleteStatusOptionBtn).on('click', deleteStatusOptionBtn, function() {
-      var statusRow = $(this).parent();
+      // if existing item is deleted, flag it as deleted
+      // if new item is deleted, remove it from HTML
+
+      var $statusRow = $(this).parent();
+      var $emojis = $statusRow.next('.emojis-picker');
+      var isNewRow = $statusRow.data('id') == null;
+
       setTimeout(function() {
-        statusRow.addClass('loading');
-        statusRow.css('height', '0px');
+        $statusRow.addClass('loading');
+        $statusRow.css('height', '0px');
       }, 0);
       setTimeout(function() {
-        statusRow.remove();
+        if (isNewRow) {
+          $statusRow.remove();
+        } else {
+          $statusRow.attr('data-removed', 'true');
+          $statusRow.removeClass('loading');
+        }
+        $emojis.remove();
       }, 300);
     });
+
+    $manageModal.off('click', icon).on('click', icon, function() {
+      var $emojiPicker = $(this).parent().next('.emojis-picker');
+      $emojiPicker.show();
+    });
+
+    $manageModal.off('click', emojis).on('click', emojis, function() {
+      var $clickedEmoji = $(this);
+      $clickedEmoji.parent().hide();
+      $clickedEmoji.parent().prev().find('.status-item-icon').html($clickedEmoji.html());
+    });
   }
 
   return {
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index 6ee9bf1b8..e68780725 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -322,6 +322,7 @@
 .status-item-container {
   align-items: center;
   display: flex;
+  height: 34px;
   margin-bottom: 5px;
   transition: .3s;
 
@@ -332,6 +333,10 @@
       display: none;
     }
   }
+
+  &[data-removed="true"] {
+    display: none;
+  }
 }
 
 .status-item-field {
@@ -394,3 +399,11 @@
     padding-left: 5px;
   }
 }
+
+.emojis-picker {
+  border: 1px solid $color-gainsboro;
+  display: none;
+  font-size: 30px;
+  height: 40px;
+  width: 211px;
+}
diff --git a/app/views/repository_columns/manage_column_partials/_status.html.erb b/app/views/repository_columns/manage_column_partials/_status.html.erb
index f76ad84ee..f917e39a9 100644
--- a/app/views/repository_columns/manage_column_partials/_status.html.erb
+++ b/app/views/repository_columns/manage_column_partials/_status.html.erb
@@ -3,32 +3,27 @@
     <%= t('libraries.manange_modal_column.status_type.status_options_label') %>
   </label>
   <div class="col-sm-9">
-    <%# fields_for column.repository_status_items do |item| %>
-<!--      <div class="field">-->
-        <%#= item.text_field :status %>
-<!--      </div>-->
-    <%# end %>
-
-    <%#= form_for column, url: '#' do |form| %>
-
-      <%#= form.fields_for :repository_status_items do |item| %>
-        <%#= item.text_field :status %>
-      <%# end %>
-
-    <%# end %>
-
-  <% column.repository_status_items.each do |item| %>
-        <div class="status-item-container">
-          <div class="status-item-icon"><%= item.icon %></div>
-          <input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
-                 class="status-item-field"
-                 type="text"
-                 value="<%= item.status %>"/>
-          <span class="status-item-icon-trash fas fa-trash"></span>
-        </div>
-  <% end %>
-  <div class="add-status">
-    <span class="fas fa-plus"></span>
-    <span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
+    <% column.repository_status_items.each do |item| %>
+      <div class="status-item-container" data-id="<%= item.id %>">
+        <div class="status-item-icon"><%= item.icon %></div>
+        <input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
+               class="status-item-field"
+               type="text"
+               value="<%= item.status %>"/>
+        <span class="status-item-icon-trash fas fa-trash"></span>
+      </div>
+      <div class="emojis-picker">
+        <span data-emoji-code="128540">&#128540;</span>
+        <span data-emoji-code="128520">&#128520;</span>
+        <span data-emoji-code="128526">&#128526;</span>
+        <span data-emoji-code="128531">&#128531;</span>
+        <span data-emoji-code="128535">&#128535;</span>
+        <span data-emoji-code="128536">&#128536;</span>
+      </div>
+    <% end %>
+    <div class="add-status">
+      <span class="fas fa-plus"></span>
+      <span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
+    </div>
   </div>
 </div>