#12 - Community - Fix join page + other small fixes

src/components/OcFairBadge/OcFairBadge.vue

@@ -2,8 +2,8 @@
   <component
     :is="popover ? Button : 'div'"
     class="flex flex-row gap-1"
-    v-bind="popover ? buttonProps : undefined"
-    v-on="popover ? buttonOn : undefined"
+    v-bind="popover ? buttonProps : {}"
+    v-on="popover ? buttonOn : {}"
   >
     <Badge
       v-for="(selected, key) of fairValues"

src/components/OcHomeCommunityActionList/OcHomeCommunityActionList.vue

 <template>
-  <div class="flex gap-4 justify-around flex-wrap">
+  <div class="flex justify-between flex-wrap">
     <template v-for="action in homeCommunityActionList" v-bind:key="action.id">
       <div
         :class="[
@@ -36,7 +36,7 @@
               {{ translateValue(action.title) }}
             </h3>
             <div v-if="action.fair" class="flex justify-evenly gap-1">
-              <OcFairBadge :fair-badges-visibility="action.fair" size="xlarge" />
+              <OcFairBadge :badges="action.fair" size="xlarge" />
             </div>
           </div>
         </template>

src/declarations.ts

 import type { ContextDefinition } from "jsonld"
+import type { RouteLocationAsRelativeGeneric } from "vue-router"
 
 export type OcCommunity = {
   '@id': string
@@ -95,7 +96,7 @@ export type OcBreadcrumbItem = {
   label: string,
   key: string,
   type: string,
-  to?: string
+  to?: RouteLocationAsRelativeGeneric
 }
 
 export type OcCatalog = {

src/pages/community/[community].dashboard/datasets.vue

+<template>
+  <OcLayoutSimple
+    :is-authenticated="accountStore.isAuthenticated"
+    :breadcrumb-items="breadcrumbItems"
+  >
+    <p class="font-bold text-center text-xl">👷‍♂️ WIP 👷‍♂️</p>
+  </OcLayoutSimple>
+</template>
+
+<script setup lang="ts">
+import OcLayoutSimple from '@/layout/OcLayoutSimple/OcLayoutSimple.vue'
+import type { OcBreadcrumbItem } from '@/declarations'
+import { useCommunityData } from '@/dataLoaders/community'
+import { useAccountStore } from '@/stores/account'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTranslateValue } from '@/composables/translateValue'
+
+definePage({
+  name: 'community.dashboard.datasets',
+  meta: {
+    needsAuth: true,
+    loaders: [useCommunityData]
+  }
+})
+
+const { translateValue } = useTranslateValue()
+const accountStore = useAccountStore()
+const { t } = useI18n()
+
+const { data: community } = useCommunityData()
+
+const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
+  {
+    label: translateValue(community.value.title),
+    key: 'community',
+    type: 'community',
+    to: { name: 'community', params: { community: community.value.name } }
+  },
+  {
+    label: t('dashboard'),
+    key: 'dashboard',
+    type: 'dashboard',
+    to: { name: 'community.dashboard', params: { community: community.value.name } }
+  },
+  {
+    label: t('datasetsLabel'),
+    key: 'datasets',
+    type: 'http://www.w3.org/ns/dcat#Dataset'
+  }
+])
+</script>

src/pages/community/[community].dashboard/index.vue

+<template>
+  <OcLayoutSimple
+    :is-authenticated="accountStore.isAuthenticated"
+    :breadcrumb-items="breadcrumbItems"
+  >
+    <p class="font-bold text-center text-xl">👷‍♂️ WIP 👷‍♂️</p>
+  </OcLayoutSimple>
+</template>
+
+<script setup lang="ts">
+import OcLayoutSimple from '@/layout/OcLayoutSimple/OcLayoutSimple.vue'
+import type { OcBreadcrumbItem } from '@/declarations'
+import { useCommunityData } from '@/dataLoaders/community'
+import { useAccountStore } from '@/stores/account'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTranslateValue } from '@/composables/translateValue'
+
+definePage({
+  name: 'community.dashboard',
+  meta: {
+    needsAuth: true,
+    loaders: [useCommunityData]
+  }
+})
+
+const { translateValue } = useTranslateValue()
+const accountStore = useAccountStore()
+const { t } = useI18n()
+
+const { data: community } = useCommunityData()
+
+const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
+  {
+    label: translateValue(community.value.title),
+    key: 'community',
+    type: 'community',
+    to: { name: 'community', params: { community: community.value.name } }
+  },
+  {
+    label: t('dashboard'),
+    key: 'dashboard',
+    type: 'dashboard'
+  }
+])
+</script>

src/pages/community/[community].datasets/new.vue

