Load lists and tags up-front to speed up searching and adding both to…

… links (#553)
Kovah · Jul 17, 2024 · f846a41 · f846a41
1 parent fa73ba1
commit f846a41
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 34 deletions.
diff --git a/app/Http/Controllers/App/BookmarkletController.php b/app/Http/Controllers/App/BookmarkletController.php
@@ -4,6 +4,8 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\Link;
+use App\Models\LinkList;
+use App\Models\Tag;
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
 use Illuminate\Support\Arr;
@@ -41,6 +43,8 @@ public function getLinkAddForm(Request $request)
             'bookmark_description' => $newDescription,
             'bookmark_tags' => $this->prepareTaxonomyEntries($newTags),
             'bookmark_lists' => $this->prepareTaxonomyEntries($newLists),
+            'all_tags' => Tag::visibleForUser()->get(['name', 'id']),
+            'all_lists' => LinkList::visibleForUser()->get(['name', 'id']),
         ]);
     }
 

diff --git a/app/Http/Controllers/Models/LinkController.php b/app/Http/Controllers/Models/LinkController.php
@@ -10,6 +10,8 @@
 use App\Http\Requests\Models\LinkUpdateRequest;
 use App\Http\Requests\Models\ToggleLinkCheckRequest;
 use App\Models\Link;
+use App\Models\LinkList;
+use App\Models\Tag;
 use App\Repositories\LinkRepository;
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\RedirectResponse;
@@ -64,6 +66,8 @@ public function create(): View
         return view('models.links.create', [
             'pageTitle' => trans('link.add'),
             'existing_link' => null,
+            'all_tags' => Tag::visibleForUser()->get(['name', 'id']),
+            'all_lists' => LinkList::visibleForUser()->get(['name', 'id']),
         ]);
     }
 

diff --git a/resources/assets/js/components/TagsSelect.js b/resources/assets/js/components/TagsSelect.js
@@ -30,14 +30,11 @@ export default class TagsSelect {
       valueField: 'id',
       labelField: 'name',
       searchField: 'name',
-      maxOptions: null,
+      maxOptions: 100000,
       onItemAdd: function () {
         this.setTextboxValue('');
         this.refreshOptions();
       },
-      load: (query, callback) => {
-        this.handleTagLoading(query, callback);
-      },
       render: {
         option: function (item, escape) {
           return selectObject.renderItem(item, escape);
@@ -48,9 +45,12 @@ export default class TagsSelect {
       }
     };
 
+    if (this.$el.dataset.tagData) {
+      this.config['options'] = JSON.parse(this.$el.dataset.tagData);
+    }
+
     if (typeof this.$el.dataset.value !== 'undefined' && this.$el.dataset.value !== '') {
-      this.config['options'] = JSON.parse(this.$el.dataset.value);
-      this.config['items'] = this.config['options'].map((item) => item.id);
+      this.config['items'] = JSON.parse(this.$el.dataset.value).map((item) => item.id);
     }
 
     this.select = new TomSelect(this.$el, this.config);
@@ -65,32 +65,6 @@ export default class TagsSelect {
     return typeof this.$el.dataset.allowCreation !== 'undefined';
   }
 
-  handleTagLoading (query, callback) {
-    if (!query.length) return callback();
-
-    fetch(this.getFetchUrl(), {
-      method: 'POST',
-      credentials: 'same-origin',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        _token: window.appData.user.token,
-        query: query
-      })
-    }).then((response) => {
-      return response.json();
-    }).then((results) => {
-      callback(results);
-    }).catch(() => {
-      callback();
-    });
-  }
-
-  getFetchUrl () {
-    return this.type === 'tags'
-      ? window.appData.routes.fetch.searchTags
-      : window.appData.routes.fetch.searchLists;
-  }
-
   displayNewSuggestions (tags) {
     if (typeof tags !== 'object' || tags.length === 0) {
       return;

diff --git a/resources/views/models/links/partials/create-form.blade.php b/resources/views/models/links/partials/create-form.blade.php
@@ -60,7 +60,7 @@ class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}"
                     <div class="mb-4">
                         <label class="form-label" for="lists">@lang('list.lists')</label>
                         <input name="lists" id="lists" type="text" placeholder="@lang('placeholder.list_select')"
-                            class="tag-select"
+                            class="tag-select" data-tag-data="{{ $all_lists->toJson() }}"
                             data-value="{{ Link::oldTaxonomyOutputWithoutLink('lists', $bookmark_lists ?? []) }}"
                             data-allow-creation="1" data-tag-type="lists">
 
@@ -74,7 +74,7 @@ class="tag-select"
                     <div class="mb-4">
                         <label class="form-label" for="tags">@lang('tag.tags')</label>
                         <input name="tags" id="tags" type="text" placeholder="@lang('placeholder.tags_select')"
-                            class="tag-select"
+                            class="tag-select" data-tag-data="{{ $all_tags->toJson() }}"
                             data-value="{{ Link::oldTaxonomyOutputWithoutLink('tags', $bookmark_tags ?? []) }}"
                             data-allow-creation="1" data-tag-type="tags">