Added room adverts #804

Ellen-Wittingen · 2023-09-09T15:00:54Z

Added room adverts. They are accessible via http://localhost:4200/room-adverts and via the menu-item in the left sidebar.

There is also a view for unauthorized users on the public part of the website, it is accessible via http://localhost:4200/public/room-forum and via the menu-item "Kamerforum" in the "Over ons" dropdown.

Please also check if the English translations are proper English, as nobody except from me has looked at them so far.

Note: it requires the following amber-api branch to function properly: csvalpha/amber-api#393 NOTE BY MATTEO: this backend branch has already been incorporated into staging

DrumsnChocolate

The implementation works as expected, but I see you haven't quite used ember octane. I know that lots of the entire app is still written in the old style, but please try to follow the checklist (most important): https://guides.emberjs.com/release/upgrading/current-edition/glimmer-components/
and if relevant the rest of the octane upgrade guide mentioned there.
For example, named arguments means we should be using @roomAdvert.location in our templates, not roomAdvert.location
And we should not be using import Component from '@ember/component'; in any of our new components. Always use native classes for everything, and for components only ever extend glimmer components.

translations/en.yaml

app/components/header-nav.js

…sage

DrumsnChocolate · 2024-05-28T19:12:23Z

The text can become rather long, and the text is not vertically bounded in display:

DrumsnChocolate · 2024-05-28T19:47:14Z

When logged in, I don't see any shorttext preview of the written content of the advert. Is this something we should add?

DrumsnChocolate · 2024-05-28T19:52:25Z

These are the main UX points I found. I will leave a code review later, this Friday evening probably

Ellen-Wittingen · 2024-06-01T20:32:52Z

Fixed the long scrolling content. Now there is a "lees meer" button that opens a modal with a scrollable bigger view of the advert when clicked upon. That modal is also opened when clicking anywhere on the advert.

Ellen-Wittingen · 2024-06-01T20:33:39Z

Fixed not showing a short description on room advert index page:

Ellen-Wittingen · 2024-10-02T17:42:16Z

Apparently I never pushed the fixes I mentioned, oops

DrumsnChocolate · 2024-10-12T13:03:02Z

We're reviewing this once more, @lodewiges and @Notheen01 will you two also remember to leave a review before we meet on Monday?

@Ellen-Wittingen we will finally be merging this thing :)

DrumsnChocolate · 2024-10-12T13:07:10Z

icon doesn't load for some reason. Unsure if that's my fault

DrumsnChocolate · 2024-10-12T13:09:29Z

yes it was my fault: I did yarn install in the staging branch. yarn install in the feature/rooms resolved the icon issue 🤦

DrumsnChocolate · 2024-10-12T13:15:40Z

Would it be practical to have a subdomain like kamers.csvalpha.nl point to csvalpha.nl/public/room-forum ? That would allow for more external traffic, because it is easier to share and remember.

DrumsnChocolate

Overall, nice work! Very happy that you adhere well to octane (as far as I can see). One remark about future maintainability: I see a similar pattern emerge between this feature and that of static pages: both can be viewed from the public side and from behind the login. Currently, this results in some duplication in terms of templates, but abstracting that will take more time and mental contortions than is probably necessary right now.

Thanks Ellen! My comments in this review may not be exhaustive, so let's wait for @lodewiges and @Notheen01 reviews. The three of us will discuss them on Monday, and I'll let you know when we think this PR is ready for merging.

DrumsnChocolate · 2024-10-12T13:36:49Z

app/templates/public/room-forum.hbs

