Add User Contest in Profile Page & Add Pagination component #291

goo314 · 2022-01-28T17:35:35Z

1. User Contest Page

What Components have been added?

Chart (Contests-Ranks)
Table that includes all contests user participated in
Pagination

Things that I have to do next time

Some functions in chart (hover, ordering y values reversely, and etc)
Probably to change css style of dropdown?
API connection

2. Pagination

What did I do in Pagination?

Make component "b-pagination" (in bootstrap Vue) by native css

How to use

Append component: {Pagination} in parent component
Add code in template
<Pagination v-model="현재페이지" :total-rows="테이블 전체 행의 개수" :per-page="한 페이지당 나타낼 테이블 행의 개수" limit="한번에 보여질 최대 페이지 번호 개수"></Pagination>
Note that total-rows, per-page, limit are props data

examples
(define currentPage, rows, perPage in data of parent component)
<Pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" limit="5"></Pagination>

THANK YOU XD

dotoleeoak · 2022-01-29T14:41:14Z

frontend/src/pages/oj/components/Pagination.vue

+      type: Number
+    },
+    limit: {
+      type: String


limit은 어떤 목적으로 사용되는 변수인가요? String type으로 되어있는데, 아래에는 숫자 연산(/, *)이 있어서 확인 부탁드려요.

Pagination에 페이지 번호가 최대 몇개 보여질지 나타내는 변수입니다.
총 페이지가 10이고, limit가 3일때 방향키를 누를때마다 (1,2,3), (4,5,6), (7,8,9), (10) 의 페이지가 차례대로 보여요.
b-pagination과 호환되게 코드를 작성하라고 하셔서,
b-pagination의 경우 props를 :limit="3" 가 아닌 limit="3" 문자열으로 받기에 이렇게 코드를 작성했습니다.
javascript상에서 문자열 3과 숫자 3과 동일하다고 들어서 코드의 실행에는 상관이 없지만 혹시 문제가 된다면 바꾸겠습니다 😃

BootstrapVue 문서 확인해보니까 Number or String으로 명시되어있는데, 여기도 그렇게 하는 게 나을 것 같아요.
https://bootstrap-vue.org/docs/components/pagination#__BVID__579__row_limit

BootstrapVue 코드도 확인해봤는데, 이렇게 integer로 명시적으로(explicit) 변환하는 함수가 있더라고요.
https://github.com/bootstrap-vue/bootstrap-vue/blob/c645a33790ccaa0e4695dc7b74f9c9d7a812aa8d/src/mixins/pagination.js#L79

const sanitizeLimit = value => { const limit = toInteger(value) || 1 return limit < 1 ? DEFAULT_LIMIT : limit }

물론 javascript가 dynamic typed라서 string도 number 연산이 가능하긴 하지만, 이런 암시적인(implicit) 코드를 짜면 어느 부분에서 에러가 날지 예측하기도 어렵고, 가독성도 떨어져서 가급적 지양하는 게 좋아요.
이 부분에서는 computed로 localLimit () { return Number(this.limit) }처럼 사용하는 게 바람직해 보이네요.

수정했어요!

dotoleeoak · 2022-01-29T14:42:53Z

frontend/src/pages/oj/components/Pagination.vue

+    },
+    startPage () {
+      var start = (Math.trunc((this.currentPage - 1) / this.limit)) * this.limit + 1
+      return start


한 줄로 수정해주세요. 참고로 var은 가능한 쓰지 않고, 변하지 않는 값은 모두 const로 고쳐주세요.

return Math.trunc((this.currentPage - 1) / this.limit) * this.limit + 1

dotoleeoak · 2022-01-29T14:43:52Z

frontend/src/pages/oj/components/Pagination.vue

+    },
+    endPage () {
+      var end = this.startPage + Number(this.limit) - 1
+      return end <= this.numberOfPages ? end : this.numberOfPages


return this.startPage + Number(this.limit) - 1 <= this.numberOfPages ? end : this.numberOfPages

이것도 곧 수정하겠습니다

dotoleeoak · 2022-01-29T14:51:38Z

frontend/src/pages/oj/components/Pagination.vue

+      for (let i = this.startPage; i <= this.endPage; i++) {
+        pages.push(i)
+      }
+      return pages


구글링하다 나온건데, 이렇게 쓰는 게 좀 더 깔끔할 거 같아요.
https://stackoverflow.com/questions/3895478/does-javascript-have-a-method-like-range-to-generate-a-range-within-the-supp

/* this.limit의 type이 Number라면 Number()는 필요 없음 */ return [...Array(Number(this.limit)).keys()].map(i => i + this.startPage)

만약 페이지 수가 3이고, limit 값이 5이면 오류가 날 수 있을 것 같아요.

한 줄로 고쳤습니다

dotoleeoak · 2022-01-29T14:53:18Z

frontend/src/pages/oj/components/Pagination.vue

+  cursor: pointer;
+}
+
+.page-btn.leftedge {


어차피 scoped style 썼으니까 .page-btn.leftedge 대신에 .leftedge로 써도 됩니다.

아래 라인들도 마찬가지입니다!

수정했습니다

dotoleeoak · 2022-01-29T14:55:29Z

frontend/src/pages/oj/router/routes.js

@@ -119,7 +119,7 @@ export default [
  {
    name: 'profile',
    path: '/profile',
-    meta: { requiresAuth: true, title: 'My Profile' },
+    meta: { title: 'My Profile' },


이 부분은 왜 수정하셨나요?

백엔드 서버 없이 실행하면서 작업하다 보니 (ㅠㅠㅠ) 저부분은 무시해주세요!

dotoleeoak · 2022-01-29T14:56:44Z

frontend/src/pages/oj/components/user/ProfileContest.vue

@@ -1,38 +1,155 @@
+<script src="./node_modules/chart.js/dist/chart.js"></script>


Chart.js 패키지는 NPM으로 설치했으니까, 이 라인은 필요 없습니다. node_modules에 있는 패키지가 사용될 거에요.

dotoleeoak

수정 부분이 아직 커밋이 안된 거 같은데, 확인 부탁드려요~

dotoleeoak · 2022-02-04T10:26:40Z

frontend/src/pages/oj/components/Pagination.vue

+      type: Number
+    },
+    limit: {
+      type: String


BootstrapVue 문서 확인해보니까 Number or String으로 명시되어있는데, 여기도 그렇게 하는 게 나을 것 같아요.
https://bootstrap-vue.org/docs/components/pagination#__BVID__579__row_limit

dotoleeoak · 2022-02-04T10:30:41Z

frontend/src/pages/oj/components/Pagination.vue

+      type: Number
+    },
+    limit: {
+      type: String


BootstrapVue 코드도 확인해봤는데, 이렇게 integer로 명시적으로(explicit) 변환하는 함수가 있더라고요.
https://github.com/bootstrap-vue/bootstrap-vue/blob/c645a33790ccaa0e4695dc7b74f9c9d7a812aa8d/src/mixins/pagination.js#L79

const sanitizeLimit = value => { const limit = toInteger(value) || 1 return limit < 1 ? DEFAULT_LIMIT : limit }

물론 javascript가 dynamic typed라서 string도 number 연산이 가능하긴 하지만, 이런 암시적인(implicit) 코드를 짜면 어느 부분에서 에러가 날지 예측하기도 어렵고, 가독성도 떨어져서 가급적 지양하는 게 좋아요.
이 부분에서는 computed로 localLimit () { return Number(this.limit) }처럼 사용하는 게 바람직해 보이네요.

goo314 added 12 commits January 10, 2022 22:24

refactor: Rebase

0b7e58a

fix: Delete routers of profile-contest

bc6c7ec

feat: Add ProfileContest vue

07e6875

feat: Publish user contest page

b9b44af

add: Add file in gitignore

365c56f

feat: Add Pagination component

1867d42

feat: Add methods for each button in pagination vue

59987a7

chore: Remove chart.js outside frontend folder

606cd19

fix: Show at most limit pages

cdba955

style: Shorten style code

0e421b4

fix: Add component communication(props, event)

6694e96

style: Apply Pagination vue

fc89247

goo314 added the FE Frontend tasks label Jan 28, 2022

goo314 requested review from dotoleeoak, jimin9038, pinecone28 and mixxeo January 28, 2022 17:35

goo314 self-assigned this Jan 28, 2022

dotoleeoak reviewed Jan 30, 2022

View reviewed changes

goo314 requested a review from dotoleeoak February 2, 2022 11:11

dotoleeoak reviewed Feb 4, 2022

View reviewed changes

style: Edit code style

eea45dd

goo314 requested a review from dotoleeoak February 6, 2022 12:32

goo314 added 5 commits February 10, 2022 13:13

feat: Create USerContestAPI

91e7d1e

add: Calate and return user rank in UserContestAPI

9a04321

style: Change code style

79abf47

add: Add rank field in ACMContestRank & Shorten UserContestAPI

2d03088

add: Connect UserContestAPI to ProfileContest page

61456b6

jimin9038 mentioned this pull request Feb 17, 2022

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

Merged

goo314 and others added 4 commits February 20, 2022 05:28

feat: Add sorting contests function in ProfileContest

8ee4300

fix: Connect sorting api to ProfileContest

b8b6528

feat: Add test for user-contest-api

8facf45

feat: add contestprize model

26489aa

jimin9038 linked an issue Mar 1, 2022 that may be closed by this pull request

유저 프로필: Contest 구현 #332

Open

goo314 and others added 2 commits March 1, 2022 13:54

style: Change code style

b7adf68

migrate model change

03e7fe9

jimin9038 merged commit 515919c into dev/user-profile Mar 2, 2022

jimin9038 deleted the user/contest branch March 2, 2022 05:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add User Contest in Profile Page & Add Pagination component #291

Add User Contest in Profile Page & Add Pagination component #291

goo314 commented Jan 28, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 2, 2022

dotoleeoak Feb 4, 2022

dotoleeoak Feb 4, 2022

goo314 Feb 6, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 2, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 2, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 6, 2022

goo314 Feb 6, 2022

dotoleeoak Jan 29, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 6, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 2, 2022

dotoleeoak Jan 29, 2022

goo314 Feb 6, 2022

dotoleeoak left a comment

dotoleeoak Feb 4, 2022

dotoleeoak Feb 4, 2022

		@@ -1,38 +1,155 @@
		<script src="./node_modules/chart.js/dist/chart.js"></script>

Add User Contest in Profile Page & Add Pagination component #291

Add User Contest in Profile Page & Add Pagination component #291

Conversation

goo314 commented Jan 28, 2022

1. User Contest Page

What Components have been added?

Things that I have to do next time

2. Pagination

What did I do in Pagination?

How to use

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dotoleeoak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment