Merge pull request #2015 from ever-co/feat/cardOrder

Feat/cardOrder:  make cards element (of list view) draggable

.cspell.json

@@ -311,7 +311,8 @@
 		"plasmohq",
 		"Proguard",
 		"horcrux",
-		"dimesions"
+		"dimesions",
+		"Ordereds"
 	],
 	"useGitignore": true,
 	"ignorePaths": [

apps/mobile/app/services/client/requests/organization-team.ts

@@ -1,42 +1,39 @@
 /* eslint-disable camelcase */
-import moment from "moment"
-import { PaginationResponse } from "../../interfaces/IDataResponse"
+import moment from 'moment';
+import { PaginationResponse } from '../../interfaces/IDataResponse';
 import {
 	IOrganizationTeam,
 	IOrganizationTeamCreate,
 	IOrganizationTeamList,
 	IOrganizationTeamUpdate,
-	IOrganizationTeamWithMStatus,
-} from "../../interfaces/IOrganizationTeam"
-import { serverFetch } from "../fetch"
+	IOrganizationTeamWithMStatus
+} from '../../interfaces/IOrganizationTeam';
+import { serverFetch } from '../fetch';
 
-export function createOrganizationTeamRequest(
-	datas: IOrganizationTeamCreate,
-	bearer_token: string,
-) {
+export function createOrganizationTeamRequest(datas: IOrganizationTeamCreate, bearer_token: string) {
 	return serverFetch<IOrganizationTeam>({
-		path: "/organization-team",
-		method: "POST",
+		path: '/organization-team',
+		method: 'POST',
 		body: datas,
-		bearer_token,
-	})
+		bearer_token
+	});
 }
 
 export function updateOrganizationTeamRequest({
 	id,
 	datas,
-	bearer_token,
+	bearer_token
 }: {
-	datas: IOrganizationTeamList | IOrganizationTeamCreate
-	id: string
-	bearer_token: string
+	datas: IOrganizationTeamList | IOrganizationTeamCreate;
+	id: string;
+	bearer_token: string;
 }) {
 	return serverFetch<IOrganizationTeamList>({
 		path: `/organization-team/${id}`,
-		method: "PUT",
+		method: 'PUT',
 		body: datas,
-		bearer_token,
-	})
+		bearer_token
+	});
 }
 
 export function getOrganizationTeamRequest(
@@ -45,131 +42,131 @@ export function getOrganizationTeamRequest(
 		tenantId,
 		teamId,
 		relations = [
-			"members",
-			"members.role",
-			"members.employee",
-			"members.employee.user",
-			"createdBy",
-			"createdBy.employee",
-			"projects",
-		],
+			'members',
+			'members.role',
+			'members.employee',
+			'members.employee.user',
+			'createdBy',
+			'createdBy.employee',
+			'projects'
+		]
 	}: TeamRequestParams & { teamId: string },
-	bearer_token: string,
+	bearer_token: string
 ) {
 	const params = {
 		organizationId,
 		tenantId,
 		// source: "BROWSER",
-		withLaskWorkedTask: "true",
-		startDate: moment().startOf("day").toISOString(),
-		endDate: moment().endOf("day").toISOString(),
-		includeOrganizationTeamId: "false",
-	} as { [x: string]: string }
+		withLaskWorkedTask: 'true',
+		startDate: moment().startOf('day').toISOString(),
+		endDate: moment().endOf('day').toISOString(),
+		includeOrganizationTeamId: 'false'
+	} as { [x: string]: string };
 
 	relations.forEach((rl, i) => {
-		params[`relations[${i}]`] = rl
-	})
+		params[`relations[${i}]`] = rl;
+	});
 
