admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'main' into context-menu-vertical

Browse Source
This commit is contained in:
brendanlaschke
2023-08-11 10:40:31 +02:00
committed by GitHub
parent accfaafcfa e61c263b1a
commit cca68d72f4
93 changed files with 1838 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/activities/components/TaskList.tsx
View File

@ -20,6 +20,7 @@ const StyledContainer = styled.div`
const StyledTitle = styled.h3`
color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
`;

2
front/src/modules/activities/hooks/useCompleteTask.ts
View File

@ -16,8 +16,6 @@ export function useCompleteTask(task: Task) {
fragment: ACTIVITY_UPDATE_FRAGMENT,
});
console.log('cachedTask', cachedTask);
const completeTask = useCallback(
(value: boolean) => {
const completedAt = value ? new Date().toISOString() : null;

58
front/src/modules/auth/components/Logo.tsx
View File

@ -6,40 +6,62 @@ type Props = React.ComponentProps<'div'> & {
workspaceLogo?: string | null;
};
const StyledLogo = styled.div`
const StyledContainer = styled.div`
height: 48px;
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
img {
height: 100%;
width: 100%;
}
position: relative;
width: 48px;
`;
type StyledWorkspaceLogoProps = {
const StyledTwentyLogo = styled.img`
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 24px;
width: 24px;
`;
const StyledTwentyLogoContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
bottom: ${({ theme }) => `-${theme.spacing(3)}`};
display: flex;
height: 28px;
justify-content: center;
position: absolute;
right: ${({ theme }) => `-${theme.spacing(3)}`};
width: 28px;
`;
type StyledMainLogoProps = {
logo?: string | null;
};
const StyledWorkspaceLogo = styled.div<StyledWorkspaceLogoProps>`
const StyledMainLogo = styled.div<StyledMainLogoProps>`
background: url(${(props) => props.logo});
background-size: cover;
border-radius: ${({ theme }) => theme.border.radius.xs};
bottom: ${({ theme }) => `-${theme.spacing(3)}`};
height: ${({ theme }) => theme.spacing(6)};
position: absolute;
right: ${({ theme }) => `-${theme.spacing(3)}`};
width: ${({ theme }) => theme.spacing(6)};
height: 100%;
width: 100%;
`;
export function Logo({ workspaceLogo, ...props }: Props) {
if (!workspaceLogo) {
return (
<StyledContainer {...props}>
<StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
</StyledContainer>
);
}
return (
<StyledLogo {...props}>
<StyledWorkspaceLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
<img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
</StyledLogo>
<StyledContainer {...props}>
<StyledMainLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
<StyledTwentyLogoContainer>
<StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
</StyledTwentyLogoContainer>
</StyledContainer>
);
}

2
front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@ -76,7 +76,7 @@ export function SignInUpForm() {
const title = useMemo(() => {
if (signInUpMode === SignInUpMode.Invite) {
return `Join ${workspace?.displayName ?? ''} Team`;
return `Join ${workspace?.displayName ?? ''} team`;
}
return signInUpMode === SignInUpMode.SignIn

92
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -3,17 +3,18 @@ import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
import {
Checkbox,
CheckboxVariant,
} from '@/ui/input/checkbox/components/Checkbox';
import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
@ -112,7 +113,7 @@ export function CompanyBoardCard() {
const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
selectedBoardCardIdsState,
);
const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
const selected = selectedBoardCards.includes(boardCardId ?? '');
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
@ -128,7 +129,8 @@ export function CompanyBoardCard() {
}
}
if (!company || !pipelineProgress) {
// boardCardId check can be moved to a wrapper to avoid unnecessary logic above
if (!company || !pipelineProgress || !boardCardId) {
return null;
}
@ -149,42 +151,52 @@ export function CompanyBoardCard() {
}
return (
<EntityUpdateMutationHookContext.Provider
value={useUpdateOnePipelineProgressMutation}
>
<StyledBoardCardWrapper>
<StyledBoardCard
selected={selected}
onClick={() => setSelected(!selected)}
>
<StyledBoardCardHeader>
<CompanyChip
id={company.id}
name={company.name}
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
variant={EntityChipVariant.Transparent}
<StyledBoardCardWrapper>
<StyledBoardCard
selected={selected}
onClick={() => setSelected(!selected)}
>
<StyledBoardCardHeader>
<CompanyChip
id={company.id}
name={company.name}
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
variant={EntityChipVariant.Transparent}
/>
<StyledCheckboxContainer className="checkbox-container">
<Checkbox
checked={selected}
onChange={() => setSelected(!selected)}
variant={CheckboxVariant.Secondary}
/>
<StyledCheckboxContainer className="checkbox-container">
<Checkbox
checked={selected}
onChange={() => setSelected(!selected)}
variant={CheckboxVariant.Secondary}
/>
</StyledCheckboxContainer>
</StyledBoardCardHeader>
<StyledBoardCardBody>
{fieldsDefinitions.map((viewField) => {
return (
<PreventSelectOnClickContainer key={viewField.id}>
<EditableFieldEntityIdContext.Provider value={boardCardId}>
<GenericEditableField viewField={viewField} />
</EditableFieldEntityIdContext.Provider>
</PreventSelectOnClickContainer>
);
})}
</StyledBoardCardBody>
</StyledBoardCard>
</StyledBoardCardWrapper>
</EntityUpdateMutationHookContext.Provider>
</StyledCheckboxContainer>
</StyledBoardCardHeader>
<StyledBoardCardBody>
<EditableFieldMutationContext.Provider
value={useUpdateOnePipelineProgressMutation}
>
<EditableFieldEntityIdContext.Provider value={boardCardId}>
{viewFieldsDefinitions.map((viewField) => {
return (
<PreventSelectOnClickContainer key={viewField.id}>
<EditableFieldDefinitionContext.Provider
value={{
id: viewField.id,
label: viewField.columnLabel,
icon: viewField.columnIcon,
type: viewField.metadata.type,
metadata: viewField.metadata,
}}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
</PreventSelectOnClickContainer>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</StyledBoardCardBody>
</StyledBoardCard>
</StyledBoardCardWrapper>
);
}

10
front/src/modules/companies/components/CompanyTeam.tsx
View File

@ -12,6 +12,7 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
const StyledTitleContainer = styled.div`
@ -32,7 +33,6 @@ const StyledListContainer = styled.div`
border-radius: ${({ theme }) => theme.spacing(1)};
display: flex;
flex-direction: column;
max-height: ${({ theme }) => theme.spacing(35)};
overflow: auto;
width: 100%;
`;
@ -63,8 +63,12 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
<StyledTitle>Team</StyledTitle>
</StyledTitleContainer>
<StyledListContainer>
{data?.people?.map((person) => (
<PeopleCard key={person.id} person={person} />
{data?.people?.map((person, id) => (
<PeopleCard
key={person.id}
person={person}
hasBottomBorder={id !== data.people.length - 1}
/>
))}
</StyledListContainer>
</StyledContainer>

6
front/src/modules/companies/components/HooksCompanyBoard.tsx
View File

@ -2,8 +2,8 @@ import { useEffect, useMemo } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@ -27,7 +27,9 @@ export function HooksCompanyBoard({
}: {
orderBy: PipelineProgresses_Order_By[];
}) {
const setFieldsDefinitionsState = useSetRecoilState(fieldsDefinitionsState);
const setFieldsDefinitionsState = useSetRecoilState(
viewFieldsDefinitionsState,
);
useEffect(() => {
setFieldsDefinitionsState(pipelineViewFields);

9
front/src/modules/companies/queries/show.ts
View File

@ -19,6 +19,15 @@ export const GET_COMPANY = gql`
displayName
avatarUrl
}
Favorite {
id
person {
id
}
company {
id
}
}
}
}
`;

63
front/src/modules/favorites/components/Favorites.tsx Normal file
View File

@ -0,0 +1,63 @@
import styled from '@emotion/styled';
import NavItem from '@/ui/navbar/components/NavItem';
import NavTitle from '@/ui/navbar/components/NavTitle';
import { Avatar } from '@/users/components/Avatar';
import { useGetFavoritesQuery } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
overflow-x: auto;
width: 100%;
`;
export function Favorites() {
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
if (!favorites || favorites.length === 0) return <></>;
return (
<StyledContainer>
<NavTitle label="Favorites" />
{favorites.map(
({ id, person, company }) =>
(person && (
<NavItem
key={id}
label={`${person.firstName} ${person.lastName}`}
icon={
<Avatar
key={id}
colorId={person.id}
avatarUrl={person.avatarUrl ?? ''}
type="rounded"
placeholder={`${person.firstName} ${person.lastName}`}
size="md"
/>
}
to={`/person/${person.id}`}
/>
)) ||
(company && (
<NavItem
key={id}
label={company.name}
icon={
<Avatar
key={id}
avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
type="squared"
placeholder={company.name}
size="md"
/>
}
to={`/companies/${company.id}`}
/>
)),
)}
</StyledContainer>
);
}

84
front/src/modules/favorites/hooks/useFavorites.ts Normal file
View File

@ -0,0 +1,84 @@
import { getOperationName } from '@apollo/client/utilities';
import { GET_COMPANY } from '@/companies/queries';
import { GET_PERSON } from '@/people/queries/show';
import {
useDeleteFavoriteMutation,
useInsertCompanyFavoriteMutation,
useInsertPersonFavoriteMutation,
} from '~/generated/graphql';
import { GET_FAVORITES } from '../queries/show';
export function useFavorites() {
const [insertCompanyFavoriteMutation] = useInsertCompanyFavoriteMutation();
const [insertPersonFavoriteMutation] = useInsertPersonFavoriteMutation();
const [deleteFavoriteMutation] = useDeleteFavoriteMutation();
function insertCompanyFavorite(companyId: string) {
insertCompanyFavoriteMutation({
variables: {
data: {
companyId,
},
},
refetchQueries: [
getOperationName(GET_FAVORITES) ?? '',
getOperationName(GET_COMPANY) ?? '',
],
});
}
function insertPersonFavorite(personId: string) {
insertPersonFavoriteMutation({
variables: {
data: {
personId,
},
},
refetchQueries: [
getOperationName(GET_FAVORITES) ?? '',
getOperationName(GET_PERSON) ?? '',
],
});
}
function deleteCompanyFavorite(companyId: string) {
deleteFavoriteMutation({
variables: {
where: {
companyId: {
equals: companyId,
},
},
},
refetchQueries: [
getOperationName(GET_FAVORITES) ?? '',
getOperationName(GET_COMPANY) ?? '',
],
});
}
function deletePersonFavorite(personId: string) {
deleteFavoriteMutation({
variables: {
where: {
personId: {
equals: personId,
},
},
},
refetchQueries: [
getOperationName(GET_FAVORITES) ?? '',
getOperationName(GET_PERSON) ?? '',
],
});
}
return {
insertCompanyFavorite,
insertPersonFavorite,
deleteCompanyFavorite,
deletePersonFavorite,
};
}

25
front/src/modules/favorites/queries/show.ts Normal file
View File

@ -0,0 +1,25 @@
import { gql } from '@apollo/client';
export const GET_FAVORITES = gql`
query GetFavorites {
findFavorites {
id
person {
id
firstName
lastName
avatarUrl
}
company {
id
name
domainName
accountOwner {
id
displayName
avatarUrl
}
}
}
}
`;

36
front/src/modules/favorites/queries/update.ts Normal file
View File

@ -0,0 +1,36 @@
import { gql } from '@apollo/client';
export const INSERT_PERSON_FAVORITE = gql`
mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
createFavoriteForPerson(data: $data) {
id
person {
id
firstName
lastName
displayName
}
}
}
`;
export const INSERT_COMPANY_FAVORITE = gql`
mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
createFavoriteForCompany(data: $data) {
id
company {
id
name
domainName
}
}
}
`;
export const DELETE_FAVORITE = gql`
mutation DeleteFavorite($where: FavoriteWhereInput!) {
deleteFavorite(where: $where) {
id
}
}
`;

21
front/src/modules/people/components/PeopleCard.tsx
View File

@ -4,14 +4,17 @@ import styled from '@emotion/styled';
import { Avatar } from '@/users/components/Avatar';
import { Person } from '~/generated/graphql';
export type PeopleCardPropsType = {
export type PeopleCardProps = {
person: Pick<Person, 'id' | 'avatarUrl' | 'displayName' | 'jobTitle'>;
hasBottomBorder?: boolean;
};
const StyledCard = styled.div`
const StyledCard = styled.div<{ hasBottomBorder: boolean }>`
align-items: center;
align-self: stretch;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid
${({ theme, hasBottomBorder }) =>
hasBottomBorder ? theme.border.color.light : 'transparent'};
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(8)};
@ -49,10 +52,16 @@ const StyledJobTitle = styled.div`
}
`;
export function PeopleCard({ person }: PeopleCardPropsType) {
export function PeopleCard({
person,
hasBottomBorder = true,
}: PeopleCardProps) {
const navigate = useNavigate();
return (
<StyledCard onClick={() => navigate(`/person/${person.id}`)}>
<StyledCard
onClick={() => navigate(`/person/${person.id}`)}
hasBottomBorder={hasBottomBorder}
>
<Avatar
size="lg"
type="rounded"
@ -61,7 +70,7 @@ export function PeopleCard({ person }: PeopleCardPropsType) {
/>
<StyledCardInfo>
<StyledTitle>{person.displayName}</StyledTitle>
<StyledJobTitle> {person.jobTitle ?? 'Add job title'}</StyledJobTitle>
{person.jobTitle && <StyledJobTitle>{person.jobTitle}</StyledJobTitle>}
</StyledCardInfo>
</StyledCard>
);

2
front/src/modules/people/constants/peopleViewFields.tsx
View File

@ -123,7 +123,7 @@ export const peopleViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
} satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
{
id: 'x',
columnLabel: 'X',
columnLabel: 'Twitter',
columnIcon: <IconBrandX />,
columnSize: 150,
columnOrder: 9,

4
front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx
View File

@ -48,8 +48,8 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
return (
<RecoilScope SpecificContext={FieldContext}>
<DoubleTextInputEdit
firstValuePlaceholder={'First name'}
secondValuePlaceholder={'Last name'}
firstValuePlaceholder={'F​irst n​ame'} // Hack: Fake character to prevent password-manager from filling the field
secondValuePlaceholder={'L​ast n​ame'} // Hack: Fake character to prevent password-manager from filling the field
firstValue={internalValueFirstName ?? ''}
secondValue={internalValueLastName ?? ''}
onChange={handleChange}

9
front/src/modules/people/queries/show.ts
View File

@ -23,6 +23,15 @@ export const GET_PERSON = gql`
name
domainName
}
Favorite {
id
person {
id
}
company {
id
}
}
}
}
`;

2
front/src/modules/ui/board/components/EntityBoard.tsx
View File

@ -7,6 +7,7 @@ import { IconList } from '@tabler/icons-react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { GET_PIPELINE_PROGRESS } from '@/pipeline/queries';
import { BoardHeader } from '@/ui/board/components/BoardHeader';
import { StyledBoard } from '@/ui/board/components/StyledBoard';
import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds';
@ -22,7 +23,6 @@ import {
useUpdateOnePipelineProgressStageMutation,
} from '~/generated/graphql';
import { GET_PIPELINE_PROGRESS } from '../../../pipeline/queries';
import { BoardColumnContext } from '../states/BoardColumnContext';
import { boardColumnsState } from '../states/boardColumnsState';
import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';

10
front/src/modules/ui/board/components/EntityBoardColumn.tsx
View File

@ -91,14 +91,14 @@ export function EntityBoardColumn({
/>
</BoardCardIdContext.Provider>
))}
<Draggable draggableId={`new-${column.id}`} index={cardIds.length}>
<Draggable
draggableId={`new-${column.id}`}
index={cardIds.length}
isDragDisabled={true}
>
{(draggableProvided) => (
<div
ref={draggableProvided?.innerRef}
{...{
...draggableProvided.dragHandleProps,
draggable: false,
}}
{...draggableProvided?.draggableProps}
>
<StyledNewCardButtonContainer>

2
front/src/modules/ui/board/components/NewButton.tsx
View File

@ -8,7 +8,7 @@ const StyledButton = styled.button`
align-self: baseline;
background-color: ${({ theme }) => theme.background.primary};
border: none;
border-radius: ${({ theme }) => theme.border.radius.md};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
display: flex;

17
front/src/modules/ui/board/states/FieldDefinitionContext.ts
View File

@ -1,9 +1,14 @@
import { createContext } from 'react';
import {
ViewFieldDefinition,
ViewFieldMetadata,
} from '../../editable-field/types/ViewField';
import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
import { FieldMetadata } from '@/ui/editable-field/types/FieldMetadata';
export const FieldDefinitionContext =
createContext<ViewFieldDefinition<ViewFieldMetadata> | null>(null);
export const FieldDefinitionContext = createContext<
FieldDefinition<FieldMetadata>
>({
id: '',
label: '',
icon: undefined,
type: '',
metadata: {} as FieldMetadata,
});

4
front/src/modules/ui/board/states/fieldsDefinitionsState.ts → front/src/modules/ui/board/states/viewFieldsDefinitionsState.ts
View File

@ -5,9 +5,9 @@ import type {
ViewFieldMetadata,
} from '../../editable-field/types/ViewField';
export const fieldsDefinitionsState = atom<
export const viewFieldsDefinitionsState = atom<
ViewFieldDefinition<ViewFieldMetadata>[]
>({
key: 'fieldsDefinitionState',
key: 'viewFieldsDefinitionState',
default: [],
});

10
front/src/modules/ui/button/components/IconButton.tsx
View File

@ -5,7 +5,11 @@ export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
export type IconButtonSize = 'large' | 'medium' | 'small';
export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
export type IconButtonFontColor =
| 'primary'
| 'secondary'
| 'tertiary'
| 'danger';
export type ButtonProps = {
icon?: React.ReactNode;
@ -71,7 +75,9 @@ const StyledIconButton = styled.button<
return theme.font.color.extraLight;
}
return theme.font.color[textColor ?? 'secondary'];
return textColor === 'danger'
? theme.color.red
: theme.font.color[textColor ?? 'secondary'];
}};
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex;

35
front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx
View File

@ -1,47 +1,40 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import {
ViewFieldDateMetadata,
ViewFieldDefinition,
} from '@/ui/editable-field/types/ViewField';
import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { parseDate } from '~/utils/date-utils';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableDateFieldDisplayMode } from './GenericEditableDateFieldDisplayMode';
import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
};
export function GenericEditableDateField({ viewField }: OwnProps) {
export function GenericEditableDateField() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldDateMetadata>;
const fieldValue = useRecoilValue<string>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
const internalDateValue = fieldValue
? parseDate(fieldValue).toJSDate()
: null;
return (
<RecoilScope SpecificContext={FieldContext}>
<EditableField
iconLabel={viewField.columnIcon}
editModeContent={
<GenericEditableDateFieldEditMode viewField={viewField} />
}
displayModeContent={<DateInputDisplay value={internalDateValue} />}
iconLabel={currentEditableFieldDefinition.icon}
editModeContent={<GenericEditableDateFieldEditMode />}
displayModeContent={<GenericEditableDateFieldDisplayMode />}
isDisplayModeContentEmpty={!fieldValue}
/>
</RecoilScope>

33
front/src/modules/ui/editable-field/components/GenericEditableDateFieldDisplayMode.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
import { parseDate } from '~/utils/date-utils';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';
export function GenericEditableDateFieldDisplayMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldDateMetadata>;
const fieldValue = useRecoilValue<string>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
const internalDateValue = fieldValue
? parseDate(fieldValue).toJSDate()
: null;
return <DateInputDisplay value={internalDateValue} />;
}

27
front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx
View File

@ -1,28 +1,27 @@
import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import {
ViewFieldDateMetadata,
ViewFieldDefinition,
} from '@/ui/editable-field/types/ViewField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';
import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
};
export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
export function GenericEditableDateFieldEditMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldDateMetadata>;
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<string>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
@ -34,7 +33,11 @@ export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
setFieldValue(newDateISO);
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newDateISO);
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newDateISO,
);
}
}

38
front/src/modules/ui/editable-field/components/GenericEditableField.tsx
View File

@ -1,34 +1,30 @@
import {
ViewFieldDefinition,
ViewFieldMetadata,
} from '@/ui/editable-field/types/ViewField';
import { useContext } from 'react';
import { isViewFieldDate } from '../types/guards/isViewFieldDate';
import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { isFieldDate } from '../types/guards/isFieldDate';
import { isFieldNumber } from '../types/guards/isFieldNumber';
import { isFieldProbability } from '../types/guards/isFieldProbability';
import { isFieldRelation } from '../types/guards/isFieldRelation';
import { GenericEditableDateField } from './GenericEditableDateField';
import { GenericEditableNumberField } from './GenericEditableNumberField';
import { GenericEditableRelationField } from './GenericEditableRelationField';
import { ProbabilityEditableField } from './ProbabilityEditableField';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldMetadata>;
};
export function GenericEditableField() {
const fieldDefinition = useContext(EditableFieldDefinitionContext);
export function GenericEditableField({ viewField: fieldDefinition }: OwnProps) {
if (isViewFieldDate(fieldDefinition)) {
return <GenericEditableDateField viewField={fieldDefinition} />;
} else if (isViewFieldNumber(fieldDefinition)) {
return <GenericEditableNumberField viewField={fieldDefinition} />;
} else if (isViewFieldRelation(fieldDefinition)) {
return <GenericEditableRelationField viewField={fieldDefinition} />;
} else if (isViewFieldProbability(fieldDefinition)) {
return <ProbabilityEditableField viewField={fieldDefinition} />;
if (isFieldRelation(fieldDefinition)) {
return <GenericEditableRelationField />;
} else if (isFieldDate(fieldDefinition)) {
return <GenericEditableDateField />;
} else if (isFieldNumber(fieldDefinition)) {
return <GenericEditableNumberField />;
} else if (isFieldProbability(fieldDefinition)) {
return <ProbabilityEditableField />;
} else {
console.warn(
`Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableField`,
`Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,
);
return <></>;
}

26
front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
View File

@ -1,40 +1,38 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import {
ViewFieldDefinition,
ViewFieldNumberMetadata,
} from '@/ui/editable-field/types/ViewField';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldNumberMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
};
export function GenericEditableNumberField({ viewField }: OwnProps) {
export function GenericEditableNumberField() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldNumberMetadata>;
const fieldValue = useRecoilValue<string>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
return (
<RecoilScope SpecificContext={FieldContext}>
<EditableField
iconLabel={viewField.columnIcon}
editModeContent={
<GenericEditableNumberFieldEditMode viewField={viewField} />
}
iconLabel={currentEditableFieldDefinition.icon}
editModeContent={<GenericEditableNumberFieldEditMode />}
displayModeContent={fieldValue}
isDisplayModeContentEmpty={!fieldValue}
/>

29
front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx
View File

@ -1,10 +1,6 @@
import { useContext, useRef, useState } from 'react';
import { useRecoilState } from 'recoil';
import {
ViewFieldDefinition,
ViewFieldNumberMetadata,
} from '@/ui/editable-field/types/ViewField';
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
import {
canBeCastAsIntegerOrNull,
@ -13,21 +9,25 @@ import {
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldNumberMetadata } from '../types/FieldMetadata';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
};
export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
export function GenericEditableNumberFieldEditMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldNumberMetadata>;
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<number | null>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
const [internalValue, setInternalValue] = useState(
@ -36,6 +36,10 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
const updateField = useUpdateGenericEntityField();
const wrapperRef = useRef(null);
useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
function handleSubmit() {
if (!canBeCastAsIntegerOrNull(internalValue)) {
return;
@ -47,7 +51,7 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEditableFieldEntityId,
viewField,
currentEditableFieldDefinition,
castAsIntegerOrNull(internalValue),
);
}
@ -60,9 +64,6 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
function handleChange(newValue: string) {
setInternalValue(newValue);
}
const wrapperRef = useRef(null);
useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
return (
<div ref={wrapperRef}>

58
front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx
View File

@ -1,58 +1,32 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { PersonChip } from '@/people/components/PersonChip';
import {
ViewFieldDefinition,
ViewFieldRelationMetadata,
} from '@/ui/editable-field/types/ViewField';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldRelationMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableRelationFieldDisplayMode } from './GenericEditableRelationFieldDisplayMode';
import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
};
function RelationChip({
fieldDefinition,
fieldValue,
}: {
fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
fieldValue: any | null;
}) {
switch (fieldDefinition.metadata.relationType) {
case Entity.Person: {
return (
<PersonChip
id={fieldValue?.id ?? ''}
name={fieldValue?.displayName ?? ''}
pictureUrl={fieldValue?.avatarUrl ?? ''}
/>
);
}
default:
console.warn(
`Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationField`,
);
return <> </>;
}
}
export function GenericEditableRelationField({ viewField }: OwnProps) {
export function GenericEditableRelationField() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldRelationMetadata>;
const fieldValue = useRecoilValue<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
@ -64,13 +38,9 @@ export function GenericEditableRelationField({ viewField }: OwnProps) {
customEditHotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}
iconLabel={viewField.columnIcon}
editModeContent={
<GenericEditableRelationFieldEditMode viewField={viewField} />
}
displayModeContent={
<RelationChip fieldDefinition={viewField} fieldValue={fieldValue} />
}
iconLabel={currentEditableFieldDefinition.icon}
editModeContent={<GenericEditableRelationFieldEditMode />}
displayModeContent={<GenericEditableRelationFieldDisplayMode />}
isDisplayModeContentEmpty={!fieldValue}
isDisplayModeFixHeight
/>

45
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx Normal file
View File

@ -0,0 +1,45 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { PersonChip } from '@/people/components/PersonChip';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldRelationMetadata } from '../types/FieldMetadata';
export function GenericEditableRelationFieldDisplayMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldRelationMetadata>;
const fieldValue = useRecoilValue<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
switch (currentEditableFieldDefinition.metadata.relationType) {
case Entity.Person: {
return (
<PersonChip
id={fieldValue?.id ?? ''}
name={fieldValue?.displayName ?? ''}
pictureUrl={fieldValue?.avatarUrl ?? ''}
/>
);
}
default:
console.warn(
`Unknown relation type: "${currentEditableFieldDefinition.metadata.relationType}"
in GenericEditableRelationField`,
);
return <> </>;
}
}

32
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
View File

@ -3,18 +3,17 @@ import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { PeoplePicker } from '@/people/components/PeoplePicker';
import {
ViewFieldDefinition,
ViewFieldRelationMetadata,
ViewFieldRelationValue,
} from '@/ui/editable-field/types/ViewField';
import { ViewFieldRelationValue } from '@/ui/editable-field/types/ViewField';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useEditableField } from '../hooks/useEditableField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldRelationMetadata } from '../types/FieldMetadata';
const RelationPickerContainer = styled.div`
left: 0px;
@ -22,17 +21,13 @@ const RelationPickerContainer = styled.div`
top: -8px;
`;
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
};
function RelationPicker({
fieldDefinition,
fieldValue,
handleEntitySubmit,
handleCancel,
}: {
fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
fieldDefinition: FieldDefinition<FieldRelationMetadata>;
fieldValue: ViewFieldRelationValue;
handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
handleCancel: () => void;
@ -55,14 +50,19 @@ function RelationPicker({
}
}
export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
export function GenericEditableRelationFieldEditMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldRelationMetadata>;
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
@ -79,7 +79,11 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
});
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newRelation);
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newRelation,
);
}
closeEditableField();
@ -92,7 +96,7 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
return (
<RelationPickerContainer>
<RelationPicker
fieldDefinition={viewField}
fieldDefinition={currentEditableFieldDefinition}
fieldValue={fieldValue}
handleEntitySubmit={handleSubmit}
handleCancel={handleCancel}

24
front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx
View File

@ -1,25 +1,25 @@
import { useContext } from 'react';
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import {
ViewFieldDefinition,
ViewFieldProbabilityMetadata,
} from '@/ui/editable-field/types/ViewField';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldProbabilityMetadata } from '../types/FieldMetadata';
import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
};
export function ProbabilityEditableField() {
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldProbabilityMetadata>;
export function ProbabilityEditableField({ viewField }: OwnProps) {
return (
<RecoilScope SpecificContext={FieldContext}>
<EditableField
iconLabel={viewField.columnIcon}
displayModeContent={
<ProbabilityEditableFieldEditMode viewField={viewField} />
}
iconLabel={currentEditableFieldDefinition.icon}
displayModeContent={<ProbabilityEditableFieldEditMode />}
displayModeContentOnly
disableHoverEffect
/>

29
front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx
View File

@ -5,12 +5,11 @@ import { useRecoilState } from 'recoil';
import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import {
ViewFieldDefinition,
ViewFieldProbabilityMetadata,
} from '../types/ViewField';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldProbabilityMetadata } from '../types/FieldMetadata';
const StyledContainer = styled.div`
align-items: center;
@ -60,10 +59,6 @@ const StyledLabel = styled.div`
width: ${({ theme }) => theme.spacing(12)};
`;
type OwnProps = {
viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
};
const PROBABILITY_VALUES = [
{ label: '0%', value: 0 },
{ label: '25%', value: 25 },
@ -72,28 +67,38 @@ const PROBABILITY_VALUES = [
{ label: '100%', value: 100 },
];
export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
export function ProbabilityEditableFieldEditMode() {
const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
number | null
>(null);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldProbabilityMetadata>;
const [fieldValue, setFieldValue] = useRecoilState<number>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
const probabilityIndex = Math.ceil(fieldValue / 25);
const { closeEditableField } = useEditableField();
const updateField = useUpdateGenericEntityField();
const probabilityIndex = Math.ceil(fieldValue / 25);
function handleChange(newValue: number) {
setFieldValue(newValue);
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newValue);
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newValue,
);
}
closeEditableField();
}

214
front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts
View File

@ -1,100 +1,97 @@
import { useContext } from 'react';
import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
import { isFieldChip } from '@/ui/editable-field/types/guards/isFieldChip';
import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
import { isViewFieldDate } from '../types/guards/isViewFieldDate';
import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
import { isViewFieldProbabilityValue } from '../types/guards/isViewFieldProbabilityValue';
import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
import { isViewFieldText } from '../types/guards/isViewFieldText';
import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
import { isViewFieldURL } from '../types/guards/isViewFieldURL';
import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
import { EditableFieldMutationContext } from '../states/EditableFieldMutationContext';
import { FieldDefinition } from '../types/FieldDefinition';
import {
ViewFieldChipMetadata,
ViewFieldChipValue,
ViewFieldDateMetadata,
ViewFieldDateValue,
ViewFieldDefinition,
ViewFieldDoubleTextChipMetadata,
ViewFieldDoubleTextChipValue,
ViewFieldDoubleTextMetadata,
ViewFieldDoubleTextValue,
ViewFieldMetadata,
ViewFieldNumberMetadata,
ViewFieldNumberValue,
ViewFieldPhoneMetadata,
ViewFieldPhoneValue,
ViewFieldProbabilityMetadata,
ViewFieldProbabilityValue,
ViewFieldRelationMetadata,
ViewFieldRelationValue,
ViewFieldTextMetadata,
ViewFieldTextValue,
ViewFieldURLMetadata,
ViewFieldURLValue,
} from '../types/ViewField';
FieldChipMetadata,
FieldChipValue,
FieldDateMetadata,
FieldDateValue,
FieldDoubleTextChipMetadata,
FieldDoubleTextChipValue,
FieldDoubleTextMetadata,
FieldDoubleTextValue,
FieldMetadata,
FieldNumberMetadata,
FieldNumberValue,
FieldPhoneMetadata,
FieldPhoneValue,
FieldProbabilityMetadata,
FieldProbabilityValue,
FieldRelationMetadata,
FieldRelationValue,
FieldTextMetadata,
FieldTextValue,
FieldURLMetadata,
FieldURLValue,
} from '../types/FieldMetadata';
import { isFieldChipValue } from '../types/guards/isFieldChipValue';
import { isFieldDate } from '../types/guards/isFieldDate';
import { isFieldDateValue } from '../types/guards/isFieldDateValue';
import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
import { isFieldDoubleTextChipValue } from '../types/guards/isFieldDoubleTextChipValue';
import { isFieldDoubleTextValue } from '../types/guards/isFieldDoubleTextValue';
import { isFieldNumber } from '../types/guards/isFieldNumber';
import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
import { isFieldPhone } from '../types/guards/isFieldPhone';
import { isFieldPhoneValue } from '../types/guards/isFieldPhoneValue';
import { isFieldProbability } from '../types/guards/isFieldProbability';
import { isFieldProbabilityValue } from '../types/guards/isFieldProbabilityValue';
import { isFieldRelation } from '../types/guards/isFieldRelation';
import { isFieldRelationValue } from '../types/guards/isFieldRelationValue';
import { isFieldText } from '../types/guards/isFieldText';
import { isFieldTextValue } from '../types/guards/isFieldTextValue';
import { isFieldURL } from '../types/guards/isFieldURL';
import { isFieldURLValue } from '../types/guards/isFieldURLValue';
export function useUpdateGenericEntityField() {
const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
const useUpdateEntityMutation = useContext(EditableFieldMutationContext);
const [updateEntity] = useUpdateEntityMutation();
return function updatePeopleField<
MetadataType extends ViewFieldMetadata,
ValueType extends MetadataType extends ViewFieldDoubleTextMetadata
? ViewFieldDoubleTextValue
: MetadataType extends ViewFieldTextMetadata
? ViewFieldTextValue
: MetadataType extends ViewFieldPhoneMetadata
? ViewFieldPhoneValue
: MetadataType extends ViewFieldURLMetadata
? ViewFieldURLValue
: MetadataType extends ViewFieldNumberMetadata
? ViewFieldNumberValue
: MetadataType extends ViewFieldDateMetadata
? ViewFieldDateValue
: MetadataType extends ViewFieldChipMetadata
? ViewFieldChipValue
: MetadataType extends ViewFieldDoubleTextChipMetadata
? ViewFieldDoubleTextChipValue
: MetadataType extends ViewFieldRelationMetadata
? ViewFieldRelationValue
: MetadataType extends ViewFieldProbabilityMetadata
? ViewFieldProbabilityValue
return function updateEntityField<
MetadataType extends FieldMetadata,
ValueType extends MetadataType extends FieldDoubleTextMetadata
? FieldDoubleTextValue
: MetadataType extends FieldTextMetadata
? FieldTextValue
: MetadataType extends FieldPhoneMetadata
? FieldPhoneValue
: MetadataType extends FieldURLMetadata
? FieldURLValue
: MetadataType extends FieldNumberMetadata
? FieldNumberValue
: MetadataType extends FieldDateMetadata
? FieldDateValue
: MetadataType extends FieldChipMetadata
? FieldChipValue
: MetadataType extends FieldDoubleTextChipMetadata
? FieldDoubleTextChipValue
: MetadataType extends FieldRelationMetadata
? FieldRelationValue
: MetadataType extends FieldProbabilityMetadata
? FieldProbabilityValue
: unknown,
>(
currentEntityId: string,
viewField: ViewFieldDefinition<MetadataType>,
field: FieldDefinition<MetadataType>,
newFieldValue: ValueType,
) {
const newFieldValueUnknown = newFieldValue as unknown;
// TODO: improve type guards organization, maybe with a common typeguard for all view fields
// taking an object of options as parameter ?
// TODO: improve type guards organization, maybe with a common typeguard for all fields
// taking an object of options as parameter ?
//
// The goal would be to check that the view field value not only is valid,
// but also that it is validated against the corresponding view field type
// The goal would be to check that the field value not only is valid,
// but also that it is validated against the corresponding field type
// Relation
if (
isViewFieldRelation(viewField) &&
isViewFieldRelationValue(newFieldValueUnknown)
) {
if (isFieldRelation(field) && isFieldRelationValue(newFieldValueUnknown)) {
const newSelectedEntity = newFieldValueUnknown;
const fieldName = viewField.metadata.fieldName;
const fieldName = field.metadata.fieldName;
if (!newSelectedEntity) {
updateEntity({
@ -120,35 +117,29 @@ export function useUpdateGenericEntityField() {
});
}
// Chip
} else if (
isViewFieldChip(viewField) &&
isViewFieldChipValue(newFieldValueUnknown)
) {
} else if (isFieldChip(field) && isFieldChipValue(newFieldValueUnknown)) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.contentFieldName]: newContent },
data: { [field.metadata.contentFieldName]: newContent },
},
});
// Text
} else if (
isViewFieldText(viewField) &&
isViewFieldTextValue(newFieldValueUnknown)
) {
} else if (isFieldText(field) && isFieldTextValue(newFieldValueUnknown)) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
// Double text
} else if (
isViewFieldDoubleText(viewField) &&
isViewFieldDoubleTextValue(newFieldValueUnknown)
isFieldDoubleText(field) &&
isFieldDoubleTextValue(newFieldValueUnknown)
) {
const newContent = newFieldValueUnknown;
@ -156,15 +147,15 @@ export function useUpdateGenericEntityField() {
variables: {
where: { id: currentEntityId },
data: {
[viewField.metadata.firstValueFieldName]: newContent.firstValue,
[viewField.metadata.secondValueFieldName]: newContent.secondValue,
[field.metadata.firstValueFieldName]: newContent.firstValue,
[field.metadata.secondValueFieldName]: newContent.secondValue,
},
},
});
// Double Text Chip
} else if (
isViewFieldDoubleTextChip(viewField) &&
isViewFieldDoubleTextChipValue(newFieldValueUnknown)
isFieldDoubleTextChip(field) &&
isFieldDoubleTextChipValue(newFieldValueUnknown)
) {
const newContent = newFieldValueUnknown;
@ -172,73 +163,64 @@ export function useUpdateGenericEntityField() {
variables: {
where: { id: currentEntityId },
data: {
[viewField.metadata.firstValueFieldName]: newContent.firstValue,
[viewField.metadata.secondValueFieldName]: newContent.secondValue,
[field.metadata.firstValueFieldName]: newContent.firstValue,
[field.metadata.secondValueFieldName]: newContent.secondValue,
},
},
});
// Phone
} else if (
isViewFieldPhone(viewField) &&
isViewFieldPhoneValue(newFieldValueUnknown)
) {
} else if (isFieldPhone(field) && isFieldPhoneValue(newFieldValueUnknown)) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
// URL
} else if (
isViewFieldURL(viewField) &&
isViewFieldURLValue(newFieldValueUnknown)
) {
} else if (isFieldURL(field) && isFieldURLValue(newFieldValueUnknown)) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
// Number
} else if (
isViewFieldNumber(viewField) &&
isViewFieldNumberValue(newFieldValueUnknown)
isFieldNumber(field) &&
isFieldNumberValue(newFieldValueUnknown)
) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
// Date
} else if (
isViewFieldDate(viewField) &&
isViewFieldDateValue(newFieldValueUnknown)
) {
} else if (isFieldDate(field) && isFieldDateValue(newFieldValueUnknown)) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
} else if (
isViewFieldProbability(viewField) &&
isViewFieldProbabilityValue(newFieldValueUnknown)
isFieldProbability(field) &&
isFieldProbabilityValue(newFieldValueUnknown)
) {
const newContent = newFieldValueUnknown;
updateEntity({
variables: {
where: { id: currentEntityId },
data: { [viewField.metadata.fieldName]: newContent },
data: { [field.metadata.fieldName]: newContent },
},
});
}

