feat: persist view sorts (#1154)

Closes #1122

front/src/generated/graphql.tsx

@@ -916,6 +916,7 @@ export type Mutation = {
   challenge: LoginToken;
   createEvent: Analytics;
   createManyViewField: AffectedRows;
+  createManyViewSort: AffectedRows;
   createOneActivity: Activity;
   createOneComment: Comment;
   createOneCompany: Company;
@@ -927,6 +928,7 @@ export type Mutation = {
   deleteManyCompany: AffectedRows;
   deleteManyPerson: AffectedRows;
   deleteManyPipelineProgress: AffectedRows;
+  deleteManyViewSort: AffectedRows;
   deleteUserAccount: User;
   deleteWorkspaceMember: WorkspaceMember;
   impersonate: Verify;
@@ -938,6 +940,7 @@ export type Mutation = {
   updateOnePipelineProgress?: Maybe<PipelineProgress>;
   updateOnePipelineStage?: Maybe<PipelineStage>;
   updateOneViewField: ViewField;
+  updateOneViewSort: ViewSort;
   updateUser: User;
   updateWorkspace: Workspace;
   uploadAttachment: Scalars['String'];
@@ -973,6 +976,12 @@ export type MutationCreateManyViewFieldArgs = {
 };
 
 
+export type MutationCreateManyViewSortArgs = {
+  data: Array<ViewSortCreateManyInput>;
+  skipDuplicates?: InputMaybe<Scalars['Boolean']>;
+};
+
+
 export type MutationCreateOneActivityArgs = {
   data: ActivityCreateInput;
 };
@@ -1023,6 +1032,11 @@ export type MutationDeleteManyPipelineProgressArgs = {
 };
 
 
+export type MutationDeleteManyViewSortArgs = {
+  where?: InputMaybe<ViewSortWhereInput>;
+};
+
+
 export type MutationDeleteWorkspaceMemberArgs = {
   where: WorkspaceMemberWhereUniqueInput;
 };
@@ -1081,6 +1095,12 @@ export type MutationUpdateOneViewFieldArgs = {
 };
 
 
+export type MutationUpdateOneViewSortArgs = {
+  data: ViewSortUpdateInput;
+  where: ViewSortWhereUniqueInput;
+};
+
+
 export type MutationUpdateUserArgs = {
   data: UserUpdateInput;
   where: UserWhereUniqueInput;
@@ -1794,6 +1814,7 @@ export type Query = {
   findManyPipelineStage: Array<PipelineStage>;
   findManyUser: Array<User>;
   findManyViewField: Array<ViewField>;
+  findManyViewSort: Array<ViewSort>;
   findManyWorkspaceMember: Array<WorkspaceMember>;
   findUniqueCompany: Company;
   findUniquePerson: Person;
@@ -1891,6 +1912,16 @@ export type QueryFindManyViewFieldArgs = {
 };
 
 
+export type QueryFindManyViewSortArgs = {
+  cursor?: InputMaybe<ViewSortWhereUniqueInput>;
+  distinct?: InputMaybe<Array<ViewSortScalarFieldEnum>>;
+  orderBy?: InputMaybe<Array<ViewSortOrderByWithRelationInput>>;
+  skip?: InputMaybe<Scalars['Int']>;
+  take?: InputMaybe<Scalars['Int']>;
+  where?: InputMaybe<ViewSortWhereInput>;
+};
+
+
 export type QueryFindManyWorkspaceMemberArgs = {
   cursor?: InputMaybe<WorkspaceMemberWhereUniqueInput>;
   distinct?: InputMaybe<Array<WorkspaceMemberScalarFieldEnum>>;
@@ -2331,6 +2362,13 @@ export type ViewSort = {
   viewId: Scalars['String'];
 };
 
+export type ViewSortCreateManyInput = {
+  direction: ViewSortDirection;
+  key: Scalars['String'];
+  name: Scalars['String'];
+  viewId: Scalars['String'];
+};
+
 export enum ViewSortDirection {
   Asc = 'asc',
   Desc = 'desc'
@@ -2346,6 +2384,29 @@ export type ViewSortOrderByRelationAggregateInput = {
   _count?: InputMaybe<SortOrder>;
 };
 
+export type ViewSortOrderByWithRelationInput = {
+  direction?: InputMaybe<SortOrder>;
+  key?: InputMaybe<SortOrder>;
+  name?: InputMaybe<SortOrder>;
+  view?: InputMaybe<ViewOrderByWithRelationInput>;
+  viewId?: InputMaybe<SortOrder>;
+};
+
+export enum ViewSortScalarFieldEnum {
+  Direction = 'direction',
+  Key = 'key',
+  Name = 'name',
+  ViewId = 'viewId',
+  WorkspaceId = 'workspaceId'
+}
+
+export type ViewSortUpdateInput = {
+  direction?: InputMaybe<ViewSortDirection>;
+  key?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+  view?: InputMaybe<ViewUpdateOneRequiredWithoutSortsNestedInput>;
+};
+
 export type ViewSortUpdateManyWithoutWorkspaceNestedInput = {
   connect?: InputMaybe<Array<ViewSortWhereUniqueInput>>;
   disconnect?: InputMaybe<Array<ViewSortWhereUniqueInput>>;
@@ -2383,6 +2444,10 @@ export type ViewUpdateManyWithoutWorkspaceNestedInput = {
   set?: InputMaybe<Array<ViewWhereUniqueInput>>;
 };
 
+export type ViewUpdateOneRequiredWithoutSortsNestedInput = {
+  connect?: InputMaybe<ViewWhereUniqueInput>;
+};
+
 export type ViewUpdateOneWithoutFieldsNestedInput = {
   connect?: InputMaybe<ViewWhereUniqueInput>;
   disconnect?: InputMaybe<Scalars['Boolean']>;
@@ -2954,6 +3019,20 @@ export type CreateViewFieldsMutationVariables = Exact<{
 
 export type CreateViewFieldsMutation = { __typename?: 'Mutation', createManyViewField: { __typename?: 'AffectedRows', count: number } };
 
+export type CreateViewSortsMutationVariables = Exact<{
+  data: Array<ViewSortCreateManyInput> | ViewSortCreateManyInput;
+}>;
+
+
+export type CreateViewSortsMutation = { __typename?: 'Mutation', createManyViewSort: { __typename?: 'AffectedRows', count: number } };
+
+export type DeleteViewSortsMutationVariables = Exact<{
+  where: ViewSortWhereInput;
+}>;
+
+
+export type DeleteViewSortsMutation = { __typename?: 'Mutation', deleteManyViewSort: { __typename?: 'AffectedRows', count: number } };
+
 export type GetViewFieldsQueryVariables = Exact<{
   where?: InputMaybe<ViewFieldWhereInput>;
   orderBy?: InputMaybe<Array<ViewFieldOrderByWithRelationInput> | ViewFieldOrderByWithRelationInput>;
@@ -2962,6 +3041,13 @@ export type GetViewFieldsQueryVariables = Exact<{
 
 export type GetViewFieldsQuery = { __typename?: 'Query', viewFields: Array<{ __typename?: 'ViewField', id: string, fieldName: string, isVisible: boolean, sizeInPx: number, index: number }> };
 
+export type GetViewSortsQueryVariables = Exact<{
+  where?: InputMaybe<ViewSortWhereInput>;
+}>;
+
+
+export type GetViewSortsQuery = { __typename?: 'Query', viewSorts: Array<{ __typename?: 'ViewSort', direction: ViewSortDirection, key: string, name: string }> };
+
 export type UpdateViewFieldMutationVariables = Exact<{
   data: ViewFieldUpdateInput;
   where: ViewFieldWhereUniqueInput;
@@ -2970,6 +3056,14 @@ export type UpdateViewFieldMutationVariables = Exact<{
 
 export type UpdateViewFieldMutation = { __typename?: 'Mutation', updateOneViewField: { __typename?: 'ViewField', id: string, fieldName: string, isVisible: boolean, sizeInPx: number, index: number } };
 
+export type UpdateViewSortMutationVariables = Exact<{
+  data: ViewSortUpdateInput;
+  where: ViewSortWhereUniqueInput;
+}>;
+
+
+export type UpdateViewSortMutation = { __typename?: 'Mutation', viewSort: { __typename?: 'ViewSort', direction: ViewSortDirection, key: string, name: string } };
+
 export type GetWorkspaceMembersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -5523,6 +5617,72 @@ export function useCreateViewFieldsMutation(baseOptions?: Apollo.MutationHookOpt
 export type CreateViewFieldsMutationHookResult = ReturnType<typeof useCreateViewFieldsMutation>;
 export type CreateViewFieldsMutationResult = Apollo.MutationResult<CreateViewFieldsMutation>;
 export type CreateViewFieldsMutationOptions = Apollo.BaseMutationOptions<CreateViewFieldsMutation, CreateViewFieldsMutationVariables>;
+export const CreateViewSortsDocument = gql`
+    mutation CreateViewSorts($data: [ViewSortCreateManyInput!]!) {
+  createManyViewSort(data: $data) {
+    count
+  }
+}
+    `;
+export type CreateViewSortsMutationFn = Apollo.MutationFunction<CreateViewSortsMutation, CreateViewSortsMutationVariables>;
+
+/**
+ * __useCreateViewSortsMutation__
+ *
+ * To run a mutation, you first call `useCreateViewSortsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateViewSortsMutation` 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 [createViewSortsMutation, { data, loading, error }] = useCreateViewSortsMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useCreateViewSortsMutation(baseOptions?: Apollo.MutationHookOptions<CreateViewSortsMutation, CreateViewSortsMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateViewSortsMutation, CreateViewSortsMutationVariables>(CreateViewSortsDocument, options);
+      }
+export type CreateViewSortsMutationHookResult = ReturnType<typeof useCreateViewSortsMutation>;
+export type CreateViewSortsMutationResult = Apollo.MutationResult<CreateViewSortsMutation>;
+export type CreateViewSortsMutationOptions = Apollo.BaseMutationOptions<CreateViewSortsMutation, CreateViewSortsMutationVariables>;
+export const DeleteViewSortsDocument = gql`
+    mutation DeleteViewSorts($where: ViewSortWhereInput!) {
+  deleteManyViewSort(where: $where) {
+    count
+  }
+}
+    `;
+export type DeleteViewSortsMutationFn = Apollo.MutationFunction<DeleteViewSortsMutation, DeleteViewSortsMutationVariables>;
+
+/**
+ * __useDeleteViewSortsMutation__
+ *
+ * To run a mutation, you first call `useDeleteViewSortsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteViewSortsMutation` 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 [deleteViewSortsMutation, { data, loading, error }] = useDeleteViewSortsMutation({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useDeleteViewSortsMutation(baseOptions?: Apollo.MutationHookOptions<DeleteViewSortsMutation, DeleteViewSortsMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteViewSortsMutation, DeleteViewSortsMutationVariables>(DeleteViewSortsDocument, options);
+      }
+export type DeleteViewSortsMutationHookResult = ReturnType<typeof useDeleteViewSortsMutation>;
+export type DeleteViewSortsMutationResult = Apollo.MutationResult<DeleteViewSortsMutation>;
+export type DeleteViewSortsMutationOptions = Apollo.BaseMutationOptions<DeleteViewSortsMutation, DeleteViewSortsMutationVariables>;
 export const GetViewFieldsDocument = gql`
     query GetViewFields($where: ViewFieldWhereInput, $orderBy: [ViewFieldOrderByWithRelationInput!]) {
   viewFields: findManyViewField(where: $where, orderBy: $orderBy) {
@@ -5563,6 +5723,43 @@ export function useGetViewFieldsLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
 export type GetViewFieldsQueryHookResult = ReturnType<typeof useGetViewFieldsQuery>;
 export type GetViewFieldsLazyQueryHookResult = ReturnType<typeof useGetViewFieldsLazyQuery>;
 export type GetViewFieldsQueryResult = Apollo.QueryResult<GetViewFieldsQuery, GetViewFieldsQueryVariables>;
+export const GetViewSortsDocument = gql`
+    query GetViewSorts($where: ViewSortWhereInput) {
+  viewSorts: findManyViewSort(where: $where) {
+    direction
+    key
+    name
+  }
+}
+    `;
+
+/**
+ * __useGetViewSortsQuery__
+ *
+ * To run a query within a React component, call `useGetViewSortsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetViewSortsQuery` 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 } = useGetViewSortsQuery({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useGetViewSortsQuery(baseOptions?: Apollo.QueryHookOptions<GetViewSortsQuery, GetViewSortsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetViewSortsQuery, GetViewSortsQueryVariables>(GetViewSortsDocument, options);
+      }
+export function useGetViewSortsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetViewSortsQuery, GetViewSortsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetViewSortsQuery, GetViewSortsQueryVariables>(GetViewSortsDocument, options);
+        }
+export type GetViewSortsQueryHookResult = ReturnType<typeof useGetViewSortsQuery>;
+export type GetViewSortsLazyQueryHookResult = ReturnType<typeof useGetViewSortsLazyQuery>;
+export type GetViewSortsQueryResult = Apollo.QueryResult<GetViewSortsQuery, GetViewSortsQueryVariables>;
 export const UpdateViewFieldDocument = gql`
     mutation UpdateViewField($data: ViewFieldUpdateInput!, $where: ViewFieldWhereUniqueInput!) {
   updateOneViewField(data: $data, where: $where) {
@@ -5601,6 +5798,42 @@ export function useUpdateViewFieldMutation(baseOptions?: Apollo.MutationHookOpti
 export type UpdateViewFieldMutationHookResult = ReturnType<typeof useUpdateViewFieldMutation>;
 export type UpdateViewFieldMutationResult = Apollo.MutationResult<UpdateViewFieldMutation>;
 export type UpdateViewFieldMutationOptions = Apollo.BaseMutationOptions<UpdateViewFieldMutation, UpdateViewFieldMutationVariables>;
+export const UpdateViewSortDocument = gql`
+    mutation UpdateViewSort($data: ViewSortUpdateInput!, $where: ViewSortWhereUniqueInput!) {
+  viewSort: updateOneViewSort(data: $data, where: $where) {
+    direction
+    key
+    name
+  }
+}
+    `;
+export type UpdateViewSortMutationFn = Apollo.MutationFunction<UpdateViewSortMutation, UpdateViewSortMutationVariables>;
+
+/**
+ * __useUpdateViewSortMutation__
+ *
+ * To run a mutation, you first call `useUpdateViewSortMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateViewSortMutation` 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 [updateViewSortMutation, { data, loading, error }] = useUpdateViewSortMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useUpdateViewSortMutation(baseOptions?: Apollo.MutationHookOptions<UpdateViewSortMutation, UpdateViewSortMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateViewSortMutation, UpdateViewSortMutationVariables>(UpdateViewSortDocument, options);
+      }
+export type UpdateViewSortMutationHookResult = ReturnType<typeof useUpdateViewSortMutation>;
+export type UpdateViewSortMutationResult = Apollo.MutationResult<UpdateViewSortMutation>;
+export type UpdateViewSortMutationOptions = Apollo.BaseMutationOptions<UpdateViewSortMutation, UpdateViewSortMutationVariables>;
 export const GetWorkspaceMembersDocument = gql`
     query GetWorkspaceMembers {
   workspaceMembers: findManyWorkspaceMember {

front/src/modules/companies/queries/__tests__/select.test.ts

@@ -5,12 +5,11 @@ import { CompaniesSelectedSortType } from '../select';
 describe('reduceSortsToOrderBy', () => {
   it('should return an array of objects with the id as key and the order as value', () => {
     const sorts = [
-      { key: 'name', label: 'name', order: 'asc', _type: 'default_sort' },
+      { key: 'name', label: 'name', order: 'asc' },
       {
         key: 'domainName',
         label: 'domainName',
         order: 'desc',
-        _type: 'default_sort',
       },
     ] satisfies CompaniesSelectedSortType[];
     const result = reduceSortsToOrderBy(sorts);

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -1,30 +1,33 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 
 import { companyViewFields } from '@/companies/constants/companyViewFields';
-import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useViewSorts } from '@/views/hooks/useViewSorts';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
-  CompanyOrderByWithRelationInput,
   useGetCompaniesQuery,
   useUpdateOneCompanyMutation,
 } from '~/generated/graphql';
 import { companiesFilters } from '~/pages/companies/companies-filters';
 import { availableSorts } from '~/pages/companies/companies-sorts';
 
-export function CompanyTable() {
-  const [orderBy, setOrderBy] =
-    useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
+import { defaultOrderBy } from '../../queries';
 
-  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
+export function CompanyTable() {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext);
+  const { updateSorts } = useViewSorts({
+    availableSorts,
+    Context: TableContext,
+  });
 
   const filters = useRecoilScopedValue(filtersScopedState, TableContext);
 
@@ -38,7 +41,7 @@ export function CompanyTable() {
         objectName="company"
         getRequestResultKey="companies"
         useGetRequest={useGetCompaniesQuery}
-        orderBy={orderBy}
+        orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         viewFieldDefinitions={companyViewFields}
         filterDefinitionArray={companiesFilters}
@@ -47,7 +50,7 @@ export function CompanyTable() {
         viewName="All Companies"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
+        onSortsUpdate={currentViewId ? updateSorts : undefined}
         useUpdateEntityMutation={useUpdateOneCompanyMutation}
       />
     </>

front/src/modules/people/table/components/PeopleTable.tsx

@@ -1,31 +1,33 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { defaultOrderBy } from '@/companies/queries';
 import { peopleViewFields } from '@/people/constants/peopleViewFields';
-import { PeopleSelectedSortType } from '@/people/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useViewSorts } from '@/views/hooks/useViewSorts';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
-  PersonOrderByWithRelationInput,
   useGetPeopleQuery,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
 import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
-export function PeopleTable() {
-  const [orderBy, setOrderBy] =
-    useState<PersonOrderByWithRelationInput[]>(defaultOrderBy);
+import { defaultOrderBy } from '../../queries';
 
-  const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
+export function PeopleTable() {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const orderBy = useRecoilScopedValue(sortsOrderByScopedState, TableContext);
+  const { updateSorts } = useViewSorts({
+    availableSorts,
+    Context: TableContext,
+  });
 
   const filters = useRecoilScopedValue(filtersScopedState, TableContext);
 
@@ -39,7 +41,7 @@ export function PeopleTable() {
         objectName="person"
         getRequestResultKey="people"
         useGetRequest={useGetPeopleQuery}
-        orderBy={orderBy}
+        orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         viewFieldDefinitions={peopleViewFields}
         filterDefinitionArray={peopleFilters}
@@ -48,7 +50,7 @@ export function PeopleTable() {
         viewName="All People"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
+        onSortsUpdate={currentViewId ? updateSorts : undefined}
         useUpdateEntityMutation={useUpdateOnePersonMutation}
       />
     </>

front/src/modules/ui/filter-n-sort/helpers.ts

@@ -2,27 +2,16 @@ import { SortOrder as Order_By } from '~/generated/graphql';
 
 import { SelectedSortType } from './types/interface';
 
-const mapOrderToOrder_By = (order: string) => {
-  if (order === 'asc') return Order_By.Asc;
-  return Order_By.Desc;
-};
-
-export const defaultOrderByTemplateFactory =
-  (key: string) => (order: string) => ({
-    [key]: order,
-  });
-
 export const reduceSortsToOrderBy = <OrderByTemplate>(
-  sorts: Array<SelectedSortType<OrderByTemplate>>,
-): OrderByTemplate[] => {
-  const mappedSorts = sorts.map((sort) => {
-    if (sort.orderByTemplates) {
-      return sort.orderByTemplates?.map((orderByTemplate) =>
-        orderByTemplate(mapOrderToOrder_By(sort.order)),
+  sorts: SelectedSortType<OrderByTemplate>[],
+): OrderByTemplate[] =>
+  sorts
+    .map((sort) => {
+      const order = sort.order === 'asc' ? Order_By.Asc : Order_By.Desc;
+      return (
+        sort.orderByTemplate?.(order) || [
+          { [sort.key]: order } as OrderByTemplate,
+        ]
       );
-    }
-
-    return defaultOrderByTemplateFactory(sort.key as string)(sort.order);
-  });
-  return mappedSorts.flat() as OrderByTemplate[];
-};
+    })
+    .flat();

front/src/modules/ui/filter-n-sort/states/sortScopedState.ts

@@ -1,8 +1,28 @@
-import { atomFamily } from 'recoil';
+import { atomFamily, selectorFamily } from 'recoil';
 
-import { Filter } from '../types/Filter';
+import { reduceSortsToOrderBy } from '../helpers';
+import { SelectedSortType } from '../types/interface';
 
-export const sortScopedState = atomFamily<Filter[], string>({
+export const sortScopedState = atomFamily<SelectedSortType<any>[], string>({
   key: 'sortScopedState',
   default: [],
 });
+
+export const sortsByKeyScopedState = selectorFamily({
+  key: 'sortsByKeyScopedState',
+  get:
+    (param: string) =>
+    ({ get }) =>
+      get(sortScopedState(param)).reduce<Record<string, SelectedSortType<any>>>(
+        (result, sort) => ({ ...result, [sort.key]: sort }),
+        {},
+      ),
+});
+
+export const sortsOrderByScopedState = selectorFamily({
+  key: 'sortsOrderByScopedState',
+  get:
+    (param: string) =>
+    ({ get }) =>
+      reduceSortsToOrderBy(get(sortScopedState(param))),
+});

front/src/modules/ui/filter-n-sort/types/interface.ts

@@ -6,7 +6,7 @@ export type SortType<OrderByTemplate> = {
   label: string;
   key: string;
   icon?: ReactNode;
-  orderByTemplates?: Array<(order: Order_By) => OrderByTemplate>;
+  orderByTemplate?: (order: Order_By) => OrderByTemplate[];
 };
 
 export type SelectedSortType<OrderByTemplate> = SortType<OrderByTemplate> & {

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -5,19 +5,20 @@ import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { IconPlus } from '@/ui/icon';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { GET_VIEW_FIELDS } from '@/views/queries/select';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
   useCreateViewFieldMutation,
   useUpdateViewFieldMutation,
 } from '~/generated/graphql';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
-import { toViewFieldInput } from '../hooks/useLoadView';
+import { toViewFieldInput } from '../hooks/useLoadViewFields';
 import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
 import {
   addableViewFieldDefinitionsState,
@@ -89,6 +90,7 @@ export function EntityTableHeader() {
   const theme = useTheme();
 
   const [{ objectName }, setViewFieldsState] = useRecoilState(viewFieldsState);
+  const currentViewId = useRecoilValue(currentViewIdState);
   const viewFields = useRecoilValue(visibleViewFieldsState);
   const columnWidths = useRecoilValue(columnWidthByViewFieldIdState);
   const addableViewFieldDefinitions = useRecoilValue(
@@ -176,15 +178,18 @@ export function EntityTableHeader() {
 
       createViewFieldMutation({
         variables: {
-          data: toViewFieldInput(objectName, {
-            ...viewFieldDefinition,
-            columnOrder: viewFields.length + 1,
-          }),
+          data: {
+            ...toViewFieldInput(objectName, {
+              ...viewFieldDefinition,
+              columnOrder: viewFields.length + 1,
+            }),
+            view: { connect: { id: currentViewId } },
+          },
         },
         refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
       });
     },
-    [createViewFieldMutation, objectName, viewFields.length],
+    [createViewFieldMutation, currentViewId, objectName, viewFields.length],
   );
 
   return (

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -6,7 +6,7 @@ import {
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 
-import { useLoadView } from '../hooks/useLoadView';
+import { useLoadViewFields } from '../hooks/useLoadViewFields';
 
 export function GenericEntityTableData({
   objectName,
@@ -27,7 +27,7 @@ export function GenericEntityTableData({
 }) {
   const setEntityTableData = useSetEntityTableData();
 
-  useLoadView({ objectName, viewFieldDefinitions });
+  useLoadViewFields({ objectName, viewFieldDefinitions });
 
   useGetRequest({
     variables: { orderBy, where: whereFilters },

front/src/modules/ui/table/hooks/useLoadViewFields.ts

@@ -1,18 +1,19 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import type {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldTextMetadata,
+} from '@/ui/editable-field/types/ViewField';
 import { GET_VIEW_FIELDS } from '@/views/queries/select';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
 import {
   SortOrder,
   useCreateViewFieldsMutation,
   useGetViewFieldsQuery,
 } from '~/generated/graphql';
 
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-  ViewFieldTextMetadata,
-} from '../../editable-field/types/ViewField';
 import { entityTableDimensionsState } from '../states/entityTableDimensionsState';
 import { viewFieldsState } from '../states/viewFieldsState';
 
@@ -33,13 +34,14 @@ export const toViewFieldInput = (
   sizeInPx: viewFieldDefinition.columnSize,
 });
 
-export const useLoadView = ({
+export const useLoadViewFields = ({
   objectName,
   viewFieldDefinitions,
 }: {
   objectName: 'company' | 'person';
   viewFieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
 }) => {
+  const currentViewId = useRecoilValue(currentViewIdState);
   const setEntityTableDimensions = useSetRecoilState(
     entityTableDimensionsState,
   );
@@ -50,7 +52,10 @@ export const useLoadView = ({
   useGetViewFieldsQuery({
     variables: {
       orderBy: { index: SortOrder.Asc },
-      where: { objectName: { equals: objectName } },
+      where: {
+        objectName: { equals: objectName },
+        viewId: { equals: currentViewId ?? null },
+      },
     },
     onCompleted: (data) => {
       if (data.viewFields.length) {
@@ -79,9 +84,10 @@ export const useLoadView = ({
       // Populate if empty
       createViewFieldsMutation({
         variables: {
-          data: viewFieldDefinitions.map((viewFieldDefinition) =>
-            toViewFieldInput(objectName, viewFieldDefinition),
-          ),
+          data: viewFieldDefinitions.map((viewFieldDefinition) => ({
+            ...toViewFieldInput(objectName, viewFieldDefinition),
+            viewId: currentViewId,
+          })),
         },
         refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
       });

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -1,12 +1,14 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback } from 'react';
 import styled from '@emotion/styled';
 
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
 import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
+import { sortScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { OptionsDropdownButton } from '@/views/components/OptionsDropdownButton';
 
 import { TableContext } from '../../states/TableContext';
@@ -34,26 +36,26 @@ export function TableHeader<SortField>({
   availableSorts,
   onSortsUpdate,
 }: OwnProps<SortField>) {
-  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
-    [],
+  const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
+    sortScopedState,
+    TableContext,
   );
+  const handleSortsUpdate = onSortsUpdate ?? setSorts;
 
   const sortSelect = useCallback(
     (newSort: SelectedSortType<SortField>) => {
       const newSorts = updateSortOrFilterByKey(sorts, newSort);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
+      handleSortsUpdate(newSorts);
     },
-    [onSortsUpdate, sorts],
+    [handleSortsUpdate, sorts],
   );
 
   const sortUnselect = useCallback(
     (sortKey: string) => {
       const newSorts = sorts.filter((sort) => sort.key !== sortKey);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
+      handleSortsUpdate(newSorts);
     },
-    [onSortsUpdate, sorts],
+    [handleSortsUpdate, sorts],
   );
 
   return (
@@ -88,8 +90,7 @@ export function TableHeader<SortField>({
           sorts={sorts}
           onRemoveSort={sortUnselect}
           onCancelClick={() => {
-            innerSetSorts([]);
-            onSortsUpdate && onSortsUpdate([]);
+            handleSortsUpdate([]);
           }}
         />
       }

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts

@@ -1,10 +1,10 @@
 import { Context, useContext } from 'react';
-import { RecoilState, useRecoilValue } from 'recoil';
+import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
 export function useRecoilScopedValue<T>(
-  recoilState: (param: string) => RecoilState<T>,
+  recoilState: (param: string) => RecoilState<T> | RecoilValueReadOnly<T>,
   SpecificContext?: Context<string | null>,
 ) {
   const recoilScopeId = useContext(SpecificContext ?? RecoilScopeContext);

front/src/modules/views/hooks/useViewSorts.ts

@@ -0,0 +1,152 @@
+import { Context, useCallback } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilValue } from 'recoil';
+
+import {
+  sortsByKeyScopedState,
+  sortScopedState,
+} from '@/ui/filter-n-sort/states/sortScopedState';
+import type {
+  SelectedSortType,
+  SortType,
+} from '@/ui/filter-n-sort/types/interface';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdState } from '@/views/states/currentViewIdState';
+import {
+  useCreateViewSortsMutation,
+  useDeleteViewSortsMutation,
+  useGetViewSortsQuery,
+  useUpdateViewSortMutation,
+  ViewSortDirection,
+} from '~/generated/graphql';
+
+import { GET_VIEW_SORTS } from '../queries/select';
+
+export const useViewSorts = <SortField>({
+  availableSorts,
+  Context,
+}: {
+  availableSorts: SortType<SortField>[];
+  Context?: Context<string | null>;
+}) => {
+  const currentViewId = useRecoilValue(currentViewIdState);
+  const [, setSorts] = useRecoilScopedState(sortScopedState, Context);
+  const sortsByKey = useRecoilScopedValue(sortsByKeyScopedState, Context);
+
+  useGetViewSortsQuery({
+    skip: !currentViewId,
+    variables: {
+      where: {
+        viewId: { equals: currentViewId },
+      },
+    },
+    onCompleted: (data) => {
+      setSorts(
+        data.viewSorts
+          .map((viewSort) => ({
+            ...availableSorts.find((sort) => sort.key === viewSort.key),
+            label: viewSort.name,
+            order: viewSort.direction.toLowerCase(),
+          }))
+          .filter((sort): sort is SelectedSortType<SortField> => !!sort),
+      );
+    },
+  });
+
+  const [createViewSortsMutation] = useCreateViewSortsMutation();
+  const [updateViewSortMutation] = useUpdateViewSortMutation();
+  const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
+
+  const createViewSorts = useCallback(
+    (sorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId || !sorts.length) return;
+
+      return createViewSortsMutation({
+        variables: {
+          data: sorts.map((sort) => ({
+            key: sort.key,
+            direction: sort.order as ViewSortDirection,
+            name: sort.label,
+            viewId: currentViewId,
+          })),
+        },
+        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+      });
+    },
+    [createViewSortsMutation, currentViewId],
+  );
+
+  const updateViewSorts = useCallback(
+    (sorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId || !sorts.length) return;
+
+      return Promise.all(
+        sorts.map((sort) =>
+          updateViewSortMutation({
+            variables: {
+              data: {
+                direction: sort.order as ViewSortDirection,
+              },
+              where: {
+                viewId_key: { key: sort.key, viewId: currentViewId },
+              },
+            },
+            refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+          }),
+        ),
+      );
+    },
+    [currentViewId, updateViewSortMutation],
+  );
+
+  const deleteViewSorts = useCallback(
+    (sortKeys: string[]) => {
+      if (!currentViewId || !sortKeys.length) return;
+
+      return deleteViewSortsMutation({
+        variables: {
+          where: {
+            key: { in: sortKeys },
+            viewId: { equals: currentViewId },
+          },
+        },
+        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
+      });
+    },
+    [currentViewId, deleteViewSortsMutation],
+  );
+
+  const updateSorts = useCallback(
+    async (nextSorts: SelectedSortType<SortField>[]) => {
+      if (!currentViewId) return;
+
+      const sortsToCreate = nextSorts.filter(
+        (nextSort) => !sortsByKey[nextSort.key],
+      );
+      await createViewSorts(sortsToCreate);
+
+      const sortsToUpdate = nextSorts.filter(
+        (nextSort) =>
+          sortsByKey[nextSort.key] &&
+          sortsByKey[nextSort.key].order !== nextSort.order,
+      );
+      await updateViewSorts(sortsToUpdate);
+
+      const nextSortKeys = nextSorts.map((nextSort) => nextSort.key);
+      const sortKeysToDelete = Object.keys(sortsByKey).filter(
+        (previousSortKey) => !nextSortKeys.includes(previousSortKey),
+      );
+      return deleteViewSorts(sortKeysToDelete);
+    },
+    [
+      createViewSorts,
+      currentViewId,
+      deleteViewSorts,
+      sortsByKey,
+      updateViewSorts,
+    ],
+  );
+
+  return { updateSorts };
+};

front/src/modules/views/queries/create.ts

@@ -19,3 +19,11 @@ export const CREATE_VIEW_FIELDS = gql`
     }
   }
 `;
+
+export const CREATE_VIEW_SORTS = gql`
+  mutation CreateViewSorts($data: [ViewSortCreateManyInput!]!) {
+    createManyViewSort(data: $data) {
+      count
+    }
+  }
+`;

front/src/modules/views/queries/delete.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_VIEW_SORTS = gql`
+  mutation DeleteViewSorts($where: ViewSortWhereInput!) {
+    deleteManyViewSort(where: $where) {
+      count
+    }
+  }
+`;

front/src/modules/views/queries/select.ts

@@ -14,3 +14,13 @@ export const GET_VIEW_FIELDS = gql`
     }
   }
 `;
+
+export const GET_VIEW_SORTS = gql`
+  query GetViewSorts($where: ViewSortWhereInput) {
+    viewSorts: findManyViewSort(where: $where) {
+      direction
+      key
+      name
+    }
+  }
+`;

front/src/modules/views/queries/update.ts

@@ -14,3 +14,16 @@ export const UPDATE_VIEW_FIELD = gql`
     }
   }
 `;
+
+export const UPDATE_VIEW_SORT = gql`
+  mutation UpdateViewSort(
+    $data: ViewSortUpdateInput!
+    $where: ViewSortWhereUniqueInput!
+  ) {
+    viewSort: updateOneViewSort(data: $data, where: $where) {
+      direction
+      key
+      name
+    }
+  }
+`;

front/src/modules/views/states/currentViewIdState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentViewIdState = atom<string | undefined>({
+  key: 'currentViewIdState',
+  default: undefined,
+});

front/src/pages/companies/companies-sorts.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/ui/icon/index';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
-export const availableSorts = [
+export const availableSorts: SortType<Companies_Order_By>[] = [
   {
     key: 'name',
     label: 'Name',
@@ -34,4 +34,4 @@ export const availableSorts = [
     label: 'Creation',
     icon: <IconCalendarEvent size={16} />,
   },
-] satisfies Array<SortType<Companies_Order_By>>;
+];

front/src/pages/people/people-sorts.tsx

@@ -12,19 +12,15 @@ import {
   SortOrder as Order_By,
 } from '~/generated/graphql';
 
-export const availableSorts = [
+export const availableSorts: SortType<People_Order_By>[] = [
   {
     key: 'fullname',
     label: 'People',
     icon: <IconUser size={16} />,
 
-    orderByTemplates: [
-      (order: Order_By) => ({
-        firstName: order,
-      }),
-      (order: Order_By) => ({
-        lastName: order,
-      }),
+    orderByTemplate: (order: Order_By) => [
+      { firstName: order },
+      { lastName: order },
     ],
   },
   {
@@ -32,7 +28,7 @@ export const availableSorts = [
     label: 'Company',
     icon: <IconBuildingSkyscraper size={16} />,
 
-    orderByTemplates: [(order: Order_By) => ({ company: { name: order } })],
+    orderByTemplate: (order: Order_By) => [{ company: { name: order } }],
   },
   {
     key: 'email',
@@ -54,4 +50,4 @@ export const availableSorts = [
     label: 'City',
     icon: <IconMap size={16} />,
   },
-] satisfies Array<SortType<People_Order_By>>;
+];

server/src/ability/ability.factory.ts

@@ -17,8 +17,8 @@ import {
   PipelineStage,
   PipelineProgress,
   UserSettings,
-  ViewField,
   View,
+  ViewField,
   ViewSort,
 } from '@prisma/client';
 
@@ -134,11 +134,22 @@ export class AbilityFactory {
       workspaceId: workspace.id,
     });
 
+    // View
+    can(AbilityAction.Read, 'View', { workspaceId: workspace.id });
+    can(AbilityAction.Create, 'View', { workspaceId: workspace.id });
+    can(AbilityAction.Update, 'View', { workspaceId: workspace.id });
+
     // ViewField
     can(AbilityAction.Read, 'ViewField', { workspaceId: workspace.id });
     can(AbilityAction.Create, 'ViewField', { workspaceId: workspace.id });
     can(AbilityAction.Update, 'ViewField', { workspaceId: workspace.id });
 
+    // ViewSort
+    can(AbilityAction.Read, 'ViewSort', { workspaceId: workspace.id });
+    can(AbilityAction.Create, 'ViewSort', { workspaceId: workspace.id });
+    can(AbilityAction.Update, 'ViewSort', { workspaceId: workspace.id });
+    can(AbilityAction.Delete, 'ViewSort', { workspaceId: workspace.id });
+
     return build();
   }
 }

server/src/ability/ability.module.ts

@@ -99,6 +99,12 @@ import {
   ReadViewFieldAbilityHandler,
   UpdateViewFieldAbilityHandler,
 } from './handlers/view-field.ability-handler';
+import {
+  CreateViewSortAbilityHandler,
+  ReadViewSortAbilityHandler,
+  UpdateViewSortAbilityHandler,
+  DeleteViewSortAbilityHandler,
+} from './handlers/view-sort.ability-handler';
 
 @Global()
 @Module({
@@ -187,6 +193,11 @@ import {
     ReadViewFieldAbilityHandler,
     CreateViewFieldAbilityHandler,
     UpdateViewFieldAbilityHandler,
+    // ViewSort
+    ReadViewSortAbilityHandler,
+    CreateViewSortAbilityHandler,
+    UpdateViewSortAbilityHandler,
+    DeleteViewSortAbilityHandler,
   ],
   exports: [
     AbilityFactory,
@@ -272,6 +283,11 @@ import {
     ReadViewFieldAbilityHandler,
     CreateViewFieldAbilityHandler,
     UpdateViewFieldAbilityHandler,
+    // ViewSort
+    ReadViewSortAbilityHandler,
+    CreateViewSortAbilityHandler,
+    UpdateViewSortAbilityHandler,
+    DeleteViewSortAbilityHandler,
   ],
 })
 export class AbilityModule {}

server/src/ability/handlers/view-sort.ability-handler.ts

@@ -0,0 +1,122 @@
+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 { AbilityAction } from 'src/ability/ability.action';
+import { AppAbility } from 'src/ability/ability.factory';
+import {
+  convertToWhereInput,
+  relationAbilityChecker,
+} from 'src/ability/ability.util';
+import { PrismaService } from 'src/database/prisma.service';
+import { assert } from 'src/utils/assert';
+import { ViewSortWhereUniqueInput } from 'src/core/@generated/view-sort/view-sort-where-unique.input';
+import { ViewSortWhereInput } from 'src/core/@generated/view-sort/view-sort-where.input';
+
+class ViewSortArgs {
+  where?: ViewSortWhereInput | ViewSortWhereUniqueInput;
+  [key: string]: any;
+}
+
+const isViewSortWhereUniqueInput = (
+  input: ViewSortWhereInput | ViewSortWhereUniqueInput,
+): input is ViewSortWhereUniqueInput => 'viewId_key' in input;
+
+@Injectable()
+export class ReadViewSortAbilityHandler implements IAbilityHandler {
+  handle(ability: AppAbility) {
+    return ability.can(AbilityAction.Read, 'ViewSort');
+  }
+}
+
+@Injectable()
+export class CreateViewSortAbilityHandler 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(
+      'ViewSort',
+      ability,
+      this.prismaService.client,
+      args,
+    );
+
+    if (!allowed) {
+      return false;
+    }
+
+    return ability.can(AbilityAction.Create, 'ViewSort');
+  }
+}
+
+@Injectable()
+export class UpdateViewSortAbilityHandler implements IAbilityHandler {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  async handle(ability: AppAbility, context: ExecutionContext) {
+    const gqlContext = GqlExecutionContext.create(context);
+    const args = gqlContext.getArgs<ViewSortArgs>();
+    const viewSort = await this.prismaService.client.viewSort.findFirst({
+      where:
+        args.where && isViewSortWhereUniqueInput(args.where)
+          ? args.where.viewId_key
+          : args.where,
+    });
+    assert(viewSort, '', NotFoundException);
+
+    const allowed = await relationAbilityChecker(
+      'ViewSort',
+      ability,
+      this.prismaService.client,
+      args,
+    );
+
+    if (!allowed) {
+      return false;
+    }
+
+    return ability.can(AbilityAction.Update, subject('ViewSort', viewSort));
+  }
+}
+
+@Injectable()
+export class DeleteViewSortAbilityHandler implements IAbilityHandler {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  async handle(ability: AppAbility, context: ExecutionContext) {
+    const gqlContext = GqlExecutionContext.create(context);
+    const args = gqlContext.getArgs<ViewSortArgs>();
+    const where = convertToWhereInput(
+      args.where && isViewSortWhereUniqueInput(args.where)
+        ? args.where.viewId_key
+        : args.where,
+    );
+    const viewSorts = await this.prismaService.client.viewSort.findMany({
+      where,
+    });
+    assert(viewSorts.length, '', NotFoundException);
+
+    for (const viewSort of viewSorts) {
+      const allowed = ability.can(
+        AbilityAction.Delete,
+        subject('ViewSort', viewSort),
+      );
+
+      if (!allowed) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+}

server/src/ability/handlers/view.ability-handler.ts

@@ -0,0 +1,79 @@
+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 { AbilityAction } from 'src/ability/ability.action';
+import { AppAbility } from 'src/ability/ability.factory';
+import { relationAbilityChecker } from 'src/ability/ability.util';
+import { ViewWhereInput } from 'src/core/@generated/view/view-where.input';
+import { PrismaService } from 'src/database/prisma.service';
+import { assert } from 'src/utils/assert';
+
+class ViewArgs {
+  where?: ViewWhereInput;
+  [key: string]: any;
+}
+
+@Injectable()
+export class ReadViewAbilityHandler implements IAbilityHandler {
+  handle(ability: AppAbility) {
+    return ability.can(AbilityAction.Read, 'View');
+  }
+}
+
+@Injectable()
+export class CreateViewAbilityHandler 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(
+      'View',
+      ability,
+      this.prismaService.client,
+      args,
+    );
+
+    if (!allowed) {
+      return false;
+    }
+
+    return ability.can(AbilityAction.Create, 'View');
+  }
+}
+
+@Injectable()
+export class UpdateViewAbilityHandler implements IAbilityHandler {
+  constructor(private readonly prismaService: PrismaService) {}
+
+  async handle(ability: AppAbility, context: ExecutionContext) {
+    const gqlContext = GqlExecutionContext.create(context);
+    const args = gqlContext.getArgs<ViewArgs>();
+    const view = await this.prismaService.client.view.findFirst({
+      where: args.where,
+    });
+    assert(view, '', NotFoundException);
+
+    const allowed = await relationAbilityChecker(
+      'View',
+      ability,
+      this.prismaService.client,
+      args,
+    );
+
+    if (!allowed) {
+      return false;
+    }
+
+    return ability.can(AbilityAction.Update, subject('View', view));
+  }
+}

server/src/core/view/resolvers/view-sort.resolver.spec.ts

@@ -0,0 +1,32 @@
+import { Test, TestingModule } from '@nestjs/testing';
+
+import { ViewSortService } from 'src/core/view/services/view-sort.service';
+import { AbilityFactory } from 'src/ability/ability.factory';
+
+import { ViewSortResolver } from './view-sort.resolver';
+
+describe('ViewSortResolver', () => {
+  let resolver: ViewSortResolver;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        ViewSortResolver,
+        {
+          provide: ViewSortService,
+          useValue: {},
+        },
+        {
+          provide: AbilityFactory,
+          useValue: {},
+        },
+      ],
+    }).compile();
+
+    resolver = module.get<ViewSortResolver>(ViewSortResolver);
+  });
+
+  it('should be defined', () => {
+    expect(resolver).toBeDefined();
+  });
+});

server/src/core/view/resolvers/view-sort.resolver.ts

@@ -0,0 +1,102 @@
+import { UseGuards } from '@nestjs/common';
+import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';
+
+import { accessibleBy } from '@casl/prisma';
+import { Prisma, Workspace } from '@prisma/client';
+
+import { AppAbility } from 'src/ability/ability.factory';
+import {
+  CreateViewSortAbilityHandler,
+  DeleteViewSortAbilityHandler,
+  ReadViewSortAbilityHandler,
+  UpdateViewSortAbilityHandler,
+} from 'src/ability/handlers/view-sort.ability-handler';
+import { FindManyViewSortArgs } from 'src/core/@generated/view-sort/find-many-view-sort.args';
+import { ViewSort } from 'src/core/@generated/view-sort/view-sort.model';
+import { ViewSortService } from 'src/core/view/services/view-sort.service';
+import { CheckAbilities } from 'src/decorators/check-abilities.decorator';
+import {
+  PrismaSelect,
+  PrismaSelector,
+} from 'src/decorators/prisma-select.decorator';
+import { UserAbility } from 'src/decorators/user-ability.decorator';
+import { AbilityGuard } from 'src/guards/ability.guard';
+import { JwtAuthGuard } from 'src/guards/jwt.auth.guard';
+import { UpdateOneViewSortArgs } from 'src/core/@generated/view-sort/update-one-view-sort.args';
+import { AuthWorkspace } from 'src/decorators/auth-workspace.decorator';
+import { AffectedRows } from 'src/core/@generated/prisma/affected-rows.output';
+import { DeleteManyViewSortArgs } from 'src/core/@generated/view-sort/delete-many-view-sort.args';
+import { CreateManyViewSortArgs } from 'src/core/@generated/view-sort/create-many-view-sort.args';
+
+@UseGuards(JwtAuthGuard)
+@Resolver(() => ViewSort)
+export class ViewSortResolver {
+  constructor(private readonly viewSortService: ViewSortService) {}
+
+  @Mutation(() => AffectedRows)
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(CreateViewSortAbilityHandler)
+  async createManyViewSort(
+    @Args() args: CreateManyViewSortArgs,
+    @AuthWorkspace() workspace: Workspace,
+  ): Promise<AffectedRows> {
+    return this.viewSortService.createMany({
+      data: args.data.map((data) => ({
+        ...data,
+        workspaceId: workspace.id,
+      })),
+    });
+  }
+
+  @Query(() => [ViewSort])
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(ReadViewSortAbilityHandler)
+  async findManyViewSort(
+    @Args() args: FindManyViewSortArgs,
+    @UserAbility() ability: AppAbility,
+    @PrismaSelector({ modelName: 'ViewSort' })
+    prismaSelect: PrismaSelect<'ViewSort'>,
+  ): Promise<Partial<ViewSort>[]> {
+    return this.viewSortService.findMany({
+      where: args.where
+        ? {
+            AND: [args.where, accessibleBy(ability).ViewSort],
+          }
+        : accessibleBy(ability).ViewSort,
+      orderBy: args.orderBy,
+      cursor: args.cursor,
+      take: args.take,
+      skip: args.skip,
+      distinct: args.distinct,
+      select: prismaSelect.value,
+    });
+  }
+
+  @Mutation(() => ViewSort)
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(UpdateViewSortAbilityHandler)
+  async updateOneViewSort(
+    @Args() args: UpdateOneViewSortArgs,
+    @PrismaSelector({ modelName: 'ViewSort' })
+    prismaSelect: PrismaSelect<'ViewSort'>,
+  ): Promise<Partial<ViewSort>> {
+    return this.viewSortService.update({
+      data: args.data,
+      where: args.where,
+      select: prismaSelect.value,
+    } as Prisma.ViewSortUpdateArgs);
+  }
+
+  @Mutation(() => AffectedRows, {
+    nullable: false,
+  })
+  @UseGuards(AbilityGuard)
+  @CheckAbilities(DeleteViewSortAbilityHandler)
+  async deleteManyViewSort(
+    @Args() args: DeleteManyViewSortArgs,
+  ): Promise<AffectedRows> {
+    return this.viewSortService.deleteMany({
+      where: args.where,
+    });
+  }
+}

server/src/core/view/services/view-sort.service.spec.ts

@@ -0,0 +1,28 @@
+import { Test, TestingModule } from '@nestjs/testing';
+
+import { PrismaService } from 'src/database/prisma.service';
+import { prismaMock } from 'src/database/client-mock/jest-prisma-singleton';
+
+import { ViewSortService } from './view-sort.service';
+
+describe('ViewSortService', () => {
+  let service: ViewSortService;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        ViewSortService,
+        {
+          provide: PrismaService,
+          useValue: prismaMock,
+        },
+      ],
+    }).compile();
+
+    service = module.get<ViewSortService>(ViewSortService);
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+});

server/src/core/view/services/view-sort.service.ts

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

server/src/core/view/view.module.ts

@@ -2,8 +2,15 @@ import { Module } from '@nestjs/common';
 
 import { ViewFieldService } from './services/view-field.service';
 import { ViewFieldResolver } from './resolvers/view-field.resolver';
+import { ViewSortService } from './services/view-sort.service';
+import { ViewSortResolver } from './resolvers/view-sort.resolver';
 
 @Module({
-  providers: [ViewFieldService, ViewFieldResolver],
+  providers: [
+    ViewFieldService,
+    ViewSortService,
+    ViewFieldResolver,
+    ViewSortResolver,
+  ],
 })
 export class ViewModule {}