add location-map and location-picker; improve page create and page listing

js/components/pages/page-create.js

@@ -3,6 +3,7 @@ import { router } from '../../router.js'
 import { auth } from '../../services/auth.js'
 import { directus } from '../../services/directus.js'
 import { SUPPORTED_CURRENCIES } from '../../services/currency.js'
+import '../location-picker.js'
 
 const STORAGE_KEY = 'dgray_create_draft'
 
@@ -199,15 +200,10 @@ class PageCreate extends HTMLElement {
                     
                     <div class="form-group">
                         <label class="label" for="location" data-i18n="create.location">${t('create.location')}</label>
-                        <input 
-                            type="text" 
-                            class="input" 
-                            id="location" 
-                            name="location"
-                            value="${this.escapeHtml(this.formData.location)}"
-                            data-i18n-placeholder="create.locationPlaceholder"
+                        <location-picker 
+                            id="location-picker"
                             placeholder="${t('create.locationPlaceholder')}"
-                        >
+                        ></location-picker>
                         <p class="field-hint">${t('create.locationHint') || 'Stadt oder PLZ eingeben'}</p>
                     </div>
                     
@@ -290,6 +286,14 @@ class PageCreate extends HTMLElement {
             this.formData.shipping = e.target.checked
             this.saveDraft()
         })
+
+        // Location picker handler
+        const locationPicker = this.querySelector('#location-picker')
+        locationPicker?.addEventListener('location-select', (e) => {
+            this.formData.locationData = e.detail
+            this.formData.location = e.detail.name
+            this.saveDraft()
+        })
         
         imageInput?.addEventListener('change', (e) => this.handleImageSelect(e))
 
@@ -416,6 +420,14 @@ class PageCreate extends HTMLElement {
             if (this.formData.shipping) listingData.shipping = this.formData.shipping
             if (this.formData.moneroAddress) listingData.monero_address = this.formData.moneroAddress
 
+            // Handle location - find or create in locations collection
+            if (this.formData.locationData) {
+                const locationId = await this.findOrCreateLocation(this.formData.locationData)
+                if (locationId) {
+                    listingData.location = locationId
+                }
+            }
+
             // Add images in junction table format
             if (imageIds.length > 0) {
                 listingData.images = {
@@ -478,6 +490,50 @@ class PageCreate extends HTMLElement {
             .replace(/^-|-$/g, '')
             .substring(0, 100)
     }
+
+    async findOrCreateLocation(locationData) {
+        if (!locationData || !locationData.name) return null
+
+        try {
+            // Build filter based on available data
+            const filter = {}
+            
+            if (locationData.postalCode) {
+                filter.postal_code = { _eq: locationData.postalCode }
+            }
+            if (locationData.countryCode) {
+                filter.country = { _eq: locationData.countryCode }
+            }
+            if (locationData.name) {
+                filter.name = { _eq: locationData.name }
+            }
+
+            // Only search if we have at least one filter
+            if (Object.keys(filter).length > 0) {
+                const existing = await directus.get('/items/locations', {
+                    filter,
+                    limit: 1
+                })
+
+                if (existing.data && existing.data.length > 0) {
+                    return existing.data[0].id
+                }
+            }
+
+            // Create new location
+            const newLocation = await directus.post('/items/locations', {
+                name: locationData.name || '',
+                postal_code: locationData.postalCode || null,
+                region: locationData.region || null,
+                country: locationData.countryCode || null
+            })
+
+            return newLocation.data?.id
+        } catch (error) {
+            console.error('Failed to find/create location:', error)
+            return null
+        }
+    }
 }
 
 customElements.define('page-create', PageCreate)