Skip to content

Commit de13144

Browse files
RobertBroersmaRobertBroersma
committed
Enhance CollectionSelector and update dependencies
- Added Info icon with tooltip to display collection descriptions in CollectionSelector.vue. - Improved layout and styling for better user experience in CollectionSelector component. - Updated Vuetify dependency from version 3.3.21 to 3.7.6 for enhanced features and performance. - Refactored index.vue to streamline map component integration and polygon handling, improving overall functionality.
1 parent 333e695 commit de13144

File tree

9 files changed

+28826
-182
lines changed

9 files changed

+28826
-182
lines changed

‎App/components/CollectionSelector.vue

+33-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { Eye, EyeOff } from 'lucide-vue-next'
2+
import { Eye, EyeOff, Info } from 'lucide-vue-next'
33
import { CollectionType, LayerLink } from '../types'
44
import type { Ref } from 'vue'
55
@@ -126,29 +126,45 @@ function toggleActive(value: boolean) {
126126
</script>
127127

128128
<template>
129-
<div v-if="!summaries">
130-
<div class="flex items-center gap-3 bg-white p-3 shadow">
131-
<button
132-
@click="toggleActive(!activeValue)"
133-
class="size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
134-
>
135-
<Eye class="size-4" v-if="!!activeValue" />
136-
<EyeOff class="size-4" v-if="!activeValue" />
137-
</button>
129+
<div v-if="!summaries" class="w-full">
130+
<div
131+
class="flex items-center gap-3 bg-white p-3 shadow w-full justify-between px-6"
132+
>
138133
<div class="text-sm font-medium">{{ collection.title }}</div>
139-
</div>
140-
</div>
141-
<v-expansion-panel v-if="summaries">
142-
<v-expansion-panel-title>
143-
<div class="flex items-center gap-3">
134+
<div class="flex items-center gap-1.5">
135+
<v-tooltip :text="collection.description" class="max-w-[640px]">
136+
<template v-slot:activator="{ props }">
137+
<Info v-bind="props" class="size-3.5 shrink-0" />
138+
</template>
139+
</v-tooltip>
144140
<button
145-
@click.stop="!!activeValue && toggleActive(false)"
146-
class="z-10 size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
141+
@click="toggleActive(!activeValue)"
142+
class="size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
147143
>
148144
<Eye class="size-4" v-if="!!activeValue" />
149145
<EyeOff class="size-4" v-if="!activeValue" />
150146
</button>
147+
</div>
148+
</div>
149+
</div>
150+
<v-expansion-panel v-if="summaries">
151+
<v-expansion-panel-title>
152+
<div class="flex items-center justify-between w-full gap-3">
151153
<div>{{ collection.title }}</div>
154+
<div class="flex items-center gap-1.5 z-10">
155+
<v-tooltip :text="collection.description" class="max-w-[640px]">
156+
<template v-slot:activator="{ props }">
157+
<Info v-bind="props" class="size-3.5 shrink-0" />
158+
</template>
159+
</v-tooltip>
160+
<button
161+
@click.stop="!!activeValue && toggleActive(false)"
162+
class="z-10 size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
163+
>
164+
<Eye class="size-4" v-if="!!activeValue" />
165+
<EyeOff class="size-4" v-if="!activeValue" />
166+
</button>
167+
</div>
152168
</div>
153169
</v-expansion-panel-title>
154170
<v-expansion-panel-text>

‎app/components/CollectionSelector.vue

+33-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { Eye, EyeOff } from 'lucide-vue-next'
2+
import { Eye, EyeOff, Info } from 'lucide-vue-next'
33
import { CollectionType, LayerLink } from '../types'
44
import type { Ref } from 'vue'
55
@@ -126,29 +126,45 @@ function toggleActive(value: boolean) {
126126
</script>
127127

128128
<template>
129-
<div v-if="!summaries">
130-
<div class="flex items-center gap-3 bg-white p-3 shadow">
131-
<button
132-
@click="toggleActive(!activeValue)"
133-
class="size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
134-
>
135-
<Eye class="size-4" v-if="!!activeValue" />
136-
<EyeOff class="size-4" v-if="!activeValue" />
137-
</button>
129+
<div v-if="!summaries" class="w-full">
130+
<div
131+
class="flex items-center gap-3 bg-white p-3 shadow w-full justify-between px-6"
132+
>
138133
<div class="text-sm font-medium">{{ collection.title }}</div>
139-
</div>
140-
</div>
141-
<v-expansion-panel v-if="summaries">
142-
<v-expansion-panel-title>
143-
<div class="flex items-center gap-3">
134+
<div class="flex items-center gap-1.5">
135+
<v-tooltip :text="collection.description" class="max-w-[640px]">
136+
<template v-slot:activator="{ props }">
137+
<Info v-bind="props" class="size-3.5 shrink-0" />
138+
</template>
139+
</v-tooltip>
144140
<button
145-
@click.stop="!!activeValue && toggleActive(false)"
146-
class="z-10 size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
141+
@click="toggleActive(!activeValue)"
142+
class="size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
147143
>
148144
<Eye class="size-4" v-if="!!activeValue" />
149145
<EyeOff class="size-4" v-if="!activeValue" />
150146
</button>
147+
</div>
148+
</div>
149+
</div>
150+
<v-expansion-panel v-if="summaries">
151+
<v-expansion-panel-title>
152+
<div class="flex items-center justify-between w-full gap-3">
151153
<div>{{ collection.title }}</div>
154+
<div class="flex items-center gap-1.5 z-10">
155+
<v-tooltip :text="collection.description" class="max-w-[640px]">
156+
<template v-slot:activator="{ props }">
157+
<Info v-bind="props" class="size-3.5 shrink-0" />
158+
</template>
159+
</v-tooltip>
160+
<button
161+
@click.stop="!!activeValue && toggleActive(false)"
162+
class="z-10 size-8 flex items-center justify-center shrink-0 rounded-md hover:bg-gray-100"
163+
>
164+
<Eye class="size-4" v-if="!!activeValue" />
165+
<EyeOff class="size-4" v-if="!activeValue" />
166+
</button>
167+
</div>
152168
</div>
153169
</v-expansion-panel-title>
154170
<v-expansion-panel-text>

‎app/components/Map.vue

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup lang="ts">
2+
import { MapboxMap } from '@studiometa/vue-mapbox-gl'
3+
import MapboxDraw from '@mapbox/mapbox-gl-draw'
4+
import 'mapbox-gl/dist/mapbox-gl.css'
5+
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
6+
7+
defineProps<{
8+
mapboxToken: string
9+
mapStyle: string
10+
}>()
11+
12+
const emit = defineEmits<{
13+
'update:polygons': [polygons: any[]]
14+
}>()
15+
16+
let draw = ref<MapboxDraw | null>(null)
17+
18+
function instantiateDraw(map: any) {
19+
if (!process.client) return
20+
21+
draw.value = new MapboxDraw({
22+
displayControlsDefault: false,
23+
})
24+
25+
map.addControl(draw.value)
26+
27+
map.on('draw.create', updateArea)
28+
map.on('draw.delete', updateArea)
29+
map.on('draw.update', updateArea)
30+
}
31+
32+
function updateArea() {
33+
const data = draw.value?.getAll()
34+
emit('update:polygons', data?.features || [])
35+
}
36+
37+
defineExpose({ draw })
38+
</script>
39+
40+
<template>
41+
<client-only>
42+
<MapboxMap
43+
:access-token="mapboxToken"
44+
:map-style="mapStyle"
45+
style="height: 100vh"
46+
@mb-created="instantiateDraw"
47+
>
48+
<slot />
49+
</MapboxMap>
50+
</client-only>
51+
</template>

‎app/composables/useCollections.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { CollectionType } from '~/types'
2+
3+
export async function useCollections({
4+
collectionLinks,
5+
}: {
6+
collectionLinks: string[]
7+
}) {
8+
let headers = useRequestHeaders()
9+
10+
const { data: collections } = await useAsyncData('collections', async () => {
11+
return Promise.all(
12+
collectionLinks.map(async (collectionLink) => {
13+
const res = await fetch(collectionLink, {
14+
headers: {
15+
...headers,
16+
Accept: 'application/json',
17+
},
18+
})
19+
const text = await res.text()
20+
const data = JSON.parse(text)
21+
return { ...data, href: collectionLink } as CollectionType & {
22+
href: string
23+
}
24+
}),
25+
)
26+
})
27+
28+
return collections
29+
}

‎app/package-lock.json

+7-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"vite-plugin-vuetify": "^1.0.2",
2020
"vue": "^3.3.4",
2121
"vue-router": "^4.2.5",
22-
"vuetify": "^3.3.21"
22+
"vuetify": "^3.7.6"
2323
},
2424
"dependencies": {
2525
"@mapbox/mapbox-gl-draw": "^1.4.3",

0 commit comments

Comments
 (0)