@@ -246,22 +246,22 @@ const steps = computed(() => {
 
 const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
   {
-    label: translateValue(community.value?.title),
+    label: translateValue(community.value.title),
     key: 'community',
     type: 'community',
-    to: `/community/${community.value?.name}`
+    to: { name: 'community', params: { community: community.value.name } }
   },
   {
     label: t('dashboard'),
     key: 'dashboard',
     type: 'dashboard',
-    to: `/community/${community.value?.name}/dashboard`
+    to: { name: 'community.dashboard', params: { community: community.value.name } }
   },
   {
     label: t('datasetsLabel'),
     key: 'datasets',
     type: 'http://www.w3.org/ns/dcat#Dataset',
-    to: `/community/${community.value?.name}/dashboard/datasets`
+    to: { name: 'community.dashboard.datasets', params: { community: community.value.name } }
   },
   {
     label: t('datasets.new.new'),

src/pages/community/[community].join.vue

@@ -33,7 +33,12 @@
         <i class="fa-solid fa-circle-check text-6xl text-center text-primary mb-6"></i>
         <p class="text-center mb-6">{{ t('community.askJoin.confirmation.1') }}</p>
         <p class="text-center mb-6">{{ t('community.askJoin.confirmation.2') }}</p>
-        <Button :as="OcLink" :to="'/community/' + community.name" severity="secondary" rounded>
+        <Button
+          :as="OcLink"
+          :to="{ name: 'community', params: { community: community.name } }"
+          severity="secondary"
+          rounded
+        >
           {{ t('connection.continueAsGuest') }}
         </Button>
       </div>
@@ -76,10 +81,10 @@ const requestDone = ref(false)
 
 const breadcrumbItems = computed<OcBreadcrumbItem[]>(() => [
   {
-    label: translateValue(community.value?.title),
+    label: translateValue(community.value.title),
     key: 'community',
     type: 'community',
-    to: '/community/' + community.value?.name
+    to: { name: 'community', params: { community: community.value.name } }
   },
   {
     label: t('breadcrumb.joinCommunity'),
@@ -96,7 +101,11 @@ async function requestAccess() {
     if (!accountStore.infos) {
       throw new Error('No user infos available')
     }
-    await insertCommunityAccessRequest(community.value['@id'], accountStore.infos.loginID)
+    await insertCommunityAccessRequest(
+      community.value['@id'],
+      accountStore.infos.loginID,
+      accountStore.auth
+    )
     requestDone.value = true
     showConfirmation.value = true
   } catch (e) {

src/sparql/communities.ts

@@ -55,18 +55,20 @@ export const getCommunityList = async (auth?: Credentials): Promise<OcJsonLdDocu
   )
 }
 
-export function insertCommunityAccessRequest(communityUri: string, userLoginID: string) {
+export function insertCommunityAccessRequest(communityUri: string, userLoginID: string, auth?: Credentials) {
   const uuid = crypto.randomUUID()
   return executeSparqlInsert(`
     INSERT INTO <test:graph:garbage> {
       <https://www.irit.fr/opencommon/members/${uuid}> a foaf:Person;
                                                        oct:loginID '${userLoginID}';
                                                        foaf:name '${userLoginID}';
-                                                       prov:generatedAtTime '${new Date().toISOString()};
+                                                       prov:generatedAtTime '${new Date().toISOString()}';
                                                        org:hasMembership _:membership.
       _:membership org:organization <${communityUri}>.
     }
-  `)
+  `,
+    { auth: auth }
+  )
 }
 
 export function buildCommunityGraphUri(community: OcCommunity): string {

typed-router.d.ts

@@ -23,6 +23,8 @@ declare module 'vue-router/auto-routes' {
     '/:lang/community/[community]': RouteRecordInfo<'/:lang/community/[community]', '/:lang/community/:community', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community': RouteRecordInfo<'community', '/:lang/community/:community', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community.resource': RouteRecordInfo<'community.resource', '/:lang/community/:community/resource/:identifier', { community: ParamValue<true>, identifier: ParamValue<true> }, { community: ParamValue<false>, identifier: ParamValue<false> }>,
+    'community.dashboard': RouteRecordInfo<'community.dashboard', '/:lang/community/:community/dashboard', { community: ParamValue<true> }, { community: ParamValue<false> }>,
+    'community.dashboard.datasets': RouteRecordInfo<'community.dashboard.datasets', '/:lang/community/:community/dashboard/datasets', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community.datasets.new': RouteRecordInfo<'community.datasets.new', '/:lang/community/:community/datasets/new', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'community.join': RouteRecordInfo<'community.join', '/:lang/community/:community/join', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     'connection': RouteRecordInfo<'connection', '/:lang/connection', Record<never, never>, Record<never, never>>,