Add User Contest in Profile Page & Add Pagination component

.gitignore

@@ -196,3 +196,6 @@ typings/
 
 # devcontainer
 .devcontainer/data
+
+# MacOS file
+.DS_Store

frontend/package.json

@@ -16,6 +16,7 @@
     "axios": "^0.24.0",
     "bootstrap-vue": "^2.21.2",
     "browser-detect": "^0.2.28",
+    "chart.js": "^3.7.0",
     "core-js": "^3.19.3",
     "highlight.js": "10.7.3",
     "iview": "2",

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

@@ -0,0 +1,108 @@
+<template>
+  <div class="page-itm">
+    <div @click="changePage(1)" class="page-btn leftedge">«</div>
+    <div @click="changePage(currentPage-1)" class="page-btn">&lt;</div>
+    <div
+      v-for="page in pageList"
+      :key="page"
+      @click="changePage(page)"
+      :class="[ page==currentPage? 'page-btn select': 'page-btn' ]">
+      {{page}}
+      </div>
+    <div @click="changePage(currentPage+1)" class="page-btn">&gt;</div>
+    <div @click="changePage(numberOfPages)" class="page-btn rightedge">»</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    totalRows: { // number of total rows in table
+      type: Number
+    },
+    perPage: { // number of rows in table per one page
+      type: Number
+    },
+    limit: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      currentPage: 1
+    }
+  },
+  methods: {
+    changePage (page) {
+      if (page >= 1 && page <= this.numberOfPages) {
+        this.currentPage = page
+        this.$emit('input', this.currentPage)
+      }
+    }
+  },
+  computed: {
+    numberOfPages () { // number of pages
+      return Math.ceil(this.totalRows / this.perPage)
+    },
+    startPage () {
+      var start = (Math.trunc((this.currentPage - 1) / this.limit)) * this.limit + 1
+      return start
+    },
+    endPage () {
+      var end = this.startPage + Number(this.limit) - 1
+      return end <= this.numberOfPages ? end : this.numberOfPages
+    },
+    pageList () {
+      var pages = []
+      for (let i = this.startPage; i <= this.endPage; i++) {
+        pages.push(i)
+      }
+      return pages
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-itm {
+  width: 95%;
+  margin: 20px 5% 16px 0;
+  display: flex;
+  justify-content: flex-end !important;
+  flex-direction: row;
+}
+
+.page-btn {
+  width: 35px;
+  height: 38px;
+  text-align: center;
+  margin-left: -1px;
+  line-height: 35px;
+  color: #bdbdbd;
+  border: thin solid #dadada;
+  cursor: pointer;
+}
+
+.page-btn.leftedge {
+  border-top-left-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
+}
+
+.page-btn.rightedge {
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
+}
+
+.page-btn.select {
+    background-color: #bdbdbd;
+    border: thin solid #bdbdbd;
+    color: white;
+    pointer-events: none;
+}
+
+.page-btn:hover {
+  background-color: #e9ecee;
+}
+
+</style>

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

@@ -1,38 +1,155 @@
+<script src="./node_modules/chart.js/dist/chart.js"></script>
 <template>
   <div class="profile-contest">
-    <div class="section-title mt-4 mb-3">
-      My Contest Rank Transition
+    <div class="section-title mt-4 mb-3">My Contest Rank Transition</div>
+
+    <div class="rank-chart">
+      <canvas id="myChart"></canvas>
+    </div>
+
+    <div class="sort-container">
+      <b-dropdown text="Date" class="mr-4">
+        <b-dropdown-item>All</b-dropdown-item>
+        <b-dropdown-item>Rank</b-dropdown-item>
+        <b-dropdown-item>Prize</b-dropdown-item>
+      </b-dropdown>
+    </div>
+
+    <div class="table">
+      <b-table hover :items="items" :fields="fields" head-variant="light">
+        <template #cell(title)="data">{{ data.item.title }}</template>
+        <template #cell(prize)="data">
+          <b-icon
+            icon="circle-fill"
+            style="color: #ff6663"
+            font-scale="1.2"
+          ></b-icon>
+          {{ data.item.prize }}
+        </template>
+      </b-table>
+    </div>
+    <div class="pagination">
+      <Pagination
+      v-model="currentPage"
+      :total-rows="rows"
+      :per-page="perPage"
+      limit="5"
+      ></Pagination>
     </div>
   </div>
 </template>
 
 <script>
+import { Chart, registerables } from "chart.js";
+import Pagination from "../Pagination.vue";
+Chart.register(...registerables);
 
 export default {
   name: 'ProfileContest',
-  components: {
-  },
-  props: {
-  },
-  data () {
+  components: { Pagination },
+  props: {},
+  data() {
     return {
-    }
+      rows: 100,
+      currentPage: 1,
+      perPage: 3,
+      Chart,
+      fields: [
+        { key: "date", label: "Date" },
+        { key: "title", label: "Title" },
+        { key: "rank", label: "Rank" },
+        { key: "prize", label: "Prize" },
+      ],
+      items: [
+        {
+          date: "2021-12-31",
+          title: "SKKU Coding Platform 모의대회",
+          rank: "1",
+          prize: "Top3",
+        },
+        {
+          date: "2021-12-31",
+          title: "SKKU Coding Platform 2차 모의대회",
+          rank: "2",
+          prize: "Top5",
+        },
+        {
+          date: "2021-12-31",
+          title: "SKKU Coding Platform 3차 모의대회",
+          rank: "100",
+          prize: "Top2",
+        },
+      ],
+    };
   },
-  async mounted () {
+  async mounted() {
+    this.drawChart();
   },
   methods: {
-
+    drawChart() {
+      const ctx = document.getElementById("myChart");
+      const myChart = new Chart(ctx, {
+        type: "line",
+        data: {
+          labels: [
+            "Contest1",
+            "Contest2",
+            "Contest3",
+            "Contest4",
+            "Contest5",
+            "Contest6",
+          ],
+          datasets: [
+            {
+              label: "Me",
+              data: [30, 85, 20, 100, 50, 1],
+              borderColor: "#FF6663",
+              backgroundColor: "#FF6663",
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: "top",
+            },
+          },
+        },
+      });
+    },
   },
-  computed: {
-  }
-}
+  computed: {},
+};
 </script>
 
 <style lang="scss" scoped>
-  .profile-contest {
-    display: flex;
-    flex-direction: column;
-    align-items: center
-  }
+.profile-contest {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.rank-chart {
+  width: 80%;
+}
 
+.sort-container {
+  width: 95%;
+  margin-top: 30px;
+  display: flex;
+  justify-content: flex-end !important;
+}
+
+.table {
+  width: 95%;
+  margin: 0 auto;
+  cursor: pointer;
+}
+.pagination {
+  width: 95%;
+  margin-right: 5%;
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end !important;
+}
 </style>

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' },
     component: Profile
   },
   {

frontend/yarn.lock

@@ -2752,6 +2752,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.0.tgz#7a19c93035341df801d613993c2170a1fcf1d882"
+  integrity sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"