Refactor(group) more dynamic module

src/api/groups.service.ts

@@ -5,18 +5,24 @@ import type {
   AddGroupMembers,
   RemoveGroupMember,
   PostGroupProjects,
-  RemoveGroupProject,
   AddParentGroupModelInput,
+  GroupMember,
+  HierarchyGroupModel,
 } from '@/models/group.model'
 // import type { HierarchyGroupModel } from '@/models/group.model'
 // import type { APIResponseList } from '@/api/types'
 import { _adaptParamsToGetQuery } from '@/api/utils.service'
 import useAPI from '@/composables/useAPI'
+import { ProjectModel } from '@/models/project.model'
+import { PeopleGroupModel } from '@/models/invitation.model'
 
 // HIERARCHY
 
-export async function getHierarchyGroups(org: string) {
-  return await useAPI(`organization/${org}/people-groups-hierarchy/`, {}) //.data.value
+export function getHierarchyGroups(organizationCode: string, config = {}) {
+  return useAPI<HierarchyGroupModel>(
+    `organization/${organizationCode}/people-groups-hierarchy/`,
+    config
+  )
 }
 
 export async function getPeopleGroupsHierarchy(org_code, params) {
@@ -46,68 +52,74 @@ export async function postGroup(org: string, groupData: PostGroupData) {
 
 export async function addParentGroup(
   orgId: string,
-  groupId: string,
+  groupId: number,
   body: AddParentGroupModelInput
 ) {
   return await useAPI(`organization/${orgId}/people-group/${groupId}/`, { body, method: 'PATCH' }) //.data.value
 }
 
-export async function getGroup(org: string, groupId: string, noError: boolean = false) {
-  return await useAPI(
-    `/organization/${org}/people-group/${groupId}/`,
-    { noError: noError } // TODO nuxt check error silenced
-  ) //.data.value
+export function getGroup(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PeopleGroupModel>(
+    `organization/${organizationCode}/people-group/${groupId}/`,
+    config
+  )
 }
 
-export async function patchGroup(org: string, group_id: number, groupData: Partial<PostGroupData>) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/`, {
+export async function patchGroup(
+  organizationCode: string,
+  groupName: string,
+  groupData: Partial<PostGroupData>
+) {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupName}/`, {
     body: groupData,
     method: 'PATCH',
   }) //.data.value
 }
 
-export async function deleteGroup(org_code, group_id) {
-  return await useAPI(`organization/${org_code}/people-group/${group_id}/`, { method: 'DELETE' }) //.data.value
+export async function deleteGroup(organizationCode: string, groupName: string) {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupName}/`, {
+    method: 'DELETE',
+  }) //.data.value
 }
 
 // GROUP MEMBERS
 
-export async function getGroupMember(org: string, groupId: string, noError: boolean = false) {
-  return (
-    // TODO nuxt check error silenced
-    await useAPI(`organization/${org}/people-group/${groupId}/member/`, { noError: noError })
-    //.data.value
+export function getGroupMember(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PaginationResult<GroupMember>>(
+    `organization/${organizationCode}/people-group/${groupId}/member/`,
+    config
   )
 }
 
 export async function postGroupMembers(
-  org: string,
-  group_id: number,
+  organizationCode: string,
+  groupId: number,
   membersData: AddGroupMembers
 ) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/member/add/`, {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupId}/member/add/`, {
     body: membersData,
     method: 'POST',
   }) //.data.value
 }
 
 export async function removeGroupMember(
-  org: string,
-  group_id: number,
+  organizationCode: string,
+  groupId: number,
   membersData: RemoveGroupMember
 ) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/member/remove/`, {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupId}/member/remove/`, {
     body: membersData,
     method: 'POST',
   }) //.data.value
 }
 
 // GROUP PROJECTS
 
-export async function getGroupProject(org: string, groupId: string, noError: boolean = false) {
-  return await useAPI(`organization/${org}/people-group/${groupId}/project/`, {
-    noError: noError,
-  }) //.data.value
+export function getGroupProject(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PaginationResult<ProjectModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/project/`,
+    config
+  )
 }
 
 export async function postGroupProjects(
@@ -124,7 +136,7 @@ export async function postGroupProjects(
 export async function removeGroupProject(
   org: string,
   group_id: number,
-  projectsData: RemoveGroupProject
+  projectsData: PostGroupProjects
 ) {
   return await useAPI(`organization/${org}/people-group/${group_id}/project/remove/`, {
     body: projectsData,

src/api/v2/group.service.ts

@@ -0,0 +1,91 @@
+import {
+  getGroup as fetchGetGroup,
+  getGroupProject as fetchGetGroupProject,
+  getHierarchyGroups as fetchGetHierarchyGroups,
+  getGroupMember as fetchGetGroupMember,
+} from '@/api/groups.service'
+import useAsyncAPI from '@/composables/useAsyncAPI'
+import useAsyncPaginationAPI from '@/composables/useAsyncPaginationAPI'
+import { onlyRefs } from '@/functs/onlyRefs'
+import { RefOrRaw } from '@/interfaces/utils'
+import { GroupModel, TranslatedGroupMember } from '@/models/group.model'
+import { OrganizationModel } from '@/models/organization.model'
+
+const DEFAULT_CONFIG = {}
+
+export const getGroup = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateGroup } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}`)
+
+  return useAsyncAPI(
+    key,
+    () => fetchGetGroup(unref(organizationCode), unref(groupId), { ...DEFAULT_CONFIG }),
+    {
+      translate: translateGroup,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getHierarchyGroups = (organizationCode: RefOrRaw<OrganizationModel['code']>) => {
+  const key = computed(() => `${unref(organizationCode)}::group::hierarchy`)
+
+  return useAsyncAPI(
+    key,
+    () => fetchGetHierarchyGroups(unref(organizationCode), { ...DEFAULT_CONFIG }),
+    {
+      watch: onlyRefs([organizationCode]),
+    }
+  )
+}
+
+export const getGroupProject = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateProjects } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::projects`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupProject(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateProjects,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupMember = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateUsers } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::members`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupMember(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: (data) => translateUsers<TranslatedGroupMember>(data),
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}

src/app/router.options.ts

@@ -223,7 +223,7 @@ const routes = ({
   {
     path: '/create-group',
     name: 'createGroup',
-    component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+    component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
 
     meta: {
       resetScroll: true,

src/app/useAdminPagesRoutes.ts

@@ -103,7 +103,7 @@ export default function useAdminPagesRoutes() {
             {
               path: 'create',
               name: 'adminCreateGroup',
-              component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+              component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
               props: {
                 postCancelRouteFactory: () => ({ name: 'groupsList' }),
                 postCreateRouteFactory: () => ({ name: 'groupsList' }),
@@ -120,7 +120,7 @@ export default function useAdminPagesRoutes() {
                 postCreateRouteFactory: () => ({ name: 'groupsList' }),
                 postUpdateRouteFactory: () => ({ name: 'groupsList' }),
               }),
-              component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+              component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
             },
           ],
         },

src/app/useGroupPagesRoutes.ts

@@ -15,12 +15,12 @@ export default function useGroupPagesRoutes() {
         {
           path: 'members',
           name: 'groupMembers',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupMembersTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue'),
         },
         {
           path: 'projects',
           name: 'groupProjects',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupProjectsTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue'),
         },
         // retro compat
         {
@@ -36,17 +36,17 @@ export default function useGroupPagesRoutes() {
             isReducedMode: true,
             groupId: route.params.groupId,
           }),
-          component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
         },
         {
           path: 'members/edit',
           name: 'groupMembersEdit',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupMembersEditTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue'),
         },
         {
           path: 'projects/edit',
           name: 'groupProjectsEdit',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupProjectsEditTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue'),
         },
       ],
       props: true,

src/components/base/BasicCard.vue

@@ -75,7 +75,7 @@ defineEmits<{ click: [] }>()
 }
 
 :deep(.picture) {
-  $picture-width: 72px;
+  $picture-width: 90px;
 
   display: flex;
   width: pxToRem($picture-width);