日報作成、編集フォームのプラクティス選択をChoices.jsに置き換える。

app/assets/stylesheets/_common-imports.sass

@@ -20,6 +20,7 @@
 @import "variables/welcome-colors"
 @import "variables/layout"
 @import "variables/fonts"
+@import "variables/choices"
 
 ////////////
 // mixins

app/assets/stylesheets/modules/_choices.sass

@@ -1,11 +1,52 @@
 body
   .choices__inner
-    display: inline-flex
-    align-items: center
-    +padding(vertical, 0)
     background-color: #fafafa
     border-color: $input-border
-  .choices.is-focused .choices__inner
-    background-color: $base
-  .choices[data-type*=select-one] .choices__inner
-    padding-bottom: 0
+    padding: .25rem
+    border-radius: 4px
+    .choices.is-focused &
+      background-color: $base
+    .choices[data-type*=select-one] &
+      +padding(vertical, 0)
+      display: flex
+
+  .choices__list--single
+    padding: .25rem 2.5rem .25rem .5rem
+    display: flex
+    align-items: center
+    .choices__item
+      white-space: nowrap
+      text-overflow: ellipsis
+      overflow: hidden
+
+  .choices__list--multiple
+    .choices__item,
+    .choices__item[data-deletable]
+      display: inline-flex
+      white-space: nowrap
+      align-items: center
+      border-color: $main
+      color: $main-text
+      background-color: $main-shade
+      border-radius: 4px
+      height: 1.75rem
+      padding: 0 0 0 .5rem
+      margin: .125rem
+      &.is-highlighted
+        border-color: $main
+        color: $main-text
+        background-color: $main-shade
+
+  .choices__button
+    .choices[data-type*=select-multiple] &,
+    .choices[data-type*=text] &
+      border-left-color: $main
+      color: $main-text
+      height: 100%
+      background-image: $choices-icon-cross
+      margin: 0 0 0 .5rem
+      width: 1.75rem
+      transition: all .2s ease-out
+      &:hover
+        background-color: $main
+        background-image: $choices-icon-cross-inverse

app/assets/stylesheets/variables/_choices.sass

@@ -0,0 +1,24 @@
+$choices-selector: "choices" !default
+$choices-font-size-lg: 1rem
+$choices-font-size-md: .875rem
+$choices-font-size-sm: .75rem
+$choices-guttering: 1.5rem
+$choices-border-radius: 4px
+$choices-border-radius-item: 4px
+$choices-bg-color: #f9f9f9 !default
+$choices-bg-color-disabled: #eaeaea !default
+$choices-bg-color-dropdown: #fff !default
+$choices-text-color: $main-text
+$choices-keyline-color: #ddd !default
+$choices-primary-color: $main-shade
+$choices-disabled-color: #eaeaea !default
+$choices-highlight-color: $main-shade
+$choices-button-dimension: 8px !default
+$choices-button-offset: 8px !default
+$choices-icon-cross: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%233f3290%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E')
+$choices-icon-cross-inverse: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20style%3D%22enable-background%3Anew%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st0%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M2.6%200%2021%2018.4%2018.4%2021%200%202.6%202.6%200z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2018.4%2018.4%200l2.5%202.5L2.5%2020.9%200%2018.4z%22%2F%3E%3C%2Fsvg%3E')
+
+$choices-z-index: 1
+
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" style="enable-background:new 0 0 21 21" xml:space="preserve"><style>.st0{fill:#3f3290}</style><path class="st0" d="M2.6 0 21 18.4 18.4 21 0 2.6 2.6 0z"/><path class="st0" d="M0 18.4 18.4 0l2.5 2.5L2.5 20.9 0 18.4z"/></svg>
+// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" style="enable-background:new 0 0 21 21" xml:space="preserve"><style>.st0{fill:#ffffff}</style><path class="st0" d="M2.6 0 21 18.4 18.4 21 0 2.6 2.6 0z"/><path class="st0" d="M0 18.4 18.4 0l2.5 2.5L2.5 20.9 0 18.4z"/></svg>

app/assets/stylesheets/variables/_colors.sass

@@ -69,6 +69,9 @@ $primary-shade: tint($primary, 90%)
 $warning-text: shade($warning, 60%)
 $warning-shade: tint($warning, 90%)
 
+$main-text: shade($main, 10%)
+$main-shade: tint($main, 90%)
+
 =default-link
   transition: color .2s ease-in
   color: $link-text

