implement Rent option on the frontend

app/controllers/queryReview.js

@@ -3,11 +3,12 @@ const { isValidEmail } = require("../helpers/email");
 const {
   notifyForNewSearchRequest
 } = require("../services/notificationService");
-const { AD_CATEGORY } = require("../common/enums");
+const { AD_CATEGORY, AD_TYPE } = require("../common/enums");
 
 const getQueryReviewData = searchRequest => {
   const {
     id,
+    adType,
     realEstateType,
     sizeMin,
     sizeMax,
@@ -22,8 +23,21 @@ const getQueryReviewData = searchRequest => {
     ? realEstateTypeObject.hasGardenSize
     : false;
 
+  let adTypeTitle = "";
+  switch (adType) {
+    case AD_TYPE.AD_TYPE_SALE.stringId:
+      adTypeTitle = AD_TYPE.AD_TYPE_SALE.title;
+      break;
+    case AD_TYPE.AD_TYPE_RENT.stringId:
+      adTypeTitle = AD_TYPE.AD_TYPE_RENT.title;
+      break;
+    default:
+      adTypeTitle = "-";
+      break;
+  }
+
   const realEstateTypeTitle = realEstateTypeObject
-    ? realEstateTypeObject.title
+    ? `[${adTypeTitle}] ${realEstateTypeObject.title}`
     : "-";
 
   const locationTitle = "Promjenite lokaciju";

app/controllers/realEstateTypes.js

@@ -1,20 +1,45 @@
 const { currentSearchRequest } = require("../helpers/url");
 const { createSearchRequest } = require("../helpers/db/searchRequest");
 
-const { AD_CATEGORY } = require("../common/enums");
+const { AD_CATEGORY, AD_TYPE } = require("../common/enums");
+
+const getRealEstateTypes = async (req, res) => {
+  const searchRequest = await currentSearchRequest(req);
 
-const getRealEstateTypes = (req, res) => {
   const title = "Koju nekretninu tražite?";
+  let selectedAdType = AD_TYPE.AD_TYPE_SALE.id;
+  if (
+    searchRequest &&
+    searchRequest.adType &&
+    searchRequest.adType === AD_TYPE.AD_TYPE_RENT.stringId
+  ) {
+    selectedAdType = AD_TYPE.AD_TYPE_RENT.id;
+  }
   const realEstateTypes = Object.keys(AD_CATEGORY)
     .map(category => AD_CATEGORY[category])
     .filter(category => category.title);
 
-  res.render("realEstateType", { realEstateTypes, title });
+  res.render("realEstateType", {
+    selectedAdType,
+    realEstateTypes,
+    title,
+    AD_TYPE
+  });
 };
 
 const postRealEstateTypes = async (req, res) => {
   const searchRequest = await currentSearchRequest(req);
 
+  const adType = parseInt(req.body.adType);
+
+  const adTypeStringIds = {
+    [AD_TYPE.AD_TYPE_SALE.id]: AD_TYPE.AD_TYPE_SALE.stringId,
+    [AD_TYPE.AD_TYPE_RENT.id]: AD_TYPE.AD_TYPE_RENT.stringId
+  };
+
+  const adTypeStringId =
+    adTypeStringIds[adType] || AD_TYPE.AD_TYPE_SALE.stringId;
+
   const validRealEstateTypes = Object.keys(AD_CATEGORY).filter(
     category => !!AD_CATEGORY[category].title
   );
@@ -30,12 +55,14 @@ const postRealEstateTypes = async (req, res) => {
   let nextStepUrl = "";
   if (searchRequest && searchRequest.id) {
     nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
+    searchRequest.adType = adTypeStringId;
     searchRequest.realEstateType = selectedRealEstateType;
 
     await searchRequest.save();
   } else {
     try {
       const newSearchRequest = await createSearchRequest({
+        adType: adTypeStringId,
         realEstateType: selectedRealEstateType
       });
 

app/views/realEstateType.ejs

@@ -3,9 +3,17 @@
     <div class="center-align">
 
         <div class="row">
-            <select class="segment-select">
+            <select class="segment-select" id="adType" name="adType">
-                <option value="1">Prodaja</option>
+                <option value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
-                <option value="2" disabled>Najam (uskoro)</option>
+                <% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
+                    selected="selected"
+                <% } %>
+                ><%= AD_TYPE.AD_TYPE_SALE.title %></option>
+                <option value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
+                <% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
+                    selected="selected"
+                <% } %>
+                ><%= AD_TYPE.AD_TYPE_RENT.title %></option>
             </select>
         </div>
 
@@ -33,16 +41,17 @@
         $.fn.extend({
             Segment: function() {
                 $(this).each(function() {
+                    const self = $(this);
+                    const onchange = self.attr('onchange');
                     const wrapper = $("<div>", { class: "ui-segment" });
                     $(this)
                         .find("option")
-                        .each(function(param, param2) {
+                        .each(function() {
-                            const isDisabled = $(param2).attr("disabled");
                             const option = $("<span>", {
                                 class: "option",
+                                onclick: onchange,
                                 text:  $(this).text(),
                                 value: $(this).val(),
-                                disabled: isDisabled
                             });
                             if ($(this).is(":selected")) {
                                 option.addClass("active");
@@ -50,6 +59,12 @@
                             wrapper.append(option);
                         });
 
+                    wrapper.find("span.option").click(function (){
+                        wrapper.find("span.option").removeClass("active");
+                        $(this).addClass("active");
+                        self.val($(this).attr('value'));
+                    });
+
                     $(this).after(wrapper);
                     $(this).hide();
                 });