From fafffd23917a54b294888b8863cf653b32db2015 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 1 Feb 2024 15:33:53 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20add=20interaction=20to=20?= =?UTF-8?q?sort=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In the team panel, we have the possibility to sort the teams. This commit adds the interaction to the button. --- src/frontend/apps/desk/src/app/globals.css | 19 +++++++ src/frontend/apps/desk/src/app/page.tsx | 24 +++++++-- .../apps/desk/src/features/teams/api/index.ts | 1 + .../src/features/teams/api/useCreateTeam.tsx | 1 - .../desk/src/features/teams/api/useTeams.tsx | 20 ++++++-- .../teams/components/PanelActions.tsx | 3 ++ .../features/teams/components/PanelTeams.tsx | 8 ++- .../apps/desk/src/features/teams/index.tsx | 3 +- .../features/teams/store/useTeamsStore.tsx | 19 +++++++ .../apps/e2e/__tests__/app-desk/teams.spec.ts | 49 ++++++++++++++----- 10 files changed, 125 insertions(+), 22 deletions(-) create mode 100644 src/frontend/apps/desk/src/features/teams/api/index.ts create mode 100644 src/frontend/apps/desk/src/features/teams/store/useTeamsStore.tsx diff --git a/src/frontend/apps/desk/src/app/globals.css b/src/frontend/apps/desk/src/app/globals.css index 67d4086..174c2f9 100644 --- a/src/frontend/apps/desk/src/app/globals.css +++ b/src/frontend/apps/desk/src/app/globals.css @@ -4,3 +4,22 @@ body { margin: 0; padding: 0; } + +::-webkit-scrollbar { + width: 20px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #a8bbbf; +} diff --git a/src/frontend/apps/desk/src/app/page.tsx b/src/frontend/apps/desk/src/app/page.tsx index 98baf2c..bdbc84b 100644 --- a/src/frontend/apps/desk/src/app/page.tsx +++ b/src/frontend/apps/desk/src/app/page.tsx @@ -1,12 +1,13 @@ 'use client'; -import { Button } from '@openfun/cunningham-react'; +import { Button, Field, Input } from '@openfun/cunningham-react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { Box } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Panel } from '@/features'; +import { Panel, useCreateTeam } from '@/features'; const StyledButton = styled(Button)` width: fit-content; @@ -14,6 +15,8 @@ const StyledButton = styled(Button)` export default function Home() { const { t } = useTranslation(); + const { mutate: createTeam } = useCreateTeam(); + const [teamName, setTeamName] = useState(''); const { colorsTokens } = useCunninghamTheme(); return ( @@ -24,8 +27,23 @@ export default function Home() { $justify="center" $align="center" $width="100%" + $gap="5rem" > - {t('Create a new group')} + {t('Create a new team')} + + setTeamName(e.target.value)} + /> + + ); diff --git a/src/frontend/apps/desk/src/features/teams/api/index.ts b/src/frontend/apps/desk/src/features/teams/api/index.ts new file mode 100644 index 0000000..d028b13 --- /dev/null +++ b/src/frontend/apps/desk/src/features/teams/api/index.ts @@ -0,0 +1 @@ +export * from './useCreateTeam'; diff --git a/src/frontend/apps/desk/src/features/teams/api/useCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/api/useCreateTeam.tsx index 3ff7a89..c06da69 100644 --- a/src/frontend/apps/desk/src/features/teams/api/useCreateTeam.tsx +++ b/src/frontend/apps/desk/src/features/teams/api/useCreateTeam.tsx @@ -34,7 +34,6 @@ export function useCreateTeam() { onSuccess: () => { void queryClient.invalidateQueries({ queryKey: [KEY_LIST_TEAM], - exact: true, }); }, }); diff --git a/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx b/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx index 62e0107..ee89dd7 100644 --- a/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx +++ b/src/frontend/apps/desk/src/features/teams/api/useTeams.tsx @@ -20,13 +20,24 @@ interface TeamResponse { accesses: Access[]; } +export enum TeamsOrdering { + BY_CREATED_ON = 'created_at', + BY_CREATED_ON_DESC = '-created_at', +} + +export type TeamsParams = { + ordering?: TeamsOrdering; +}; + type TeamsResponse = APIList; export interface TeamsResponseError { detail: string; } -export const getTeams = async () => { - const response = await fetchAPI(`teams/`); +export const getTeams = async (props?: TeamsParams) => { + const response = await fetchAPI( + `teams/${props?.ordering ? `?ordering=${props.ordering}` : ''}`, + ); if (!response.ok) { throw new Error(`Couldn't fetch teams: ${response.statusText}`); @@ -37,6 +48,7 @@ export const getTeams = async () => { export const KEY_LIST_TEAM = 'teams'; export function useTeams( + param?: TeamsParams, queryConfig?: UseQueryOptions< TeamsResponse, TeamsResponseError, @@ -44,8 +56,8 @@ export function useTeams( >, ) { return useQuery({ - queryKey: [KEY_LIST_TEAM], - queryFn: getTeams, + queryKey: [KEY_LIST_TEAM, param], + queryFn: () => getTeams(param), ...queryConfig, }); } diff --git a/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx b/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx index f4ccb17..f33ba63 100644 --- a/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx +++ b/src/frontend/apps/desk/src/features/teams/components/PanelActions.tsx @@ -7,9 +7,11 @@ import { Box } from '@/components'; import { default as IconAdd } from '../assets/icon-add.svg?url'; import { default as IconSort } from '../assets/icon-sort.svg?url'; +import { useTeamStore } from '../store/useTeamsStore'; export const PanelActions = () => { const { t } = useTranslation(); + const changeOrdering = useTeamStore((state) => state.changeOrdering); return ( { icon={{t('Sort} color="tertiary" className="c__button-no-bg p-0 m-0" + onClick={changeOrdering} />