app/javascript/choices-ui.js

@@ -0,0 +1,31 @@
+import Choices from 'choices.js'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const element = document.getElementById('js-company-select')
+  if (element) {
+    return new Choices(element, {
+      removeItemButton: true,
+      allowHTML: true,
+      searchResultLimit: 10,
+      searchPlaceholderValue: '検索ワード',
+      noResultsText: '一致する情報は見つかりません',
+      itemSelectText: '選択'
+    })
+  }
+
+  const elementMultipleSelect = document.getElementById(
+    'js-choices-multiple-select'
+  )
+  if (elementMultipleSelect) {
+    return new Choices(elementMultipleSelect, {
+      removeItemButton: true,
+      allowHTML: true,
+      searchResultLimit: 6,
+      searchPlaceholderValue: '検索ワード',
+      noResultsText: '一致する情報は見つかりません',
+      itemSelectText: '選択',
+      shouldSort: false,
+      renderSelectedChoices: 'always'
+    })
+  }
+})

app/javascript/packs/application.js

@@ -70,6 +70,6 @@ import '../generation-users.js'
 import '../learning-completion-message.js'
 import '../practices-pages.js'
 import '../users-questions.js'
-import '../company-select.js'
+import '../choices-ui.js'
 import '../users-answers.js'
 import '../training-info-toggler.js'

app/views/reports/_form.html.slim

@@ -5,7 +5,7 @@
       .form-item
         = f.label :practice, class: 'a-form-label'
         .select-practices
-          = f.select(:practice_ids, practice_options_within_course, { include_hidden: false }, { multiple: true, class: 'js-select2' })
+          = f.select(:practice_ids, practice_options_within_course, { include_hidden: false }, { multiple: true, id: 'js-choices-multiple-select' })
       .form-item
         = f.label :title, class: 'a-form-label'
         = f.text_field :title, class: 'a-text-input js-warning-form', placeholder: 'display: inline-block の挙動の調査を進めた'

test/system/reports_test.rb

@@ -71,7 +71,7 @@ class ReportsTest < ApplicationSystemTestCase
     report = reports(:report10)
     visit_with_auth "/reports/#{report.id}", 'hajime'
     click_link '内容修正'
-    first('.select2-selection__choice__remove').click
+    first('.choices__button').click
 
     click_button '内容変更'
     assert_no_text 'Terminalの基礎を覚える'
@@ -130,24 +130,24 @@ class ReportsTest < ApplicationSystemTestCase
 
   test 'equal practices order in practices and new report' do
     visit_with_auth '/reports/new', 'komagata'
-    first('.select2-selection--multiple').click
-    report_practices = page.all('.select2-results__option').map(&:text)
+    first('.choices__inner').click
+    report_practices = page.all('.choices__item--choice').map(&:text)
     current_user = users(:komagata)
     category_ids = current_user.course.category_ids
     assert_equal report_practices.count, Practice.joins(:categories).merge(Category.where(id: category_ids)).count
-    assert_match(/OS X Mountain Lionをクリーンインストールする$/, first('.select2-results__option').text)
-    assert_match(/sslの基礎を理解する$/, all('.select2-results__option').last.text)
+    assert_match(/OS X Mountain Lionをクリーンインストールする/, first('.choices__item--choice').text)
+    assert_match(/sslの基礎を理解する/, all('.choices__item--choice').last.text)
   end
 
   test 'equal practices order in practices and edit report' do
     visit_with_auth "/reports/#{reports(:report1).id}/edit", 'komagata'
-    first('.select2-selection--multiple').click
-    report_practices = page.all('.select2-results__option').map(&:text)
+    first('.choices__inner').click
+    report_practices = page.all('.choices__item--choice').map(&:text)
     current_user = users(:komagata)
     category_ids = current_user.course.category_ids
     assert_equal report_practices.count, Practice.joins(:categories).merge(Category.where(id: category_ids)).count
-    assert_match(/OS X Mountain Lionをクリーンインストールする$/, first('.select2-results__option').text)
-    assert_match(/sslの基礎を理解する$/, all('.select2-results__option').last.text)
+    assert_match(/OS X Mountain Lionをクリーンインストールする/, first('.choices__item--choice').text)
+    assert_match(/sslの基礎を理解する/, all('.choices__item--choice').last.text)
   end
 
   test 'issue #360 duplicate' do