tabs linters

Author: remigermain

src/components/group/GroupForm/GroupForm.vue

@@ -122,7 +122,12 @@
           @click="openModal('location')"
         />
       </label>
-      <LocationItem v-if="form.location" :location="form.location" :focus="false" />
+      <LocationItem
+        v-if="form.location"
+        :location="form.location"
+        :focus="false"
+        show-location-type
+      />
       <LocationDrawer
         :is-opened="stateModal.location"
         :locations="form.location ? [form.location] : []"

src/components/group/Modules/Locations/GroupLocationBase.vue

@@ -1,6 +1,6 @@
 <template>
   <FetchLoader :status="status" skeleton only-error>
-    <MapRecap :locations="locations" expand :editable="isEdit" @expand="opened = true">
+    <MapRecap ref="map" :locations="locations" expand :editable="isEdit" @expand="opened = true">
       <template #tooltip="{ location }">
         <ProjectLocationTooltip
           :location="location as TranslatedLocation"
@@ -14,12 +14,19 @@
       :locations="locations"
       @close="opened = false"
     />
+    <LocationList
+      v-if="!props.preview"
+      :editable="isEdit"
+      :locations="locations"
+      @focus="onFocus"
+    />
   </FetchLoader>
 </template>
 
 <script setup lang="ts">
 import { getGroupLocation } from '@/api/v2/group.service'
 import LocationDrawer from '@/components/map/LocationDrawer.vue'
+import LocationList from '@/components/map/LocationList.vue'
 import MapRecap from '@/components/map/MapRecap.vue'
 import ProjectLocationTooltip from '@/components/project/map/ProjectLocationTooltip.vue'
 import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
@@ -42,6 +49,9 @@ const opened = ref(false)
 const organizationCode = useOrganizationCode()
 const groupId = computed(() => props.group.id)
 
+const mapRef = useTemplateRef('map')
+const onFocus = (location) => mapRef.value?.map?.flyTo(location, 8)
+
 const { status, data: locations } = getGroupLocation(organizationCode, groupId, {
   default: () => [],
 })

src/components/group/Modules/Locations/GroupLocationPreview.vue

@@ -15,7 +15,7 @@
       />
     </template>
     <template #content>
-      <GroupLocationBase :group="group" />
+      <GroupLocationBase :group="group" preview />
     </template>
   </BaseGroupPreview>
 </template>

src/components/map/BaseMap.vue

@@ -122,7 +122,7 @@ const centerMap = () => {
 }
 
 // this is called by other components
-const flyTo = (coordinates, zoom) => {
+const flyTo = (coordinates, zoom = undefined) => {
   const map = toRaw(mapInstance.value)
   map?.flyTo([coordinates.lat, coordinates.lng], zoom)
 }

src/components/map/LocationItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="location-list-item">
     <div class="location-title">
-      <LocationType :location="location" />
+      <LocationType v-if="showLocationType" :location-type="location.type" />
       <h4>{{ title }}</h4>
       <p>{{ description }}</p>
     </div>
@@ -26,17 +26,20 @@
 
 <script setup lang="ts">
 import LocationType from '@/components/map/LocationType.vue'
+import { cropIfTooLong } from '@/functs/string'
 import { TranslatedLocation } from '@/models/location.model'
 
 const props = withDefaults(
   defineProps<{
     location: TranslatedLocation
     editable?: boolean
     focus?: boolean
+    showLocationType?: boolean
   }>(),
   {
     editable: false,
     focus: true,
+    showLocationType: false,
   }
 )
 
@@ -47,8 +50,10 @@ defineEmits<{
 }>()
 
 // need to safe guard with translated title (if we are in edit/create mode)
-const title = computed(() => props.location.$t?.title ?? props.location.title)
-const description = computed(() => props.location.$t?.description ?? props.location.description)
+const title = computed(() => cropIfTooLong(props.location.$t?.title ?? props.location.title, 40))
+const description = computed(() =>
+  cropIfTooLong(props.location.$t?.description ?? props.location.description, 80)
+)
 </script>
 
 <style scoped lang="scss">

src/components/map/LocationList.vue

@@ -5,7 +5,9 @@
       :key="locationType"
       class="location-list-wrapper"
     >
-      <h3 class="list-title">{{ $t(`location.${locationType}`) }}</h3>
+      <h3 class="list-title">
+        <LocationType :location-type="locationType" />
+      </h3>
       <ul class="location-list">
         <li v-for="location in locationsList" :key="location.id" class="location">
           <LocationItem
@@ -26,6 +28,7 @@
 
 <script setup lang="ts">
 import LocationItem from '@/components/map/LocationItem.vue'
+import LocationType from '@/components/map/LocationType.vue'
 import { TranslatedLocation } from '@/models/location.model'
 import { groupBy } from 'es-toolkit'
 

src/components/map/LocationTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="location-tooltip" :class="location.type">
     <div class="location-tooltip-header">
-      <LocationType :location="location" />
+      <LocationType :location-type="location.type" />
       <LpiButton
         btn-icon="Close"
         class="location-tooltip-icon"

src/components/map/LocationType.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="location-header" :class="[location.type]" :title="typeLabel">
-    <IconImage :name="pointerIcon" :class="['location-icon', location.type]" />
+  <div class="location-header" :class="[locationType]" :title="typeLabel">
+    <IconImage :name="pointerIcon" :class="['location-icon', locationType]" />
     <h2 v-if="label" class="location-title">
       {{ typeLabel }}
     </h2>
@@ -9,16 +9,16 @@
 
 <script setup lang="ts">
 import { IconMapLocationType } from '@/functs/maps'
-import { AnyLocation } from '@/models/location.model'
+import { LocationType } from '@/models/types'
 
-const props = withDefaults(defineProps<{ location: AnyLocation; label?: boolean }>(), {
+const props = withDefaults(defineProps<{ locationType: LocationType; label?: boolean }>(), {
   label: true,
 })
 
 const { t } = useNuxtI18n()
 
 const typeLabel = computed(() => {
-  switch (props.location.type) {
+  switch (props.locationType) {
     case 'impact':
       return t('location.impact')
     case 'team':
@@ -28,7 +28,7 @@ const typeLabel = computed(() => {
   }
 })
 
-const pointerIcon = computed(() => IconMapLocationType(props.location.type))
+const pointerIcon = computed(() => IconMapLocationType(props.locationType))
 </script>
 
 <style lang="scss" scoped>

src/components/map/MapPointer.vue

@@ -3,7 +3,7 @@
     <div ref="marker" class="map-pointer" :data-location-type="location.type">
       <slot name="marker">
         <div :class="['badge', location.type]">
-          <LocationType :location="location" />
+          <LocationType :location-type="location.type" />
           <div v-if="editable" class="actions">
             <ContextActionButton
               action-icon="Pen"

src/i18n/locales/ca.json

@@ -1006,7 +1006,11 @@
         "help": "Editor"
       }
     },
-    "view": "Visualitza el grup"
+    "view": "Visualitza el grup",
+    "conferences": "Conferèncias",
+    "publications": "Publicacions",
+    "similars": "Grups similars",
+    "locations": "Ubicacions"
   },
   "header": {
     "private": "Privat: només visible per als membres de l' equip",