карты пвз

pages/checkout/delivery.vue

@@ -1,17 +1,22 @@
 <template>
   <div v-if="coords" class="delivery">
     <div class="delivery__sidebar">
-      <div
-        v-for="point in yandexPvz?.points"
-        :key="point.id"
-        class="pickup-point-item"
-        @click="onPickupClick(point)"
-      >
-        <h3>Yandex</h3>
-        {{ `${point?.address?.street} ${point?.address?.house}` }}
-        <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
+      <UInput v-model="searchTerm" size="xl" class="w-full" placeholder="pvz" />
+
+      <div class="delivery__items">
+        <div
+          v-for="point in filteredPvz?.points"
+          :key="point.id"
+          class="pickup-point-item"
+          @click="centerMap(point)"
+        >
+          <h3>Yandex</h3>
+          {{ `${point?.address?.street} ${point?.address?.house}` }}
+          <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
+        </div>
       </div>
     </div>
+
     <PvzMap ref="mapRef" :pickup-points="yandexPvz?.points" />
   </div>
 </template>
@@ -21,9 +26,10 @@ import { useGeolocation } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
 import PvzMap from '~/components/PvzMap.vue'
 
-const yandexPvz = ref('')
 const { coords } = useGeolocation()
-const city = ref('')
+const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
+const yandexPvz = ref('')
+const searchTerm = ref('')
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -38,11 +44,13 @@ const waitForCoords = () =>
 onMounted(async () => {
   await waitForCoords()
 
+  // обратное геокодирование (т.е. получаение города из координат)
   const response = await fetch(
     `https://nominatim.openstreetmap.org/reverse?lat=${coords.value.latitude}&lon=${coords.value.longitude}&format=json&accept-language=ru`,
   )
   const openstreetmap = await response.json()
 
+  // получение geo_id из названию города
   const { data: yandexLocation } = await useFetch('/api/yandex_location', {
     method: 'POST',
     body: {
@@ -50,6 +58,7 @@ onMounted(async () => {
     },
   })
 
+  // получения пунктов выдачи города из geo_id
   const { data: yandexPvzApi } = await useFetch('/api/yandex_pvz', {
     method: 'POST',
     body: {
@@ -60,14 +69,19 @@ onMounted(async () => {
   yandexPvz.value = yandexPvzApi.value
 })
 
-const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
+// TODO сделать отдельный компонент UISearch
+const filteredPvz = computed(() => {
+  if (!searchTerm.value && searchTerm.value === '')
+    return yandexPvz.value
 
-const onPickupClick = (point: any) => {
-  const lat = point?.position?.latitude
-  const lon = point?.position?.longitude
-  if (typeof lat === 'number' && typeof lon === 'number') {
-    mapRef.value?.centerMap(lat, lon)
+  const result = yandexPvz?.value?.points?.filter(value => value?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()))
+  return {
+    points: [...result],
   }
+})
+
+const centerMap = (point: any) => {
+  mapRef.value?.centerMap([point?.position?.longitude, point?.position?.latitude])
 }
 
 definePageMeta({
@@ -82,9 +96,13 @@ definePageMeta({
 
   &__sidebar {
     width: 410px;
-    height: calc(100dvh - 54px);
-    flex-shrink: 0;
+    padding: 24px;
+  }
+
+  &__items {
     overflow-y: auto;
+    flex-shrink: 0;
+    height: calc(100dvh - 54px - 40px - 24px);
   }
 }
 
@@ -92,7 +110,7 @@ definePageMeta({
   position: relative;
   width: 400px;
   height: 100px;
-  padding: 24px;
+  padding-block: 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;