iceholidays-frontend 0.4.0 → 0.6.0

data/app/javascript/react/widgets/FilterPills.tsx

@@ -1,10 +1,17 @@
-import { Space } from "antd";
-import React, { useState } from "react";
+import { Col, Row, Space } from "antd";
+import React, { useEffect, useState } from "react";
 
 
-const years = [ 2024, 2025];
+const years = () => {
+  const currentYear = new Date().getFullYear();
+  const nextYear = new Date(new Date().setFullYear(currentYear + 1)).getFullYear();
+  return [currentYear, nextYear]
+};
 const months = Array.from({length: 12}, (item, i) => {
-  return new Date(0, i).toLocaleString('en-US', {month: 'long'})
+  return {
+    shortMonth: new Date(0, i).toLocaleString('en-US', {month: 'short'}), 
+    name: new Date(0, i).toLocaleString('en-US', {month: 'long'})
+  }
 });
 
 
@@ -12,66 +19,93 @@ function FilterPills(
   props: {
     items:any[];
     title?:string;
-    initialValue?:{keyword:string, year?:string, month?: string}
-    label?:string;
+    initialValue:{keyword?:string, year?:string, month?: string, location_id?:any}
+    bindLabel?:string;
+    bindValue?:string;
     allOption?:boolean;
     selectFilter;
   }){
   
-  const { items, title, label, initialValue, allOption } = props;
+  const { items, title, bindLabel, bindValue, initialValue, allOption } = props;
+
+  const [selected, setSelected] = useState(initialValue);
 
-  const [selected, setSelected] = useState({});
-  var filterObject: {[k: string]: any} = {};
+  const allHasValues = () => {
+    const {keyword, ...noKeyword} = selected;
+    return Object.entries(noKeyword).every(o => o[1] != "");
+  }
+  const [collapseFilters, setcollapseFilters] = useState(allHasValues);
+  
   const selectFilter = (label, value) => {
-    filterObject[label] = value;
-    setSelected(filterObject);
-    props.selectFilter(filterObject);
+    selected[label] = value;
+    setSelected(selected);
+  
+    setcollapseFilters(allHasValues);
+
+    props.selectFilter(selected);
   }
 
   return (
-    <Space size={12} direction="vertical">
-      {
-        allOption && <div className="filter-pill selected"> <span> All </span></div>
-      }
-        
+    <>
       {
-        items && (
-          <>
-            { title && <div className="filter-title"> {title} </div> }
+        collapseFilters==false && (
+
+          <Space size={12} direction="vertical">
+            {
+              items && (
+                <>
+                  { title && <div className="filter-title"> {title} </div> }
+                  <Space size={10} wrap>
+                      {
+                        allOption && <div className="filter-pill selected"> <span> All </span></div>
+                      }
+                      {
+                        items.map((item, index) => {
+                          //special case for location id
+                          const id:any = bindValue == "location_id" ? "id" : bindValue;
+                          const label = bindLabel ? item[bindLabel] : item;
+                          const value = bindValue ? item[id] : item;
+                          const selectedItem = selected && bindValue ? selected[bindValue]: item ;
+                          return <div key={index} onClick={()=>selectFilter(bindValue, value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ label } </span></div>
+                        })
+                      }
+                  </Space>
+                </>
+              )
+            }
+      
+            <div className="filter-title"> Year </div>
             <Space size={10} wrap>
-                {
-                  items.map(item => {
-                    const selectedItem = (selected["keyword"] ? selected["keyword"] : initialValue && initialValue.keyword );
-                    const value = label ? item[label] : item;
-                    return <div onClick={()=>selectFilter("keyword", value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ value } </span></div>
-                  })
-                }
+              {
+                allOption && <div className="filter-pill selected"> <span> All </span></div>
+              }
+              {
+                years().map((year, index) => {
+                  const selectedItem = selected && selected.year; 
+                  return <div key={index} onClick={()=>selectFilter("year", year)} className={`filter-pill default-filter ${selectedItem == year.toString() && 'selected'}`}> <span>{year} </span></div>
+                })
+              }
             </Space>
-          </>
+      
+            <div className="filter-title"> Month </div>
+            <Row gutter={[10, 10]} justify="space-between">
+              {
+                allOption && <Col className="filter-pill selected"> <span> All </span></Col>
+              }
+              {
+                months.map((month, index) => {
+                  const selectedItem = selected && selected.month ;
+                  return <Col xs={8} md={6} lg={4}> <div key={index} onClick={()=>selectFilter("month", month.shortMonth)} className={`filter-pill default-filter ${selectedItem?.toString() == month.shortMonth && 'selected'}`}> <span>{month.name} </span></div> </Col>
+                })
+              }
+            </Row>
+          </Space>
         )
+        
       }
-
-      <div className="filter-title"> Year </div>
-      <Space size={10} wrap>
-        {
-          years.map(year => {
-            const selectedItem = (selected["year"] ? selected["year"] : initialValue && initialValue.year);
-            return <div onClick={()=>selectFilter("item", year)} className={`filter-pill ${selectedItem == year.toString() && 'selected'}`}> <span>{year} </span></div>
-          })
-        }
-      </Space>
-
-      <div className="filter-title"> Month </div>
-      <Space size={10} wrap>
-      {
-        months.map(month => {
-          const selectedItem = (selected["month"] ? selected["month"] : initialValue && initialValue.month );
-          return <div onClick={()=>selectFilter("item", month)} className={`filter-pill ${selectedItem == month && 'selected'}`}> <span>{month} </span></div>
-        })
-      }
-      </Space>
-    </Space>
+    </>
   )
+  
 }
 
 export default FilterPills;

data/app/javascript/react/widgets/SearchBarWidget.tsx

@@ -1,20 +1,36 @@
 import { Form, Space, Input, DatePicker, Button, Flex } from "antd";
 import React from "react";
 import SearchApi from "../../api-services/search-api.service";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import dayjs from "dayjs";
 
+const monthFormat = "MMM YYYY";
 
 function SearchBarWidget() {
   const searchApi = new SearchApi;
   const navigate= useNavigate();
+  const [searchParams] =  useSearchParams();
 
   const save = (formValues) => {
-    searchApi.search(formValues.keyword, formValues.month)
-      .then(result => {
-          navigate(`/app/listing?keyword=${formValues.keyword}`);
-      })
+    let searchObj = {};
+    if(formValues.keyword) searchObj = {keyword: formValues.keyword};
+    
+    if(formValues.date){
+      searchObj["year"] = formValues.date.$y;
+      searchObj["month"] = new Date(formValues.date).toLocaleString('default', { month: 'short' });
+    }
+    
+    const searchParams = new URLSearchParams(searchObj).toString();
+    navigate(`/app/listing?${searchParams}`);
+    navigate(0);
+
+    // searchApi.search(formValues.keyword, formValues.month)
+    //   .then(result => {
+    //       navigate(`/app/listing?keyword=${formValues.keyword}`);
+    //   })
   }
   
+  
   return (
     <div id="search-bar">
         <img src="/iceholidays-assets/images/Rectangle49.png"/>
@@ -24,10 +40,10 @@ function SearchBarWidget() {
             layout="vertical"
           >
             <Form.Item wrapperCol={{ span: 24 }} label="Search" name="keyword">
-              <Input placeholder="Destinations, Attractions, etc" />
+              <Input placeholder="Destinations, Attractions, etc"/>
             </Form.Item>
-            <Form.Item wrapperCol={{ span: 24 }} label="Travel Period" name="month">
-              <DatePicker picker="month" />
+            <Form.Item wrapperCol={{ span: 24 }} label="Travel Period" name="date">
+              <DatePicker picker="month" format={monthFormat} inputReadOnly/>
             </Form.Item>
             <Flex align="flex-end" justify="center">
               <Button type="primary" className="search-button" htmlType="submit">Search</Button>

data/app/views/iceholidays/frontend/posts/index.html.erb

@@ -0,0 +1,9 @@
+<% @posts.each do |post| %>
+  <%= post.title %>
+
+  <% if post.thumbnail.attached? %>
+    <%= image_tag( post.thumbnail.blob.service_name.in?(%w[local test test_fixtures]) ? main_app.url_for(post.thumbnail) : post.thumbnail.attachment.url, height:300) %>
+  <% else %>
+    <%#= image_tag('nothumbnail.png', width:300) %>
+  <%end%>
+<% end %>

data/app/views/iceholidays/frontend/posts/show.html.erb

@@ -0,0 +1,2 @@
+<%= @post.title %>
+<%= @post.content %>

data/config/routes.rb

@@ -2,11 +2,12 @@ Iceholidays::Frontend::Engine.routes.draw do
   root to: 'site#index'
 
   get   '/listing'        => 'site#listing', as: :listing
-  get   '/show'           => 'site#show', as: :show
+  get   '/itinerary/:id'      => 'site#show', as: :show
   get   '/about-us'       => 'site#about_us', as: :about_us
   get   '/countries'      => 'site#countries', as: :countries
   get   '/blog'           => 'site#blog', as: :blog
   get   '/blog/1'         => 'site#show_blog', as: :show_blog
   get   '/contact-agents' => 'site#contact_agents', as: :contact_agents
   get   '/contact-us'     => 'site#contact_us', as: :contact_us
+  resources :posts, only:[:index, :show]
 end

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.4.0"
+    VERSION = "0.6.0"
   end
 end