8
front/src/modules/ui/editable-field/states/EditableFieldDefinitionContext.ts Normal file
View File

@ -0,0 +1,8 @@
import { createContext } from 'react';
import { FieldDefinition } from '../types/FieldDefinition';
import { ViewFieldMetadata } from '../types/ViewField';
export const EditableFieldDefinitionContext = createContext<
FieldDefinition<ViewFieldMetadata>
>({} as FieldDefinition<ViewFieldMetadata>);

2
front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts
View File

@ -1,3 +1,3 @@
import { createContext } from 'react';
export const EditableFieldEntityIdContext = createContext<string | null>(null);
export const EditableFieldEntityIdContext = createContext<string>('');

3
front/src/modules/ui/editable-field/states/EditableFieldMutationContext.ts Normal file
View File

@ -0,0 +1,3 @@
import { createContext } from 'react';
export const EditableFieldMutationContext = createContext<any>(undefined);

9
front/src/modules/ui/editable-field/types/FieldDefinition.ts Normal file
View File

@ -0,0 +1,9 @@
import { FieldMetadata } from './FieldMetadata';
export type FieldDefinition<T extends FieldMetadata | unknown> = {
id: string;
label: string;
icon?: JSX.Element;
type: string;
metadata: T;
};

113
front/src/modules/ui/editable-field/types/FieldMetadata.ts Normal file
View File

