Feature: Room adverts

app/abilities/room-advert.js

@@ -0,0 +1,31 @@
+import { isNone } from '@ember/utils';
+import { Ability } from 'ember-can';
+
+export default class RoomAdvert extends Ability {
+  get canCreate() {
+    return this.session.hasPermission('room-advert.create');
+  }
+
+  get canShow() {
+    return this.session.hasPermission('room-advert.read');
+  }
+
+  get canDestroy() {
+    return (
+      this.session.hasPermission('room-advert.destroy') ||
+      this.isRoomAdvertOwner(this.model)
+    );
+  }
+
+  get canEdit() {
+    return (
+      this.session.hasPermission('room-advert.update') ||
+      this.isRoomAdvertOwner(this.model)
+    );
+  }
+
+  isRoomAdvertOwner(roomAdvert) {
+    const { currentUser } = this.session;
+    return !isNone(currentUser) && roomAdvert.isOwner(currentUser);
+  }
+}

app/components/cards/article-card.hbs

@@ -102,7 +102,7 @@
       </span>
       {{#if useMaxHeight}}
         <LinkTo @route='articles.article' @model={{article.id}} itemprop='url'>
-          <span class='float-md-end'> {{t 'tag.button.readMore'}} </span>
+          <span class='float-md-end'><i>{{t 'tag.button.readMore'}}</i></span>
         </LinkTo>
       {{/if}}
     </div>

app/components/cards/public-room-advert-card.hbs

@@ -0,0 +1,76 @@
+<div class='col-md-12 room-advert-card {{if @collapsed "collapsed mb-5 col-xl-10 mx-xl-auto"}}' {{on "click" (fn this.open @roomAdvert)}}>
+  <div class='d-flex justify-content-center'>
+    <div class='card mb-0 w-100 {{if @collapsed "mx-lg-5"}}'>
+      {{#if (not @collapsed)}}
+        <div class="advert-modal-header card-header card-header--overlay">
+          <img class="card-img-top" src="{{@roomAdvert.coverPhotoUrl}}">
+          <div class="card-title-bar gradient-overlay">
+            <h1 class="card-title title ms-3 mb-2">{{@roomAdvert.houseName}}</h1>
+          </div>
+        </div>
+      {{/if}}
+      <div class='card-body m-4 fs-5'>
+        <div class="row">
+          <div class="pe-4 col-12 col-md-6 mb-3">
+            {{#if @collapsed}}
+              <div class="width-fit-content">
+                <h2 class="text-secondary me-5">{{@roomAdvert.houseName}}</h2>
+                <hr class="border border-secondary bg-secondary border-3 opacity-100 mt-0" />
+              </div>
+            {{/if}}
+            <table>
+              {{#if @roomAdvert.location}}
+                <tr>
+                  <th class="pe-3 text-secondary">{{t 'component.public.roomForum.location'}}</th>
+                  <td>
+                    <a
+                      href='https://maps.google.com/?q={{@roomAdvert.location}}'
+                      target='_blank'
+                    >
+                      {{@roomAdvert.location}}
+                    </a>
+                  </td>
+                </tr>
+              {{/if}}
+              {{#if @roomAdvert.availableFrom}}
+                <tr>
+                  <th class="pe-3 text-secondary">{{t 'component.public.roomForum.availableFrom'}}</th>
+                  <td>{{@roomAdvert.availableFrom}}</td>
+                </tr>
+              {{/if}}
+              <tr>
+                <th class="pe-3 text-secondary">{{t 'component.public.roomForum.contact'}}</th>
+                <td>
+                  {{#if (is-phone @roomAdvert.contact)}}
+                    <a href='tel:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+                  {{else if (is-email @roomAdvert.contact)}}
+                    <a href='mailto:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+                  {{else if (is-url @roomAdvert.contact)}}
+                    <a href='{{@roomAdvert.contact}}' target='_blank'>{{@roomAdvert.contact}}</a>
+                  {{else}}
+                    {{@roomAdvert.contact}}
+                  {{/if}}
+                </td>
+              </tr>
+            </table>
+          </div>
+          {{#if (and @roomAdvert.coverPhotoUrl @collapsed)}}
+            <img src={{@roomAdvert.coverPhotoUrl}} class='col-12 col-md-6 mb-3 object-fit-cover'/>
+          {{/if}}
+        </div>
+        <p class='card-text description overflow-hidden mb-1' data-test-room-advert-description>
+          {{markdown-to-html
+            @roomAdvert.descriptionCamofied
+            extensions='youtubeEmbed bootstrapTable'
+          }}
+          <div class="{{if @collapsed "fade-to-white-background"}}"></div>
+        </p>
+        {{#if @collapsed}}
+          <button class="btn btn-secondary float-end fw-bold mt-1" type="button" {{on "click" (fn this.open @roomAdvert)}}>
+            Lees meer...
+          </button>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</div>

app/components/cards/public-room-advert-card.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PublicRoomAdvertCardComponent extends Component {
+  @action
+  open(advert) {
+    if (this.args.open) {
+      this.args.open(advert);
+    }
+  }
+}

app/components/cards/room-advert-card.hbs

@@ -0,0 +1,72 @@
+<div class='card'>
+  <div class='card-header card-header--overlay'>
+    <img class='card-img-top' src={{@roomAdvert.coverPhotoUrlOrDefault}} />
+
+    <div class='card-title-bar gradient-overlay'>
+
+      <div class='card-titles'>
+        <h2 class='card-title' data-test-room-advert-house-name>
+          {{@roomAdvert.houseName}}
+        </h2>
+        <h3 class='card-subtitle'>
+          <span class='subtitle-author' data-test-room-advert-author>
+            <LinkTo
+              @route='users.user'
+              @model={{@roomAdvert.author.id}}
+              class='link-to card-subtitle-link'
+            >
+              {{@roomAdvert.author.fullName}}
+            </LinkTo>
+          </span>
+        </h3>
+      </div>
+    </div>
+  </div>
+
+  <div class='row card-subheader-row ms-0 me-0'>
+    {{#if @roomAdvert.location}}
+      <div class='col-12 col-md-6 card-subheader-item align-items-center p-3'>
+        <b>Locatie: </b>
+        <a
+          href='https://maps.google.com/?q={{@roomAdvert.location}}'
+          target='_blank'
+        >
+          {{@roomAdvert.location}}
+        </a>
+      </div>
+    {{/if}}
+
+    {{#if @roomAdvert.availableFrom}}
+      <div class='col-12 col-md-6 card-subheader-item align-items-center p-3'>
+        <b>Beschikbaar vanaf: </b>
+        {{@roomAdvert.availableFrom}}
+      </div>
+    {{/if}}
+  </div>
+
+  <div class='card-body'>
+    <p class='card-text' data-test-room-advert-description>
+      {{markdown-to-html
+        @roomAdvert.descriptionCamofied
+        extensions='youtubeEmbed bootstrapTable'
+      }}
+    </p>
+  </div>
+
+  {{#if @roomAdvert.contact}}
+    <div class='row card-sub-bottom-row ms-0 me-0'>
+      <div class='col-12 card-sub-item align-items-center p-3'>
+        <b>Contact: </b>
+        {{#if (is-phone @roomAdvert.contact)}}
+          <a href='tel:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+        {{else if (is-email @roomAdvert.contact)}}
+          <a href='mailto:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+        {{else if (is-url @roomAdvert.contact)}}
+          <a href='{{@roomAdvert.contact}}' target='_blank'>{{@roomAdvert.contact}}</a>
+        {{else}}
+          {{@roomAdvert.contact}}
+        {{/if}}
+      </div>
+    </div>
+  {{/if}}
+</div>

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

@@ -0,0 +1,81 @@
+<div class='card'>
+  <div class='card-header'>
+    <h5>{{if @model.isNew 'Kamer advertentie aanmaken' 'Kamer advertentie wijzigen'}}</h5>
+  </div>
+  <div class='card-body'>
+    <form {{on 'submit' @onSubmit}}>
+      <ModelForm::TextInput
+        @model={{@model}}
+        @property='houseName'
+        @label='Huisnaam'
+        @required={{true}}
+        @maxlength={{50}}
+      />
+      <ModelForm::FileInput
+        @model={{@model}}
+        @property='coverPhoto'
+        @label='Coverfoto'
+        @loadedCallback={{@onCoverPhotoLoaded}}
+      />
+      <ModelForm::TextInput
+        @model={{@model}}
+        @property='contact'
+        @label='Contact (e-mailadres, telefoonnummer of link)'
+        @required={{true}}
+        @maxlength={{50}}
+      />
+      <ModelForm::TextInput
+        @model={{@model}}
+        @property='location'
+        @label='Locatie'
+        @maxlength={{100}}
+      />
+      <ModelForm::TextInput
+        @model={{@model}}
+        @property='availableFrom'
+        @label='Beschikbaar vanaf'
+        @maxlength={{100}}
+      />
+      <ModelForm::CheckboxInput
+        @model={{@model}}
+        @property='publiclyVisible'
+        @label='Zichtbaar voor externen'
+      />
+
+      {{#if @model.publiclyVisible}}
+        <div class="row">
+          <div class="col-sm-10 offset-sm-2">
+            <div class='alert alert-warning' role='alert'>
+              Een publieke kamer advertentie is ook zichtbaar voor niet-leden. Houd hier
+              rekening mee in je advertentie.
+              <br />
+              Plaats je een coverfoto met mensen er op? Zorg dan wel dat je
+              toestemming van deze mensen hebt.
+            </div>
+          </div>
+        </div>
+      {{/if}}
+
+      <ModelForm::MdInput
+        @model={{@model}}
+        @property='description'
+        @label='Beschrijving'
+        @required={{true}}
+        @inputIdentifier='article-form-content'
+      />
+
+      <ModelForm::FormActions
+        @errors={{@model.errors}}
+        @errorMessage={{@errorMessage}}
+      >
+        <button
+          {{on 'click' @onCancel}}
+          type="button"
+          class='btn btn-default'
+        >
+          Annuleren
+        </button>
+      </ModelForm::FormActions>
+    </form>
+  </div>
+</div>

app/components/header-nav.hbs

@@ -1,70 +1,72 @@
-<nav class='navbar pb-0 pt-0 {{if (not session.isAuthenticated) "public"}}' aria-label='breadcrumb'>
+<nav class='header-nav navbar pb-0 pt-0 {{if (not this.session.isAuthenticated) "public"}}' aria-label='breadcrumb'>
   <div class="container-fluid d-flex justify-content-between">
     <span
-      class='{{if session.isAuthenticated "half-toggle" "pe-2"}} left-sidebar-toggle d-block d-md-none link'
-      {{action 'toggleLeftSidebar'}}
+      class='{{if this.session.isAuthenticated "half-toggle" "pe-2"}} left-sidebar-toggle d-block d-md-none link'
+      {{on 'click' this.toggleLeftSidebar}}
     >
       ☰
     </span>
 
-    {{#if session.isAuthenticated }}
-      <span {{action 'handleLogoAction'}} class='navbar-brand'>
+    {{#if this.session.isAuthenticated }}
+      <span {{on 'click' this.handleLogoAction}} class='navbar-brand'>
         <div class='header-logo'> </div>
       </span>
     {{else}}
       <div class='public-header-logo'> </div>
     {{/if}}
 
-    <div class='d-flex col ps-0 pe-0 navbar-contents-holder {{if (not session.isAuthenticated) "public"}}'>
+    <div class='d-flex col ps-0 pe-0 navbar-contents-holder {{if (not this.session.isAuthenticated) "public"}}'>
       <div class='navbar-overflow-wrapper'>
         <div class='navbar-nav col d-flex flex-row'>
-          {{#if session.isAuthenticated}}
+          {{#if this.session.isAuthenticated}}
             <Breadcrumbs @routeInfos={{@routeInfos}} />
-          {{else if media.isMobile}}
-          {{else if (not media.isMobile)}}
+          {{else if (not this.media.isMobile)}}
             <LinkTo @route='index' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentRouteName 'index') 'selected'}}">Home</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentRouteName 'index') 'selected'}}">Home</BsButton>
             </LinkTo>
-            <BsDropdown class="position-static" as |dd| {{did-insert (action 'setStaticPages')}}>
+            <BsDropdown class="position-static" as |dd| {{did-insert this.setStaticPages}}>
               <dd.button @type="primary" class="public-navbar-button {{if this.onAboutUsPage 'selected'}}">
                 {{t "component.headerNav.aboutUs"}}
               </dd.button>
               <dd.menu class="public-about-us-dropdown" @renderInPlace={{true}} as |ddm|>
-                {{#each-in staticPages as |id title|}}
+                {{#each-in this.staticPages as |id title|}}
                   <ddm.item>
                     <ddm.linkTo @route='static-pages.static-page' @model={{id}} class="btn btn-primary">
                       {{title}}
                     </ddm.linkTo>
                   </ddm.item>
                 {{/each-in}}
+                <LinkTo @route='public.room-forum' class="dropdown-item btn btn-primary">
+                  {{t 'mixin.menuItems.roomForum'}}
+                </LinkTo>
               </dd.menu>
             </BsDropdown>
             <LinkTo @route='static-pages.static-page' @model='word-lid' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
             </LinkTo>
             <LinkTo @route='static-pages.static-page' @model='sponsoring' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
             </LinkTo>
           {{/if}}
         </div>
       </div>
 
       <div id='navbar-wormhole'></div>
 
-      {{#unless session.isAuthenticated}}
+      {{#unless this.session.isAuthenticated}}
         <LinkTo @route='login' class='d-none d-md-flex me-2'>
-          <button class='btn btn-primary public-navbar-button {{if (eq router.currentRouteName 'login') 'selected'}}' type='button'>
+          <button class='btn btn-primary public-navbar-button {{if (eq this.router.currentRouteName 'login') 'selected'}}' type='button'>
             {{t 'tag.button.signin'}}
           </button>
         </LinkTo>
       {{/unless}}
     </div>
 
-    {{#unless session.isAuthenticated}}
+    {{#unless this.session.isAuthenticated}}
       <button
-        class='btn btn-locale btn-inverse-locale-{{intl.locale}} me-2'
+        class='btn btn-locale btn-inverse-locale-{{this.intl.locale}} me-2'
         title='{{t "component.headerNav.changeLocale"}}'
-        {{action 'toggleLocale'}}
+        {{on 'click' this.toggleLocale}}
         type='button'>
       </button>
     {{/unless}}