Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DataTable Vue component with Editor and CSV export #4322

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+881 −0
Draft

DataTable Vue component with Editor and CSV export #4322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ public-hoist-pattern[]=*postcss*
public-hoist-pattern[]=@commitlint/*
public-hoist-pattern[]=czg

@datatables.net:registry=https://npm.datatables.net/
//npm.datatables.net/:_authToken=415ADA5E9172159FF08BBACB305D0139185F536053F169CDC4A66ACB7ADA8BC5
Comment on lines +11 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security Concern: Exposed Authentication Token

The authentication token for the Datatables npm registry is exposed in the .npmrc file. This poses a significant security risk as it could potentially allow unauthorized access to the npm registry and sensitive operations.

Consider using environment variables to store sensitive information such as authentication tokens. This approach would prevent the token from being exposed in the version control system. Here's a suggested change:

-//npm.datatables.net/:_authToken=415ADA5E9172159FF08BBACB305D0139185F536053F169CDC4A66ACB7ADA8BC5
+//npm.datatables.net/:_authToken=${DATATABLES_AUTH_TOKEN}

Ensure that the DATATABLES_AUTH_TOKEN environment variable is securely set in your CI/CD pipeline or local development environment.

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@datatables.net:registry=https://npm.datatables.net/
//npm.datatables.net/:_authToken=415ADA5E9172159FF08BBACB305D0139185F536053F169CDC4A66ACB7ADA8BC5
@datatables.net:registry=https://npm.datatables.net/
//npm.datatables.net/:_authToken=${DATATABLES_AUTH_TOKEN}


strict-peer-dependencies=false
auto-install-peers=true
dedupe-peer-dependents=true
5 changes: 5 additions & 0 deletions apps/backend-mock/api/data_table/list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { MOCK_ORDERS } from '~/utils/mock-data';

export default eventHandler((event) => {
return useResponseSuccess(MOCK_ORDERS);
});
Comment on lines +3 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review the event handler implementation.

The implementation of the event handler is concise and appears to correctly return a success response with mock data. However, consider the following improvements:

  • Error Handling: Even though this is a mock setup, adding basic error handling could make this more robust and prevent potential issues during development.
  • Documentation: Adding a brief comment explaining the purpose of this endpoint and what MOCK_ORDERS contains can improve maintainability and readability.

21 changes: 21 additions & 0 deletions apps/backend-mock/api/data_table/update.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { OrderInfo, MOCK_ORDERS } from '~/utils/mock-data';

export default defineEventHandler(async (event) => {
const { action, data } = await readBody(event);
if (!action || !data) {
setResponseStatus(event, 400);
return useResponseError(
'BadRequestException',
'action and row data are required',
);
}

const findOrder = MOCK_ORDERS.find(
(item) => item.id === data['id'],
);

// const codes =
// MOCK_CODES.find((item) => item.username === userinfo.username)?.codes ?? [];
Comment on lines +17 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Address commented code.

The commented-out code related to MOCK_CODES should either be removed or clarified with a comment explaining its purpose. Leaving unused code can lead to confusion and maintenance issues.


return useResponseSuccess(findOrder);
});
Comment on lines +3 to +21
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enhance error handling and data validation.

Consider the following improvements:

  • Add more specific error messages based on missing parameters (action or data).
  • Validate the data object to ensure it contains all necessary fields before processing.
  • Since findOrder may return undefined if no matching order is found, handle this case explicitly to avoid sending undefined data as a successful response.

48 changes: 48 additions & 0 deletions apps/backend-mock/utils/mock-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,54 @@ export const MOCK_USERS: UserInfo[] = [
},
];

export interface OrderInfo {
id: number;
rid: string;
openOrder: number;
destroyOrder: number;
sort: string;
time: number;
}

export const MOCK_ORDERS: OrderInfo[] = [
{ id: 1, rid: 'UX-23492349244', openOrder: 0, destroyOrder: 1, sort: 'A', time: 320800 },
{ id: 2, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 0, sort: 'B', time: 320800 },
{ id: 3, rid: 'CU-3492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 4, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'A', time: 320800 },
{ id: 5, rid: 'AX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 6, rid: 'BU-23492349244', openOrder: 0, destroyOrder: 1, sort: 'B', time: 320800 },
{ id: 7, rid: 'UX-23492349244', openOrder: 0, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 8, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'D', time: 320800 },
{ id: 9, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 10, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 11, rid: 'UX-5592349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 12, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 13, rid: 'UX-235492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 14, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 15, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 16, rid: 'UX-5164921649244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 17, rid: 'UX-2317923417244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 18, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 19, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 20, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 21, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 22, rid: 'UX-23492349244', openOrder: 0, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 23, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 24, rid: 'UX-43492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 25, rid: 'UX-23492349244', openOrder: 0, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 26, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 27, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 28, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 29, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 30, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 31, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 32, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 33, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 0, sort: 'C', time: 320800 },
{ id: 34, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
{ id: 35, rid: 'UX-23492349244', openOrder: 1, destroyOrder: 1, sort: 'C', time: 320800 },
// Add more rows as needed
];

export const MOCK_CODES = [
// super
{
Expand Down
Loading
Loading