Finished moving tag-manager from a vue to a component

[bookstack] / resources / views / components / tag-manager.blade.php

diff --git a/resources/views/components/tag-manager.blade.php b/resources/views/components/tag-manager.blade.php
index 0fab30d63f05cc87959e95cb28f151a10f6170a9..aad5fb9d696fe5cf9c7bebcc19ffd035acff6789 100644 (file)
--- a/resources/views/components/tag-manager.blade.php
+++ b/resources/views/components/tag-manager.blade.php
@@ -1,24 +1,16 @@
-<div id="tag-manager" entity-id="{{ $entity->id ?? 0 }}" entity-type="{{ $entity ? $entity->getType() : $entityType }}">
-    <div class="tags">
-        <p class="text-muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
+<div components="tag-manager add-remove-rows"
+     option:add-remove-rows:row-selector=".card"
+     option:add-remove-rows:remove-selector="button.text-neg"
+     option:tag-manager:row-selector=".card:not(.hidden)"
+     refs="tag-manager@add-remove"
+     class="tags">
 
-        @include('components.tag-manager-list', ['tags' => $entity->tags->all() ?? []])
+        <p class="text-muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
 
-        <draggable :options="{handle: '.handle'}" :list="tags" element="div">
-            <div v-for="(tag, i) in tags" :key="tag.key" class="card drag-card">
-                <div class="handle" >@icon('grip')</div>
-                <div>
-                    <autosuggest url="{{ url('/ajax/tags/suggest/names') }}" type="name" class="outline" :name="getTagFieldName(i, 'name')"
-                                 v-model="tag.name" @input="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_name') }}"/>
-                </div>
-                <div>
-                    <autosuggest url="{{ url('/ajax/tags/suggest/values') }}" type="value" class="outline" :name="getTagFieldName(i, 'value')"
-                                 v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_value') }}"/>
-                </div>
-                <button type="button" aria-label="{{ trans('entities.tags_remove') }}" v-show="tags.length !== 1" class="text-center drag-card-action text-neg" @click="removeTag(tag)">@icon('close')</button>
-            </div>
-        </draggable>
+        <div component="sortable-list"
+             option:sortable-list:handle-selector=".handle">
+            @include('components.tag-manager-list', ['tags' => $entity->tags->all() ?? []])
+        </div>
 
-        <button @click="addEmptyTag" type="button" class="text-button">{{ trans('entities.tags_add') }}</button>
-    </div>
+        <button refs="add-remove-rows@add" type="button" class="text-button">{{ trans('entities.tags_add') }}</button>
 </div>
\ No newline at end of file