dual commander fixes

app/components/breadcrumb/index.hbs

@@ -5,6 +5,7 @@
         <DualLinkTo
           @node={{node}}
           @extranode={{@extranode}}
+          @extradoc={{@extradoc}}
           @hint={{@hint}} />
       </li>
     {{/each}}

app/components/commander/action_modes.hbs

@@ -3,7 +3,7 @@
     @onViewModeChange={{@onViewModeChange}} />
   <div class="panel-mode">
     <button type="button" class="btn btn-light mx-1"
-      {{on "click" @onPanelToggle}}>
+      {{on "click" (fn @onPanelToggle "nodes") }}>
       {{#if @dualPanelMode}}
         <i class="bi-x"></i>
       {{else}}

app/components/commander/index.hbs

@@ -35,6 +35,7 @@
   <Breadcrumb
     @node={{@node}}
     @extranode={{@extranode}}
+    @extradoc={{@extradoc}}
     @hint={{@hint}} />
 
   <div class="view-mode-{{this.view_mode}}">
@@ -48,14 +49,18 @@
             <DualLinkTo
               @node={{node}}
               @extranode={{@extranode}}
+              @extradoc={{@extradoc}}
               @hint={{@hint}} />
         </NodeType>
       {{/let}}
     {{/each}}
   </div>
 
-  <Pagination
-    @object={{@pagination}}
-    @node={{@node}}
-    @hint={{@hint}} />
+  {{#if @pagination }}
+    <Pagination
+      @object={{@pagination}}
+      @node={{@node}}
+      @hint={{@hint}} />
+  {{/if}}
+
 </div>

app/components/dual_link_to/index.js

@@ -43,11 +43,13 @@ export default class DualLinkToComponent extends Component {
   get route() {
     let node,
       extranode,
+      extradoc,
       hint;
 
     hint = this.args.hint;
     node = this.args.node;
     extranode = this.args.extranode;
+    extradoc = this.args.extradoc;
 
     if (hint == 'left') {
       if (node && node.get('nodeType') === 'document') {
@@ -64,23 +66,33 @@ export default class DualLinkToComponent extends Component {
       return 'authenticated.document';
     }
 
+    if (extradoc) {
+      return 'authenticated.document';
+    }
+
     return 'authenticated.nodes';
   }
 
   get model() {
     let hint,
       node,
-      extranode;
+      extranode,
+      extradoc;
 
     hint = this.args.hint;
     node = this.args.node;
     extranode = this.args.extranode;
-
+    extradoc = this.args.extradoc;
 
     if (hint === 'left') {
       return node;
     }
 
+    // hint right
+    if (extradoc) {
+      return extradoc;
+    }
+
     return extranode;
   }
 

app/components/pagination/index.js

@@ -2,6 +2,12 @@ import Component from '@glimmer/component';
 
 
 export default class PaginationComponent extends Component {
+  /*
+  Arguments:
+    @object
+    @node
+    @hint = { "left" | "right" }
+  */
 
   get pages() {
     let result = [],

app/components/viewer/action_modes.hbs

+<div class="d-flex">
+  <div class="panel-mode">
+    <button type="button" class="btn btn-light mx-1"
+      {{on "click" (fn @onPanelToggle "document")}}>
+      {{#if @dualPanelMode}}
+        <i class="bi-x"></i>
+      {{else}}
+        <i class="bi-layout-split"></i>
+      {{/if}}
+    </button>
+  </div>
+</div>
\ No newline at end of file

app/components/viewer/index.hbs

@@ -5,6 +5,10 @@
       @isLocked={{this.isLocked}}
       @ocrStatus={{this.ocrStatus}}
       @onRunOCR={{this.onRunOCR}} />
+
+    <Viewer::ActionModes
+      @onPanelToggle={{@onPanelToggle}}
+      @dualPanelMode={{@dualPanelMode}} />
   </div>
 
   <Breadcrumb

app/controllers/authenticated/document.js

-import Controller from '@ember/controller';
 import { action } from '@ember/object';
-import { tracked } from "@glimmer/tracking";
-import { inject as service } from '@ember/service';
+import DualPanelBaseController from "./dualpanel_base";
 
 
-export default class ViewerController extends Controller {
-
-  @service currentUser;
-
-  @tracked extranode_id = null;
-  @tracked extradoc_id = null;
-
-  queryParams = ['extranode_id', 'extradoc_id']
+export default class DocumentController extends DualPanelBaseController {
 
   @action
-  async onPanelToggle() {
+  async onPanelToggle(origin) {
+    /*
+      origin is either "document" or "nodes" depending where
+      the onPanelToggle originated from.
+    */
     let home_folder;
 
     if (this.extranode_id) {
-      this.extranode_id = null;
+      /*
+        Here we have document viewer as main panel (left) and nodes panel as
+        extra (on the right).
+      */
+      if (origin === "document") {
+        // user decided to close document panel
+        this.replaceRoute('authenticated.nodes', this.extranode_id);
+        this.extranode_id = null;
+      } else if (origin === "nodes") {
+        // User decided to close nodes extra panel.
+        // He/She decided to view only the document
+        this.extranode_id = null;
+      } else {
+        throw `Unknown value for origin argument: ${origin}`;
+      }
     } else {
       home_folder = await this.currentUser.user.home_folder;
       this.extranode_id = home_folder.get('id');

app/controllers/authenticated/dualpanel_base.js

+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from '@ember/service';
+
+
+export default class DualPanelBaseController extends Controller {
+
+  @service currentUser;
+
+  @tracked extranode_id = null;
+  @tracked extradoc_id = null;
+
+  queryParams = ['extranode_id', 'extradoc_id']
+
+  @action
+  async onPanelToggle() {
+    let home_folder;
+
+    if (this.extranode_id) {
+      this.extranode_id = null;
+    } else {
+      home_folder = await this.currentUser.user.home_folder;
+      this.extranode_id = home_folder.get('id');
+    }
+  }
+
+  get dualpanel_mode() {
+    return this.extranode_id || this.extradoc_id;
+  }
+}

app/controllers/authenticated/nodes.js

-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-import { tracked } from "@glimmer/tracking";
-import { inject as service } from '@ember/service';
+import DualPanelBaseController from "./dualpanel_base";
 
 
-export default class NodesController extends Controller {
+export default class NodesController extends DualPanelBaseController {
 
-  @service currentUser;
-  @tracked extranode_id = null;
-  @tracked extradoc_id = null;
-  queryParams = ['extranode_id', 'extradoc_id']
-
-  @action
-  async onPanelToggle() {
-    let home_folder;
-
-    if (this.extranode_id) {
-      this.extranode_id = null;
-    } else {
-      home_folder = await this.currentUser.user.home_folder;
-      this.extranode_id = home_folder.get('id');
-    }
-  }
 }

app/routes/authenticated/document.js

@@ -29,7 +29,7 @@ export default class DocumentRoute extends Route {
 
     page_adapter = this.store.adapterFor('page');
 
-    doc  = await this.store.findRecord(
+    doc = await this.store.findRecord(
       'document',
       params.document_id,
       { reload: true }
@@ -73,9 +73,15 @@ export default class DocumentRoute extends Route {
       });
 
       return {
-        'document_version': last_version,
+        'doc': doc,
+        'document_versions': doc.versions,
+        'last_document_version': last_version,
         'pages': pages_with_url,
-        'extranode': extranode
+        'extra': {
+          'current_node':extranode.current_node,
+          'children':extranode.children,
+          'pagination':extranode.pagination
+        }
       };
     }
 
@@ -86,8 +92,4 @@ export default class DocumentRoute extends Route {
       'pages': pages_with_url
     };
   }
-
-  renderTemplate() {
-    this.render('authenticated.viewer');
-  }
 }

app/routes/authenticated/nodes.js

@@ -47,6 +47,7 @@ export default class FolderRoute extends Route {
       document_version  = await doc_adapter.getDocumentVersion(params.extradoc_id);
       pages = await document_version.pages;
       pages_with_url = await page_adapter.loadBinaryImages(pages);
+      this.dualpanel_mode = true;
 
       return RSVP.hash({
         node: adapter.findNode(params.node_id),
@@ -62,6 +63,7 @@ export default class FolderRoute extends Route {
         node_id: params.extranode_id,
         page: 1
       });
+      this.dualpanel_mode = true;
     }
 
     context['home_folder'] = await this.currentUser.user.getHomeFolder();
@@ -75,15 +77,12 @@ export default class FolderRoute extends Route {
       _auth_controller = this.controllerFor('authenticated');
 
     if (model.extranode) {
-      _controller.set('dualpanel_mode', true);
       _controller.set('extranode', model.extranode);
     } else if (model.document_version) {
-      _controller.set('dualpanel_mode', true);
       _controller.set('document_version', model.document_version);
       _controller.set('pages', model.pages);
       _controller.set('extranode', model.document_version.document);
     } else {
-      _controller.set('dualpanel_mode', false);
       _controller.set('extranode', undefined);
     }
     _controller.set('mainnode', model.current_node);

app/templates/authenticated/viewer.hbs → app/templates/authenticated/document.hbs

@@ -18,10 +18,10 @@
         @hint="right" />
     {{else}}
       <Commander
-        @node={{this.extranode.current_node}}
-        @children={{this.extranode.children}}
-        @pagination={{this.extranode.pagination}}
-        @extradoc={{@model}}
+        @node={{@model.extra.current_node}}
+        @children={{@model.extra.children}}
+        @pagination={{@model.extra.pagination}}
+        @extradoc={{@model.doc}}
         @onPanelToggle={{this.onPanelToggle}}
         @dualPanelMode={{this.dualpanel_mode}}
         @hint="right" />

config/environment.js

@@ -33,6 +33,7 @@ module.exports = function (environment) {
     // ENV.APP.LOG_TRANSITIONS = true;
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
+    ENV['ember-cli-mirage'] = { enabled: false};
   }
 
   if (environment === 'test') {
@@ -47,9 +48,7 @@ module.exports = function (environment) {
     ENV.APP.autoboot = false;
 
     // enable migrage - which mocks HTTP requests
-    ENV['ember-cli-mirage'] = {
-      enabled: true,
-    };
+    ENV['ember-cli-mirage'] = { enabled: true };
   }
 
   if (environment === 'production') {