карты пвз

pages/checkout/delivery.vue

@@ -4,7 +4,13 @@
     <div v-if="!isMobile" class="delivery__sidebar">
       <DeliveryInfo v-if="isPickupPointSelected" />
 
-      <DeliverySearch v-else :filtered-points="filteredPoints" />
+      <DeliverySearch
+        v-else
+        v-model:checkout-pickup-point="checkoutPickupPoint"
+        v-model:search-term="searchTerm"
+        :filtered-points="filteredPoints"
+        @update:checkout-pickup-point="updatePoint()"
+      />
     </div>
 
     <!--    Mobile -->
@@ -28,18 +34,20 @@
     <UModal
       v-model:open="openDeliverySearch"
       fullscreen
+      :dismissible="false"
       :ui="{
         body: 'overflow-hidden',
-        container: 'p-0',
         overlay: 'bg-black/50',
-        base: 'rounded-none shadow-none',
         header: 'hidden',
       }"
     >
       <template #body>
         <DeliverySearch
           v-if="activeTab === IPvzMapTabs.LIST"
+          v-model:checkout-pickup-point="checkoutPickupPoint"
+          v-model:search-term="searchTerm"
           :filtered-points="filteredPoints"
+          @update:checkout-pickup-point="updatePoint()"
         />
 
         <UDrawer
@@ -62,7 +70,7 @@
 
       <template #footer>
         <div class="d-flex flex-row w-full justify-between">
-          <MapControlFitting v-model="isFitting" />
+          <MapControlFitting v-model:fitting="fitting" />
 
           <MapControlTabs v-model:active-tab="activeTab" />
         </div>
@@ -71,19 +79,18 @@
 
     <!--    Desktop Mobile -->
     <PvzMap
-      v-model="checkoutPickupPoint"
+      v-model:checkout-pickup-point="checkoutPickupPoint"
       v-model:active-tab="activeTab"
-      v-model:is-fitting="isFitting"
+      v-model:fitting="fitting"
       :pickup-points="filteredPoints"
-      @update:model-value="updatePoint()"
-      @update:is-fitting="value => isFitting = value"
+      @update:checkout-pickup-point="updatePoint()"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
-import { IPvzMapTabs } from '#shared/types'
+import { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types'
 import { useGeolocation, useMediaQuery } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import DeliveryInfo from '~/components/DeliveryInfo.vue'
@@ -97,9 +104,9 @@ const open = ref(false)
 const isMobile = useMediaQuery('(max-width: 1280px)')
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
-const activeTab = ref(IPvzMapTabs.MAP)
-const isFitting = ref()
-const openDeliverySearch = ref(false)
+const activeTab = ref()
+const fitting = ref(IPvzMapFittingTabs.ALL)
+const openDeliverySearch = ref()
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -139,14 +146,21 @@ onMounted(async () => {
   yandexPvz.value = yandexPvzApi.value
 })
 
-// TODO сделать отдельный компонент UISearch
 const filteredPoints = computed<PickupPoint[]>(() => {
-  if (!searchTerm.value || searchTerm.value === '') {
-    return yandexPvz.value?.points || []
-  }
+  const points = yandexPvz.value?.points || []
+  const term = searchTerm.value?.toLowerCase() || ''
 
-  return yandexPvz.value?.points?.filter(point => point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase())
-    || isFitting.value === point.pickup_services.is_fitting_allowed) || []
+  return points.filter((point) => {
+    const matchesSearch = !term || point.address.full_address.toLowerCase().includes(term)
+
+    const isAllowed = point.pickup_services.is_fitting_allowed
+    const matchesFitting
+      = fitting.value === IPvzMapFittingTabs.ALL
+        || (fitting.value === IPvzMapFittingTabs.ALLOW && isAllowed)
+        || (fitting.value === IPvzMapFittingTabs.FORBID && !isAllowed)
+
+    return matchesSearch && matchesFitting
+  })
 })
 
 function updatePoint() {