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 <christian@zosel.ch>

Author: MitanOmar

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}}

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) {

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 = {

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;

addon/templates/index.hbs

@@ -7,6 +7,7 @@
 
     <DocumentView
       @filters={{this.documentFilters}}
+      @listView={{this.listView}}
       class="uk-border-top"
     />
   </section>

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 {

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",
     );
 

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 });