+  <div class="modal modal-xl fade room-advert-modal" id="room-advert-modal" tabindex="-1" aria-hidden="true" {{on "hide.bs.modal" this.removeBackdrops}}>
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-body p-0">
+          {{#if this.openedAdvert}}
+            <Cards::PublicRoomAdvertCard @roomAdvert={{this.openedAdvert}} @collapsed={{false}} @open={{this.openAdvert}} />
+          {{/if}}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal">Sluiten</button>
+        </div>
+      </div>
+    </div>
+  </div>


There is a funny bug here:
making this div visible by clicking the advert works perfectly:

but then. Clicking again on the opened advert results in a darker backdrop:

resulting in a pretty comical effect after some more clicks:

We can do something about this by not passing @open and handling that case in the underlying component. Or some other approach if better exists.

could you explain the source of this bug Monday?

DrumsnChocolate · 2024-10-12T13:50:08Z

app/templates/vacancies/index.hbs

+                <div class="flex-grow-1" />
                <LinkTo
-                  @route='articles.article'
-                  @model={{article.id}}
+                  @route='vacancies.vacancy'
+                  @model={{vacancy.id}}
                  itemprop='url'
                >
-                  {{t 'tag.button.readMore'}}
+                  <i>{{t 'tag.button.readMore'}}</i>


good catch! But wait. how is this currently not linking to articles on production... ? wtf
When I hover over this read more text (in prod), it shows https://csvalpha.nl/vacancies# as the destination.

DrumsnChocolate · 2024-10-12T13:56:04Z

app/templates/room-adverts/room-advert/edit.hbs

+  @onSubmit={{action this.submit}}
+  @onCancel={{this.cancel}}
+  @onCoverPhotoLoaded={{action this.coverPhotoLoaded}}


Suggested change

@onSubmit={{action this.submit}}

@onCancel={{this.cancel}}

@onCoverPhotoLoaded={{action this.coverPhotoLoaded}}

@onSubmit={{this.submit}}

@onCancel={{this.cancel}}

@onCoverPhotoLoaded={{this.coverPhotoLoaded}}

the action helper is outdated. see https://guides.emberjs.com/release/upgrading/current-edition/action-on-and-fn/
if someAction has been annotated with @action in the controller, passing this.someAction in template properties works just fine.

DrumsnChocolate · 2024-10-12T13:57:40Z

app/components/forms/room-advert-form.hbs

+    <h5>{{if @model.isNew 'Kamer advertentie aanmaken' 'Kamer advertentie wijzigen'}}</h5>
+  </div>
+  <div class='card-body'>
+    <form {{action @onSubmit on='submit'}}>


Suggested change

<form {{action @onSubmit on='submit'}}>

<form {{on 'submit' @onSubmit}}>

the action helper is outdated. see https://guides.emberjs.com/release/upgrading/current-edition/action-on-and-fn/

I think this should work

there are a lot of occurrences of the action helper in this PR, I won't comment on them all but it is important to get rid of them before this PR is merged

lodewiges · 2024-10-12T19:08:35Z

app/components/header-nav.hbs

small question: what is the advantage of adding 'this.' for a lot of items

lodewiges

Read through it and the code looks mostly good had one comment but in the end I saw lint made the same comment

lodewiges · 2024-10-12T19:11:54Z

app/components/header-nav.js

+
+  @action
+  setStaticPages() {
+    if (!this.session.isAuthenticated && !this.media.isMobile) {


what is this checking for?

lodewiges · 2024-10-12T19:13:08Z

app/components/public/index/header.js

@@ -0,0 +1,9 @@
+import Component from '@ember/component';


why is this ember component and not glitter component

lodewiges · 2024-10-12T19:26:50Z

app/templates/public/room-forum.hbs

+  <div class="modal modal-xl fade room-advert-modal" id="room-advert-modal" tabindex="-1" aria-hidden="true" {{on "hide.bs.modal" this.removeBackdrops}}>
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-body p-0">
+          {{#if this.openedAdvert}}
+            <Cards::PublicRoomAdvertCard @roomAdvert={{this.openedAdvert}} @collapsed={{false}} @open={{this.openAdvert}} />
+          {{/if}}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal">Sluiten</button>
+        </div>
+      </div>
+    </div>
+  </div>


could you explain the source of this bug Monday?

lodewiges · 2024-10-12T19:29:51Z

Would it be practical to have a subdomain like kamers.csvalpha.nl point to csvalpha.nl/public/room-forum ? That would allow for more external traffic, because it is easier to share and remember.

sounds good lets discuss the advantages Monday

lodewiges · 2024-10-12T19:31:28Z

staging has been updated in the meantime so we need to merge it again

Ellen-Wittingen added 12 commits July 27, 2023 18:39

add first steps for room feature

a1f616a

rooms useable when logged in

85cb911

some minor changed to logged in view of room adverts

dfbfdfa

added public view of room forum

56f2bb3

Merge branch 'staging' into feature/rooms

89c036b

made header slightly bigger

ad59ee9

Merge branch 'staging' into feature/rooms

bbee53b

small fixes

99c9339

small fixes

cbbd172

small fixes

a3736ba

small linting fixes

9faf396

fixed ordering of adverts on public site

7f98493

Ellen-Wittingen mentioned this pull request Sep 9, 2023

Added room adverts csvalpha/amber-api#393

Merged

reverted testing settings

4378cbf

DrumsnChocolate requested changes Oct 11, 2023

View reviewed changes

translations/en.yaml Outdated Show resolved Hide resolved

translations/en.yaml Outdated Show resolved Hide resolved

Implemented comments in PR

b1cf259

guidojw requested changes Oct 21, 2023

View reviewed changes

app/components/header-nav.js Outdated Show resolved Hide resolved

guidojw reviewed Oct 21, 2023

View reviewed changes

app/components/header-nav.js Outdated Show resolved Hide resolved

Ellen-Wittingen added 2 commits November 25, 2023 11:37

Fixed legacy ember component usage and added translation of error mes…

f126e30

…sage

Merge branch 'staging' into feature/rooms

ad52486

Ellen-Wittingen requested review from guidojw and DrumsnChocolate November 25, 2023 10:52

Ellen-Wittingen and others added 2 commits March 2, 2024 15:42

Fixed future merge conflicts with branch feature/public/indentity

92e50ba

Merge branch 'staging' into feature/rooms

3c58d9c

fixed long text creating long item

7ac4c83

Merge branch 'staging' into feature/rooms

cc77b4a

DrumsnChocolate requested changes Oct 12, 2024

View reviewed changes

lodewiges reviewed Oct 12, 2024

View reviewed changes

app/components/header-nav.hbs

Copy link

Contributor

lodewiges Oct 12, 2024 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small question: what is the advantage of adding 'this.' for a lot of items

lodewiges reviewed Oct 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added room adverts #804

Added room adverts #804

Ellen-Wittingen commented Sep 9, 2023 •

edited by DrumsnChocolate

Loading

DrumsnChocolate left a comment

DrumsnChocolate commented May 28, 2024

DrumsnChocolate commented May 28, 2024

DrumsnChocolate commented May 28, 2024

Ellen-Wittingen commented Jun 1, 2024

Ellen-Wittingen commented Jun 1, 2024

Ellen-Wittingen commented Oct 2, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate left a comment

DrumsnChocolate Oct 12, 2024

lodewiges Oct 12, 2024

DrumsnChocolate Oct 12, 2024

DrumsnChocolate Oct 12, 2024

DrumsnChocolate Oct 12, 2024

DrumsnChocolate Oct 12, 2024

lodewiges Oct 12, 2024 •

edited

Loading

lodewiges left a comment

lodewiges Oct 12, 2024

lodewiges Oct 12, 2024

lodewiges Oct 12, 2024

lodewiges commented Oct 12, 2024

lodewiges commented Oct 12, 2024

	<form {{action @onSubmit on='submit'}}>
	<form {{on 'submit' @onSubmit}}>

Added room adverts #804

Are you sure you want to change the base?

Added room adverts #804

Conversation

Ellen-Wittingen commented Sep 9, 2023 • edited by DrumsnChocolate Loading

DrumsnChocolate left a comment

Choose a reason for hiding this comment

DrumsnChocolate commented May 28, 2024

DrumsnChocolate commented May 28, 2024

DrumsnChocolate commented May 28, 2024

Ellen-Wittingen commented Jun 1, 2024

Ellen-Wittingen commented Jun 1, 2024

Ellen-Wittingen commented Oct 2, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate commented Oct 12, 2024

DrumsnChocolate left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lodewiges Oct 12, 2024 • edited Loading

Choose a reason for hiding this comment

lodewiges left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lodewiges commented Oct 12, 2024

lodewiges commented Oct 12, 2024

Ellen-Wittingen commented Sep 9, 2023 •

edited by DrumsnChocolate

Loading

lodewiges Oct 12, 2024 •

edited

Loading