From 4efdb306db2eb82c8091babde90181ed8ccccca5 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Wed, 3 Nov 2021 20:43:36 +0100
Subject: [PATCH] pretty good dual panel mode
---
app/components/breadcrumb.hbs | 9 ++++--
app/components/breadcrumb.js | 9 ++++++
app/components/folder.hbs | 6 ++--
app/components/folder.js | 18 +++++++++++
app/components/panel.hbs | 44 ++++++++++++++------------
app/controllers/authenticated/nodes.js | 4 +--
app/routes/authenticated/nodes.js | 38 ++++++++++++++++------
app/templates/authenticated/nodes.hbs | 18 +++++++----
8 files changed, 101 insertions(+), 45 deletions(-)
create mode 100644 app/components/folder.js
diff --git a/app/components/breadcrumb.hbs b/app/components/breadcrumb.hbs
index 47d819c..ff30575 100644
--- a/app/components/breadcrumb.hbs
+++ b/app/components/breadcrumb.hbs
@@ -2,9 +2,12 @@
<ol class="breadcrumb">
{{#each this.nodes as |node|}}
<li class="breadcrumb-item">
- <LinkTo
- @route="authenticated.nodes"
- @model={{node}}>{{node.title}}</LinkTo>
+ <LinkTo
+ @route="authenticated.nodes"
+ @model={{node.id}}
+ @query={{this.query}}>
+ {{node.title}}
+ </LinkTo>
</li>
{{/each}}
</ol>
diff --git a/app/components/breadcrumb.js b/app/components/breadcrumb.js
index 89fb742..e1b6bc9 100644
--- a/app/components/breadcrumb.js
+++ b/app/components/breadcrumb.js
@@ -20,4 +20,13 @@ export default class BreadcrumbComponent extends Component {
return _nodes.reverse();
}
+ get query() {
+ if (this.args.extranode) {
+ return {
+ extranode_id: this.args.extranode.id
+ }
+ }
+
+ return {};
+ }
}
diff --git a/app/components/folder.hbs b/app/components/folder.hbs
index ed43bb6..b417d25 100644
--- a/app/components/folder.hbs
+++ b/app/components/folder.hbs
@@ -2,8 +2,10 @@
<div class="icon folder"></div>
<div class="title">
<LinkTo
- @route="authenticated.nodes" @model={{@model}}>
- {{@model.title}}
+ @route="authenticated.nodes"
+ @model={{@model.id}}
+ @query={{this.query}}>
+ {{@model.title}}
</LinkTo>
</div>
</div>
\ No newline at end of file
diff --git a/app/components/folder.js b/app/components/folder.js
new file mode 100644
index 0000000..1e2015b
--- /dev/null
+++ b/app/components/folder.js
@@ -0,0 +1,18 @@
+import { A } from '@ember/array';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+
+export default class FolderComponent extends Component {
+
+ get query() {
+ if (this.args.extranode) {
+ return {
+ extranode_id: this.args.extranode.id
+ }
+ }
+
+ return {};
+ }
+}
diff --git a/app/components/panel.hbs b/app/components/panel.hbs
index 5f81e45..eedc625 100644
--- a/app/components/panel.hbs
+++ b/app/components/panel.hbs
@@ -1,25 +1,27 @@
-<div>
- <button class="btn btn-bordered btn-light btn-flat"
- type="button">
- <i class="fa fa-upload mr-1 text-success"></i>
- Upload
- </button>
+<div class="panel">
+ <div>
+ <button class="btn btn-bordered btn-light btn-flat"
+ type="button">
+ <i class="fa fa-upload mr-1 text-success"></i>
+ Upload
+ </button>
- <button class="btn btn-bordered btn-light btn-flat"
- type="button" {{on "click" this.openNewFolderModal }}>
- <i class="fa fa-plus mr-1 text-success"></i>
- New Folder
- </button>
-</div>
+ <button class="btn btn-bordered btn-light btn-flat"
+ type="button" {{on "click" this.openNewFolderModal }}>
+ <i class="fa fa-plus mr-1 text-success"></i>
+ New Folder
+ </button>
+ </div>
-<Modal::NewFolder
- id="new-folder"
- @node={{@node}}
- @onClose={{this.closeNewFolderModal}}
- {{show-when this.show_new_folder_modal}} />
+ <Modal::NewFolder
+ id="new-folder"
+ @node={{@node}}
+ @onClose={{this.closeNewFolderModal}}
+ {{show-when this.show_new_folder_modal}} />
-<Breadcrumb @node={{@node}} />
+ <Breadcrumb @node={{@node}} @extranode={{@extranode}} />
-{{#each @nodes as |node|}}
- <Folder @model={{node}} />
-{{/each}}
\ No newline at end of file
+ {{#each @nodes as |node|}}
+ <Folder @model={{node}} @extranode={{@extranode}} />
+ {{/each}}
+</div>
\ No newline at end of file
diff --git a/app/controllers/authenticated/nodes.js b/app/controllers/authenticated/nodes.js
index 7de9813..540d587 100644
--- a/app/controllers/authenticated/nodes.js
+++ b/app/controllers/authenticated/nodes.js
@@ -4,7 +4,5 @@ import { tracked } from "@glimmer/tracking";
export default class NodesController extends Controller {
- queryParams = ['extrapanelc'];
-
- @tracked extrapanelc = null;
+ queryParams = ['extranode_id'];
}
diff --git a/app/routes/authenticated/nodes.js b/app/routes/authenticated/nodes.js
index efeefe2..da928bb 100644
--- a/app/routes/authenticated/nodes.js
+++ b/app/routes/authenticated/nodes.js
@@ -1,25 +1,43 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { tracked } from "@glimmer/tracking";
+import RSVP from 'rsvp';
export default class FolderRoute extends Route {
@service store;
- queryParams = ['extra'];
- @tracked extra = null;
+ queryParams = {
+ extranode_id: {
+ refreshModel: true
+ }
+ };
-
- async model(params) {
- let response, adapter, query_params;
-
-
- query_params = this.paramsFor('authenticated.nodes');
- console.log(`query_params=${this.query_params}`);
- console.log(`extra=${this.extra}`);
+ model(params) {
+ let response, adapter;
adapter = this.store.adapterFor('node');
+ if (params.extranode_id) {
+ return RSVP.hash({
+ node: adapter.findNode(params.node_id),
+ extranode: adapter.findNode(params.extranode_id)
+ });
+ }
+
return adapter.findNode(params.node_id);
}
+
+ setupController(controller, model) {
+ let _controller = this.controllerFor('authenticated.nodes');
+
+ if (model.extranode) {
+ _controller.set('dualpanel_mode', true);
+ _controller.set('mainnode', model.node);
+ _controller.set('extranode', model.extranode);
+ } else {
+ _controller.set('dualpanel_mode', false);
+ _controller.set('mainnode', model);
+ }
+ }
}
diff --git a/app/templates/authenticated/nodes.hbs b/app/templates/authenticated/nodes.hbs
index e6cc644..3702252 100644
--- a/app/templates/authenticated/nodes.hbs
+++ b/app/templates/authenticated/nodes.hbs
@@ -1,7 +1,13 @@
-<Panel
- @node={{@model}}
- @nodes={{@model.children}} />
+<div class="panels d-flex">
+ <Panel
+ @node={{this.mainnode}}
+ @nodes={{this.mainnode.children}}
+ @extranode={{this.extranode}} />
-{{#if this.extrapanelc}}
- Extra Panel={{this.extrapanelc}}!
-{{/if}}
\ No newline at end of file
+ {{#if this.extranode}}
+ <Panel
+ @node={{this.extranode}}
+ @nodes={{this.extranode.children}}
+ @mainnode={{this.mainnode}} />
+ {{/if}}
+</div>
\ No newline at end of file
--
GitLab