feat(#8): add visibility information on the website

Author: peterpeterparker

src/app/app.component.ts

@@ -51,6 +51,8 @@ import {faSadCry} from '@fortawesome/pro-light-svg-icons/faSadCry';
 import {faLightbulbOn} from '@fortawesome/pro-light-svg-icons/faLightbulbOn';
 import {faHourglassEnd} from '@fortawesome/pro-light-svg-icons/faHourglassEnd';
 import {faGift as faGiftLight} from '@fortawesome/pro-light-svg-icons/faGift';
+import {faFemale} from '@fortawesome/pro-light-svg-icons/faFemale';
+import {faMale} from '@fortawesome/pro-light-svg-icons/faMale';
 
 @Component({
   selector: 'app-root',
@@ -178,7 +180,7 @@ export class AppComponent implements OnInit, OnDestroy {
     // We only set the following meta tags if we are not displaying an item or a blog post
     // For these new meta tags will be interpreted inside their routes
     if (Comparator.isStringEmpty(this.req.originalUrl) ||
-        (this.req.originalUrl.indexOf('/item/') === -1 && (this.req.originalUrl.indexOf('/blog/post/') == -1))) {
+        (this.req.originalUrl.indexOf('/item/') === -1 && (this.req.originalUrl.indexOf('/blog/post/') === -1))) {
       const description = this.translateService.instant('META.DESCRIPTION');
 
       this.meta.updateTag({name: 'description', content: description});
@@ -249,6 +251,8 @@ export class AppComponent implements OnInit, OnDestroy {
     library.add(faLightbulbOn);
     library.add(faHourglassEnd);
     library.add(faGiftLight);
+    library.add(faFemale);
+    library.add(faMale);
   }
 
   private initCookieConsent() {

src/assets/i18n/de.json

@@ -46,7 +46,11 @@
   },
   "ITEM_DETAILS": {
     "CONTENT": {
-      "PRICE_GROSS": "Miete/Monat"
+      "PRICE_GROSS": "Miete/Monat",
+      "VISIBILITY": {
+        "LOOKING_FOR": "Mitbewohner gesucht",
+        "YEARS_OLD": "Jahre alt"
+      }
     }
   },
   "TEXT": {

src/assets/i18n/en.json

@@ -46,7 +46,11 @@
   },
   "ITEM_DETAILS": {
     "CONTENT": {
-      "PRICE_GROSS": "Rental fee/month"
+      "PRICE_GROSS": "Rental fee/month",
+      "VISIBILITY": {
+        "LOOKING_FOR": "Roommates wanted",
+        "YEARS_OLD": "years old"
+      }
     }
   },
   "TEXT": {

src/assets/i18n/fr.json

@@ -46,7 +46,11 @@
   },
   "ITEM_DETAILS": {
     "CONTENT": {
-      "PRICE_GROSS": "Loyer mensuel"
+      "PRICE_GROSS": "Loyer mensuel",
+      "VISIBILITY": {
+        "LOOKING_FOR": "Colocataires recherchés",
+        "YEARS_OLD": "ans"
+      }
     }
   },
   "TEXT": {

src/assets/i18n/it.json

@@ -46,7 +46,11 @@
   },
   "ITEM_DETAILS": {
     "CONTENT": {
-      "PRICE_GROSS": "Affitto/mese"
+      "PRICE_GROSS": "Affitto/mese",
+      "VISIBILITY": {
+        "LOOKING_FOR": "Cercasi compagni di stanza",
+        "YEARS_OLD": "anni"
+      }
     }
   },
   "TEXT": {

src/components/core/item-summary/item-summary.component.html

@@ -13,8 +13,10 @@ <h1>
   <div class="row" *ngIf="isItemFlat()">
     <div class="col-md-12 mb-2">
       <h1>
-        <span *ngIf="item.attributes.rooms > 1">{{item.attributes.rooms}} {{'SELECT_ATTRIBUTES.ROOMS'| translate}}</span>
-        <span *ngIf="item.attributes.rooms == 1">{{item.attributes.rooms}} {{'SELECT_ATTRIBUTES.ROOM'| translate}}</span>
+        <span
+          *ngIf="item.attributes.rooms > 1">{{item.attributes.rooms}} {{'SELECT_ATTRIBUTES.ROOMS'| translate}}</span>
+        <span
+          *ngIf="item.attributes.rooms == 1">{{item.attributes.rooms}} {{'SELECT_ATTRIBUTES.ROOM'| translate}}</span>
         <span *ngIf="item.attributes.size > 0">{{item.attributes.size}} {{'CORE.SQUARE_METER'| translate}}</span>
       </h1>
     </div>
@@ -46,6 +48,20 @@ <h1>
     </div>
   </div>
 
+  <!-- Visibility -->
+  <div class="row" *ngIf="isItemShare() && hasUserLimitations()">
+    <div class="col-md-12">
+      <p>
+        <span>{{'ITEM_DETAILS.CONTENT.VISIBILITY.LOOKING_FOR'| translate}}&nbsp;</span>
+        <fa-icon [icon]="['fal', 'male']" *ngIf="hasVisibilityMale()"></fa-icon>
+        <fa-icon [icon]="['fal', 'female']" *ngIf="hasVisibilityFemale()"></fa-icon>
+        <span>&nbsp;</span>
+        {{item.userLimitations.age?.min}}<span>-</span>{{item.userLimitations.age?.max}}
+        <span>{{'ITEM_DETAILS.CONTENT.VISIBILITY.YEARS_OLD'| translate}}</span>
+      </p>
+    </div>
+  </div>
+
   <!-- Price -->
   <div class="row">
     <div class="col-md-12">

src/components/core/item-summary/item-summary.component.scss

@@ -0,0 +1,3 @@
+fa-icon {
+  margin-left: .25rem;
+}

src/components/core/item-summary/item-summary.component.ts

@@ -6,16 +6,20 @@ import {Item} from '../../../providers/model/item/item';
 // Utils
 import {ItemsComparator} from '../../../providers/core/utils/items-utils';
 import {Comparator} from '../../../providers/core/utils/utils';
+import {Resources} from '../../../providers/core/utils/resources';
 
 // Services
 import {CurrencyService} from '../../../providers/core/currency/currency.service';
 
 @Component({
   selector: 'app-item-summary',
-  templateUrl: './item-summary.component.html'
+  templateUrl: './item-summary.component.html',
+  styleUrls: ['./item-summary.component.scss']
 })
 export class ItemSummaryComponent implements OnInit {
 
+  RESOURCES: any = Resources.Constants;
+
   @Input() item: Item;
 
   @Output() notifyPrice: EventEmitter<string> = new EventEmitter<string>();
@@ -65,4 +69,21 @@ export class ItemSummaryComponent implements OnInit {
     return ItemsComparator.getItemFormattedDate(input);
   }
 
+  hasUserLimitations(): boolean {
+    return !Comparator.isEmpty(this.item) && !Comparator.isEmpty(this.item.userLimitations);
+  }
+
+  hasVisibilityMale(): boolean {
+    return this.hasVisibility(this.RESOURCES.ITEM.USER_RESTRICTIONS.GENDER.MALE);
+  }
+
+  hasVisibilityFemale(): boolean {
+    return this.hasVisibility(this.RESOURCES.ITEM.USER_RESTRICTIONS.GENDER.FEMALE);
+  }
+
+  private hasVisibility(gender: string): boolean {
+    return this.item.userLimitations.gender && (
+      this.item.userLimitations.gender === this.RESOURCES.ITEM.USER_RESTRICTIONS.GENDER.IRRELEVANT ||
+      this.item.userLimitations.gender === gender);
+  }
 }

src/components/core/item-summary/item-summary.module.ts

@@ -3,6 +3,8 @@ import {CommonModule} from '@angular/common';
 
 import {TranslateModule} from '@ngx-translate/core';
 
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+
 import {ItemSummaryComponent} from './item-summary.component';
 
 const CORE_COMPONENTS = [
@@ -15,7 +17,8 @@ const CORE_COMPONENTS = [
   ],
   imports: [
     CommonModule,
-    TranslateModule.forChild()
+    TranslateModule.forChild(),
+    FontAwesomeModule
   ],
   exports: [
     CORE_COMPONENTS

src/providers/core/utils/resources.ts

@@ -86,6 +86,13 @@ export class Resources {
         TYPE: {
           TAKEOVER: 'takeover',
           SHARE: 'share'
+        },
+        USER_RESTRICTIONS: {
+          GENDER: {
+            MALE: 'male',
+            FEMALE: 'female',
+            IRRELEVANT: 'irrelevant'
+          }
         }
       },