cleanup

Author: remigermain

src/components/base/FetchLoader.vue

@@ -1,9 +1,6 @@
 <template>
   <div :class="{ skeletons: inSkeletons }" class="contents">
-    <!-- <ul>
-      <li v-for="mem in memory">{{ mem }}</li>
-    </ul> -->
-    <div v-if="loading" class="m-auto w-fit flex justify-center items-center flex-col">
+    <div v-if="loading" class="loader">
       <LpiLoader type="simple" />
       <span class="loading">
         {{ props.label ?? t('common.loading') }}
@@ -78,7 +75,7 @@ const loading = computed(() => {
 })
 
 const inSkeletons = computed(() => {
-  return inLoading.value && !firstLoading.value && props.skeleton
+  return inLoading.value && (!firstLoading.value || !props.withData) && props.skeleton
 })
 
 watch(inLoading, (newValue, oldValue) => {
@@ -95,6 +92,15 @@ watch(inLoading, (newValue, oldValue) => {
   padding-top: 0.5rem;
 }
 
+.loader {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+
 .error {
   opacity: 0.8;
   font-style: italic;

src/components/base/navigation/PaginationButtons2.vue

@@ -1,5 +1,11 @@
 <template>
-  <ul v-if="!hideEmpty || canPrev || canNext" class="pagination">
+  <ul
+    v-if="!hideEmpty || canPrev || canNext"
+    class="pagination"
+    :class="{
+      disable: disable,
+    }"
+  >
     <li :class="{ hidden: !canPrev }">
       <IconImage name="ChevronLeft" @click="pagination.prev()" />
     </li>
@@ -28,8 +34,13 @@ import { Pagination } from '@/composables/usePagination'
 defineOptions({ name: 'PaginationButtons2' })
 
 const props = withDefaults(
-  defineProps<{ pagination: Pagination; showNumber?: boolean; hideEmpty?: boolean }>(),
-  { showNumber: true, hideEmpty: false }
+  defineProps<{
+    pagination: Pagination
+    showNumber?: boolean
+    hideEmpty?: boolean
+    disable?: boolean
+  }>(),
+  { showNumber: true, hideEmpty: false, disable: false }
 )
 
 const { canNext, canPrev } = props.pagination
@@ -68,6 +79,12 @@ const setPage = (value) => {
 .pagination {
   display: flex;
   align-items: center;
+  transition: opacity 0.2s;
+
+  &.disable {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 
   li {
     fill: $primary-dark;

src/components/group/GroupForm/ProjectSection.vue

@@ -27,11 +27,6 @@
           </div>
         </template>
       </ProjectPreview>
-      <!-- <ProjectCard
-        :has-close-icon="true"
-        class="selected-card"
-        @unselect="onRemoveProject(project)"
-      /> -->
     </div>
     <div class="show-more">
       <LinkButton

src/components/group/Modules/Extras/GroupSimilarDrawer.vue

@@ -23,7 +23,7 @@ import { getGroupSimilar } from '@/api/v2/group.service'
 import BaseDrawer from '@/components/base/BaseDrawer.vue'
 import FetchLoader from '@/components/base/FetchLoader.vue'
 import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
-import { toPagination } from '@/skeletons/base.skeletons'
+import { factoryPagination } from '@/skeletons/base.skeletons'
 import { groupSkeleton } from '@/skeletons/group.skeletons'
 
 const { t } = useNuxtI18n()
@@ -42,7 +42,7 @@ const {
   pagination,
   data: groups,
 } = getGroupSimilar(organizationCode, groupId, {
-  default: () => toPagination(groupSkeleton),
+  default: () => factoryPagination(groupSkeleton),
 })
 const { count } = pagination
 </script>

src/components/group/Modules/Extras/GroupSimilarsPreview.vue

@@ -29,7 +29,7 @@ import SeeMoreArrow from '@/components/base/button/SeeMoreArrow.vue'
 import GroupCard from '@/components/group/GroupCard.vue'
 import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
 import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
-import { maxSkeleton, toPagination } from '@/skeletons/base.skeletons'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
 import { groupSkeleton } from '@/skeletons/group.skeletons'
 import GroupSimilarDrawer from '@/components/group/Modules/Extras/GroupSimilarDrawer.vue'
 
@@ -45,7 +45,7 @@ const { status, data: groups } = getGroupSimilar(organizationCode, groupId, {
   paginationConfig: {
     limit: props.limit,
   },
-  default: () => toPagination(groupSkeleton, limitSkeletons.value),
+  default: () => factoryPagination(groupSkeleton, limitSkeletons.value),
 })
 
 const showMore = ref(false)

src/components/group/Modules/GroupSub/GroupSubList.vue

@@ -6,6 +6,7 @@
         :key="sub.id"
         :group="sub"
         :with-pagination="withPagination"
+        :limit-members="limitMembers"
       />
       <PaginationButtons2 v-if="withPagination" class="m-auto" :pagination="pagination" />
     </div>
@@ -15,17 +16,18 @@
 <script setup lang="ts">
 import { getSubGroup } from '@/api/v2/group.service'
 import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
-import { maxSkeleton, toPagination } from '@/skeletons/base.skeletons'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
 import { groupSkeleton } from '@/skeletons/group.skeletons'
 import GroupSubTeamItem from '@/components/group/Modules/GroupSub/GroupSubTeamItem.vue'
 
 const props = withDefaults(
   defineProps<{
     group: TranslatedPeopleGroupModel
     limit?: number
+    limitMembers?: number
     withPagination?: boolean
   }>(),
-  { limit: null, withPagination: true }
+  { limit: null, withPagination: true, limitMembers: null }
 )
 
 const organizationCode = useOrganizationCode()
@@ -41,14 +43,14 @@ const {
   paginationConfig: {
     limit: props.limit,
   },
-  default: () => toPagination(groupSkeleton, limitSkeletons.value),
+  default: () => factoryPagination(groupSkeleton, limitSkeletons.value),
 })
 </script>
 
 <style lang="scss" scoped>
 .subgroup-list {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2rem;
 }
 </style>

src/components/group/Modules/GroupSub/GroupSubPreview.vue

@@ -9,7 +9,7 @@
       <SeeMoreArrow is="button" class="see-more-btn" @click="onMore" />
     </template>
     <template #content>
-      <GroupSubList :group="group" :limit="2" :with-pagination="false" />
+      <GroupSubList :group="group" :limit="2" :limit-members="6" :with-pagination="false" />
       <GroupSubDrawer :group="selectedGroup" @close="onClose" />
     </template>
   </BaseGroupPreview>

src/components/group/Modules/GroupSub/GroupSubTeamItem.vue

@@ -1,26 +1,37 @@
 <template>
-  <div ref="groupItem" class="subgroup-element shadow-box-transition no-transform">
-    <NuxtLink
-      :to="{
-        name: 'Group',
-        params: { groupId: group.id },
-      }"
-      class="subgroup-header border-primary skeletons-text"
-      @mouseover.prevent="onMouseover"
-      @mouseout.prevent="onMouseout"
-    >
-      <h4>{{ group.$t.name }}</h4>
-      <div>
-        <GroupRecapPreview is="span" :group="group" no-title :modules="['members', 'subgroups']" />
-      </div>
-    </NuxtLink>
-    <BaseGroupMembersList
-      v-if="group.modules.members"
-      :group="group"
-      class="contents"
-      :with-pagination="withPagination"
-    />
-  </div>
+  <ToolTip :hover="true" offset-distance="5" :disabled="disableToolTip" placement="top">
+    <template #custom-content>
+      {{ $t('common.see-more') }}
+    </template>
+    <div ref="groupItem" class="subgroup-element shadow-box-transition no-transform">
+      <NuxtLink
+        :to="{
+          name: 'Group',
+          params: { groupId: group.id },
+        }"
+        class="subgroup-header border-primary skeletons-text"
+        @mouseover.prevent="onMouseover"
+        @mouseout.prevent="onMouseout"
+      >
+        <h4>{{ group.$t.name }}</h4>
+        <div>
+          <GroupRecapPreview
+            is="span"
+            :group="group"
+            no-title
+            :modules="['members', 'subgroups']"
+          />
+        </div>
+      </NuxtLink>
+      <BaseGroupMembersList
+        v-if="group.modules.members"
+        :group="group"
+        class="subgroup-members"
+        :with-pagination="withPagination"
+        :limit="limitMembers"
+      />
+    </div>
+  </ToolTip>
 </template>
 
 <script setup lang="ts">
@@ -32,16 +43,20 @@ withDefaults(
   defineProps<{
     group: TranslatedPeopleGroupModel
     withPagination?: boolean
+    limitMembers?: number
   }>(),
-  { withPagination: true }
+  { withPagination: true, limitMembers: null }
 )
 
+const disableToolTip = ref(false)
 const groupItem = useTemplateRef('groupItem')
 const onMouseover = () => {
   groupItem.value?.classList.add('shadow-box-transform')
+  disableToolTip.value = false
 }
 const onMouseout = () => {
   groupItem.value?.classList.remove('shadow-box-transform')
+  disableToolTip.value = true
 }
 </script>
 
@@ -52,36 +67,25 @@ const onMouseout = () => {
 
 .subgroup-element {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
   width: 100%;
   gap: 1rem;
-  height: 100%;
-
-  > :last-child {
-    margin-bottom: -1rem;
-  }
+  min-height: pxToRem(85px);
 
   .subgroup-header {
-    grid-column: span 2;
     padding: 1rem 1.5rem;
     background-color: color-mix(in srgb, $primary, transparent 90%);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 }
-
-.subgroup-sub {
-  display: flex;
-  gap: 0.2rem;
-  align-items: center;
-  justify-content: flex-end;
-
-  svg {
-    fill: $primary;
-    display: inline-block;
-    width: 1.5rem;
-    margin: 0 0.3rem;
-  }
+.subgroup-members {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(100% - 2rem);
+  gap: 1rem;
+  padding: 0 1rem;
+  min-height: pxToRem(85px);
 }
 </style>

src/components/group/Modules/Members/BaseGroupMembersList.vue

@@ -8,10 +8,10 @@
     />
     <PaginationButtons2
       v-if="withPagination"
-      :show-number="false"
       hide-empty
-      class="pagination"
+      class="pagination-span"
       :pagination="pagination"
+      :disable="isLoading"
     />
     <BaseDrawer
       no-footer
@@ -36,7 +36,7 @@
 import { getGroupMember } from '@/api/v2/group.service'
 import GroupMemberItem from '@/components/group/Modules/Members/GroupMemberItem.vue'
 import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
-import { maxSkeleton, toPagination } from '@/skeletons/base.skeletons'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
 import { memberSkeleton } from '@/skeletons/group.skeletons'
 
 const props = withDefaults(
@@ -53,11 +53,11 @@ const limitSkeletons = computed(() => maxSkeleton(props.group?.modules?.members,
 
 const groupId = computed(() => props.group?.id)
 
-const { status, data, pagination } = getGroupMember(organizationCode, groupId, {
+const { status, data, pagination, isLoading } = getGroupMember(organizationCode, groupId, {
   paginationConfig: {
     limit: props.limit,
   },
-  default: () => toPagination(memberSkeleton, limitSkeletons.value),
+  default: () => factoryPagination(memberSkeleton, limitSkeletons.value),
 })
 
 const userIdDrawer = ref<number | null>()
@@ -66,7 +66,7 @@ const closeProfile = () => (userIdDrawer.value = null)
 </script>
 
 <style lang="scss" scoped>
-.pagination {
+.pagination-span {
   grid-column: span 2;
   margin: auto;
 }

src/components/group/Modules/Projects/BaseGroupProjectsList.vue

@@ -12,7 +12,7 @@
 import { getGroupProject } from '@/api/v2/group.service'
 import ProjectPreview from '@/components/project/ProjectPreview.vue'
 import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
-import { maxSkeleton, toPagination } from '@/skeletons/base.skeletons'
+import { factoryPagination, maxSkeleton } from '@/skeletons/base.skeletons'
 import { projectSkeleton } from '@/skeletons/project.skeletons'
 
 const props = withDefaults(
@@ -31,6 +31,6 @@ const groupId = computed(() => props.group?.id)
 
 const { status, data } = getGroupProject(organizationCode, groupId, {
   paginationConfig: { limit: props.limit },
-  default: () => toPagination(projectSkeleton, limitSkeletons.value),
+  default: () => factoryPagination(projectSkeleton, limitSkeletons.value),
 })
 </script>