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

feat(FE, BE): Contest list design change / use group permission #305

Merged
merged 47 commits into from
Mar 9, 2022
Merged

feat(FE, BE): Contest list design change / use group permission #305

merged 47 commits into from
Mar 9, 2022

Conversation

jimin9038
Copy link
Member

@jimin9038 jimin9038 commented Feb 17, 2022 •
edited
Loading

1. Backend Changes

ContestPrize 관련은 #311 참고해주세요~

Models

  • contest 모델에 contest summary에 해당하는 필드(requirements, constraints, scoring, prizes)를 추가하였습니다.
  • allowed_groups의 경우는 해당 contest를 풀 수 있는 그룹을 지정하는 필드이고, 비어있다면 모든 유저가 문제를 풀 수 있도록 하였습니다.

Views

  • Admin ContestAPI: allowed_groups 데이터를 통해 해당 contest에 허락된 그룹을 지정해주었습니다.
  • oj ContestListAPI: Contest List get에서 대회 현재 참가자 수를 보여주기 위한 데이터를 추가하였습니다. (현재 contest는 acmcontestrank만 사용하여 oicontestrank는 카운트하지 않았습니다.)
  • GroupAdminAPI post: Admin이 Group을 직접 만들 수 있는 API를 만들었습니다. (post는 아직 프론트에서 사용하지는 않고, 테스트의 용이성을 위하여 있는 것이라 생각하면 좋을 것 같습니다.)
  • GroupAdminAPI get: Admin이 모든 Group을 가져올 수 있도록 하였습니다. (oj의 GroupAPI는 유저가 속한 그룹과 어드민으로 속한 그룹, 다른 그룹들로 나눠서 반환하지만 admin은 나누지 않고 반환합니다.)

Decorators

  • 대회에 allowed_groups가 지정되어 있는 경우 유저가 해당 대회의 allowed_groups 중 하나에라도 속해 있는지 확인하는 과정을 추가하였습니다.

2. Frontend Changes

Contest.vue (Admin)

  • contest summary에 해당하는 폼(requirements, constraints, scoring, prizes)을 추가하였습니다.
  • allowed_groups의 경우는 multiple form input을 사용하여 여러 개의 그룹에 대해서 허용할 수 있도록하였습니다.

group.js

  • vuex를 통해 그룹 리스트를 관리합니다.

(New!) ContestInformation.vue

  • 레이아웃 컴포넌트로, Contest Summary와 description 등을 받아 아래와 같이 보여주는 컴포넌트입니다.
    image

Header.vue

  • 백그라운드 색을 지정하였습니다.

(New!) NeonBox.vue

  • leftTop, rightTop, leftBottom, rightBottom는 박스 안에서의 텍스트를, color와 shadow는 css 커스텀이 가능하도록 하여 Neonbox를 구성하였습니다.

ContestList.vue

  • 페이지 헤더를 추가하였습니다.
  • 크게 Active Contests, Upcoming Contests, Finished Contests 세 가지로 나누어 대회들을 보여줍니다.
  1. Active Contests와 Upcoming Contests의 경우
  • 유저가 참여할 수 있는 대회를 위쪽에 초록색 네온박스로 표시하고, 참여할 수 없는 대회를 회색 네온박스로 표시합니다.
  • 처음에는 10개만 로드해서 보여주고, 10개가 넘는 Active Contest나 Upcoming Contest가 있을 경우 아래쪽에 Load More버튼을 렌더링해주고 이를 통해 더 많은 대회를 로드할 수 있습니다.
  1. Finished Contests의 경우
  • 유저가 참여할 수 있는지 없는지는 따로 구분하지 않고, 20개씩 Pagination을 통해 로드할 수 있습니다.
    image

수정 예정

  • Contest List에서 Underway, not started, ended 대신 날짜/시간을 표시해주도록 PR 머지 전 수정 예정입니다. 완료
  • oj에서 bootstrapVue 컴포넌트를 사용한 곳이 있는데, pagination 컴포넌트나 hover 컴포넌트는 Add User Contest in Profile Page & Add Pagination component #291 의 컴포넌트를 사용하도록 PR 머지 후 수정 예정입니다.

