Implement 'location' on group profile

webapp/graphql/groups.js

@@ -131,35 +131,41 @@ export const changeGroupMemberRoleMutation = gql`
 
 // ------ queries
 
-export const groupQuery = gql`
-  query ($isMember: Boolean, $id: ID, $slug: String) {
-    Group(isMember: $isMember, id: $id, slug: $slug) {
-      id
-      name
-      slug
-      createdAt
-      updatedAt
-      disabled
-      deleted
-      about
-      description
-      descriptionExcerpt
-      groupType
-      actionRadius
-      categories {
+export const groupQuery = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
+  return gql`
+    query ($isMember: Boolean, $id: ID, $slug: String) {
+      Group(isMember: $isMember, id: $id, slug: $slug) {
         id
-        slug
         name
-        icon
+        slug
+        createdAt
+        updatedAt
+        disabled
+        deleted
+        about
+        description
+        descriptionExcerpt
+        groupType
+        actionRadius
+        categories {
+          id
+          slug
+          name
+          icon
+        }
+        avatar {
+          url
+        }
+        locationName
+        location {
+          name: name${lang}
+        }
+        myRole
       }
-      avatar {
-        url
-      }
-      locationName # test this as result
-      myRole
     }
-  }
-`
+  `
+}
 
 export const groupMembersQuery = gql`
   query ($id: ID!) {

webapp/pages/group/_id/_slug.vue

@@ -40,10 +40,10 @@
               {{ groupSlug }}
             </ds-text>
             <!-- Group location -->
-            <!-- <ds-text v-if="user.location" align="center" color="soft" size="small">
+            <ds-text v-if="group && group.location" align="center" color="soft" size="small">
               <base-icon name="map-marker" />
-              {{ user.location.name }}
-            </ds-text> -->
+              {{ group && group.location ? group.location.name : '' }}
+            </ds-text>
             <!-- Group created at -->
             <ds-text align="center" color="soft" size="small">
               {{ $t('group.foundation') }} {{ group.createdAt | date('MMMM yyyy') }}
@@ -141,6 +141,7 @@
                 }}
               </ds-chip>
             </div>
+            <ds-space margin="x-small" />
           </ds-space>
           <!-- Group categories -->
           <template v-if="categoriesActive">
@@ -155,8 +156,13 @@
                   )
                 }}
               </ds-text>
+              <ds-space margin="xx-small" />
               <div class="categories">
-                <div v-for="category in group.categories" :key="category.id" align="center">
+                <div
+                  v-for="(category, index) in group.categories"
+                  :key="category.id"
+                  align="center"
+                >
                   <category
                     :icon="category.icon"
                     :name="$t(`contribution.category.name.${category.slug}`)"
@@ -165,7 +171,7 @@
                       placement: 'bottom-start',
                     }"
                   />
-                  <ds-space margin="xxx-small" />
+                  <ds-space v-if="index < group.categories.length - 1" margin="xxx-small" />
                 </div>
               </div>
             </ds-space>
@@ -177,6 +183,7 @@
               <ds-text class="centered-text hyphenate-text" color="soft" size="small">
                 {{ $t('group.goal') }}
               </ds-text>
+              <ds-space margin="xx-small" />
               <div class="chip" align="center">
                 <ds-chip>{{ group ? group.about : '' }}</ds-chip>
               </div>
@@ -564,8 +571,7 @@ export default {
     // },
     Group: {
       query() {
-        // return groupQuery(this.$i18n) // language will be needed for locations
-        return groupQuery
+        return groupQuery(this.$i18n)
       },
       variables() {
         return {

webapp/pages/group/edit/_id.vue

@@ -51,7 +51,7 @@ export default {
         Group: [group],
       },
     } = await client.query({
-      query: groupQuery,
+      query: groupQuery(this.$i18n),
       variables: { id },
     })
     if (group.myRole !== 'owner') {

webapp/pages/my-groups.vue

@@ -27,7 +27,7 @@ export default {
     async groupListQuery() {
       try {
         const response = await this.$apollo.query({
-          query: groupQuery,
+          query: groupQuery(this.$i18n),
         })
         this.responseGroupListQuery = response.data.Group
       } catch (error) {