TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feedbackmember+detail+review

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-24 16:56:38 +07:00
parent fdfb603c54
commit bb5db5019d
5 changed files with 568 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx
View File

@ -2,10 +2,11 @@ import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { apiConfig } from '@/config/api.config';
import { useCallApi } from '@/hooks';
import { ColumnDef } from '@tanstack/react-table';
import React, { createContext, useCallback, useMemo, useState } from 'react';
import React, { createContext, useCallback, useMemo, useState, useEffect } from 'react';
import { Toaster } from 'sonner';
// import FeedbackDetail from './blocks/FeedbackDetail';
import FeedbackDetail from '../blocks/FeedbackDetail';
import FeedbackEditDialog from '../blocks/EditDialog';
import { useNavigate } from 'react-router';
interface feedbackProps {
id: string;
@ -17,17 +18,20 @@ interface feedbackProps {
agentId: string;
}
interface FetchParams {
pageIndex: number;
pageSize: number;
sorting: any[];
columnFilters: any[];
}
interface ContextProps {
feedback: feedbackProps[];
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_sucos: string | null) => void;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void;
showDetailDialog: boolean;
handleDetailDialog: (show: boolean, selected_sucos: string | null) => void;
selectedfeedback: string | null;
handleDetailDialog: (show: boolean, selected_feedback: string | null) => void;
selectedFeedback: string | null;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_feedback: string | null) => void;
getfeedbackLists: (
limit: number,
page: number,
@ -35,20 +39,18 @@ interface ContextProps {
order_field: any,
order_direction: any
) => Promise<{ data: feedbackProps[]; totalCount: number } | undefined>;
refreshData: () => void;
}
const initialProps: ContextProps = {
feedback: [],
showEditDialog: false,
handleEditDialog: () => {},
showAddDialog: false,
handleAddDialog: () => {},
showDeleteDialog: false,
handleDeleteDialog: () => {},
showDetailDialog: false,
handleDetailDialog: () => {},
selectedfeedback: null,
getfeedbackLists: async () => undefined
selectedFeedback: null,
showEditDialog: false,
handleEditDialog: () => {},
getfeedbackLists: async () => undefined,
refreshData: () => {}
};
const ManageFeedbackMemberContext = createContext<ContextProps>(initialProps);
@ -60,32 +62,37 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [selectedfeedback, setSelectedfeedback] = useState<string | null>(null);
const [selectedFeedback, setSelectedFeedback] = useState<string | null>(null);
const { GetData } = useCallApi();
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [lastFetchParams, setLastFetchParams] = useState<FetchParams | null>(null);
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_feedback: string | null) => {
setShowEditDialog(show);
setSelectedfeedback(show ? selected_feedback : null);
}, []);
const handleDeleteDialog = useCallback((show: boolean, selected_feedback: string | null) => {
setShowDeleteDialog(show);
setSelectedfeedback(show ? selected_feedback : null);
}, []);
const handleDetailDialog = useCallback((show: boolean, selected_feedback: string | null) => {
setShowDetailDialog(show);
setSelectedfeedback(show ? selected_feedback : null);
setSelectedFeedback(show ? selected_feedback : null);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_feedback: string | null) => {
setShowEditDialog(show);
if (show) {
setSelectedFeedback(selected_feedback);
}
}, []);
const refreshData = useCallback(() => {
setRefreshTrigger((prev) => prev + 1);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.customer,
accessorFn: (row) => row.customerid,
id: 'customer_id',
header: ({ column }) => <DataGridColumnHeader title="Customer Name" column={column} />,
enableSorting: false,
@ -95,7 +102,7 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
}
},
{
accessorFn: (row) => row.Feedback_emotion,
accessorFn: (row) => row.feedbacks_emotion,
id: 'feedback_emotion',
header: ({ column }) => <DataGridColumnHeader title="Emotion" column={column} />,
enableSorting: false,
@ -105,7 +112,7 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
}
},
{
accessorFn: (row) => row.Feedback_feedback_notes,
accessorFn: (row) => row.feedbacks_feedback_notes,
id: 'feedback_notes',
header: ({ column }) => <DataGridColumnHeader title="Feedback Notes" column={column} />,
enableSorting: false,
@ -125,25 +132,14 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
<>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDetailDialog(true, row.Feedback_id)}
onClick={() => {
setSelectedFeedback(row.feedbacks_id);
handleDetailDialog(true, row.feedbacks_id);
}}
title="View Details"
>
<KeenIcon icon="eye" />
</button>
{/* <button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row.Feedback_id)}
title="Edit"
>
<KeenIcon icon="notepad-edit" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row.Feedback_id)}
title="Delete"
>
<KeenIcon icon="trash" />
</button> */}
</>
);
},
@ -153,20 +149,26 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
}
}
],
[handleEditDialog, handleDeleteDialog, handleDetailDialog]
[]
);
const getfeedbackLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
setLastFetchParams({
pageIndex: page,
pageSize: limit,
sorting: sorting,
columnFilters: filter
});
sorting = sorting.length == 0 ? [{ id: 'feedbacks_created_at', desc: true }] : sorting;
filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
const response = await GetData(`${API_URL}/feedback/list`, {
limit,
page: page + 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
// filter: JSON.stringify(filter)
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// console.log(response?.data);
setFeedback(response?.data.list);
@ -176,37 +178,37 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
}
};
useEffect(() => {
if (refreshTrigger > 0 && lastFetchParams) {
getfeedbackLists(
lastFetchParams.pageIndex,
lastFetchParams.pageSize,
lastFetchParams.sorting,
lastFetchParams.columnFilters
);
}
}, [refreshTrigger]);
return (
<ManageFeedbackMemberContext.Provider
value={{
feedback,
showEditDialog,
handleEditDialog,
showAddDialog,
handleAddDialog,
showDeleteDialog,
handleDeleteDialog,
showDetailDialog,
handleDetailDialog,
selectedfeedback,
getfeedbackLists
selectedFeedback,
showEditDialog,
handleEditDialog,
getfeedbackLists,
refreshData
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
{/* Feedback Detail Modal Component */}
<FeedbackDetail
showDialog={showDetailDialog}
handleDialog={(show) => handleDetailDialog(show, show ? selectedfeedback : null)}
feedbackId={selectedfeedback}
/>
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
// toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]}
sorting={[{ id: 'feedbacks_created_at', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getfeedbackLists(pageIndex, pageSize, sorting, columnFilters)
@ -219,4 +221,4 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
};
export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider };
export type { feedbackProps };
export type { feedbackProps };

4
src/pages/members/feedback-member/hooks/useManageFeedbackMemberContext.tsx
View File

@ -1,7 +1,7 @@
import { useContext } from 'react';
import { ManageFeedbackMemberContext } from './ManageFeedbackMemberContext';
const useManageProviderContext = () => {
const useManageFeedbackContext = () => {
const context = useContext(ManageFeedbackMemberContext);
if (!context) throw new Error('useManageProviderContext must be used within AuthProvider');
@ -9,4 +9,4 @@ const useManageProviderContext = () => {
return context;
};
export { useManageProviderContext };
export { useManageFeedbackContext };