@ -0,0 +1,113 @@
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
export type FieldType =
| 'text'
| 'relation'
| 'chip'
| 'double-text-chip'
| 'double-text'
| 'number'
| 'date'
| 'phone'
| 'url'
| 'probability';
export type FieldTextMetadata = {
type: 'text';
placeHolder: string;
fieldName: string;
};
export type FieldPhoneMetadata = {
type: 'phone';
placeHolder: string;
fieldName: string;
};
export type FieldURLMetadata = {
type: 'url';
placeHolder: string;
fieldName: string;
};
export type FieldDateMetadata = {
type: 'date';
fieldName: string;
};
export type FieldNumberMetadata = {
type: 'number';
fieldName: string;
};
export type FieldRelationMetadata = {
type: 'relation';
relationType: Entity;
fieldName: string;
};
export type FieldChipMetadata = {
type: 'chip';
relationType: Entity;
contentFieldName: string;
urlFieldName: string;
placeHolder: string;
};
export type FieldDoubleTextMetadata = {
type: 'double-text';
firstValueFieldName: string;
firstValuePlaceholder: string;
secondValueFieldName: string;
secondValuePlaceholder: string;
};
export type FieldDoubleTextChipMetadata = {
type: 'double-text-chip';
firstValueFieldName: string;
firstValuePlaceholder: string;
secondValueFieldName: string;
secondValuePlaceholder: string;
avatarUrlFieldName: string;
entityType: Entity;
};
export type FieldProbabilityMetadata = {
type: 'probability';
fieldName: string;
};
export type FieldMetadata = { type: FieldType } & (
| FieldTextMetadata
| FieldRelationMetadata
| FieldChipMetadata
| FieldDoubleTextChipMetadata
| FieldDoubleTextMetadata
| FieldPhoneMetadata
| FieldURLMetadata
| FieldNumberMetadata
| FieldDateMetadata
| FieldProbabilityMetadata
);
export type FieldTextValue = string;
export type FieldChipValue = string;
export type FieldDateValue = string;
export type FieldPhoneValue = string;
export type FieldURLValue = string;
export type FieldNumberValue = number | null;
export type FieldProbabilityValue = number;
export type FieldDoubleTextValue = {
firstValue: string;
secondValue: string;
};
export type FieldDoubleTextChipValue = {
firstValue: string;
secondValue: string;
};
export type FieldRelationValue = EntityForSelect | null;

