webapp/app/pages/select-location/index.vue

<template>
  <div class="container mx-auto px-4 py-8">
    <PageHeader :title="t('common.selectLocation')">
      <template #actions>
        <button class="btn btn-ghost" @click="router.back()">
          <Icon name="lucide:x" size="20" />
        </button>
      </template>
    </PageHeader>

    <Stack gap="8" class="mt-6">
      <!-- My addresses -->
      <Stack v-if="isAuthenticated && teamAddresses?.length" gap="4">
        <Heading :level="3">{{ t('profileAddresses.header.title') }}</Heading>
        <Grid :cols="1" :md="2" :gap="4">
          <Card
            v-for="addr in teamAddresses"
            :key="addr.uuid"
            padding="small"
            interactive
            :class="{ 'ring-2 ring-primary': isSelected('address', addr.uuid) }"
            @click="selectAddress(addr)"
          >
            <Stack gap="2">
              <Stack direction="row" align="center" gap="2">
                <Icon name="lucide:map-pin" size="18" class="text-primary" />
                <Text size="base" weight="semibold">{{ addr.name }}</Text>
                <Pill v-if="addr.isDefault" variant="outline" size="sm">Default</Pill>
              </Stack>
              <Text tone="muted" size="sm">{{ addr.address }}</Text>
            </Stack>
          </Card>
        </Grid>
      </Stack>

      <!-- Hubs -->
      <Stack gap="4">
        <Heading :level="3">{{ t('catalogMap.hubsTab') }}</Heading>

        <NuxtLink :to="localePath('/select-location/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
          <ClientOnly>
            <MapboxGlobe
              map-id="select-location-map"
              :locations="itemsWithCoords"
              :height="192"
            />
          </ClientOnly>
        </NuxtLink>

        <CatalogFilters :filters="filters" v-model="selectedFilter" />

        <div v-if="isLoading" class="flex items-center justify-center p-8">
          <span class="loading loading-spinner loading-lg" />
        </div>

        <EmptyState
          v-else-if="!items?.length"
          :title="t('catalogMap.noHubs')"
        />

        <template v-else>
          <Grid :cols="1" :md="2" :gap="4">
            <HubCard
              v-for="hub in items"
              :key="hub.uuid"
              :hub="hub"
              selectable
              :is-selected="isSelected('hub', hub.uuid)"
              @select="selectHub(hub)"
            />
          </Grid>

          <PaginationLoadMore
            :shown="items.length"
            :total="total"
            :can-load-more="canLoadMore"
            :loading="isLoadingMore"
            @load-more="loadMore"
          />
        </template>
      </Stack>
    </Stack>
  </div>
</template>

<script setup lang="ts">
import { useLocationStore } from '~/stores/location'

definePageMeta({
  layout: 'topnav'
})

const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const localePath = useLocalePath()
const { isAuthenticated } = useAuth()
const locationStore = useLocationStore()
const searchStore = useSearchStore()
const isSearchMode = computed(() => route.query.mode === 'search')

// Use shared composable for hubs
const {
  items,
  total,
  selectedFilter,
  filters,
  isLoading,
  isLoadingMore,
  itemsWithCoords,
  canLoadMore,
  loadMore,
  init
} = useCatalogHubs()

await init()

// Load team addresses
const teamAddresses = ref<any[]>([])

if (isAuthenticated.value) {
  try {
    const { execute } = useGraphQL()
    const { GetTeamAddressesDocument } = await import('~/composables/graphql/team/teams-generated')
    const data = await execute(GetTeamAddressesDocument, {}, 'team', 'teams')
    teamAddresses.value = data?.teamAddresses || []
  } catch {
    // Not critical
  }
}

const isSelected = (type: 'address' | 'hub', uuid: string) => {
  return locationStore.selectedLocation?.type === type && locationStore.selectedLocation?.uuid === uuid
}

const goToRequestIfReady = () => {
  if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
    router.push({
      path: '/request',
      query: {
        productUuid: searchStore.searchForm.productUuid,
        product: searchStore.searchForm.product,
        locationUuid: searchStore.searchForm.locationUuid,
        location: searchStore.searchForm.location,
        quantity: searchStore.searchForm.quantity || undefined
      }
    })
    return true
  }
  return false
}

const selectHub = async (hub: any) => {
  console.log('[selectHub] called', { hub, isSearchMode: isSearchMode.value })

  if (isSearchMode.value) {
    searchStore.setLocation(hub.name)
    searchStore.setLocationUuid(hub.uuid)
    if (goToRequestIfReady()) return
    router.back()
    return
  }

  try {
    console.log('[selectHub] calling locationStore.select')
    const success = await locationStore.select('hub', hub.uuid, hub.name, hub.latitude, hub.longitude)
    console.log('[selectHub] result:', success)
    if (success) {
      router.back()
    } else {
      console.error('[selectHub] Selection failed - success=false')
    }
  } catch (e) {
    console.error('[selectHub] Error:', e)
  }
}

const selectAddress = async (addr: any) => {
  console.log('[selectAddress] called', { addr, isSearchMode: isSearchMode.value })

  if (isSearchMode.value) {
    searchStore.setLocation(addr.address || addr.name)
    searchStore.setLocationUuid(addr.uuid)
    if (goToRequestIfReady()) return
    router.back()
    return
  }

  try {
    console.log('[selectAddress] calling locationStore.select')
    const success = await locationStore.select('address', addr.uuid, addr.name, addr.latitude, addr.longitude)
    console.log('[selectAddress] result:', success)
    if (success) {
      router.back()
    } else {
      console.error('[selectAddress] Selection failed - success=false')
    }
  } catch (e) {
    console.error('[selectAddress] Error:', e)
  }
}
</script>