refactor: tag and mark filter with no request

addon/components/document-view.hbs

@@ -12,12 +12,17 @@
         data-test-upload
       />
 
-      <TagFilter
-        @category={{@filters.category}}
-        @selectedTags={{@filters.tags}}
-        @selectedMarks={{@filters.marks}}
-        class="uk-margin-left"
-      />
+      {{#if this.fetchedDocuments.isRunning}}
+        <UkSpinner />
+      {{else}}
+        <TagFilter
+          @category={{@filters.category}}
+          @documents={{this.fetchedDocuments.value}}
+          @selectedTags={{@filters.tags}}
+          @selectedMarks={{@filters.marks}}
+          class="uk-margin-left"
+        />
+      {{/if}}
 
       <DocumentViewToggle
         @viewList={{this.listView}}
@@ -45,25 +50,23 @@
       >
         <div
           class="document-view"
-          {{did-insert (perform this.fetchDocuments)}}
-          {{did-update (perform this.fetchDocuments) @filters}}
           {{did-insert (perform this.initialiseDocumentSelection)}}
         >
           {{! List & Grid View }}
           {{#if this.listView}}
             <DocumentList
-              @loading={{this.fetchDocuments}}
-              @fetchedDocuments={{this.fetchedDocuments}}
+              @loading={{this.fetchedDocuments.isRunning}}
+              @fetchedDocuments={{this.fetchedDocuments.value}}
               @setSort={{this.setSort}}
               @selectedDocuments={{this.documents.selectedDocuments}}
               @onClickDocument={{this.handleDocumentSelection}}
               @onDoubleClickDocument={{this.openDocument}}
             />
           {{else}}
             <DocumentGrid
-              @loading={{this.fetchDocuments.isRunning}}
+              @loading={{this.fetchedDocuments.isRunning}}
+              @fetchedDocuments={{this.fetchedDocuments.value}}
               @selectedDocuments={{this.documents.selectedDocuments}}
-              @fetchedDocuments={{this.fetchedDocuments}}
               @onClickDocument={{this.handleDocumentSelection}}
               @onDoubleClickDocument={{this.openDocument}}
             />

addon/components/document-view.js

@@ -2,7 +2,8 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { dropTask, lastValue, task } from "ember-concurrency";
+import { dropTask, task } from "ember-concurrency";
+import { task as trackedTask } from "ember-resources/util/ember-concurrency";
 
 import { ErrorHandler } from "ember-alexandria/helpers/error-handler";
 
@@ -47,10 +48,14 @@ export default class DocumentViewComponent extends Component {
     this.router.transitionTo(this.router.currentRouteName, {
       queryParams: { sort: this.sortDirection + this.sort },
     });
-    this.fetchDocuments.perform();
   }
 
-  @lastValue("fetchDocuments") fetchedDocuments;
+  fetchedDocuments = trackedTask(this, this.fetchDocuments, () => [
+    this.sort,
+    this.sortDirection,
+    this.args.filters,
+  ]);
+
   @task
   *fetchDocuments() {
     const documents = yield this.store.query("document", {
@@ -114,8 +119,6 @@ export default class DocumentViewComponent extends Component {
           count: files.length,
         }),
       );
-
-      await this.fetchDocuments.perform();
     } catch (error) {
       new ErrorHandler(this, error).notify(
         "alexandria.errors.upload-document",

addon/components/tag-filter.hbs

@@ -2,23 +2,29 @@
   class="uk-border uk-padding-small uk-width-expand uk-flex uk-flex-wrap uk-flex-middle"
   ...attributes
 >
-  {{#each this.activeMarks.value as |mark|}}
-    <button
-      type="button"
-      class="tag uk-text-small
-        {{if (includes mark.id this.parsedSelected.marks) 'tag--active'}}"
-      {{on "click" (fn this.toggle "marks" mark)}}
-      data-test-mark
-      data-test-mark-id={{mark.id}}
-      title={{mark.name}}
-    >
-      <FaIcon @icon={{mark.icon}} @size="sm" @fixedWidth={{true}} />
-    </button>
-  {{/each}}
+  {{#if (or this.marks.marks.isLoading this.activeMarks.isLoading)}}
+    <UkSpinner />
+  {{else if this.activeMarks.value}}
+    {{#each this.activeMarks.value as |mark|}}
+      <button
+        type="button"
+        class="tag uk-text-small
+          {{if (includes mark.id this.parsedSelected.marks) 'tag--active'}}"
+        {{on "click" (fn this.toggle "marks" mark)}}
+        data-test-mark
+        data-test-mark-id={{mark.id}}
+        title={{mark.name}}
+      >
+        <FaIcon @icon={{mark.icon}} @size="sm" @fixedWidth={{true}} />
+      </button>
+    {{/each}}
+  {{/if}}
   {{#if (and this.searchTags.isFinished (not this.searchTags.value))}}
-    <span class="uk-margin-small-left">{{t "alexandria.tag-filter.empty"}}</span>
+    <span class="uk-margin-small-left">{{t
+        "alexandria.tag-filter.empty"
+      }}</span>
   {{else}}
-    {{#each this.tags.fetchSearchTags.lastSuccessful.value as |tag|}}
+    {{#each this.searchTags.value as |tag|}}
       <button
         type="button"
         class="tag uk-text-small

addon/components/tag-filter.js

@@ -17,28 +17,33 @@ export default class TagFilterComponent extends Component {
     };
   }
 
-  searchTags = trackedFunction(this, async () => {
-    return this.tags.fetchSearchTags.perform(this.args.category);
+  availableTags = trackedFunction(this, async () => {
+    const availableTags = await this.args.documents.reduce(async (acc, doc) => {
+      acc = await acc;
+      (await doc.tags).forEach((mark) => acc.add(mark.id));
+
+      return acc;
+    }, new Set());
+
+    return this.store
+      .peekAll("tag")
+      .filter((mark) => availableTags.has(mark.id));
   });
 
-  activeMarks = trackedFunction(this, async () => {
-    const activeMarks = await this.store
-      .peekAll("document")
-      .reduce(async (acc, doc) => {
-        const marks = await doc.marks;
+  availableMarks = trackedFunction(this, async () => {
+    const availableMarks = await this.args.documents.reduce(
+      async (acc, doc) => {
         acc = await acc;
-        if (
-          (this.args.category === undefined ||
-            (await doc.category) === this.args.category) &&
-          marks.length > 0
-        ) {
-          marks.forEach((mark) => acc.add(mark.id));
-        }
+        (await doc.marks).forEach((mark) => acc.add(mark.id));
 
         return acc;
-      }, new Set());
+      },
+      new Set(),
+    );
 
-    return this.marks.marks.records?.filter((mark) => activeMarks.has(mark.id));
+    return this.marks.marks.records?.filter((mark) =>
+      availableMarks.has(mark.id),
+    );
   });
 
   @action toggle(type, value) {

addon/services/tags.js

@@ -2,7 +2,6 @@ import { action } from "@ember/object";
 import Service, { inject as service } from "@ember/service";
 import { dasherize } from "@ember/string";
 import { tracked } from "@glimmer/tracking";
-import { task } from "ember-concurrency";
 
 import { ErrorHandler } from "ember-alexandria/helpers/error-handler";
 
@@ -12,19 +11,6 @@ export default class TagsService extends Service {
 
   @tracked categoryCache;
 
-  @task *fetchSearchTags(category) {
-    this.categoryCache = category;
-
-    return yield this.store.query("tag", {
-      filter: {
-        withDocumentsInCategory: this.categoryCache,
-        withDocumentsMetainfo: JSON.stringify(
-          this.config.modelMetaFilters.document,
-        ),
-      },
-    });
-  }
-
   /**
    * Adds a tag to a document and creates the tag if necessary. Returns the added tag
    *
@@ -68,8 +54,6 @@ export default class TagsService extends Service {
       new ErrorHandler(this, error).notify("alexandria.errors.update");
     }
 
-    await this.fetchSearchTags.perform(this.categoryCache);
-
     return tag;
   }
 
@@ -91,7 +75,5 @@ export default class TagsService extends Service {
     } catch (error) {
       new ErrorHandler(this, error).notify("alexandria.errors.update");
     }
-
-    this.fetchSearchTags.perform(this.categoryCache);
   }
 }

tests/unit/services/tags-test.js

@@ -28,7 +28,6 @@ module("Unit | Service | tags", function (hooks) {
         "POST", // Create document
         "POST", // Create tag
         "PATCH", // Add tag to document
-        "GET", // fetchSearchTags
       ],
     );
 
@@ -53,7 +52,6 @@ module("Unit | Service | tags", function (hooks) {
         "GET", // search for existing tag
         "POST", // Create tag
         "PATCH", // Add tag to document
-        "GET", // fetchSearchTags
       ],
     );
 
@@ -76,7 +74,6 @@ module("Unit | Service | tags", function (hooks) {
       [
         "POST", // Create document
         "PATCH", // Remove tag from document
-        "GET", // fetchSearchTags
       ],
     );