8
front/src/modules/ui/editable-field/types/guards/isFieldChip.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldChipMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldChip(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldChipMetadata> {
return field.type === 'chip';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldChipValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldChipValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldChipValue(
fieldValue: unknown,
): fieldValue is FieldChipValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldDate.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDateMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDate(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDateMetadata> {
return field.type === 'date';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldDateValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldDateValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDateValue(
fieldValue: unknown,
): fieldValue is FieldDateValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldDoubleText.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDoubleTextMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDoubleText(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDoubleTextMetadata> {
return field.type === 'double-text';
}

8
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChip.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDoubleTextChipMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDoubleTextChip(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDoubleTextChipMetadata> {
return field.type === 'double-text-chip';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChipValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldDoubleTextChipValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDoubleTextChipValue(
fieldValue: unknown,
): fieldValue is FieldDoubleTextChipValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object'
);
}

12
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldDoubleTextValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDoubleTextValue(
fieldValue: unknown,
): fieldValue is FieldDoubleTextValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldNumber.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldNumberMetadata } from '../FieldMetadata';
export function isFieldNumber(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldNumberMetadata> {
return field.type === 'number';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldNumberValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldNumberValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldNumberValue(
fieldValue: unknown,
): fieldValue is FieldNumberValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'number'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldPhone.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
export function isFieldPhone(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldPhoneMetadata> {
return field.type === 'phone';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldPhoneValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldPhoneValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldPhoneValue(
fieldValue: unknown,
): fieldValue is FieldPhoneValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldProbability.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldProbabilityMetadata } from '../FieldMetadata';
export function isFieldProbability(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldProbabilityMetadata> {
return field.type === 'probability';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldProbabilityValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldProbabilityValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldProbabilityValue(
fieldValue: unknown,
): fieldValue is FieldProbabilityValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'number'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldRelation.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldRelationMetadata } from '../FieldMetadata';
export function isFieldRelation(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldRelationMetadata> {
return field.type === 'relation';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldRelationValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldRelationValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldRelationValue(
fieldValue: unknown,
): fieldValue is FieldRelationValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldText.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldTextMetadata } from '../FieldMetadata';
export function isFieldText(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldTextMetadata> {
return field.type === 'text';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldTextValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldTextValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldTextValue(
fieldValue: unknown,
): fieldValue is FieldTextValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}

8
front/src/modules/ui/editable-field/types/guards/isFieldURL.ts Normal file
View File

@ -0,0 +1,8 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldURLMetadata } from '../FieldMetadata';
export function isFieldURL(
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldURLMetadata> {
return field.type === 'url';
}

12
front/src/modules/ui/editable-field/types/guards/isFieldURLValue.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldURLValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldURLValue(
fieldValue: unknown,
): fieldValue is FieldURLValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}

1
front/src/modules/ui/icon/index.ts
View File

@ -51,6 +51,7 @@ export { IconUserCircle } from '@tabler/icons-react';
export { IconCalendar } from '@tabler/icons-react';
export { IconPencil } from '@tabler/icons-react';
export { IconCircleDot } from '@tabler/icons-react';
export { IconHeart } from '@tabler/icons-react';
export { IconBrandX } from '@tabler/icons-react';
export { IconTag } from '@tabler/icons-react';
export { IconHelpCircle } from '@tabler/icons-react';

16
front/src/modules/ui/input/checkbox/components/Checkbox.tsx
View File

@ -38,6 +38,7 @@ const StyledInput = styled.input<{
variant: CheckboxVariant;
indeterminate?: boolean;
shape?: CheckboxShape;
isChecked: boolean;
}>`
cursor: pointer;
margin: 0;
@ -58,10 +59,10 @@ const StyledInput = styled.input<{
& + label:before {
--size: ${({ checkboxSize }) =>
checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
background: ${({ theme, indeterminate }) =>
indeterminate ? theme.color.blue : 'transparent'};
border-color: ${({ theme, indeterminate, variant }) =>
indeterminate
background: ${({ theme, indeterminate, isChecked }) =>
indeterminate || isChecked ? theme.color.blue : 'transparent'};
border-color: ${({ theme, indeterminate, isChecked, variant }) =>
indeterminate || isChecked
? theme.color.blue
: variant === CheckboxVariant.Primary
? theme.border.color.inverted
@ -79,11 +80,6 @@ const StyledInput = styled.input<{
width: var(--size);
}
&:checked + label:before {
background: ${({ theme }) => theme.color.blue};
border-color: ${({ theme }) => theme.color.blue};
}
& + label > svg {
--padding: ${({ checkboxSize }) =>
checkboxSize === CheckboxSize.Large ? '2px' : '1px'};
@ -112,7 +108,6 @@ export function Checkbox({
React.useEffect(() => {
setIsInternalChecked(checked);
}, [checked]);
function handleChange(value: boolean) {
onChange?.(value);
setIsInternalChecked(!isInternalChecked);
@ -130,6 +125,7 @@ export function Checkbox({
variant={variant}
checkboxSize={size}
shape={shape}
isChecked={isInternalChecked}
onChange={(event) => handleChange(event.target.checked)}
/>
<label htmlFor="checkbox">

4
front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx
View File

@ -20,13 +20,13 @@ type OwnProps = {
const checkUrlType = (url: string) => {
if (
/^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/.test(
/^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
url,
)
) {
return LinkType.LinkedIn;
}
if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?$/i)) {
if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
return LinkType.Twitter;
}

13
front/src/modules/ui/layout/components/DefaultLayout.tsx
View File

@ -19,7 +19,20 @@ const StyledLayout = styled.div`
flex-direction: row;
height: 100vh;
position: relative;
scrollbar-color: ${({ theme }) => theme.border.color.medium};
scrollbar-width: 4px;
width: 100vw;
*::-webkit-scrollbar {
height: 4px;
width: 4px;
}
*::-webkit-scrollbar-thumb {
background-color: ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
`;
const NAVBAR_WIDTH = '236px';

6
front/src/modules/ui/layout/components/WithTopBarContainer.tsx
View File

@ -10,8 +10,10 @@ type OwnProps = {
children: JSX.Element | JSX.Element[];
title: string;
hasBackButton?: boolean;
isFavorite?: boolean;
icon: ReactNode;
onAddButtonClick?: () => void;
onFavoriteButtonClick?: () => void;
};
const StyledContainer = styled.div`
@ -24,8 +26,10 @@ export function WithTopBarContainer({
children,
title,
hasBackButton,
isFavorite,
icon,
onAddButtonClick,
onFavoriteButtonClick,
}: OwnProps) {
return (
<StyledContainer>
@ -33,8 +37,10 @@ export function WithTopBarContainer({
<PageBar
title={title}
hasBackButton={hasBackButton}
isFavorite={isFavorite}
icon={icon}
onAddButtonClick={onAddButtonClick}
onFavoriteButtonClick={onFavoriteButtonClick}
/>
<RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
{children}

43
front/src/modules/ui/layout/page-bar/components/PageBar.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconButton } from '@/ui/button/components/IconButton';
import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
import { IconChevronLeft, IconHeart, IconPlus } from '@/ui/icon/index';
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -58,18 +58,27 @@ const StyledTopBarIconTitleContainer = styled.div`
width: 100%;
`;
const ActionButtonsContainer = styled.div`
display: inline-flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
type OwnProps = {
title: string;
hasBackButton?: boolean;
isFavorite?: boolean;
icon: ReactNode;
onAddButtonClick?: () => void;
onFavoriteButtonClick?: () => void;
};
export function PageBar({
title,
hasBackButton,
isFavorite,
icon,
onAddButtonClick,
onFavoriteButtonClick,
}: OwnProps) {
const navigate = useNavigate();
const navigateBack = useCallback(() => navigate(-1), [navigate]);
@ -104,16 +113,28 @@ export function PageBar({
</TitleContainer>
</StyledTopBarIconTitleContainer>
</StyledLeftContainer>
{onAddButtonClick && (
<IconButton
icon={<IconPlus size={16} />}
size="large"
data-testid="add-button"
textColor="secondary"
onClick={onAddButtonClick}
variant="border"
/>
)}
<ActionButtonsContainer>
{onFavoriteButtonClick && (
<IconButton
icon={<IconHeart size={16} />}
size="large"
data-testid="add-button"
textColor={isFavorite ? 'danger' : 'secondary'}
onClick={onFavoriteButtonClick}
variant="border"
/>
)}
{onAddButtonClick && (
<IconButton
icon={<IconPlus size={16} />}
size="large"
data-testid="add-button"
textColor="secondary"
onClick={onAddButtonClick}
variant="border"
/>
)}
</ActionButtonsContainer>
</TopBarContainer>
</>
);

1
front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -14,6 +14,7 @@ export const ShowPageLeftContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
overflow-y: scroll;
padding: 0px ${({ theme }) => theme.spacing(3)};
width: ${({ theme }) => {
const isMobile = useIsMobile();

2
front/src/modules/ui/link/components/RoundedLink.tsx
View File

@ -30,7 +30,7 @@ export function RoundedLink({ children, href, onClick }: OwnProps) {
<Chip
label={`${children}`}
variant={ChipVariant.Rounded}
size={ChipSize.Large}
size={ChipSize.Small}
/>
</ReactLink>
</StyledClickable>

35
front/src/modules/ui/table/editable-cell/components/EditableCell.tsx
View File

@ -9,7 +9,9 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode';
import { useEditableCell } from '../hooks/useEditableCell';
import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
import { EditableCellEditMode } from './EditableCellEditMode';
@ -39,6 +41,7 @@ type OwnProps = {
editHotkeyScope?: HotkeyScope;
transparent?: boolean;
maxContentWidth?: number;
useEditButton?: boolean;
onSubmit?: () => void;
onCancel?: () => void;
};
@ -55,27 +58,19 @@ export function EditableCell({
editHotkeyScope,
transparent = false,
maxContentWidth,
useEditButton,
}: OwnProps) {
const { isCurrentCellInEditMode, setCurrentCellInEditMode } =
useCurrentCellEditMode();
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
const [isHovered, setIsHovered] = useState(false);
function isValidUrl(value: string) {
let testUrl = value;
if (testUrl && !testUrl.startsWith('http')) {
testUrl = 'http://' + testUrl;
}
try {
new URL(testUrl);
return true;
} catch (err) {
return false;
}
}
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const handleClick = () => {
setCurrentCellInEditMode();
};
const { openEditableCell } = useEditableCell();
function handlePenClick() {
setSoftFocusOnCurrentCell();
openEditableCell();
}
function handleContainerMouseEnter() {
setIsHovered(true);
@ -85,9 +80,7 @@ export function EditableCell({
setIsHovered(false);
}
const value = nonEditModeContent.props.value;
const showEditButton =
!isCurrentCellInEditMode && isValidUrl(value) && isHovered;
const showEditButton = useEditButton && isHovered && !isCurrentCellInEditMode;
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
@ -124,7 +117,7 @@ export function EditableCell({
<IconButton
variant="shadow"
size="small"
onClick={handleClick}
onClick={handlePenClick}
icon={<IconPencil size={14} />}
/>
</StyledEditButtonContainer>

4
front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
View File

@ -16,9 +16,9 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
margin-top: -1px;
max-width: ${({ maxContentWidth }) =>
maxContentWidth ? `${maxContentWidth}px` : 'auto'};
maxContentWidth ? `${maxContentWidth}px` : 'none'};
min-height: 100%;
min-width: 100%;
min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
position: absolute;
right: ${(props) =>

1
front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx
View File

@ -21,6 +21,7 @@ export function GenericEditableRelationCell({
}: OwnProps) {
return (
<EditableCell
maxContentWidth={160}
editModeHorizontalAlign={editModeHorizontalAlign}
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={

1
front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx
View File

@ -32,6 +32,7 @@ export function GenericEditableURLCell({
return (
<EditableCell
useEditButton
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
nonEditModeContent={