From 2dbf9e1ad400a47191e1f9f7e5acdb45f6e40bb8 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqi@rankrunners.dev>
Date: Wed, 23 Apr 2025 09:39:46 +0700
Subject: [PATCH] fix: add other properties back-end

---
 src/app/(main)/listings-for-rent/page.tsx     |  4 --
 src/collections/Properties.ts                 | 43 +++++++++++++++++--
 .../payload-custom/InputCountry.tsx           | 37 ++++++++++++++++
 src/payload-types.ts                          |  8 ++--
 4 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 src/components/payload-custom/InputCountry.tsx

diff --git a/src/app/(main)/listings-for-rent/page.tsx b/src/app/(main)/listings-for-rent/page.tsx
index ead755e..107775c 100644
--- a/src/app/(main)/listings-for-rent/page.tsx
+++ b/src/app/(main)/listings-for-rent/page.tsx
@@ -3,7 +3,6 @@ import HeroImage from "@/components/HeroImage";
 import Pagination from "@/components/Pagination";
 import { CardPropertyData } from "@/schema/property";
 import { getDefaultMetadata } from "@/utils/metadata";
-import { Country, State } from "country-state-city";
 import { Metadata } from "next";
 
 const metaDesc = "Explore the latest properties on the Dynamic Realty.";
@@ -76,9 +75,6 @@ const propertiesData: CardPropertyData[] = [
 ];
 
 export default function ListingsForRent() {
-  // const countries = State.getStatesOfCountry("ID");
-  // console.log(countries);
-
   return (
     <>
       <HeroImage title="Listings For Rent" />
diff --git a/src/collections/Properties.ts b/src/collections/Properties.ts
index e20de77..446bf1b 100644
--- a/src/collections/Properties.ts
+++ b/src/collections/Properties.ts
@@ -5,6 +5,16 @@ export const Properties: CollectionConfig = {
   slug: "properties",
   labels: { plural: "Properties", singular: "Property" },
   fields: [
+    {
+      name: "propertyType",
+      label: "Type",
+      type: "select",
+      options: [
+        { label: "Rent", value: "rent" },
+        { label: "Sell", value: "sell" },
+      ],
+      required: true,
+    },
     {
       name: "name",
       type: "text",
@@ -22,7 +32,7 @@ export const Properties: CollectionConfig = {
     },
     {
       name: "images",
-      type: "relationship",
+      type: "upload",
       relationTo: "media",
       hasMany: true,
       minRows: 1,
@@ -66,19 +76,44 @@ export const Properties: CollectionConfig = {
         {
           name: "country_code",
           label: "Country",
-          type: "text",
+          type: "select",
+          options: [
+            {
+              label: "United States",
+              value: "US",
+            },
+          ],
           required: true,
+          // admin: {
+          //   components: {
+          //     Field: {
+          //       path: "/components/payload-custom/InputCountry",
+          //     },
+          //   },
+          // },
         },
         {
           name: "state_code",
           label: "State",
-          type: "text",
+          type: "select",
+          options: [
+            {
+              label: "Washington",
+              value: "WA",
+            },
+          ],
           required: true,
         },
         {
           name: "city_code",
           label: "City",
-          type: "text",
+          type: "select",
+          options: [
+            {
+              label: "Davenport",
+              value: "Davenport",
+            },
+          ],
           required: true,
         },
         {
diff --git a/src/components/payload-custom/InputCountry.tsx b/src/components/payload-custom/InputCountry.tsx
new file mode 100644
index 0000000..b56d7b2
--- /dev/null
+++ b/src/components/payload-custom/InputCountry.tsx
@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+import { useField } from "@payloadcms/ui";
+import { TextFieldClientComponent } from "payload";
+
+const InputCountry: TextFieldClientComponent = ({ path, field }) => {
+  const { value, setValue } = useField({ path });
+  const { showError } = useField();
+
+  return (
+    <div className={`field-type select ${showError ? "has-error" : ""}`}>
+      {/* @ts-ignore */}
+      <span>jancok</span>
+      {/* <label htmlFor={field.name} required={field.required}></label> */}
+      <div className="select-input-wrapper">
+        <select
+          name={field.name}
+          // @ts-ignore
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          disabled={field.admin?.readOnly}
+        >
+          <option value="">-- Select --</option>
+          {/* {field.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))} */}
+        </select>
+      </div>
+      {/* {field.admin && <FieldDescription value={admin.description} />}
+      {showError && <Error message={errorMessage} />} */}
+    </div>
+  );
+};
+
+export default InputCountry;
diff --git a/src/payload-types.ts b/src/payload-types.ts
index c56a86d..4740ae2 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -239,6 +239,7 @@ export interface PropertyFeature {
  */
 export interface Property {
   id: number;
+  propertyType: 'rent' | 'sell';
   name: string;
   slug?: string | null;
   images: (number | Media)[];
@@ -263,9 +264,9 @@ export interface Property {
     bedrooms_count: string;
   };
   addressGroup: {
-    country_code: string;
-    state_code: string;
-    city_code: string;
+    country_code: 'US';
+    state_code: 'WA';
+    city_code: 'Davenport';
     zip_code: string;
     address: string;
   };
@@ -455,6 +456,7 @@ export interface PropertyFeaturesSelect<T extends boolean = true> {
  * via the `definition` "properties_select".
  */
 export interface PropertiesSelect<T extends boolean = true> {
+  propertyType?: T;
   name?: T;
   slug?: T;
   images?: T;