diff --git a/js/package.json b/js/package.json index 2ab633f1e..506af534a 100644 --- a/js/package.json +++ b/js/package.json @@ -53,7 +53,7 @@ "@vue/apollo-composable": "^4.0.0-alpha.17", "@vue/compiler-sfc": "^3.2.37", "@vueuse/core": "^9.1.0", - "@vueuse/head": "^0.7.9", + "@vueuse/head": "^0.9.6", "@vueuse/router": "^9.0.2", "apollo-absinthe-upload-link": "^1.5.0", "autoprefixer": "^10", @@ -93,7 +93,7 @@ "vuedraggable": "^4.1.0" }, "devDependencies": { - "@histoire/plugin-vue": "^0.10.0", + "@histoire/plugin-vue": "^0.11.0", "@playwright/test": "^1.25.1", "@rushstack/eslint-patch": "^1.1.4", "@tailwindcss/forms": "^0.5.2", @@ -122,7 +122,7 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^9.3.0", "flush-promises": "^1.0.2", - "histoire": "^0.10.4", + "histoire": "^0.11.0", "jsdom": "^20.0.0", "mock-apollo-client": "^1.1.0", "prettier": "^2.2.1", diff --git a/js/src/App.vue b/js/src/App.vue index b27d71ea3..024eddd40 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -69,7 +69,11 @@ import { IConfig } from "@/types/config.model"; import { useRouter } from "vue-router"; import RouteName from "@/router/name"; -const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG); +const { result: configResult } = useQuery<{ config: IConfig }>( + CONFIG, + undefined, + { fetchPolicy: "cache-only" } +); const config = computed(() => configResult.value?.config); diff --git a/js/src/apollo/utils.ts b/js/src/apollo/utils.ts index 4c994d917..b889fb88f 100644 --- a/js/src/apollo/utils.ts +++ b/js/src/apollo/utils.ts @@ -74,7 +74,7 @@ export const typePolicies: TypePolicies = { merge: true, }, Address: { - keyFields: ["id"], + keyFields: ["id", "originId"], }, RootQueryType: { fields: { diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css index 63dffe692..e18222bda 100644 --- a/js/src/assets/oruga-tailwindcss.css +++ b/js/src/assets/oruga-tailwindcss.css @@ -114,7 +114,7 @@ body { } .autocomplete-item { - @apply py-1.5 px-4; + @apply py-1.5 px-4 text-start; } /* Dropdown */ diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue index 640e3ce64..f7f42ef26 100644 --- a/js/src/components/Event/FullAddressAutoComplete.vue +++ b/js/src/components/Event/FullAddressAutoComplete.vue @@ -44,10 +44,11 @@ class="!mt-0" > - - {{ option.poiInfos.name }} - {{ option.poiInfos.alternativeName }} + + + {{ addressToPoiInfos(option).name }} + + {{ addressToPoiInfos(option).alternativeName }} {{ t("Searching…") }} @@ -91,15 +92,15 @@ - + diff --git a/js/src/components/Local/CloseGroups.vue b/js/src/components/Local/CloseGroups.vue index f11bcbfc0..c2dd136f6 100644 --- a/js/src/components/Local/CloseGroups.vue +++ b/js/src/components/Local/CloseGroups.vue @@ -1,9 +1,10 @@ @@ -22,7 +23,7 @@ v-for="i in [...Array(6).keys()]" class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4" :key="i" - v-show="loadingGroups" + v-show="loading" /> (); +const props = defineProps<{ + userLocation: LocationType; + doingGeoloc?: boolean; +}>(); const emit = defineEmits(["doGeoLoc"]); const { t } = useI18n({ useScope: "global" }); +const userLocation = computed(() => props.userLocation); + +const geoHash = computed(() => + coordsToGeoHash(userLocation.value.lat, userLocation.value.lon) +); + +const distance = computed(() => + userLocation.value?.isIPLocation ? 150 : 25 +); + const { result: groupsResult, loading: loadingGroups } = useQuery<{ searchGroups: Paginate; }>( SEARCH_GROUPS, () => ({ - location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon), - radius: 25, + location: geoHash.value, + radius: distance.value, page: 1, limit: 12, }), - () => ({ enabled: props.userLocation?.lat !== undefined }) + () => ({ enabled: geoHash.value !== undefined }) ); const groups = computed( @@ -99,4 +113,6 @@ const groups = computed( const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5)); const userLocationName = computed(() => props?.userLocation?.name); + +const loading = computed(() => props.doingGeoloc || loadingGroups.value); diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue index 70b64a8cd..2cf908a3a 100644 --- a/js/src/components/NavBar.vue +++ b/js/src/components/NavBar.vue @@ -3,8 +3,14 @@ class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900" id="navbar" > - - + + @@ -12,7 +18,7 @@ diff --git a/js/src/composition/apollo/config.ts b/js/src/composition/apollo/config.ts index 0f933bd5f..c26bda722 100644 --- a/js/src/composition/apollo/config.ts +++ b/js/src/composition/apollo/config.ts @@ -29,7 +29,7 @@ export function useTimezones() { loading, } = useQuery<{ config: Pick; - }>(TIMEZONES); + }>(TIMEZONES, undefined, { fetchPolicy: "cache-first" }); const timezones = computed(() => timezoneResult.value?.config?.timezones); return { timezones, error, loading }; @@ -42,7 +42,7 @@ export function useAnonymousParticipationConfig() { loading, } = useQuery<{ config: Pick; - }>(ANONYMOUS_PARTICIPATION_CONFIG); + }>(ANONYMOUS_PARTICIPATION_CONFIG, undefined, { fetchPolicy: "cache-only" }); const anonymousParticipationConfig = computed( () => configResult.value?.config?.anonymous?.participation @@ -58,7 +58,7 @@ export function useAnonymousReportsConfig() { loading, } = useQuery<{ config: Pick; - }>(ANONYMOUS_REPORTS_CONFIG); + }>(ANONYMOUS_REPORTS_CONFIG, undefined, { fetchPolicy: "cache-only" }); const anonymousReportsConfig = computed( () => configResult.value?.config?.anonymous?.participation @@ -69,7 +69,7 @@ export function useAnonymousReportsConfig() { export function useInstanceName() { const { result, error, loading } = useQuery<{ config: Pick; - }>(ABOUT); + }>(ABOUT, undefined, { fetchPolicy: "cache-only" }); const instanceName = computed(() => result.value?.config?.name); return { instanceName, error, loading }; @@ -78,7 +78,7 @@ export function useInstanceName() { export function useAnonymousActorId() { const { result, error, loading } = useQuery<{ config: Pick; - }>(ANONYMOUS_ACTOR_ID); + }>(ANONYMOUS_ACTOR_ID, undefined, { fetchPolicy: "cache-only" }); const anonymousActorId = computed( () => result.value?.config?.anonymous?.actorId @@ -89,7 +89,7 @@ export function useAnonymousActorId() { export function useUploadLimits() { const { result, error, loading } = useQuery<{ config: Pick; - }>(UPLOAD_LIMITS); + }>(UPLOAD_LIMITS, undefined, { fetchPolicy: "cache-only" }); const uploadLimits = computed(() => result.value?.config?.uploadLimits); return { uploadLimits, error, loading }; @@ -98,7 +98,7 @@ export function useUploadLimits() { export function useEventCategories() { const { result, error, loading } = useQuery<{ config: Pick; - }>(EVENT_CATEGORIES); + }>(EVENT_CATEGORIES, undefined, { fetchPolicy: "cache-only" }); const eventCategories = computed(() => result.value?.config.eventCategories); return { eventCategories, error, loading }; @@ -107,7 +107,7 @@ export function useEventCategories() { export function useRestrictions() { const { result, error, loading } = useQuery<{ config: Pick; - }>(RESTRICTIONS); + }>(RESTRICTIONS, undefined, { fetchPolicy: "cache-only" }); const restrictions = computed(() => result.value?.config.restrictions); return { restrictions, error, loading }; @@ -116,7 +116,7 @@ export function useRestrictions() { export function useExportFormats() { const { result, error, loading } = useQuery<{ config: Pick; - }>(EVENT_PARTICIPANTS); + }>(EVENT_PARTICIPANTS, undefined, { fetchPolicy: "cache-only" }); const exportFormats = computed(() => result.value?.config?.exportFormats); return { exportFormats, error, loading }; } @@ -124,7 +124,7 @@ export function useExportFormats() { export function useGeocodingAutocomplete() { const { result, error, loading } = useQuery<{ config: Pick; - }>(GEOCODING_AUTOCOMPLETE); + }>(GEOCODING_AUTOCOMPLETE, undefined, { fetchPolicy: "cache-only" }); const geocodingAutocomplete = computed( () => result.value?.config?.geocoding?.autocomplete ); @@ -134,7 +134,7 @@ export function useGeocodingAutocomplete() { export function useMapTiles() { const { result, error, loading } = useQuery<{ config: Pick; - }>(MAPS_TILES); + }>(MAPS_TILES, undefined, { fetchPolicy: "cache-only" }); const tiles = computed(() => result.value?.config.maps.tiles); return { tiles, error, loading }; @@ -143,7 +143,7 @@ export function useMapTiles() { export function useRoutingType() { const { result, error, loading } = useQuery<{ config: Pick; - }>(ROUTING_TYPE); + }>(ROUTING_TYPE, undefined, { fetchPolicy: "cache-only" }); const routingType = computed(() => result.value?.config.maps.routing.type); return { routingType, error, loading }; @@ -152,7 +152,7 @@ export function useRoutingType() { export function useFeatures() { const { result, error, loading } = useQuery<{ config: Pick; - }>(FEATURES); + }>(FEATURES, undefined, { fetchPolicy: "cache-only" }); const features = computed(() => result.value?.config.features); return { features, error, loading }; @@ -161,7 +161,7 @@ export function useFeatures() { export function useResourceProviders() { const { result, error, loading } = useQuery<{ config: Pick; - }>(RESOURCE_PROVIDERS); + }>(RESOURCE_PROVIDERS, undefined, { fetchPolicy: "cache-only" }); const resourceProviders = computed( () => result.value?.config.resourceProviders @@ -172,7 +172,7 @@ export function useResourceProviders() { export function useServerProvidedLocation() { const { result, error, loading } = useQuery<{ config: Pick; - }>(LOCATION); + }>(LOCATION, undefined, { fetchPolicy: "cache-only" }); const location = computed(() => result.value?.config.location); return { location, error, loading }; @@ -181,7 +181,7 @@ export function useServerProvidedLocation() { export function useIsDemoMode() { const { result, error, loading } = useQuery<{ config: Pick; - }>(DEMO_MODE); + }>(DEMO_MODE, undefined, { fetchPolicy: "cache-only" }); const isDemoMode = computed(() => result.value?.config.demoMode); return { isDemoMode, error, loading }; @@ -190,7 +190,7 @@ export function useIsDemoMode() { export function useAnalytics() { const { result, error, loading } = useQuery<{ config: Pick; - }>(ANALYTICS); + }>(ANALYTICS, undefined, { fetchPolicy: "cache-only" }); const analytics = computed(() => result.value?.config.analytics); return { analytics, error, loading }; @@ -199,7 +199,7 @@ export function useAnalytics() { export function useSearchConfig() { const { result, error, loading, onResult } = useQuery<{ config: Pick; - }>(SEARCH_CONFIG); + }>(SEARCH_CONFIG, undefined, { fetchPolicy: "cache-only" }); const searchConfig = computed(() => result.value?.config.search); return { searchConfig, error, loading, onResult }; diff --git a/js/src/graphql/group.ts b/js/src/graphql/group.ts index 52ca14960..54afdb4fe 100644 --- a/js/src/graphql/group.ts +++ b/js/src/graphql/group.ts @@ -420,19 +420,3 @@ export const GROUP_TIMELINE = gql` } ${ACTOR_FRAGMENT} `; - -export const CLOSE_GROUPS = gql` - query CloseGroups($location: String, $radius: Float) { - searchGroups(location: $location, radius: $radius, page: 1, limit: 10) { - total - elements { - ...ActorFragment - physicalAddress { - ...AdressFragment - } - } - } - } - ${ACTOR_FRAGMENT} - ${ADDRESS_FRAGMENT} -`; diff --git a/js/src/graphql/home.ts b/js/src/graphql/home.ts index 8d9390aeb..959787e83 100644 --- a/js/src/graphql/home.ts +++ b/js/src/graphql/home.ts @@ -109,53 +109,3 @@ export const HOME_USER_QUERIES = gql` ${EVENT_OPTIONS_FRAGMENT} ${ACTOR_FRAGMENT} `; - -export const CLOSE_CONTENT = gql` - query CloseContent( - $location: String! - $radius: Float - $page: Int - $limit: Int - ) { - searchEvents( - location: $location - radius: $radius - page: $page - limit: $limit - ) { - total - elements { - id - title - uuid - beginsOn - status - picture { - id - url - } - language - tags { - ...TagFragment - } - options { - ...EventOptions - } - physicalAddress { - ...AdressFragment - } - attributedTo { - ...ActorFragment - } - organizerActor { - ...ActorFragment - } - __typename - } - } - } - ${ADDRESS_FRAGMENT} - ${TAG_FRAGMENT} - ${EVENT_OPTIONS_FRAGMENT} - ${ACTOR_FRAGMENT} -`; diff --git a/js/src/views/Admin/SettingsView.vue b/js/src/views/Admin/SettingsView.vue index 0cabe59aa..ef5ac7840 100644 --- a/js/src/views/Admin/SettingsView.vue +++ b/js/src/views/Admin/SettingsView.vue @@ -432,7 +432,7 @@ const filteredLanguages = ref([]); const instanceLanguages = computed({ get() { - const languageCodes = [...adminSettings.value.instanceLanguages] || []; + const languageCodes = [...(adminSettings.value?.instanceLanguages ?? [])]; return languageCodes .map((code) => languageForCode(code)) .filter((language) => language) as string[]; @@ -468,7 +468,8 @@ saveAdminSettingsError((e) => { }); const updateSettings = async (): Promise => { - const variables = { ...settingsToWrite }; + const variables = { ...settingsToWrite.value }; + console.debug("updating settings with variables", variables); saveAdminSettings(variables); }; diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue index 9dbacceeb..bcb60f003 100644 --- a/js/src/views/HomeView.vue +++ b/js/src/views/HomeView.vue @@ -131,7 +131,11 @@ - + @@ -224,7 +228,9 @@ const { result: aboutConfigResult } = useQuery<{ IConfig, "name" | "description" | "slogan" | "registrationsOpen" >; -}>(ABOUT); +}>(ABOUT, undefined, { + fetchPolicy: "cache-only", +}); const config = computed(() => aboutConfigResult.value?.config); @@ -507,10 +513,19 @@ GeolocationPosition) => { reverseGeoCodeInformation.latitude = latitude; reverseGeoCodeInformation.longitude = longitude; reverseGeoCodeInformation.accuracy = accuracy; + doingGeoloc.value = false; }; +const doingGeoloc = ref(false); + const performGeoLocation = () => { - navigator.geolocation.getCurrentPosition(fetchAndSaveCurrentLocationName); + doingGeoloc.value = true; + navigator.geolocation.getCurrentPosition( + fetchAndSaveCurrentLocationName, + () => { + doingGeoloc.value = false; + } + ); }; /** diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue index b7df8d0b6..71e45159e 100644 --- a/js/src/views/Settings/PreferencesView.vue +++ b/js/src/views/Settings/PreferencesView.vue @@ -16,7 +16,7 @@ @@ -64,11 +64,15 @@ @@ -108,7 +112,6 @@
+ + {{ addressToPoiInfos(option).name }} +