From 14d2c11276e9d879f5ce88e82f5daae14ff36ebc Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Thu, 23 Sep 2021 19:39:00 +0200
Subject: [PATCH] playing around with emberjs
---
app/components/document.hbs | 9 +++
app/components/document/image.hbs | 11 +++
app/components/document/image.js | 11 +++
app/components/documents-list.js | 2 +-
app/components/jumbo.hbs | 4 ++
app/components/nav-bar.hbs | 13 ++++
app/router.js | 2 +
app/routes/index.js | 15 ++++
app/styles/app.css | 65 +++++++++--------
app/templates/about.hbs | 7 ++
app/templates/application.hbs | 6 ++
app/templates/contact.hbs | 16 +++++
app/templates/index.hbs | 13 +++-
public/api/nodes.json | 21 ++++++
tests/acceptance/papermerge-test.js | 69 +++++++++++++++++++
tests/integration/components/document-test.js | 26 +++++++
.../image-test.js} | 8 +--
tests/unit/routes/documents-test.js | 11 ---
18 files changed, 263 insertions(+), 46 deletions(-)
create mode 100644 app/components/document.hbs
create mode 100644 app/components/document/image.hbs
create mode 100644 app/components/document/image.js
create mode 100644 app/components/jumbo.hbs
create mode 100644 app/components/nav-bar.hbs
create mode 100644 app/routes/index.js
create mode 100644 app/templates/about.hbs
create mode 100644 app/templates/application.hbs
create mode 100644 app/templates/contact.hbs
create mode 100644 public/api/nodes.json
create mode 100644 tests/acceptance/papermerge-test.js
create mode 100644 tests/integration/components/document-test.js
rename tests/integration/components/{documents-list-test.js => document/image-test.js} (79%)
delete mode 100644 tests/unit/routes/documents-test.js
diff --git a/app/components/document.hbs b/app/components/document.hbs
new file mode 100644
index 0000000..391ea78
--- /dev/null
+++ b/app/components/document.hbs
@@ -0,0 +1,9 @@
+<div class="node item document">
+ <Document::Image
+ src={{@doc.image}}
+ alt="A picture of {{@doc.title}}"
+ />
+ <div class="details">
+ <h3>{{@doc.title}}</h3>
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/components/document/image.hbs b/app/components/document/image.hbs
new file mode 100644
index 0000000..53f64b3
--- /dev/null
+++ b/app/components/document/image.hbs
@@ -0,0 +1,11 @@
+{{#if this.isLarge}}
+ <button type="button" class="image large" {{on "click" this.toggleSize}}>
+ <img ...attributes>
+ <small>View Smaller</small>
+ </button>
+{{else}}
+ <button type="button" class="image small" {{on "click" this.toggleSize}}>
+ <img ...attributes>
+ <small>View Larger</small>
+ </button>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/document/image.js b/app/components/document/image.js
new file mode 100644
index 0000000..7b89bec
--- /dev/null
+++ b/app/components/document/image.js
@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DocumentImageComponent extends Component {
+ @tracked isLarge = false;
+
+ @action toggleSize() {
+ this.isLarge = !this.isLarge;
+ }
+}
diff --git a/app/components/documents-list.js b/app/components/documents-list.js
index 54fdc9f..aa9f31c 100644
--- a/app/components/documents-list.js
+++ b/app/components/documents-list.js
@@ -6,4 +6,4 @@ export default class DocumentsListComponent extends Component {
showDocument(doc) {
alert(`The person's name is ${doc}!`);
}
-}
\ No newline at end of file
+}
diff --git a/app/components/jumbo.hbs b/app/components/jumbo.hbs
new file mode 100644
index 0000000..bfabf6f
--- /dev/null
+++ b/app/components/jumbo.hbs
@@ -0,0 +1,4 @@
+<div class="jumbo">
+ <div class="right tomster"></div>
+ {{yield}}
+</div>
\ No newline at end of file
diff --git a/app/components/nav-bar.hbs b/app/components/nav-bar.hbs
new file mode 100644
index 0000000..f415e83
--- /dev/null
+++ b/app/components/nav-bar.hbs
@@ -0,0 +1,13 @@
+<nav class="menu">
+ <LinkTo @route="index" class="menu-index">
+ <h1>Papermerge</h1>
+ </LinkTo>
+ <div class="links">
+ <LinkTo @route="about" class="menu-about">
+ About
+ </LinkTo>
+ <LinkTo @route="contact" class="menu-contact">
+ Contact
+ </LinkTo>
+ </div>
+</nav>
\ No newline at end of file
diff --git a/app/router.js b/app/router.js
index 2dadb54..b3b0585 100644
--- a/app/router.js
+++ b/app/router.js
@@ -8,4 +8,6 @@ export default class Router extends EmberRouter {
Router.map(function () {
this.route('documents');
+ this.route('about');
+ this.route('contact', { path: '/getting-in-touch' });
});
diff --git a/app/routes/index.js b/app/routes/index.js
new file mode 100644
index 0000000..04949f9
--- /dev/null
+++ b/app/routes/index.js
@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+
+export default class IndexRoute extends Route {
+ async model() {
+ let response = await fetch('/api/nodes.json');
+ let { data } = await response.json();
+
+ 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/styles/app.css b/app/styles/app.css
index 084bb02..414c9dd 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -276,20 +276,20 @@ p {
transition: opacity 0.25s ease-in-out;
}
-.rental button.image:focus:after, .rental button.image:hover:after {
+.document button.image:focus:after, .rental button.image:hover:after {
opacity: 0.1;
}
-.rental .image img {
+.document .image img {
max-width: 100%;
}
-.rental .image.large {
+.document .image.large {
margin: 30px 25px 50px 25px;
flex-basis: 100%;
}
-.rental .image small {
+.document .image small {
display: block;
margin-top: 5px;
margin-bottom: -15px;
@@ -300,13 +300,22 @@ p {
position: relative;
}
-.rental .image.large small {
+.document .image.small {
+ width: 15rem;
+}
+
+.document .image.large {
+ width: 50rem;
+}
+
+
+.document .image.large small {
margin-top: 10px;
margin-bottom: 0px;
font-size: 110%;
}
-.rental .details {
+.document .details {
flex-basis: 50%;
flex-grow: 2;
display: flex;
@@ -317,108 +326,108 @@ p {
align-content: space-around;
}
-.rental h3 {
+.document h3 {
flex-basis: 100%;
}
-.rental h3 a {
+.document h3 a {
display: inline;
}
-.rental .detail {
+.document .detail {
flex-basis: 50%;
font-weight: 300;
font-style: italic;
white-space: nowrap;
}
-.rental .detail span {
+.document .detail span {
font-weight: 400;
font-style: normal;
}
-.rental .map {
+.document .map {
flex-grow: 0;
flex-basis: 150px;
font-size: 0;
margin: 0px 25px;
}
-.rental .map img {
+.document .map img {
width: 150px;
height: 150px;
}
-.rental.detailed {
+.document.detailed {
background: none;
align-items: flex-start;
}
-.rental.detailed .image {
+.document.detailed .image {
flex-basis: 320px;
}
-.rental.detailed .image.large {
+.document.detailed .image.large {
margin: 30px 25px 50px 25px;
flex-basis: 100%;
}
-.rental.detailed .details {
+.document.detailed .details {
height: auto;
}
-.rental.detailed h3 {
+.document.detailed h3 {
font-size: 200%;
margin-bottom: 10px;
}
-.rental.detailed .detail {
+.document.detailed .detail {
margin: 5px 0px;
flex-basis: 100%;
flex-shrink: 2;
}
-.rental.detailed .description {
- white-space: normal;
+.document.detailed .description {
+ whdocumentite-space: normal;
flex-basis: 100%;
flex-shrink: 1;
}
-.rental.detailed .map {
+.document.detailed .map {
flex-basis: 100%;
margin: 50px 25px 25px 25px;
}
-.rental.detailed .map img {
+.document.detailed .map img {
width: 100%;
height: auto;
}
@media only screen and (max-width: 919px) {
- .rental.detailed .image, .rental.detailed .image.large {
+ .document.detailed .image, .rental.detailed .image.large {
margin: 30px 25px 25px 25px;
flex-basis: 100%;
cursor: default;
}
- .rental.detailed .image:hover {
+ .document.detailed .image:hover {
flex-basis: 100%;
cursor: default;
}
- .rental.detailed .image small {
+ .document.detailed .image small {
display: none;
}
- .rental.detailed button.image:hover:after {
+ .document.detailed button.image:hover:after {
opacity: 0;
}
- .rental.detailed button.image:focus:after {
+ .document.detailed button.image:focus:after {
opacity: 0.1;
}
- .rental.detailed .map {
+ .document.detailed .map {
margin-top: 25px;
}
}
diff --git a/app/templates/about.hbs b/app/templates/about.hbs
new file mode 100644
index 0000000..1ad233a
--- /dev/null
+++ b/app/templates/about.hbs
@@ -0,0 +1,7 @@
+<Jumbo>
+ <h2>About Papermerge</h2>
+ <p>
+ The Papermerge website is a delightful project created to explore Ember.
+ </p>
+ <LinkTo @route="contact" class="button">Contact Us</LinkTo>
+</Jumbo>
\ No newline at end of file
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
new file mode 100644
index 0000000..9fb3ba2
--- /dev/null
+++ b/app/templates/application.hbs
@@ -0,0 +1,6 @@
+<div class="container">
+ <NavBar />
+ <div class="body">
+ {{outlet}}
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/templates/contact.hbs b/app/templates/contact.hbs
new file mode 100644
index 0000000..1ff4d8e
--- /dev/null
+++ b/app/templates/contact.hbs
@@ -0,0 +1,16 @@
+<Jumbo>
+ <h2>Contact Us</h2>
+ <p>
+ Papermerge Representatives would love to help you<br>
+ choose a destination or answer any questions you may have.
+ </p>
+ <address>
+ Papermerge HQ
+ <p>
+ Löwenberger str 4,<br>
+ 10315 Berlin
+ </p>
+ <a href="mailto:eugen@papermerge.com">eugen@papermerge.com</a>
+ </address>
+ <LinkTo @route="about" class="button">About</LinkTo>
+</Jumbo>
\ No newline at end of file
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 76f0cc9..4ca283f 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,5 +1,14 @@
-<div class="jumbo">
- <div class="right tomster"></div>
+<Jumbo>
<h2>Welcome to Papermerge!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
+
+ <LinkTo @route="about" class="button">About Us</LinkTo>
+</Jumbo>
+
+<div class="documents">
+ <ul class="results">
+ {{#each @model as |model|}}
+ <li><Document @doc={{model}} /></li>
+ {{/each}}
+ </ul>
</div>
\ No newline at end of file
diff --git a/public/api/nodes.json b/public/api/nodes.json
new file mode 100644
index 0000000..91867b2
--- /dev/null
+++ b/public/api/nodes.json
@@ -0,0 +1,21 @@
+{
+ "data": [
+ {
+ "id": 1,
+ "type": "document",
+ "attributes": {
+ "title": "Invoice 1.pdf",
+ "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+ }
+ },
+ {
+ "id": 2,
+ "type": "document",
+ "attributes": {
+ "title": "Invoice 2.pdf",
+ "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+ }
+ }
+
+ ]
+}
\ No newline at end of file
diff --git a/tests/acceptance/papermerge-test.js b/tests/acceptance/papermerge-test.js
new file mode 100644
index 0000000..3b10bab
--- /dev/null
+++ b/tests/acceptance/papermerge-test.js
@@ -0,0 +1,69 @@
+import { module, test } from 'qunit';
+import { click, visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | papermerge', function (hooks) {
+ setupApplicationTest(hooks);
+
+ test('visiting /', async function (assert) {
+ await visit('/');
+
+ assert.dom('nav').exists();
+ assert.dom('h1').hasText('Papermerge');
+ assert.equal(currentURL(), '/');
+ assert.dom('h2').hasText('Welcome to Papermerge!');
+
+ assert.dom('.jumbo a.button').hasText('About Us');
+ await click('.jumbo a.button');
+
+ assert.equal(currentURL(), '/about');
+ });
+
+ test('visiting /about', async function (assert) {
+ await visit('/about');
+
+ assert.dom('nav').exists();
+ assert.dom('h1').hasText('Papermerge');
+
+ assert.equal(currentURL(), '/about');
+ assert.dom('h2').hasText('About Papermerge');
+
+ assert.dom('.jumbo a.button').hasText('Contact Us');
+ await click('.jumbo a.button');
+
+ assert.equal(currentURL(), '/getting-in-touch');
+ });
+
+ test('visiting /getting-in-touch', async function (assert) {
+ await visit('/getting-in-touch');
+
+ assert.dom('nav').exists();
+ assert.dom('h1').hasText('Papermerge');
+
+ assert.equal(currentURL(), '/getting-in-touch');
+ assert.dom('h2').hasText('Contact Us');
+
+ assert.dom('.jumbo a.button').hasText('About');
+ await click('.jumbo a.button');
+
+ assert.equal(currentURL(), '/about');
+ });
+
+ test('navigating using the nav-bar', async function (assert) {
+ await visit('/');
+
+ assert.dom('nav').exists();
+ assert.dom('nav a.menu-index').hasText('Papermerge');
+ assert.dom('nav a.menu-about').hasText('About');
+ assert.dom('nav a.menu-contact').hasText('Contact');
+
+ await click('nav a.menu-about');
+ assert.equal(currentURL(), '/about');
+
+ await click('nav a.menu-contact');
+ assert.equal(currentURL(), '/getting-in-touch');
+
+ await click('nav a.menu-index');
+ assert.equal(currentURL(), '/');
+ });
+});
diff --git a/tests/integration/components/document-test.js b/tests/integration/components/document-test.js
new file mode 100644
index 0000000..1fe9df2
--- /dev/null
+++ b/tests/integration/components/document-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', 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 />`);
+
+ assert.dom(this.element).hasText('');
+
+ // Template block usage:
+ await render(hbs`
+ <Document>
+ template block text
+ </Document>
+ `);
+
+ assert.dom(this.element).hasText('template block text');
+ });
+});
diff --git a/tests/integration/components/documents-list-test.js b/tests/integration/components/document/image-test.js
similarity index 79%
rename from tests/integration/components/documents-list-test.js
rename to tests/integration/components/document/image-test.js
index 8c9955b..4dd06b6 100644
--- a/tests/integration/components/documents-list-test.js
+++ b/tests/integration/components/document/image-test.js
@@ -3,22 +3,22 @@ import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
-module('Integration | Component | documents-list', function (hooks) {
+module('Integration | Component | document/image', 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`<DocumentsList />`);
+ await render(hbs`<Document::Image />`);
assert.dom(this.element).hasText('');
// Template block usage:
await render(hbs`
- <DocumentsList>
+ <Document::Image>
template block text
- </DocumentsList>
+ </Document::Image>
`);
assert.dom(this.element).hasText('template block text');
diff --git a/tests/unit/routes/documents-test.js b/tests/unit/routes/documents-test.js
deleted file mode 100644
index 13d673b..0000000
--- a/tests/unit/routes/documents-test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
-
-module('Unit | Route | documents', function (hooks) {
- setupTest(hooks);
-
- test('it exists', function (assert) {
- let route = this.owner.lookup('route:documents');
- assert.ok(route);
- });
-});
--
GitLab