チェックイン編集画面もタグ登録に対応

app/Http/Controllers/EjaculationController.php

@@ -54,7 +54,6 @@ class EjaculationController extends Controller
             $tag = Tag::firstOrCreate(['name' => $tag]);
             $tagIds[] = $tag->id;
         }
-
         $ejaculation->tags()->sync($tagIds);
 
         return redirect()->route('checkin.show', ['id' => $ejaculation->id])->with('status', 'チェックインしました！');
@@ -102,6 +101,7 @@ class EjaculationController extends Controller
             'time' => 'required|date_format:H:i',
             'note' => 'nullable|string|max:500',
             'link' => 'nullable|url',
+            'tags' => 'nullable|string',
         ])->after(function ($validator) use ($id, $request, $inputs) {
             // 日時の重複チェック
             if (!$validator->errors()->hasAny(['date', 'time'])) {
@@ -119,6 +119,14 @@ class EjaculationController extends Controller
             'is_private' => $request->has('is_private') ?? false
         ])->save();
 
+        $tags = explode(' ', $inputs['tags']);
+        $tagIds = [];
+        foreach ($tags as $tag) {
+            $tag = Tag::firstOrCreate(['name' => $tag]);
+            $tagIds[] = $tag->id;
+        }
+        $ejaculation->tags()->sync($tagIds);
+
         return redirect()->route('checkin.show', ['id' => $ejaculation->id])->with('status', 'チェックインを修正しました！');
     }
 

resources/views/ejaculation/edit.blade.php

@@ -35,6 +35,23 @@
                         </div>
                     @endif
                 </div>
+                <div class="form-row">
+                    <div class="form-group col-sm-12">
+                        <input name="tags" type="hidden" value="{{ old('tags') ?? implode(' ', $ejaculation->tags->map(function ($v) { return $v->name; })->all()) }}">
+                        <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
+                        <div class="form-control {{ $errors->has('tags') ? ' is-invalid' : '' }}">
+                            <ul id="tags" class="list-inline d-inline"></ul>
+                            <input id="tagInput" type="text" style="outline: 0; border: 0;">
+                        </div>
+                        <small class="form-text text-muted">
+                            Tab, Enter, 半角スペースのいずれかで入力確定します。
+                        </small>
+
+                        @if ($errors->has('tags'))
+                            <div class="invalid-feedback">{{ $errors->first('tags') }}</div>
+                        @endif
+                    </div>
+                </div>
                 {{--
                 <div class="form-row">
                     <div class="form-group col-sm-12">
@@ -95,4 +112,54 @@
 @endsection
 
 @push('script')
+    <script>
+        function updateTags() {
+            $('input[name=tags]').val(
+                $('#tags')
+                    .find('li')
+                    .map(function () {
+                        return $(this).data('value');
+                    })
+                    .get()
+                    .join(' ')
+            );
+        }
+        function insertTag(value) {
+            $('#tags').append('<li class="list-inline-item badge badge-primary" style="cursor: pointer;" data-value="' + value + '"><span class="oi oi-tag"></span> ' + value + ' | x</li>');
+        }
+        var initTags = $('input[name=tags]').val();
+        if (initTags.trim() !== '') {
+            initTags.split(' ').forEach(function (value) {
+                insertTag(value);
+            });
+        }
+
+        $('#tagInput').on('keydown', function (ev) {
+            var $this = $(this);
+            if ($this.val().trim() !== '') {
+                switch (ev.key) {
+                    case 'Tab':
+                    case 'Enter':
+                    case ' ':
+                        insertTag($this.val().trim());
+                        $this.val('');
+                        updateTags();
+                        ev.preventDefault();
+                        break;
+                }
+            } else if (ev.key === 'Enter') {
+                // 誤爆防止
+                ev.preventDefault();
+            }
+        });
+        $('#tags')
+            .on('click', 'li', function (ev) {
+                $(this).remove();
+                updateTags();
+            })
+            .parent()
+            .on('click', function (ev) {
+                $('#tagInput').focus();
+            });
+    </script>
 @endpush