-	const queries = new URLSearchParams(params || {})
+	const queries = new URLSearchParams(params || {});
 	return serverFetch<IOrganizationTeamWithMStatus>({
 		path: `/organization-team/${teamId}?${queries.toString()}`,
-		method: "GET",
+		method: 'GET',
 		bearer_token,
-		tenantId,
-	})
+		tenantId
+	});
 }
 
 type TeamRequestParams = {
-	organizationId: string
-	tenantId: string
-	relations?: string[]
-}
+	organizationId: string;
+	tenantId: string;
+	relations?: string[];
+};
 
 export function getAllOrganizationTeamRequest(
 	{
 		organizationId,
 		tenantId,
 		relations = [
-			"members",
-			"members.role",
-			"members.employee",
-			"members.employee.user",
-			"createdBy",
-			"createdBy.employee",
-		],
+			'members',
+			'members.role',
+			'members.employee',
+			'members.employee.user',
+			'createdBy',
+			'createdBy.employee'
+		]
 	}: TeamRequestParams,
-	bearer_token: string,
+	bearer_token: string
 ) {
 	const params = {
-		"where[organizationId]": organizationId,
-		"where[tenantId]": tenantId,
-		source: "BROWSER",
-		withLaskWorkedTask: "true",
-	} as { [x: string]: string }
+		'where[organizationId]': organizationId,
+		'where[tenantId]': tenantId,
+		source: 'BROWSER',
+		withLaskWorkedTask: 'true'
+	} as { [x: string]: string };
 
 	relations.forEach((rl, i) => {
-		params[`relations[${i}]`] = rl
-	})
+		params[`relations[${i}]`] = rl;
+	});
 
-	const query = new URLSearchParams(params)
+	const query = new URLSearchParams(params);
 
 	return serverFetch<PaginationResponse<IOrganizationTeamList>>({
 		path: `/organization-team?${query.toString()}`,
-		method: "GET",
+		method: 'GET',
 		bearer_token,
-		tenantId,
-	})
+		tenantId
+	});
 }
 
 export function removeEmployeeOrganizationTeamRequest({
 	employeeId,
 	bearer_token,
-	tenantId,
+	tenantId
 }: {
-	employeeId: string
-	bearer_token: string
-	tenantId: string
+	employeeId: string;
+	bearer_token: string;
+	tenantId: string;
 }) {
 	return serverFetch<boolean>({
 		path: `/organization-team-employee/${employeeId}`,
-		method: "DELETE",
+		method: 'DELETE',
 		bearer_token,
-		tenantId,
-	})
+		tenantId
+	});
 }
 
 export function removeUserFromAllTeam({
 	userId,
 	bearer_token,
-	tenantId,
+	tenantId
 }: {
-	userId: string
-	bearer_token: string
-	tenantId: string
+	userId: string;
+	bearer_token: string;
+	tenantId: string;
 }) {
 	return serverFetch({
 		path: `/organization-team/teams/${userId}`,
-		method: "DELETE",
+		method: 'DELETE',
 		bearer_token,
-		tenantId,
-	})
+		tenantId
+	});
 }
 
 export function deleteOrganizationTeamRequest({
 	id,
 	bearer_token,
 	tenantId,
-	organizationId,
+	organizationId
 }: {
-	id: string
-	bearer_token: string
-	tenantId: string
-	organizationId: string
+	id: string;
+	bearer_token: string;
+	tenantId: string;
+	organizationId: string;
 }) {
 	return serverFetch<IOrganizationTeamUpdate>({
 		path: `/organization-team/${id}?organizationId=${organizationId}`,
-		method: "DELETE",
+		method: 'DELETE',
 		bearer_token,
-		tenantId,
-	})
+		tenantId
+	});
 }

apps/web/app/hooks/features/useOrganizatioTeamsEmployee.ts

