-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
메타데이터 테이블에서 개선해야 할 기능들 #278
Comments
이 부분은 프론트에서 구현하는 것은 데이터가 수정 불가능한지 따로 파악하기가 어렵기 때문에 매우 어렵다. 프론트에서는 지금처럼 모든 컬럼을 수정할 수 있도록 유지하며, Update API를 요청받은 벡엔드에서 만약 일관성이 위반되는 요청을 받을 경우 적절한 에러메시지를 응답하고 프론트에서는 이를 alert로 처리하는게 좋을 것 같다. @leeseungmin4966 벡엔드 참고바람 |
이와 관련된 버그가 현재 확인되므로 #279 참조, 버그 수정 후 해당사항에 대한 리팩토링을 진행해야 할 듯 하다. |
이건 우선 에러를 해결하고 같이 리팩토링 해보면 좋을 것 같다. |
현재 이 부분을 어떻게 처리할 지 나도 고민이다. 만약 페이지네이션을 구현한다면 언급한 전체 선택 관련 기능 뿐만 아니라, 전체 통계 뷰를 파악하는데도 한계가 있을 것 같다. 만약 페이지네이션을 구현한다면 통계와 관련된 테이터를 조회하는 API를 따로 생성해야 하고, 전체 선택 관련 기능을 위한 API 도 따로 생성해주어야 할 것 같다. 그러나 현재 실사용 중인 프로젝트의 최대 메타데이터가 25000개 정도인데, 사용에 불편함이 없을 정도이기 때문에 에러 수정 작업을 우선한다. |
오... 근데 이슈를 생각하는 깊이가 엄청 성장했네 대단하다. 잘 성장하는게 나중에 회사가면 이쁨 많이 받겠는데? |
이게 다 보고 배울 선배가 있기 때문 아닙니까😉 아직 부족하니 더 가르쳐주십쇼🙏🏻 |
Description
1. Row Editing Detail
현재 Row Editing 시 해당 Row의 모든 Column 값을 수정하고 저장할 수 있다. 하지만
anonymized_id
처럼 변경되면 안 되는 필드값이 존재하므로 특정 Column은 데이터를 수정할 수 없도록 막아야 한다.2. Table Updating
Row Deleting 또는 Row Editing 직후 테이블이 자동으로 업데이트되도록 수정해야 한다. 리팩토링 전 기존 테이블에서는 Page 컴포넌트에
meteDataUpdated
state를 두어서 메타데이터에 변화가 생기면 테이블 컴포넌트에서setMetaDataUpdated(!metaDataUpdated)
를 시행하여 테이블 자체를 새로 불러오도록 아래 코드를 작성했다.하지만 이 방법을 사용하면 로딩 화면으로 바뀌었다가 테이블이 다시 나타나므로 사용자가 원래 테이블에서 어떤 값을 보고 있었는지, 어디를 수정했는지 시선을 놓치는 등 사용자 경험이 떨어질 수 있다. 따라서 테이블에서 데이터만 새로 로딩할 수 있도록 로직을 바꾸면 좋겠다.
3. Convert String to Number
현재 백엔드에서 API로 받아온 메타데이터는 value가 모두
string
type이기 때문에 다음과 같은 문제가 발생한다.Column Sorting 기능을 사용하면 숫자 데이터가 문자열 비교 형식으로 데이터 정렬이 이루어진다.
Column Filtering 시
10 < 찾는 값 < 20
형태의 숫자 범위 검색을 할 수 없다.따라서 숫자 형태의 문자열 데이터는 숫자로 parsing해서 테이블의 dataSource로 사용해야 한다.
4. Split Table Toolbar Component
MetaDataGrid
컴포넌트가 담고 있는 코드의 양이 많아서 가독성이 떨어지므로 Table Toolbar 컴포넌트를 분리하여 따로 관리하고 싶다. 하지만 컴포넌트를 분리했더니 화면에 Table Toolbar 자체가 나타나지 않았다. 시도해본 방법은 다음과 같다.MetaDataGrid
에 분리한 컴포넌트 삽입component
[1] property로 전달menuItemComponent
[2] property로 전달menuItemRender
[3] property로 전달menuItemTemplate
[4] property로 전달render
[5] property로 전달template
[6] property로 전달Data Grid Toolbar 컴포넌트를 분리할 수 있는 다른 방법을 찾아봐야 한다.
5. Lazy Loading
메타데이터 테이블에서 지금처럼 Client-Side Pagination을 사용하면 메타데이터의 개수가 증가함에 따라 테이블 로딩 시간이 길어지는 문제가 발생한다. 따라서 #272 (comment) 를 참고하여 Data Grid가 Server-Side Pagination으로 동작하도록 변경해야 한다.
하지만 테이블 데이터를 한 페이지씩만 불러오게 된다면 테이블 전체 선택과 관련된 기능들(CSV/Dicom Download, Delete)은 어떻게 처리해야 할지 고민해봐야 한다.
Solution
방법을 찾아보면서 조금씩 추가할 예정
Reference
[1] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#component
[2] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemComponent
[3] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemRender
[4] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#menuItemTemplate
[5] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#render
[6] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#template
The text was updated successfully, but these errors were encountered: