fix(document-card): selected color (#1026)

* fix(document-card): selected color * feat: save the status of documents view in the query parameter * fix(document-view): tests after adding `listView` to query URL * refactor(index-router): don't refresh the modal when `listView` update * chore: refactor tests * fix(document-view-test): remove unused vars --------- Co-authored-by: Christian Zosel <[email protected]>
projectcaluma · Nov 29, 2024 · d8b1039 · d8b1039
1 parent 6dacc65
commit d8b1039
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 27 deletions.
diff --git a/addon/components/document-view.hbs b/addon/components/document-view.hbs
@@ -21,7 +21,7 @@
       />
 
       <DocumentViewToggle
-        @viewList={{this.listView}}
+        @viewList={{@listView}}
         data-test-toggle-side-panel
         {{on "click" this.toggleView}}
       />
@@ -45,7 +45,7 @@
         {{did-insert (perform this.initialiseDocumentSelection)}}
       >
         {{! List & Grid View }}
-        {{#if this.listView}}
+        {{#if @listView}}
           <DocumentList
             @columns={{this.tableColumns}}
             @loading={{this.fetchedDocuments.isRunning}}

diff --git a/addon/components/document-view.js b/addon/components/document-view.js
@@ -15,7 +15,6 @@ export default class DocumentViewComponent extends Component {
 
   @tracked isDragOver = false;
   @tracked dragCounter = 0;
-  @tracked listView = true;
   @tracked sort = "title";
   @tracked sortDirection = "";
   // Needed for ember-resource
@@ -37,7 +36,9 @@ export default class DocumentViewComponent extends Component {
   }
 
   @action toggleView() {
-    this.listView = !this.listView;
+    this.router.transitionTo(this.router.currentRouteName, {
+      queryParams: { listView: !this.args.listView },
+    });
   }
 
   @action setSort(sortAttribute) {

diff --git a/addon/controllers/index.js b/addon/controllers/index.js
@@ -11,6 +11,7 @@ export default class IndexController extends Controller {
     "document",
     "activeGroup",
     "sort",
+    "listView",
   ];
 
   @service("alexandria-config") config;
@@ -22,6 +23,7 @@ export default class IndexController extends Controller {
   @tracked document;
   @tracked activeGroup;
   @tracked sort;
+  @tracked listView = true;
 
   get documentFilters() {
     let filters = {

diff --git a/addon/routes/index.js b/addon/routes/index.js
@@ -12,6 +12,7 @@ export default class IndexRoute extends Route {
     search: PARAM_OPTIONS,
     document: PARAM_OPTIONS,
     activeGroup: PARAM_OPTIONS,
+    listView: {},
   };
 
   @service("alexandria-config") config;

diff --git a/addon/templates/index.hbs b/addon/templates/index.hbs
@@ -7,6 +7,7 @@
 
     <DocumentView
       @filters={{this.documentFilters}}
+      @listView={{this.listView}}
       class="uk-border-top"
     />
   </section>

diff --git a/app/styles/components/_document-card.scss b/app/styles/components/_document-card.scss
@@ -38,7 +38,8 @@
   }
 
   &--selected {
-    border-color: $global-primary-background;
+    border-color: $global-primary-background !important;
+    border-width: 3px !important;
   }
 
   .marks {

diff --git a/tests/acceptance/documents-test.js b/tests/acceptance/documents-test.js
@@ -75,7 +75,7 @@ module("Acceptance | documents", function (hooks) {
 
     assert.strictEqual(
       currentURL(),
-      `/?document=${document.id}`,
+      `/?document=${document.id}&listView=false`,
       "url is set to currently selected document",
     );
 

diff --git a/tests/integration/components/document-view-test.js b/tests/integration/components/document-view-test.js
@@ -1,4 +1,4 @@
-import { render, click } from "@ember/test-helpers";
+import { render } from "@ember/test-helpers";
 import { setupRenderingTest } from "dummy/tests/helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { setupMirage } from "ember-cli-mirage/test-support";
@@ -8,25 +8,10 @@ module("Integration | Component | document-view", function (hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
-  test("it renders the documents when in grid view", async function (assert) {
-    this.server.createList("document", 3);
-
-    await render(hbs`<DocumentView />`, { owner: this.engine });
-
-    await click("[data-test-toggle]");
-
-    assert.dom("[data-test-upload]").exists();
-    assert.dom("[data-test-empty]").doesNotExist();
-
-    assert.dom("[data-test-document]").exists({ count: 3 });
-    assert
-      .dom("[data-test-document]")
-      .doesNotHaveClass("document-card--selected");
-  });
-
   test("it renders an empty document view", async function (assert) {
-    await render(hbs`<DocumentView />`, { owner: this.engine });
-    await click("[data-test-toggle]");
+    await render(hbs`<DocumentView @listView={{ false }} />`, {
+      owner: this.engine,
+    });
 
     assert.dom("[data-test-upload]").exists();
     assert.dom("[data-test-empty]").exists();
@@ -38,8 +23,9 @@ module("Integration | Component | document-view", function (hooks) {
 
     docService.selectedDocuments = [documents[0]];
 
-    await render(hbs`<DocumentView />`, { owner: this.engine });
-    await click("[data-test-toggle]");
+    await render(hbs`<DocumentView @listView={{ false }} />`, {
+      owner: this.engine,
+    });
 
     assert.dom("[data-test-empty]").doesNotExist();
     assert.dom("[data-test-document]").exists({ count: 3 });