Merge pull request #46 from gone-bike/feature/search-image-page

Feature/search image page

astro/package.json

@@ -23,6 +23,7 @@
  "astro": "^2.0.16",
  "astro-i18next": "^1.0.0-beta.21",
  "astro-seo": "^0.7.0",
+ "axios": "^1.4.0",
  "cache-manager": "^5.1.7",
  "cache-manager-redis-store": "^3.0.1",
  "configurable-date-input-polyfill": "^4.0.0",

astro/src/app-types/bike_model.d.ts

@@ -0,0 +1,19 @@
+export declare namespace BikeModel {
+ export interface BikeModelProps {
+ id?: string;
+ showBrand?: boolean;
+ }
+
+ export interface ReducedBrandsAndModels {
+ brand: string;
+ models: string[];
+ }
+
+ export interface BikeBrandModelItem {
+ key: number;
+ name: string;
+ bike_brand: {
+ name: string;
+ };
+ }
+}

astro/src/app-types/report.d.ts

@@ -18,6 +18,8 @@ export declare namespace Report {
  id: number;
  };
  }[];
+ description: string;
+ serial_number: string;
  }
 
  export interface ReportDetails {

astro/src/app-types/search.d.ts

@@ -0,0 +1,15 @@
+export declare namespace SearchOnImage {
+ export interface SearchWeaviteItem {
+ _additional: {
+ certainty: number;
+ id: string;
+ };
+ bike_brand: string;
+ bike_model: string;
+ filename_download: string;
+ report_id: number;
+ theft_date: Date;
+ }
+
+ export type SearchBikesType = "listing" | "search";
+}

astro/src/components/base/BaseBreadcrumbs.astro

@@ -13,7 +13,7 @@ export interface BaseBreadcrumbsProps {
 const {
  currentPage,
  class: classes,
- higherPages = [],
+ higherPages = []
 } = Astro.props as BaseBreadcrumbsProps;
 ---
 
@@ -22,14 +22,14 @@ const {
  class:list={[
  "flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50",
  {},
- classes,
+ classes
  ]}
  aria-label="Breadcrumb"
 >
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
  <li class="inline-flex items-center">
  <a
- href="#"
+ href="/"
  class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600"
  >
  <svg

astro/src/components/bikes/BikesList.astro

@@ -1,7 +1,8 @@
 ---
 import BikesCard, {
- type BikesCardProps,
+ type BikesCardProps
 } from "@components/cards/BikesCard.astro";
+import NoBikesFound from "@components/bikes/NoBikesFound.astro";
 
 export interface BikesListProps {
  items: BikesCardProps[];
@@ -12,19 +13,24 @@ export interface BikesListProps {
 const {
  items = [],
  showMatch = false,
- class: classes,
+ class: classes
 } = Astro.props as BikesListProps;
 ---
 
-<ul
- class:list={[
- "my-4 md:my-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
- {},
- classes,
- ]}
->
- {
- items?.length > 0 &&
- items.map((item) => <BikesCard showMatch={showMatch} {...item} />)
- }
-</ul>
+{
+ items?.length > 0 ? (
+ <ul
+ class:list={[
+ "my-4 md:my-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+ {},
+ classes
+ ]}
+ >
+ {items.map((item) => (
+ <BikesCard showMatch={showMatch} {...item} />
+ ))}
+ </ul>
+ ) : (
+ <NoBikesFound />
+ )
+}

astro/src/components/bikes/BikesSearchList.astro

@@ -0,0 +1,30 @@
+---
+import type { BikesSearchCardProps } from "@components/cards/BikesSearchCard.astro";
+import BikesSearchCard from "@components/cards/BikesSearchCard.astro";
+import NoBikesFound from "@components/bikes/NoBikesFound.astro";
+
+export interface BikesSearchListProps {
+ items: BikesSearchCardProps[];
+ class?: string;
+}
+
+const { items = [], class: classes } = Astro.props as BikesSearchListProps;
+---
+
+{
+ items?.length > 0 ? (
+ <ul
+ class:list={[
+ "my-4 md:my-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+ {},
+ classes
+ ]}
+ >
+ {items.map((item) => (
+ <BikesSearchCard {...item} />
+ ))}
+ </ul>
+ ) : (
+ <NoBikesFound />
+ )
+}

astro/src/components/bikes/NoBikesFound.astro

@@ -0,0 +1,13 @@
+---
+import { t } from "i18next";
+
+export interface NoBikesFoundProps {
+ class?: string;
+}
+
+const { class: classes } = Astro.props as NoBikesFoundProps;
+---
+
+<p class:list={["text-center my-4 md:my-10", {}, classes]}>
+ {t("homepage.search.no_bikes", "Nothing was found on given query 😢")}
+</p>

astro/src/components/bikes/SearchBikes.astro

@@ -1,15 +1,63 @@
 ---
 import { t, changeLanguage } from "i18next";
+import bikeModelListing from "@models/bike_model";
+import type { BikeModel } from "@app-types/bike_model";
+
+import SearchBikesVue from "@components/bikes/SearchBikes.vue";
+import { Debug } from "astro/components";
+import type { SearchOnImage } from "@app-types/search";
 
 export interface SearchBikesProps {
  lang: string;
+ type: SearchOnImage.SearchBikesType;
 }
 
-const { lang } = Astro.props as SearchBikesProps;
+const { lang, type = "listing" } = Astro.props as SearchBikesProps;
 changeLanguage(lang);
+
+const translations = {
+ brand: t("homepage.brand"),
+ model: t("homepage.model"),
+ serial: t("homepage.serial"),
+ description: t("homepage.description")
+};
+
+const bikeBrandModelListing: BikeModel.BikeBrandModelItem[] =
+ await bikeModelListing({
+ showBrand: true
+ });
+
+const reducedBrandsAndModels = bikeBrandModelListing
+ .map((item) => ({
+ model: item.name,
+ brand: item.bike_brand.name
+ }))
+ .reduce((acc: BikeModel.ReducedBrandsAndModels[], item) => {
+ const brand = item.brand;
+ const existingBrand = acc.find((entry) => entry?.brand === brand);
+
+ if (existingBrand) {
+ existingBrand?.models.push(item.model);
+ } else {
+ acc.push({
+ brand: brand,
+ models: [item.model]
+ });
+ }
+
+ return acc;
+ }, []);
 ---
 
-<form class="mt-8">
+<!-- <Debug data={reducedBrandsAndModels} /> -->
+<SearchBikesVue
+ client:idle
+ t={translations}
+ brandsAndModels={reducedBrandsAndModels}
+ url={Astro.url}
+ type={type}
+/>
+<!-- <form class="mt-8" id="search-form">
  <div class="grid gap-4 md:grid-cols-12 md:gap-x-8">
  <div class="md:col-span-6 xl:col-span-3">
  <span class="block mb-2 text-sm font-medium text-customgray-900">
@@ -26,7 +74,7 @@ changeLanguage(lang);
  name=""
  id="brand"
  >
- <option selected> {t("homepage.brand")}</option>
+ <option selected disabled> {t("homepage.brand")}</option>
  <option value="BMX">BMX</option>
  <option value="BMX">BMX</option>
  <option value="BMX">BMX</option>
@@ -36,7 +84,7 @@ changeLanguage(lang);
  id="model"
  class="bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-r-lg border-l-gray-100 border-l-2 block w-full py-3 px-4 sm:text-base"
  >
- <option selected>{t("homepage.model")}</option>
+ <option selected disabled>{t("homepage.model")}</option>
  <option value="1001">1001</option>
  <option value="2002">2002</option>
  <option value="3003">3003</option>
@@ -55,7 +103,6 @@ changeLanguage(lang);
  <div
  class="border border-gray-300 text-gray-900 text-sm rounded-lg w-full pl-3 flex items-center gap-2 focus-within:ring-2 focus-within:ring-primary-600"
  >
- <!-- tags -->
  <span
  class="tag inline-flex items-center justify-center space-x-2 px-1.5 py-1 bg-gray-100 rounded"
  >
@@ -94,7 +141,7 @@ changeLanguage(lang);
  type="text"
  id="description"
  class="block w-full py-3 px-5 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-sm sm:text-base focus-within:ring-primary-600"
- placeholder={t("homepage.search.placeholder")}
+ placeholder={t("homepage.description")}
  />
  </div>
 
@@ -103,6 +150,7 @@ changeLanguage(lang);
  >
  <button
  type="submit"
+ id="search-form-submit"
  class="w-full flex items-center justify-center gap-x-2 text-white bg-primary-600 border border-transparent rounded-lg p-3 text-center"
  >
  <svg
@@ -123,4 +171,4 @@ changeLanguage(lang);
  </button>
  </div>
  </div>
-</form>
+</form> -->