@@ -1,4 +1,4 @@
-import { IOrganizationTeamEmployeeUpdate } from '@app/interfaces';
+import { IOrganizationTeamEmployeeUpdate, OT_Member } from '@app/interfaces';
 import {
 	deleteOrganizationEmployeeTeamAPI,
 	updateOrganizationEmployeeTeamAPI,
@@ -7,9 +7,13 @@ import {
 import { useCallback } from 'react';
 import { useQuery } from '../useQuery';
 import { useOrganizationTeams } from './useOrganizationTeams';
+import { editEmployeeOrderOrganizationTeamAPI } from '@app/services/client/api';
+import { userState } from '@app/stores';
+import { useRecoilState } from 'recoil';
 
 export function useOrganizationEmployeeTeams() {
 	const { loadTeamsData } = useOrganizationTeams();
+	const [user] = useRecoilState(userState);
 
 	const { loading: deleteOrganizationEmployeeTeamLoading, queryCall: deleteQueryCall } = useQuery(
 		deleteOrganizationEmployeeTeamAPI
@@ -19,6 +23,10 @@ export function useOrganizationEmployeeTeams() {
 		updateOrganizationEmployeeTeamAPI
 	);
 
+	const { loading: editEmployeeIndexOrganizationTeamLoading, queryCall: updateOrderCall } = useQuery(
+		editEmployeeOrderOrganizationTeamAPI
+	);
+
 	const {
 		loading: updateOrganizationTeamEmployeeActiveTaskLoading,
 		queryCall: updateOrganizationTeamEmployeeActiveTaskQueryCall
@@ -59,6 +67,25 @@ export function useOrganizationEmployeeTeams() {
 		[loadTeamsData, updateQueryCall]
 	);
 
+	const updateOrganizationTeamEmployeeOrderOnList = useCallback(
+		(employee: OT_Member, order: number) => {
+			updateOrderCall(
+				employee.id,
+				{
+					order,
+					organizationTeamId: employee.organizationTeamId,
+					organizationId: employee.organizationId
+				},
+				user?.tenantId || ''
+			).then((res) => {
+				loadTeamsData();
+				return res;
+			});
+		},
+
+		[loadTeamsData, updateOrderCall, user]
+	);
+
 	const updateOrganizationTeamEmployeeActiveTask = useCallback(
 		(id: string, data: Partial<IOrganizationTeamEmployeeUpdate>) => {
 			updateOrganizationTeamEmployeeActiveTaskQueryCall(id, data).then((res) => {
@@ -75,6 +102,8 @@ export function useOrganizationEmployeeTeams() {
 		updateOrganizationEmployeeTeamLoading,
 		updateOrganizationTeamEmployee,
 		updateOrganizationTeamEmployeeActiveTaskLoading,
-		updateOrganizationTeamEmployeeActiveTask
+		updateOrganizationTeamEmployeeActiveTask,
+		editEmployeeIndexOrganizationTeamLoading,
+		updateOrganizationTeamEmployeeOrderOnList
 	};
 }

apps/web/app/interfaces/IOrganizationEmployeeTeam.ts

@@ -9,6 +9,7 @@ export interface IOrganizationTeamEmployeeCreate {
 	roleId?: string;
 	isTrackingEnabled?: boolean;
 	activeTaskId?: string;
+	order?: number;
 }
 export interface IOrganizationTeamEmployeeUpdate extends IOrganizationTeamEmployeeCreate {
 	id: string;

apps/web/app/interfaces/IOrganizationTeam.ts

@@ -66,6 +66,7 @@ export type IOrganizationTeamWithMStatus = IOrganizationTeamList;
 
 export interface OT_Member {
 	id: string;
+	order?: number;
 	createdAt: string;
 	updatedAt: string;
 	tenantId: any;

apps/web/app/services/client/api/organization-team.ts

@@ -5,7 +5,8 @@ import {
 	IOrganizationTeamWithMStatus,
 	IOrganizationTeamUpdate,
 	IOrganizationTeam,
-	TimerSource
+	TimerSource,
+	OT_Member
 } from '@app/interfaces';
 import moment from 'moment';
 import api, { get } from '../axios';
@@ -92,6 +93,16 @@ export function removeEmployeeOrganizationTeamAPI(employeeId: string) {
 	return api.delete<boolean>(`/organization-team/employee/${employeeId}`);
 }
 
+export function editEmployeeOrderOrganizationTeamAPI(
+	employeeId: string,
+	data: { order: number; organizationTeamId: string; organizationId: string },
+	tenantId?: string
+) {
+	return api.put<CreateResponse<OT_Member>>(`/organization-team/employee/${employeeId}`, data, {
+		headers: { 'Tenant-Id': tenantId }
+	});
+}
+
 export function removeUserFromAllTeamAPI(userId: string) {
 	return api.delete<DeleteResponse | CreateResponse<ISuccessResponse>>(`/organization-team/teams/${userId}`);
 }