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

2
front/src/AppNavbar.tsx
View File

@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { Favorites } from '@/favorites/components/Favorites';
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
import {
IconBell,
@ -56,6 +57,7 @@ export function AppNavbar() {
active={currentPath === '/tasks'}
icon={<IconCheckbox size={theme.icon.size.md} />}
/>
<Favorites />
<NavTitle label="Workspace" />
<NavItem
label="Companies"

305
front/src/generated/graphql.tsx
View File

@ -640,6 +640,7 @@ export enum CommentableType {
export type Company = {
__typename?: 'Company';
ActivityTarget?: Maybe<Array<ActivityTarget>>;
Favorite?: Maybe<Array<Favorite>>;
PipelineProgress?: Maybe<Array<PipelineProgress>>;
_activityCount: Scalars['Int'];
accountOwner?: Maybe<User>;
@ -659,6 +660,7 @@ export type Company = {
export type CompanyCreateInput = {
ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutCompanyInput>;
Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutCompanyInput>;
PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutCompanyInput>;
accountOwner?: InputMaybe<UserCreateNestedOneWithoutCompaniesInput>;
address: Scalars['String'];
@ -696,6 +698,7 @@ export type CompanyOrderByRelationAggregateInput = {
export type CompanyOrderByWithRelationInput = {
ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
accountOwner?: InputMaybe<UserOrderByWithRelationInput>;
accountOwnerId?: InputMaybe<SortOrder>;
@ -731,6 +734,7 @@ export enum CompanyScalarFieldEnum {
export type CompanyUpdateInput = {
ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutCompanyNestedInput>;
Favorite?: InputMaybe<FavoriteUpdateManyWithoutCompanyNestedInput>;
PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutCompanyNestedInput>;
accountOwner?: InputMaybe<UserUpdateOneWithoutCompaniesNestedInput>;
address?: InputMaybe<Scalars['String']>;
@ -769,6 +773,7 @@ export type CompanyUpdateOneWithoutPipelineProgressNestedInput = {
export type CompanyWhereInput = {
AND?: InputMaybe<Array<CompanyWhereInput>>;
ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
Favorite?: InputMaybe<FavoriteListRelationFilter>;
NOT?: InputMaybe<Array<CompanyWhereInput>>;
OR?: InputMaybe<Array<CompanyWhereInput>>;
PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
@ -860,6 +865,71 @@ export type EnumViewTypeFilter = {
notIn?: InputMaybe<Array<ViewType>>;
};
export type Favorite = {
__typename?: 'Favorite';
company?: Maybe<Company>;
companyId?: Maybe<Scalars['String']>;
id: Scalars['ID'];
person?: Maybe<Person>;
personId?: Maybe<Scalars['String']>;
workspaceId?: Maybe<Scalars['String']>;
workspaceMember?: Maybe<WorkspaceMember>;
workspaceMemberId?: Maybe<Scalars['String']>;
};
export type FavoriteCreateNestedManyWithoutCompanyInput = {
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
};
export type FavoriteCreateNestedManyWithoutPersonInput = {
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
};
export type FavoriteListRelationFilter = {
every?: InputMaybe<FavoriteWhereInput>;
none?: InputMaybe<FavoriteWhereInput>;
some?: InputMaybe<FavoriteWhereInput>;
};
export type FavoriteMutationForCompanyArgs = {
companyId: Scalars['String'];
};
export type FavoriteMutationForPersonArgs = {
personId: Scalars['String'];
};
export type FavoriteOrderByRelationAggregateInput = {
_count?: InputMaybe<SortOrder>;
};
export type FavoriteUpdateManyWithoutCompanyNestedInput = {
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
};
export type FavoriteUpdateManyWithoutPersonNestedInput = {
connect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
disconnect?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
set?: InputMaybe<Array<FavoriteWhereUniqueInput>>;
};
export type FavoriteWhereInput = {
AND?: InputMaybe<Array<FavoriteWhereInput>>;
NOT?: InputMaybe<Array<FavoriteWhereInput>>;
OR?: InputMaybe<Array<FavoriteWhereInput>>;
companyId?: InputMaybe<StringNullableFilter>;
id?: InputMaybe<StringFilter>;
personId?: InputMaybe<StringNullableFilter>;
workspaceId?: InputMaybe<StringNullableFilter>;
workspaceMemberId?: InputMaybe<StringNullableFilter>;
};
export type FavoriteWhereUniqueInput = {
id?: InputMaybe<Scalars['String']>;
};
export enum FileFolder {
Attachment = 'Attachment',
PersonPicture = 'PersonPicture',
@ -915,6 +985,8 @@ export type Mutation = {
allowImpersonation: WorkspaceMember;
challenge: LoginToken;
createEvent: Analytics;
createFavoriteForCompany: Favorite;
createFavoriteForPerson: Favorite;
createManyViewField: AffectedRows;
createManyViewSort: AffectedRows;
createOneActivity: Activity;
@ -924,6 +996,7 @@ export type Mutation = {
createOnePipelineProgress: PipelineProgress;
createOneViewField: ViewField;
deleteCurrentWorkspace: Workspace;
deleteFavorite: Favorite;
deleteManyActivities: AffectedRows;
deleteManyCompany: AffectedRows;
deleteManyPerson: AffectedRows;
@ -970,6 +1043,16 @@ export type MutationCreateEventArgs = {
};
export type MutationCreateFavoriteForCompanyArgs = {
data: FavoriteMutationForCompanyArgs;
};
export type MutationCreateFavoriteForPersonArgs = {
data: FavoriteMutationForPersonArgs;
};
export type MutationCreateManyViewFieldArgs = {
data: Array<ViewFieldCreateManyInput>;
skipDuplicates?: InputMaybe<Scalars['Boolean']>;
@ -1012,6 +1095,11 @@ export type MutationCreateOneViewFieldArgs = {
};
export type MutationDeleteFavoriteArgs = {
where: FavoriteWhereInput;
};
export type MutationDeleteManyActivitiesArgs = {
where?: InputMaybe<ActivityWhereInput>;
};
@ -1279,6 +1367,7 @@ export type NestedStringNullableFilter = {
export type Person = {
__typename?: 'Person';
ActivityTarget?: Maybe<Array<ActivityTarget>>;
Favorite?: Maybe<Array<Favorite>>;
PipelineProgress?: Maybe<Array<PipelineProgress>>;
_activityCount: Scalars['Int'];
activities: Array<Activity>;
@ -1303,6 +1392,7 @@ export type Person = {
export type PersonCreateInput = {
ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutPersonInput>;
Favorite?: InputMaybe<FavoriteCreateNestedManyWithoutPersonInput>;
PipelineProgress?: InputMaybe<PipelineProgressCreateNestedManyWithoutPersonInput>;
avatarUrl?: InputMaybe<Scalars['String']>;
city?: InputMaybe<Scalars['String']>;
@ -1348,6 +1438,7 @@ export type PersonOrderByRelationAggregateInput = {
export type PersonOrderByWithRelationInput = {
ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
PipelineProgress?: InputMaybe<PipelineProgressOrderByRelationAggregateInput>;
avatarUrl?: InputMaybe<SortOrder>;
city?: InputMaybe<SortOrder>;
@ -1391,6 +1482,7 @@ export enum PersonScalarFieldEnum {
export type PersonUpdateInput = {
ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutPersonNestedInput>;
Favorite?: InputMaybe<FavoriteUpdateManyWithoutPersonNestedInput>;
PipelineProgress?: InputMaybe<PipelineProgressUpdateManyWithoutPersonNestedInput>;
avatarUrl?: InputMaybe<Scalars['String']>;
city?: InputMaybe<Scalars['String']>;
@ -1433,6 +1525,7 @@ export type PersonUpdateOneWithoutPipelineProgressNestedInput = {
export type PersonWhereInput = {
AND?: InputMaybe<Array<PersonWhereInput>>;
ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
Favorite?: InputMaybe<FavoriteListRelationFilter>;
NOT?: InputMaybe<Array<PersonWhereInput>>;
OR?: InputMaybe<Array<PersonWhereInput>>;
PipelineProgress?: InputMaybe<PipelineProgressListRelationFilter>;
@ -1806,6 +1899,7 @@ export type Query = {
clientConfig: ClientConfig;
currentUser: User;
currentWorkspace: Workspace;
findFavorites: Array<Favorite>;
findManyActivities: Array<Activity>;
findManyCompany: Array<Company>;
findManyPerson: Array<Person>;
@ -2507,6 +2601,7 @@ export type WorkspaceInviteHashValid = {
export type WorkspaceMember = {
__typename?: 'WorkspaceMember';
Favorite?: Maybe<Array<Favorite>>;
allowImpersonation: Scalars['Boolean'];
createdAt: Scalars['DateTime'];
id: Scalars['ID'];
@ -2517,6 +2612,7 @@ export type WorkspaceMember = {
};
export type WorkspaceMemberOrderByWithRelationInput = {
Favorite?: InputMaybe<FavoriteOrderByRelationAggregateInput>;
allowImpersonation?: InputMaybe<SortOrder>;
createdAt?: InputMaybe<SortOrder>;
id?: InputMaybe<SortOrder>;
@ -2543,6 +2639,7 @@ export type WorkspaceMemberUpdateManyWithoutWorkspaceNestedInput = {
export type WorkspaceMemberWhereInput = {
AND?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
Favorite?: InputMaybe<FavoriteListRelationFilter>;
NOT?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
OR?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
allowImpersonation?: InputMaybe<BoolFilter>;
@ -2734,7 +2831,7 @@ export type GetCompanyQueryVariables = Exact<{
}>;
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, linkedinUrl?: string | null, employees?: number | null, _activityCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
export type UpdateOneCompanyMutationVariables = Exact<{
where: CompanyWhereUniqueInput;
@ -2760,6 +2857,32 @@ export type DeleteManyCompaniesMutationVariables = Exact<{
export type DeleteManyCompaniesMutation = { __typename?: 'Mutation', deleteManyCompany: { __typename?: 'AffectedRows', count: number } };
export type GetFavoritesQueryVariables = Exact<{ [key: string]: never; }>;
export type GetFavoritesQuery = { __typename?: 'Query', findFavorites: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string, accountOwner?: { __typename?: 'User', id: string, displayName: string, avatarUrl?: string | null } | null } | null }> };
export type InsertPersonFavoriteMutationVariables = Exact<{
data: FavoriteMutationForPersonArgs;
}>;
export type InsertPersonFavoriteMutation = { __typename?: 'Mutation', createFavoriteForPerson: { __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null } };
export type InsertCompanyFavoriteMutationVariables = Exact<{
data: FavoriteMutationForCompanyArgs;
}>;
export type InsertCompanyFavoriteMutation = { __typename?: 'Mutation', createFavoriteForCompany: { __typename?: 'Favorite', id: string, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
export type DeleteFavoriteMutationVariables = Exact<{
where: FavoriteWhereInput;
}>;
export type DeleteFavoriteMutation = { __typename?: 'Mutation', deleteFavorite: { __typename?: 'Favorite', id: string } };
export type GetPeopleQueryVariables = Exact<{
orderBy?: InputMaybe<Array<PersonOrderByWithRelationInput> | PersonOrderByWithRelationInput>;
where?: InputMaybe<PersonWhereInput>;
@ -2823,7 +2946,7 @@ export type GetPersonQueryVariables = Exact<{
}>;
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null, Favorite?: Array<{ __typename?: 'Favorite', id: string, person?: { __typename?: 'Person', id: string } | null, company?: { __typename?: 'Company', id: string } | null }> | null } };
export type UpdateOnePersonMutationVariables = Exact<{
where: PersonWhereUniqueInput;
@ -4097,6 +4220,15 @@ export const GetCompanyDocument = gql`
displayName
avatarUrl
}
Favorite {
id
person {
id
}
company {
id
}
}
}
}
`;
@ -4241,6 +4373,166 @@ export function useDeleteManyCompaniesMutation(baseOptions?: Apollo.MutationHook
export type DeleteManyCompaniesMutationHookResult = ReturnType<typeof useDeleteManyCompaniesMutation>;
export type DeleteManyCompaniesMutationResult = Apollo.MutationResult<DeleteManyCompaniesMutation>;
export type DeleteManyCompaniesMutationOptions = Apollo.BaseMutationOptions<DeleteManyCompaniesMutation, DeleteManyCompaniesMutationVariables>;
export const GetFavoritesDocument = gql`
query GetFavorites {
findFavorites {
id
person {
id
firstName
lastName
avatarUrl
}
company {
id
name
domainName
accountOwner {
id
displayName
avatarUrl
}
}
}
}
`;
/**
* __useGetFavoritesQuery__
*
* To run a query within a React component, call `useGetFavoritesQuery` and pass it any options that fit your needs.
* When your component renders, `useGetFavoritesQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetFavoritesQuery({
* variables: {
* },
* });
*/
export function useGetFavoritesQuery(baseOptions?: Apollo.QueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
}
export function useGetFavoritesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetFavoritesQuery, GetFavoritesQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetFavoritesQuery, GetFavoritesQueryVariables>(GetFavoritesDocument, options);
}
export type GetFavoritesQueryHookResult = ReturnType<typeof useGetFavoritesQuery>;
export type GetFavoritesLazyQueryHookResult = ReturnType<typeof useGetFavoritesLazyQuery>;
export type GetFavoritesQueryResult = Apollo.QueryResult<GetFavoritesQuery, GetFavoritesQueryVariables>;
export const InsertPersonFavoriteDocument = gql`
mutation InsertPersonFavorite($data: FavoriteMutationForPersonArgs!) {
createFavoriteForPerson(data: $data) {
id
person {
id
firstName
lastName
displayName
}
}
}
`;
export type InsertPersonFavoriteMutationFn = Apollo.MutationFunction<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
/**
* __useInsertPersonFavoriteMutation__
*
* To run a mutation, you first call `useInsertPersonFavoriteMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useInsertPersonFavoriteMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [insertPersonFavoriteMutation, { data, loading, error }] = useInsertPersonFavoriteMutation({
* variables: {
* data: // value for 'data'
* },
* });
*/
export function useInsertPersonFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>(InsertPersonFavoriteDocument, options);
}
export type InsertPersonFavoriteMutationHookResult = ReturnType<typeof useInsertPersonFavoriteMutation>;
export type InsertPersonFavoriteMutationResult = Apollo.MutationResult<InsertPersonFavoriteMutation>;
export type InsertPersonFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertPersonFavoriteMutation, InsertPersonFavoriteMutationVariables>;
export const InsertCompanyFavoriteDocument = gql`
mutation InsertCompanyFavorite($data: FavoriteMutationForCompanyArgs!) {
createFavoriteForCompany(data: $data) {
id
company {
id
name
domainName
}
}
}
`;
export type InsertCompanyFavoriteMutationFn = Apollo.MutationFunction<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
/**
* __useInsertCompanyFavoriteMutation__
*
* To run a mutation, you first call `useInsertCompanyFavoriteMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useInsertCompanyFavoriteMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [insertCompanyFavoriteMutation, { data, loading, error }] = useInsertCompanyFavoriteMutation({
* variables: {
* data: // value for 'data'
* },
* });
*/
export function useInsertCompanyFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>(InsertCompanyFavoriteDocument, options);
}
export type InsertCompanyFavoriteMutationHookResult = ReturnType<typeof useInsertCompanyFavoriteMutation>;
export type InsertCompanyFavoriteMutationResult = Apollo.MutationResult<InsertCompanyFavoriteMutation>;
export type InsertCompanyFavoriteMutationOptions = Apollo.BaseMutationOptions<InsertCompanyFavoriteMutation, InsertCompanyFavoriteMutationVariables>;
export const DeleteFavoriteDocument = gql`
mutation DeleteFavorite($where: FavoriteWhereInput!) {
deleteFavorite(where: $where) {
id
}
}
`;
export type DeleteFavoriteMutationFn = Apollo.MutationFunction<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
/**
* __useDeleteFavoriteMutation__
*
* To run a mutation, you first call `useDeleteFavoriteMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useDeleteFavoriteMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [deleteFavoriteMutation, { data, loading, error }] = useDeleteFavoriteMutation({
* variables: {
* where: // value for 'where'
* },
* });
*/
export function useDeleteFavoriteMutation(baseOptions?: Apollo.MutationHookOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>(DeleteFavoriteDocument, options);
}
export type DeleteFavoriteMutationHookResult = ReturnType<typeof useDeleteFavoriteMutation>;
export type DeleteFavoriteMutationResult = Apollo.MutationResult<DeleteFavoriteMutation>;
export type DeleteFavoriteMutationOptions = Apollo.BaseMutationOptions<DeleteFavoriteMutation, DeleteFavoriteMutationVariables>;
export const GetPeopleDocument = gql`
query GetPeople($orderBy: [PersonOrderByWithRelationInput!], $where: PersonWhereInput, $limit: Int) {
people: findManyPerson(orderBy: $orderBy, where: $where, take: $limit) {
@ -4575,6 +4867,15 @@ export const GetPersonDocument = gql`
name
domainName
}
Favorite {
id
person {
id
}
company {
id
}
}
}
}
`;

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={

16
front/src/pages/companies/CompanyShow.tsx
View File

@ -9,6 +9,7 @@ import { CompanyCreatedAtEditableField } from '@/companies/editable-field/compon
import { CompanyDomainNameEditableField } from '@/companies/editable-field/components/CompanyDomainNameEditableField';
import { CompanyEmployeesEditableField } from '@/companies/editable-field/components/CompanyEmployeesEditableField';
import { useCompanyQuery } from '@/companies/queries';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
import { IconBuildingSkyscraper } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@ -23,19 +24,28 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
export function CompanyShow() {
const companyId = useParams().companyId ?? '';
const { data } = useCompanyQuery(companyId);
const company = data?.findUniqueCompany;
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const theme = useTheme();
const { data } = useCompanyQuery(companyId);
const company = data?.findUniqueCompany;
const isFavorite =
company?.Favorite && company?.Favorite?.length > 0 ? true : false;
if (!company) return <></>;
async function handleFavoriteButtonClick() {
if (isFavorite) deleteCompanyFavorite(companyId);
else insertCompanyFavorite(companyId);
}
return (
<WithTopBarContainer
title={company?.name ?? ''}
hasBackButton
isFavorite={isFavorite}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
onFavoriteButtonClick={handleFavoriteButtonClick}
>
<ShowPageContainer>
<ShowPageLeftContainer>

11
front/src/pages/people/PersonShow.tsx
View File

@ -3,6 +3,7 @@ import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import { Timeline } from '@/activities/timeline/components/Timeline';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { PersonPropertyBox } from '@/people/components/PersonPropertyBox';
import { GET_PERSON, usePersonQuery } from '@/people/queries';
import { IconUser } from '@/ui/icon';
@ -20,9 +21,12 @@ import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageCo
export function PersonShow() {
const personId = useParams().personId ?? '';
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
const { data } = usePersonQuery(personId);
const person = data?.findUniquePerson;
const isFavorite =
person?.Favorite && person?.Favorite?.length > 0 ? true : false;
const theme = useTheme();
const [uploadPicture] = useUploadPersonPictureMutation();
@ -40,11 +44,18 @@ export function PersonShow() {
});
}
async function handleFavoriteButtonClick() {
if (isFavorite) deletePersonFavorite(personId);
else insertPersonFavorite(personId);
}
return (
<WithTopBarContainer
title={person?.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
hasBackButton
isFavorite={isFavorite}
onFavoriteButtonClick={handleFavoriteButtonClick}
>
<ShowPageContainer>
<ShowPageLeftContainer>

35
front/src/utils/__tests__/is-domain.test.ts Normal file
View File

@ -0,0 +1,35 @@
import { isDomain } from '~/utils/is-domain';
describe('isDomain', () => {
it(`should return false if null`, () => {
expect(isDomain(null)).toBeFalsy();
});
it(`should return false if undefined`, () => {
expect(isDomain(undefined)).toBeFalsy();
});
it(`should return true if string google`, () => {
expect(isDomain('google')).toBeFalsy();
});
it(`should return true if string google.com`, () => {
expect(isDomain('google.com')).toBeTruthy();
});
it(`should return true if string bbc.co.uk`, () => {
expect(isDomain('bbc.co.uk')).toBeTruthy();
});
it(`should return true if string web.io`, () => {
expect(isDomain('web.io')).toBeTruthy();
});
it(`should return true if string x.com`, () => {
expect(isDomain('x.com')).toBeTruthy();
});
it(`should return true if string 2.com`, () => {
expect(isDomain('2.com')).toBeTruthy();
});
});

8
front/src/utils/__tests__/is-url.test.ts
View File

@ -32,4 +32,12 @@ describe('isURL', () => {
it(`should return true if string 2.com`, () => {
expect(isURL('2.com')).toBeTruthy();
});
it(`should return true if string https://2.com/test/`, () => {
expect(isURL('https://2.com/test/')).toBeTruthy();
});
it(`should return false if string https://2.com/test/sldkfj!?`, () => {
expect(isURL('https://2.com/test/sldkfj!?')).toBeFalsy();
});
});

10
front/src/utils/is-domain.ts Normal file
View File

@ -0,0 +1,10 @@
import { isDefined } from './isDefined';
export function isDomain(url: string | undefined | null) {
return (
isDefined(url) &&
/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/.test(
url,
)
);
}

14
front/src/utils/is-url.ts
View File

@ -1,10 +1,14 @@
import { isDefined } from './isDefined';
export function isURL(url: string | undefined | null) {
return (
isDefined(url) &&
/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/.test(
url,
)
const pattern = new RegExp(
'^(https?:\\/\\/)?' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$',
'i',
);
return isDefined(url) && !!pattern.test(url);
}

1
infra/dev/postgres/init.sql
View File

@ -6,3 +6,4 @@ CREATE DATABASE "test";
-- Create a twenty user
CREATE USER twenty PASSWORD 'twenty';
ALTER USER twenty CREATEDB;

4
infra/prod/front/Dockerfile
View File

@ -13,6 +13,8 @@ COPY ./front .
RUN yarn install
RUN yarn build
COPY ./infra/prod/front/serve.json ./build
FROM node:18.16.0-alpine as front
WORKDIR /app/front
@ -20,4 +22,4 @@ COPY --from=build /app/front/build ./build
RUN yarn global add serve
CMD ["serve", "-s", "build"]
CMD ["serve", "build"]

6
infra/prod/front/serve.json Normal file
View File

@ -0,0 +1,6 @@
{
"rewrites": [
{ "source": "!static/**", "destination": "/index.html" }
],
"directoryListing": false
}

8
server/src/ability/ability.factory.ts
View File

@ -19,6 +19,7 @@ import {
UserSettings,
View,
ViewField,
Favorite,
ViewSort,
} from '@prisma/client';
@ -41,6 +42,7 @@ type SubjectsAbility = Subjects<{
UserSettings: UserSettings;
View: View;
ViewField: ViewField;
Favorite: Favorite;
ViewSort: ViewSort;
}>;
@ -143,6 +145,12 @@ export class AbilityFactory {
can(AbilityAction.Read, 'ViewField', { workspaceId: workspace.id });
can(AbilityAction.Create, 'ViewField', { workspaceId: workspace.id });
can(AbilityAction.Update, 'ViewField', { workspaceId: workspace.id });
//Favorite
can(AbilityAction.Read, 'Favorite', { workspaceId: workspace.id });
can(AbilityAction.Create, 'Favorite');
can(AbilityAction.Delete, 'Favorite', {
workspaceId: workspace.id,
});
// ViewSort
can(AbilityAction.Read, 'ViewSort', { workspaceId: workspace.id });

13
server/src/ability/ability.module.ts
View File

@ -99,6 +99,11 @@ import {
ReadViewFieldAbilityHandler,
UpdateViewFieldAbilityHandler,
} from './handlers/view-field.ability-handler';
import {
CreateFavoriteAbilityHandler,
ReadFavoriteAbilityHandler,
DeleteFavoriteAbilityHandler,
} from './handlers/favorite.ability-handler';
import {
CreateViewSortAbilityHandler,
ReadViewSortAbilityHandler,
@ -193,6 +198,10 @@ import {
ReadViewFieldAbilityHandler,
CreateViewFieldAbilityHandler,
UpdateViewFieldAbilityHandler,
//Favorite
ReadFavoriteAbilityHandler,
CreateFavoriteAbilityHandler,
DeleteFavoriteAbilityHandler,
// ViewSort
ReadViewSortAbilityHandler,
CreateViewSortAbilityHandler,
@ -283,6 +292,10 @@ import {
ReadViewFieldAbilityHandler,
CreateViewFieldAbilityHandler,
UpdateViewFieldAbilityHandler,
//Favorite
ReadFavoriteAbilityHandler,
CreateFavoriteAbilityHandler,
DeleteFavoriteAbilityHandler,
// ViewSort
ReadViewSortAbilityHandler,
CreateViewSortAbilityHandler,

74
server/src/ability/handlers/favorite.ability-handler.ts Normal file
View File

@ -0,0 +1,74 @@
import {
ExecutionContext,
Injectable,
NotFoundException,
} from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { subject } from '@casl/ability';
import { IAbilityHandler } from 'src/ability/interfaces/ability-handler.interface';
import { PrismaService } from 'src/database/prisma.service';
import { AbilityAction } from 'src/ability/ability.action';
import { AppAbility } from 'src/ability/ability.factory';
import { relationAbilityChecker } from 'src/ability/ability.util';
import { FavoriteWhereInput } from 'src/core/@generated/favorite/favorite-where.input';
import { assert } from 'src/utils/assert';
class FavoriteArgs {
where?: FavoriteWhereInput;
}
@Injectable()
export class ManageFavoriteAbilityHandler implements IAbilityHandler {
async handle(ability: AppAbility) {
return ability.can(AbilityAction.Manage, 'Favorite');
}
}
@Injectable()
export class ReadFavoriteAbilityHandler implements IAbilityHandler {
handle(ability: AppAbility) {
return ability.can(AbilityAction.Read, 'Favorite');
}
}
@Injectable()
export class CreateFavoriteAbilityHandler implements IAbilityHandler {
constructor(private readonly prismaService: PrismaService) {}
async handle(ability: AppAbility, context: ExecutionContext) {
const gqlContext = GqlExecutionContext.create(context);
const args = gqlContext.getArgs();
const allowed = await relationAbilityChecker(
'Favorite',
ability,
this.prismaService.client,
args,
);
if (!allowed) {
return false;
}
return ability.can(AbilityAction.Create, 'Favorite');
}
}
@Injectable()
export class DeleteFavoriteAbilityHandler implements IAbilityHandler {
constructor(private readonly prismaService: PrismaService) {}
async handle(ability: AppAbility, context: ExecutionContext) {
const gqlContext = GqlExecutionContext.create(context);
const args = gqlContext.getArgs<FavoriteArgs>();
const favorite = await this.prismaService.client.favorite.findFirst({
where: args.where,
});
assert(favorite, '', NotFoundException);
return ability.can(AbilityAction.Delete, subject('Favorite', favorite));
}
}

3
server/src/core/core.module.ts
View File

@ -13,6 +13,7 @@ import { ClientConfigModule } from './client-config/client-config.module';
import { AttachmentModule } from './attachment/attachment.module';
import { ActivityModule } from './activity/activity.module';
import { ViewModule } from './view/view.module';
import { FavoriteModule } from './favorite/favorite.module';
@Module({
imports: [
@ -29,6 +30,7 @@ import { ViewModule } from './view/view.module';
AttachmentModule,
ActivityModule,
ViewModule,
FavoriteModule,
],
exports: [
AuthModule,
@ -40,6 +42,7 @@ import { ViewModule } from './view/view.module';
WorkspaceModule,
AnalyticsModule,
AttachmentModule,
FavoriteModule,
],
})
export class CoreModule {}

10
server/src/core/favorite/favorite.module.ts Normal file
View File

@ -0,0 +1,10 @@
import { Module } from '@nestjs/common';
import { FavoriteResolver } from './resolvers/favorite.resolver';
import { FavoriteService } from './services/favorite.service';
@Module({
providers: [FavoriteService, FavoriteResolver],
exports: [FavoriteService],
})
export class FavoriteModule {}

143
server/src/core/favorite/resolvers/favorite.resolver.ts Normal file
View File

@ -0,0 +1,143 @@
import { Resolver, Query, Args, Mutation } from '@nestjs/graphql';
import { UseGuards } from '@nestjs/common';
import { InputType } from '@nestjs/graphql';
import { Field } from '@nestjs/graphql';
import { Workspace } from '@prisma/client';
import {
PrismaSelect,
PrismaSelector,
} from 'src/decorators/prisma-select.decorator';
import { JwtAuthGuard } from 'src/guards/jwt.auth.guard';
import { Favorite } from 'src/core/@generated/favorite/favorite.model';
import { AbilityGuard } from 'src/guards/ability.guard';
import { CheckAbilities } from 'src/decorators/check-abilities.decorator';
import {
CreateFavoriteAbilityHandler,
DeleteFavoriteAbilityHandler,
ReadFavoriteAbilityHandler,
} from 'src/ability/handlers/favorite.ability-handler';
import { AuthWorkspace } from 'src/decorators/auth-workspace.decorator';
import { FavoriteService } from 'src/core/favorite/services/favorite.service';
import { FavoriteWhereInput } from 'src/core/@generated/favorite/favorite-where.input';
@InputType()
class FavoriteMutationForPersonArgs {
@Field(() => String)
personId: string;
}
@InputType()
class FavoriteMutationForCompanyArgs {
@Field(() => String)
companyId: string;
}
@UseGuards(JwtAuthGuard)
@Resolver(() => Favorite)
export class FavoriteResolver {
constructor(private readonly favoriteService: FavoriteService) {}
@Query(() => [Favorite])
@UseGuards(AbilityGuard)
@CheckAbilities(ReadFavoriteAbilityHandler)
async findFavorites(
@AuthWorkspace() workspace: Workspace,
): Promise<Partial<Favorite>[]> {
const favorites = await this.favoriteService.findMany({
where: {
workspaceId: workspace.id,
},
include: {
person: true,
company: {
include: {
accountOwner: true,
},
},
},
});
return favorites;
}
@Mutation(() => Favorite, {
nullable: false,
})
@UseGuards(AbilityGuard)
@CheckAbilities(CreateFavoriteAbilityHandler)
async createFavoriteForPerson(
@Args('data') args: FavoriteMutationForPersonArgs,
@AuthWorkspace() workspace: Workspace,
@PrismaSelector({ modelName: 'Favorite' })
prismaSelect: PrismaSelect<'Favorite'>,
): Promise<Partial<Favorite>> {
//To avoid duplicates we first fetch all favorites assinged by workspace
const favorite = await this.favoriteService.findFirst({
where: { workspaceId: workspace.id, personId: args.personId },
});
if (favorite) return favorite;
return this.favoriteService.create({
data: {
person: {
connect: { id: args.personId },
},
workspaceId: workspace.id,
},
select: prismaSelect.value,
});
}
@Mutation(() => Favorite, {
nullable: false,
})
@UseGuards(AbilityGuard)
@CheckAbilities(CreateFavoriteAbilityHandler)
async createFavoriteForCompany(
@Args('data') args: FavoriteMutationForCompanyArgs,
@AuthWorkspace() workspace: Workspace,
@PrismaSelector({ modelName: 'Favorite' })
prismaSelect: PrismaSelect<'Favorite'>,
): Promise<Partial<Favorite>> {
//To avoid duplicates we first fetch all favorites assinged by workspace
const favorite = await this.favoriteService.findFirst({
where: { workspaceId: workspace.id, companyId: args.companyId },
});
if (favorite) return favorite;
return this.favoriteService.create({
data: {
company: {
connect: { id: args.companyId },
},
workspaceId: workspace.id,
},
select: prismaSelect.value,
});
}
@Mutation(() => Favorite, {
nullable: false,
})
@UseGuards(AbilityGuard)
@CheckAbilities(DeleteFavoriteAbilityHandler)
async deleteFavorite(
@Args('where') args: FavoriteWhereInput,
@AuthWorkspace() workspace: Workspace,
@PrismaSelector({ modelName: 'Favorite' })
prismaSelect: PrismaSelect<'Favorite'>,
): Promise<Partial<Favorite>> {
const favorite = await this.favoriteService.findFirst({
where: { ...args, workspaceId: workspace.id },
});
return this.favoriteService.delete({
where: { id: favorite?.id },
select: prismaSelect.value,
});
}
}

39
server/src/core/favorite/services/favorite.service.ts Normal file
View File

@ -0,0 +1,39 @@
import { Injectable } from '@nestjs/common';
import { PrismaService } from 'src/database/prisma.service';
@Injectable()
export class FavoriteService {
constructor(private readonly prismaService: PrismaService) {}
// Find
findFirst = this.prismaService.client.favorite.findFirst;
findFirstOrThrow = this.prismaService.client.favorite.findFirstOrThrow;
findUnique = this.prismaService.client.favorite.findUnique;
findUniqueOrThrow = this.prismaService.client.favorite.findUniqueOrThrow;
findMany = this.prismaService.client.favorite.findMany;
// Create
create = this.prismaService.client.favorite.create;
createMany = this.prismaService.client.favorite.createMany;
// Update
update = this.prismaService.client.favorite.update;
upsert = this.prismaService.client.favorite.upsert;
updateMany = this.prismaService.client.favorite.updateMany;
// Delete
delete = this.prismaService.client.favorite.delete;
deleteMany = this.prismaService.client.favorite.deleteMany;
// Aggregate
aggregate = this.prismaService.client.favorite.aggregate;
// Count
count = this.prismaService.client.favorite.count;
// GroupBy
groupBy = this.prismaService.client.favorite.groupBy;
}

6
server/src/database/migrations/20230809143432_add_views_table/migration.sql
View File

@ -27,12 +27,6 @@ CREATE UNIQUE INDEX "views_workspaceId_type_objectId_name_key" ON "views"("works
-- CreateIndex
CREATE UNIQUE INDEX "viewFields_workspaceId_viewId_objectName_fieldName_key" ON "viewFields"("workspaceId", "viewId", "objectName", "fieldName");
-- AddForeignKey
ALTER TABLE "pipeline_progresses" ADD CONSTRAINT "pipeline_progresses_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "companies"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "pipeline_progresses" ADD CONSTRAINT "pipeline_progresses_personId_fkey" FOREIGN KEY ("personId") REFERENCES "people"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "views" ADD CONSTRAINT "views_workspaceId_fkey" FOREIGN KEY ("workspaceId") REFERENCES "workspaces"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

19
server/src/database/migrations/20230810222531_add_favorites/migration.sql Normal file
View File

@ -0,0 +1,19 @@
-- CreateTable
CREATE TABLE "favorites" (
"id" TEXT NOT NULL,
"workspaceId" TEXT,
"personId" TEXT,
"companyId" TEXT,
"workspaceMemberId" TEXT,
CONSTRAINT "favorites_pkey" PRIMARY KEY ("id")
);
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_personId_fkey" FOREIGN KEY ("personId") REFERENCES "people"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "companies"("id") ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "favorites" ADD CONSTRAINT "favorites_workspaceMemberId_fkey" FOREIGN KEY ("workspaceMemberId") REFERENCES "workspace_members"("id") ON DELETE SET NULL ON UPDATE CASCADE;

33
server/src/database/schema.prisma
View File

@ -205,8 +205,9 @@ model WorkspaceMember {
/// @TypeGraphQL.omit(input: true, output: true)
deletedAt DateTime?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
Favorite Favorite[]
@@map("workspace_members")
}
@ -246,6 +247,7 @@ model Company {
updatedAt DateTime @updatedAt
ActivityTarget ActivityTarget[]
PipelineProgress PipelineProgress[]
Favorite Favorite[]
@@map("companies")
}
@ -282,7 +284,7 @@ model Person {
/// @Validator.IsOptional()
avatarUrl String?
company Company? @relation(fields: [companyId], references: [id])
company Company? @relation(fields: [companyId], references: [id], onDelete: SetNull)
companyId String?
/// @TypeGraphQL.omit(input: true, output: true)
workspace Workspace @relation(fields: [workspaceId], references: [id])
@ -297,6 +299,7 @@ model Person {
updatedAt DateTime @updatedAt
ActivityTarget ActivityTarget[]
PipelineProgress PipelineProgress[]
Favorite Favorite[]
@@map("people")
}
@ -407,10 +410,10 @@ model ActivityTarget {
workspaceId String
personId String?
person Person? @relation(fields: [personId], references: [id])
person Person? @relation(fields: [personId], references: [id], onDelete: Cascade)
companyId String?
company Company? @relation(fields: [companyId], references: [id])
company Company? @relation(fields: [companyId], references: [id], onDelete: Cascade)
/// @TypeGraphQL.omit(input: true, output: true)
deletedAt DateTime?
@ -514,10 +517,10 @@ model PipelineProgress {
updatedAt DateTime @updatedAt
companyId String?
company Company? @relation(fields: [companyId], references: [id])
company Company? @relation(fields: [companyId], references: [id], onDelete: Cascade)
personId String?
person Person? @relation(fields: [personId], references: [id])
person Person? @relation(fields: [personId], references: [id], onDelete: Cascade)
@@map("pipeline_progresses")
}
@ -559,6 +562,22 @@ model Attachment {
@@map("attachments")
}
model Favorite {
id String @id @default(uuid())
workspaceId String?
/// @TypeGraphQL.omit(input: true, output: false)
person Person? @relation(fields: [personId], references: [id])
personId String?
/// @TypeGraphQL.omit(input: true, output: false)
company Company? @relation(fields: [companyId], references: [id])
companyId String?
/// @TypeGraphQL.omit(input: true, output: false)
workspaceMember WorkspaceMember? @relation(fields: [workspaceMemberId], references: [id])
workspaceMemberId String?
@@map("favorites")
}
enum ViewType {
Table
Pipeline

1
server/src/utils/prisma-select/model-select-map.ts
View File

@ -16,6 +16,7 @@ export type ModelSelectMap = {
PipelineStage: Prisma.PipelineStageSelect;
PipelineProgress: Prisma.PipelineProgressSelect;
Attachment: Prisma.AttachmentSelect;
Favorite: Prisma.FavoriteSelect;
View: Prisma.ViewSelect;
ViewSort: Prisma.ViewSortSelect;
ViewField: Prisma.ViewFieldSelect;