@jimin9038
design change: contest list title
881f34e
@jimin9038
feat: create neon box
72430f2
@jimin9038
feat: neonbox css props
a9f901e
@jimin9038
feat: neonbox add overlay
4d04c3b
@jimin9038
feat: publishing contestInformation
96c8949
@jimin9038
feat: contestInformation- detail
a7b3fb4
@jimin9038
feat(api): add contest summary field
971e401
@jimin9038
add contest group manytomanyfield
7bcf867
@jimin9038
migrate contest summary model change again
fb15baf
@jimin9038
fix allowed_groups associated problems
e3760dc
@jimin9038
decorators
2a76c4c
@jimin9038
test: contest group permission
a71c191
@jimin9038
Add contest summary field in contest admin page
f047af6
@jimin9038
feat: add admin create group api
d98d850
@jimin9038
feat: add admin get group api
efc9538
@jimin9038
feat: add vuex group module
4380104
@jimin9038
feat: connect contest design change api
cbc8f0d
@jimin9038
feat: neonbox can get contents as props
e754435
@jimin9038
feat: contestlist api return participants count
c6bc9d7
@jimin9038
feat: contest list api connection
50ab26b
@jimin9038
fix: check_contest_perm. inspect group permission
9e2161c 
check_contest_permission decorator now inspects group permission
correctly
@jimin9038
fix: allowed_group not fetched issue
cc7872a 
- contest edit/create now fetches allowed_group in correct structure
@jimin9038
feat: temp button to go contest
aaa60b7
@jimin9038
fix: merge conflict resolve
b0b2d91
@jimin9038
fix: apply tailwindcss default header size
5b93a9c
@jimin9038
use b-modal temporarily
13be155
@jimin9038
feat: contestList neonbox righttop shows contest
12866c7 
participants
@jimin9038
fix: make header bg-white
992be70
@jimin9038
Neonbox hover design change
0dcf339
@jimin9038
show contest status in contestlist
2f2ffc1
@jimin9038
Comment todo (enter now)
1c520a3
@jimin9038
fix: contests list structure
79b49bb 
- contest list 구조를 Enter / register now / upcoming contests
/ finished contests / cannot participate 에서
active contests, upcoming contests, finished contests로 바꾸고
group permission을 검사하여 색으로 참여 가능여부를 알려주도록 한다.
@jimin9038
fix: loadmorecontests call with status
a5e8206
@jimin9038
Add Pagination to finishedcontests + adjust api call
8ecff81 
- finished contest list에 페이지네이션 적용
- upcoming contests와 underway contests 부르는 개수 조정
@jimin9038
fix: assign key for contest list neonboxes
ac86e26
@jimin9038 jimin9038 self-assigned this Feb 17, 2022
@jimin9038 jimin9038 added BE backend tasks design FE Frontend tasks labels Feb 17, 2022
@jimin9038
fix: goContest click event
5531749
@jimin9038
fix: contest finished neonbox click event
2738bee 
- 끝난 대회는 바로 해당 contest detail page로 안내합니다
@jimin9038
chore: remove bad quotes
0e204ab
@jimin9038
feat: contestList shows time difference
136c7e3 
- contest list에서 moment 모듈을 사용하여 진행중인 대회가 시작된 시간, 예정된 대회가 시작될 시간
, 끝난 대회가 끝난 시간을 지금(now)와 비교하여 보여준다.
@jimin9038
fix: calculateTimeDiff on pagination change
fe3c205
@jimin9038
feat: add contestprize model
bc841c3
@jimin9038
feat: change contest prize related serializer, api
0fe8254
@jimin9038
fix: contest prize model, test, serializer, api
9539696
@jimin9038
fix: contest prize put api
f6fb13a
@jimin9038
fix: contestprize put api
c3963e2
@jimin9038
feat: contestrank put api for contest prize field
1ea7796 
- contest rank put api를 통하여 rank에 해당하는 prize를 선택할수 있게 한다.
@jimin9038
chore(lint): lint
33914a0
@jimin9038 jimin9038 linked an issue Mar 1, 2022 that may be closed by this pull request
Contest List Page 디자인 리뉴얼 #319
Closed
@jimin9038 jimin9038 merged commit b88a8d2 into master Mar 9, 2022
@jimin9038 jimin9038 deleted the dev/contest-design-change branch March 9, 2022 10:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dotoleeoak dotoleeoak dotoleeoak approved these changes

@mixxeo mixxeo Awaiting requested review from mixxeo

@cranemont cranemont Awaiting requested review from cranemont

@pinecone28 pinecone28 Awaiting requested review from pinecone28

Assignees

@jimin9038 jimin9038

Labels
BE backend tasks design FE Frontend tasks
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Contest List Page 디자인 리뉴얼
2 participants
@jimin9038 @dotoleeoak