From bd2c3a8d8c3a327b3f506c1c13176c7799d79a64 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Thu, 23 Sep 2021 20:07:44 +0200
Subject: [PATCH] add detailed document component
---
app/components/document.hbs | 7 ++++-
app/components/document/detailed.hbs | 15 +++++++++++
app/router.js | 1 +
app/routes/document.js | 13 ++++++++++
app/routes/index.js | 4 +--
app/templates/document.hbs | 1 +
public/api/document/1.json | 10 +++++++
public/api/nodes.json | 4 +--
.../components/document/detailed-test.js | 26 +++++++++++++++++++
9 files changed, 76 insertions(+), 5 deletions(-)
create mode 100644 app/components/document/detailed.hbs
create mode 100644 app/routes/document.js
create mode 100644 app/templates/document.hbs
create mode 100644 public/api/document/1.json
create mode 100644 tests/integration/components/document/detailed-test.js
diff --git a/app/components/document.hbs b/app/components/document.hbs
index 391ea78..2c335ef 100644
--- a/app/components/document.hbs
+++ b/app/components/document.hbs
@@ -3,7 +3,12 @@
src={{@doc.image}}
alt="A picture of {{@doc.title}}"
/>
+
<div class="details">
- <h3>{{@doc.title}}</h3>
+ <h3>
+ <LinkTo @route="document" @model={{@doc}}>
+ {{@doc.title}}
+ </LinkTo>
+ </h3>
</div>
</div>
\ No newline at end of file
diff --git a/app/components/document/detailed.hbs b/app/components/document/detailed.hbs
new file mode 100644
index 0000000..40f50df
--- /dev/null
+++ b/app/components/document/detailed.hbs
@@ -0,0 +1,15 @@
+<Jumbo>
+ <h2>{{@doc.title}}</h2>
+</Jumbo>
+
+<div class="document detailed">
+ <Document::Image
+ src={{@doc.image}}
+ alt="A picture of {{@doc.title}}"
+ />
+
+ <div class="details">
+ <h3>About {{@doc.title}}</h3>
+ </div>
+
+</div>
\ No newline at end of file
diff --git a/app/router.js b/app/router.js
index b3b0585..235d116 100644
--- a/app/router.js
+++ b/app/router.js
@@ -10,4 +10,5 @@ Router.map(function () {
this.route('documents');
this.route('about');
this.route('contact', { path: '/getting-in-touch' });
+ this.route('document', { path: '/document/:document_id' });
});
diff --git a/app/routes/document.js b/app/routes/document.js
new file mode 100644
index 0000000..3f69d45
--- /dev/null
+++ b/app/routes/document.js
@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+
+export default class RentalRoute extends Route {
+ async model(params) {
+ let response = await fetch(`/api/document/${params.document_id}.json`);
+ let { data } = await response.json();
+
+ let { attributes } = data;
+ let type = 'document';
+
+ return { type, ...attributes };
+ }
+}
diff --git a/app/routes/index.js b/app/routes/index.js
index 04949f9..d914bbc 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -8,8 +8,8 @@ export default class IndexRoute extends Route {
return data.map((model) => {
let { attributes } = model;
let type = 'document';
- console.log(attributes);
+
return { type, ...attributes };
});
}
-}
\ No newline at end of file
+}
diff --git a/app/templates/document.hbs b/app/templates/document.hbs
new file mode 100644
index 0000000..7cdfd02
--- /dev/null
+++ b/app/templates/document.hbs
@@ -0,0 +1 @@
+<Document::Detailed @doc={{@model}} />
\ No newline at end of file
diff --git a/public/api/document/1.json b/public/api/document/1.json
new file mode 100644
index 0000000..06a7334
--- /dev/null
+++ b/public/api/document/1.json
@@ -0,0 +1,10 @@
+{
+ "data": {
+ "type": "document",
+ "attributes": {
+ "id": 1,
+ "title": "Invoice 1.pdf",
+ "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+ }
+ }
+}
\ No newline at end of file
diff --git a/public/api/nodes.json b/public/api/nodes.json
index 91867b2..f161ba3 100644
--- a/public/api/nodes.json
+++ b/public/api/nodes.json
@@ -1,17 +1,17 @@
{
"data": [
{
- "id": 1,
"type": "document",
"attributes": {
+ "id": 1,
"title": "Invoice 1.pdf",
"image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
}
},
{
- "id": 2,
"type": "document",
"attributes": {
+ "id": 2,
"title": "Invoice 2.pdf",
"image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
}
diff --git a/tests/integration/components/document/detailed-test.js b/tests/integration/components/document/detailed-test.js
new file mode 100644
index 0000000..9b2580d
--- /dev/null
+++ b/tests/integration/components/document/detailed-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | document/detailed', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ // Set any properties with this.set('myProperty', 'value');
+ // Handle any actions with this.set('myAction', function(val) { ... });
+
+ await render(hbs`<Document::Detailed />`);
+
+ assert.dom(this.element).hasText('');
+
+ // Template block usage:
+ await render(hbs`
+ <Document::Detailed>
+ template block text
+ </Document::Detailed>
+ `);
+
+ assert.dom(this.element).hasText('template block text');
+ });
+});
--
GitLab