Feat(group) add locations

src/api/groups.service.ts

@@ -11,6 +11,7 @@ import { _adaptParamsToGetQuery } from '@/api/utils.service'
 import useAPI from '@/composables/useAPI'
 import { ProjectModel } from '@/models/project.model'
 import { PeopleGroupModel } from '@/models/invitation.model'
+import { BaseLocationModel, LocationModel } from '@/models/location.model'
 
 // HIERARCHY
 export async function getHierarchyGroups(organizationCode: string, config = {}) {
@@ -167,3 +168,69 @@ export async function getSubGroup(organizationCode: string, groupId: number, con
     config
   )
 }
+
+export async function getGroupProjectsLocation(
+  organizationCode: string,
+  groupId: number,
+  config = {}
+) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/projects-locations/`,
+    config
+  )
+}
+
+export async function getGroupLocation(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/locations/`,
+    config
+  )
+}
+
+export async function removeGroupLocation(
+  organizationCode: string,
+  groupId: number,
+  locationId: number,
+  config = {}
+) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/locations/${locationId}/`,
+    {
+      ...config,
+      method: 'DELETE',
+    }
+  )
+}
+
+export async function patchGroupLocation(
+  organizationCode: string,
+  groupId: number,
+  locationId: number,
+  payload: Partial<BaseLocationModel>,
+  config = {}
+) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/locations/${locationId}/`,
+    {
+      ...config,
+      body: payload,
+      method: 'PATCH',
+    }
+  )
+}
+
+export async function postGroupLocation(
+  organizationCode: string,
+  groupId: number,
+  payload: BaseLocationModel,
+  config = {}
+) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/locations/`,
+    {
+      ...config,
+      body: payload,
+      method: 'POST',
+    }
+  )
+}

src/api/locations.services.ts

@@ -1,6 +1,5 @@
 import type { LocationModel, ProjectLocationForm } from '@/models/location.model'
 import useAPI from '@/composables/useAPI'
-import utils from '@/functs/functions'
 import { Locations } from '@/interfaces/maps'
 
 export async function getProjectLocations(projectId: number) {
@@ -11,13 +10,8 @@ export async function getProjectLocation(projectId: string, locationId: number)
   return await useAPI<LocationModel>(`project/${projectId}/location/${locationId}/`)
 }
 
-export async function getLocations(params, next) {
-  if (next) {
-    // TODO: nuxt check next works
-    return await useAPI<Locations>(next, {}) //.data.value
-  }
-
-  return await useAPI<Locations>(`location/`, { ...utils.adaptParam(params) }) //.data.value
+export async function getLocations(organizationCode: string, config = {}) {
+  return await useAPI<Locations>(`organization/${organizationCode}/location/`, config)
 }
 
 export async function postLocations(projectId: string, body: ProjectLocationForm) {

src/api/v2/group.service.ts

@@ -5,6 +5,7 @@ import {
   getGroupMember as fetchGetGroupMember,
   getGroupSimilar as fetchGetGroupSimilar,
   getSubGroup as fetchGetSubGroup,
+  getGroupProjectsLocation as fetchGroupProjectsLocation,
 } from '@/api/groups.service'
 import useAsyncAPI from '@/composables/useAsyncAPI'
 import useAsyncPaginationAPI from '@/composables/useAsyncPaginationAPI'
@@ -142,3 +143,26 @@ export const getSubGroup = (
     }
   )
 }
+
+export const getGroupProjectsLocation = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateProjectLocations } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::locations`)
+
+  return useAsyncAPI(
+    key,
+    ({ config }) =>
+      fetchGroupProjectsLocation(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateProjectLocations,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}

src/api/v2/location.service.ts

@@ -0,0 +1,31 @@
+import { getLocations as fetchGetLocations } from '@/api/locations.services'
+import useAsyncAPI from '@/composables/useAsyncAPI'
+import { onlyRefs } from '@/functs/onlyRefs'
+import { Locations } from '@/interfaces/maps'
+import { RefOrRaw } from '@/interfaces/utils'
+import { OrganizationModel } from '@/models/organization.model'
+
+const DEFAULT_CONFIG = {}
+
+export const getLocations = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  config = {}
+) => {
+  const { translatePeopleGroupLocations, translateProjectLocations } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::locations`)
+
+  const translateAllModel = (data: ComputedRef<Locations>) => {
+    return computed(() => {
+      return {
+        groups: unref(translatePeopleGroupLocations(data.value?.groups)),
+        projects: unref(translateProjectLocations(data.value?.projects)),
+      }
+    })
+  }
+
+  return useAsyncAPI(key, () => fetchGetLocations(unref(organizationCode), { ...DEFAULT_CONFIG }), {
+    translate: translateAllModel,
+    watch: onlyRefs([organizationCode]),
+    ...config,
+  })
+}

src/app/useGroupPagesRoutes.ts

@@ -38,6 +38,11 @@ export default function useGroupPagesRoutes() {
             documentType: 'conferences',
           }),
         },
+        {
+          path: 'locations',
+          name: 'groupLocations',
+          component: () => import('../pages/GroupPageV2/Tabs/Locations/GroupLocationsTab.vue'),
+        },
         // retro compat
         {
           path: 'Edit',

src/components/group/GroupForm/GroupForm.vue

@@ -81,7 +81,7 @@
     <!-- tags -->
     <div class="description">
       <label>
-        {{ $t('group.form.tags') }}
+        {{ $t('tag.title') }}
         <LpiButton
           class="add-btn"
           :btn-icon="form.tags?.length ? 'Pen' : 'Plus'"
@@ -97,7 +97,7 @@
     <!-- Sdg -->
     <div class="description">
       <label>
-        {{ $t('group.form.sdg-label') }}
+        {{ $t('sdg.title') }}
         <LpiButton
           class="add-btn"
           :btn-icon="form.sdgs?.length ? 'Pen' : 'Plus'"
@@ -110,6 +110,30 @@
       <SdgsDrawer v-model="form.sdgs" :is-opened="openSdg" @close="openSdg = false" />
     </div>
 
+    <!-- locations -->
+    <div class="description">
+      <label>
+        {{ $t('group.location') }}
+        <LpiButton
+          class="add-btn"
+          :btn-icon="form.locations.length ? 'Pen' : 'Plus'"
+          data-test="add-location"
+          :label="$t(form.locations.length ? 'group.form.edit' : 'group.form.add')"
+          @click="openModal()"
+        />
+      </label>
+      <LocationList :locations="form.locations" editable @delete="removeLocations" />
+      <LocationDrawer
+        :is-opened="stateModal"
+        :locations="form.locations"
+        editable
+        :location-types="['address']"
+        @close="closeModal()"
+        @submit="submitLocations"
+        @delete="removeLocations"
+      />
+    </div>
+
     <template v-if="!isReducedMode">
       <!-- Team -->
       <div class="team">
@@ -186,14 +210,23 @@
 </template>
 
 <script>
-import { deleteGroup, getHierarchyGroups } from '@/api/groups.service.ts'
+import {
+  deleteGroup,
+  getHierarchyGroups,
+  patchGroupLocation,
+  postGroupLocation,
+  removeGroupLocation,
+} from '@/api/groups.service.ts'
 import useOrganizationsStore from '@/stores/useOrganizations.ts'
 import { useRuntimeConfig } from '#imports'
 import { usePatatoids } from '@/composables/usePatatoids'
 import SdgsDrawer from '@/components/sdgs/SdgsDrawer.vue'
 import SdgList from '@/components/sdgs/SdgList.vue'
 import TagsDrawer from '@/components/tags/TagsDrawer.vue'
 import TagsFilterSummary from '@/components/search/Filters/TagsFilterSummary.vue'
+import LocationDrawer from '@/components/map/LocationDrawer.vue'
+import LocationList from '@/components/map/LocationList.vue'
+
 export default {
   name: 'GroupForm',
 
@@ -202,6 +235,8 @@ export default {
     SdgsDrawer,
     TagsDrawer,
     TagsFilterSummary,
+    LocationDrawer,
+    LocationList,
   },
 
   props: {
@@ -274,6 +309,7 @@ export default {
         members: [],
         sdgs: [],
         tags: [],
+        locations: [],
         featuredProjects: [],
         header_image: null,
         imageSizes: null,
@@ -358,6 +394,44 @@ export default {
         name: 'HomeRoot',
       })
     },
+    async removeLocations(location) {
+      // remove location (if already exists, send request)
+      if (location.id) {
+        await removeGroupLocation(
+          this.organizationsStore.current.code,
+          this.$route.params.groupId,
+          location.id
+        )
+        this.form.locations = this.form.locations.filter((el) => el.id !== location.id)
+      } else {
+        this.form.locations = this.form.locations.filter((el) => el !== location)
+      }
+      this.closeModal()
+    },
+    async submitLocations(location) {
+      const groupId = this.$route.params.groupId
+      let locationElement = location
+
+      if (groupId) {
+        if (location.id) {
+          this.form.locations = this.form.locations.filter((el) => el.id !== location.id)
+          locationElement = await patchGroupLocation(
+            this.organizationsStore.current.code,
+            this.$route.params.groupId,
+            location.id,
+            location
+          )
+        } else {
+          locationElement = await postGroupLocation(
+            this.organizationsStore.current.code,
+            this.$route.params.groupId,
+            location
+          )
+        }
+      }
+      this.form.locations = [...this.form.locations, locationElement]
+      this.closeModal()
+    },
   },
 }
 </script>
@@ -391,7 +465,8 @@ export default {
 
   .team,
   .parent-group,
-  .project {
+  .project,
+  .location {
     margin-bottom: $space-xl;
   }
 

src/components/group/Map/GroupLocationToolTip.vue

@@ -0,0 +1,20 @@
+<template>
+  <CardLocationTooltip
+    :location="location"
+    :label="$t('group.view')"
+    :to="{ name: 'Group', params: { groupId: group.id } }"
+    :image="group.header_image"
+    :default-picture="DEFAULT_GROUP_PATATOID"
+    :title="group.$t.name"
+    :description="group.$t.short_description ?? group.$t.description"
+  />
+</template>
+
+<script setup lang="ts">
+import { AnyTranslatedLocation } from '@/models/location.model'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { DEFAULT_GROUP_PATATOID } from '@/composables/usePatatoids'
+import CardLocationTooltip from '@/components/map/CardLocationTooltip.vue'
+
+defineProps<{ location: AnyTranslatedLocation; group: TranslatedPeopleGroupModel }>()
+</script>