feat: Implement course problem list page for professor

frontend/src/pages/oj/views/problem/Problem.vue

@@ -574,7 +574,8 @@ export default {
         language: this.language,
         code: this.code,
         contest_id: this.contestID,
-        assignment_id: this.assignmentID
+        assignment_id: this.assignmentID,
+        course_id: this.courseID
       }
       if (this.captchaRequired) {
         data.captcha = this.captchaCode

frontend/src/pages/prof/api.js

@@ -148,6 +148,36 @@ export default {
       params: params
     })
   },
+  getCourseProblem (courseId, problemId, limit, offset) {
+    return ajax('lecture/professor/course/problem/', 'get', {
+      params: {
+        course_id: courseId,
+        problem_id: problemId,
+        limit: limit,
+        offset: offset
+      }
+    })
+  },
+  createCourseProblem (data) {
+    return ajax('lecture/professor/course/problem/', 'post', {
+      data
+    })
+  },
+  editCourseProblem (data) {
+    return ajax('lecture/professor/course/problem/', 'put', {
+      data
+    })
+  },
+  deleteCourseProblem (id) {
+    return ajax('lecture/professor/course/problem/', 'delete', {
+      params: { id: id }
+    })
+  },
+  addCourseProblemFromPublic (data) {
+    return ajax('lecture/professor/course/add_problem_from_public/', 'post', {
+      data
+    })
+  },
   // only assignmentId param => return problemList instead
   getAssignmentProblem (assignmentId, problemId) {
     const params = { problem_id: problemId, assignment_id: assignmentId }

frontend/src/pages/prof/components/SideMenu.vue

@@ -53,6 +53,17 @@
                   />
                   Dashboard
                 </b-list-group-item>
+                <b-list-group-item
+                  :to="'/course/'+course.id+'/problem'"
+                  class="list-group-inner"
+                >
+                  <b-icon
+                    icon="record-fill"
+                    font-scale="0.5"
+                    style="margin-right: 8px; vertical-align:1px"
+                  />
+                  Problems
+                </b-list-group-item>
                 <b-list-group-item
                   :to="'/course/'+course.id+'/assignment'"
                   class="list-group-inner"

frontend/src/pages/prof/router.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import {
-  Login, Home, Dashboard, CourseDashboard, CourseBookmark, AssignmentList, Problem, ProblemGrade, QnA
+  Login, Home, Dashboard, CourseDashboard, CourseBookmark, CourseProblem, AssignmentList, Problem, ProblemGrade, QnA
 } from './views'
 Vue.use(VueRouter)
 
@@ -35,6 +35,21 @@ export default new VueRouter({
           name: 'course-bookmark',
           component: CourseBookmark
         },
+        {
+          path: '/course/:courseId/problem',
+          name: 'course-problem',
+          component: CourseProblem
+        },
+        {
+          path: '/course/:courseId/problem/create',
+          name: 'create-course-problem',
+          component: Problem
+        },
+        {
+          path: '/course/:courseId/problem/edit',
+          name: 'edit-course-problem',
+          component: Problem
+        },
         {
           path: '/course/:courseId/assignment',
           name: 'course-assignment-list',
@@ -47,12 +62,12 @@ export default new VueRouter({
         },
         {
           path: '/course/:courseId/assignment/:assignmentId/problem/create',
-          name: 'create-course-problem',
+          name: 'create-assignment-problem',
           component: Problem
         },
         {
           path: '/course/:courseId/assignment/:assignmentId/problem/:problemId/edit',
-          name: 'edit-course-problem',
+          name: 'edit-assignment-problem',
           component: Problem
         },
         {

frontend/src/pages/prof/views/assignment/AssignmentList.vue

@@ -133,7 +133,9 @@
             @update="getAssignmentList"
           ></create-assignment-modal>
           <import-public-problem-modal
+            :course-id="selectedCourseId"
             :assignment-id="selectedAssignmentId"
+            mode="assignment"
             @update="updateAssignmentProblemList(selectedAssignmentId)"
           >
           </import-public-problem-modal>
@@ -212,7 +214,9 @@ export default {
         'Operation'
       ],
       selectedAssignmentId: null,
-      studentTotal: 0
+      selectedCourseId: null,
+      studentTotal: 0,
+      courseId: ''
     }
   },
   async mounted () {
@@ -283,8 +287,9 @@ export default {
     createAssignmentProblem (assignment) {
       if (this.routeName === 'course-assignment-list') {
         this.$router.push({
-          name: 'create-course-problem',
+          name: 'create-assignment-problem',
           params: {
+            courseId: this.courseId,
             assignmentId: assignment.id,
             courseInfo: this.pageLocations[0].text,
             assignmentInfo: assignment.title
@@ -295,7 +300,7 @@ export default {
     editAssignmentProblem (assignment, problemId) {
       if (this.routeName === 'course-assignment-list') {
         this.$router.push({
-          name: 'edit-course-problem',
+          name: 'edit-assignment-problem',
           params: {
             courseId: this.courseId,
             assignmentId: assignment.id,
@@ -355,8 +360,9 @@ export default {
       }
       await api.editAssignment(data)
     },
-    showImportPublicProblemModal (assignmentId) {
+    showImportPublicProblemModal (assignmentId, courseId) {
       this.selectedAssignmentId = assignmentId
+      this.selectedCourseId = courseId
       this.$bvModal.show('import-public-problem-modal')
     },
     async getUserTotal () {

frontend/src/pages/prof/views/assignment/ImportPublicProblem.vue

@@ -94,7 +94,7 @@ import { DIFFICULTY_COLOR } from '@/utils/constants'
 export default {
   name: 'ImportPublicProblem',
   mixins: [ProblemMixin],
-  props: ['assignmentId'],
+  props: ['assignmentId', 'courseId', 'mode'],
   data () {
     return {
       form: {
@@ -197,12 +197,17 @@ export default {
         return
       }
       const data = {
+        course_id: this.courseId,
         assignment_id: this.assignmentId,
         problem_id: this.form.selectedProblemId,
         display_id: this.form.displayId
       }
       try {
-        await profApi.addProblemFromPublic(data)
+        if (this.mode === 'assignment') {
+          await profApi.addProblemFromPublic(data)
+        } else {
+          await profApi.addCourseProblemFromPublic(data)
+        }
       } catch (err) {
       }
       this.$set(this.form, 'selectedProblemId', null)

frontend/src/pages/prof/views/general/CourseBookmark.vue

@@ -95,7 +95,6 @@ export default {
       try {
         const resp = await api.getCourseList()
         this.courseList = resp.data.data.results
-        console.log(this.courseList)
       } catch (err) {
       }
     },

frontend/src/pages/prof/views/general/CourseDashboard.vue

@@ -15,18 +15,16 @@
       cols = "1"
       class="course-dashboard"
     >
-      <b-col
-        id="first-col"
-      >
-        <b-card class="admin-info drop-shadow-custom" title="Assignments">
+      <b-col>
+        <b-card style="margin-bottom: 20px;" class="drop-shadow-custom" title="Assignments">
           <b-table
             borderless
             hover
             tbody-class="table-body"
             :fields="assignmentListFields"
             :items="assignmentList"
             :per-page="pageSize"
-            :current-page="updateCurrentPage"
+            :current-page="updateAssignmentCurrentPage"
             @row-clicked="goAssignment"
           >
             <template #cell(status)="data">
@@ -47,9 +45,41 @@
           </b-table>
           <div class="panel-options">
             <b-pagination
-              v-model="currentPage"
+              v-model="assignmentCurrentPage"
+              :per-page="pageSize"
+              :total-rows="assignmentTotal"
+              style="position: absolute; right: 20px; top: 15px;"
+            />
+          </div>
+        </b-card>
+      </b-col>
+    </b-row>
+    <b-row
+      type="flex"
+      cols = "1"
+      class="course-dashboard"
+    >
+      <b-col>
+        <b-card style="margin-bottom: 20px;" class="drop-shadow-custom" title="Problems">
+          <b-table
+            borderless
+            hover
+            tbody-class="table-body"
+            :fields="problemListField"
+            :items="problemList"
+            :per-page="pageSize"
+            :current-page="updateProblemCurrentPage"
+          >
+            <template #cell(assignment_name)="data">
+              <div v-if="data.value"> {{ data.value }} </div>
+              <div v-else> - </div>
+            </template>
+          </b-table>
+          <div class="panel-options">
+            <b-pagination
+              v-model="problemCurrentPage"
               :per-page="pageSize"
-              :total-rows="total"
+              :total-rows="problemTotal"
               style="position: absolute; right: 20px; top: 15px;"
             />
           </div>
@@ -63,6 +93,8 @@
 
 import api from '../../api.js'
 import UserList from '../users/UserList.vue'
+import moment from 'moment'
+
 export default {
   name: 'CourseDashboard',
   components: {
@@ -77,7 +109,11 @@ export default {
         '-1': 'Ended'
       },
       pageSize: 5,
-      currentPage: 1,
+      mode: '',
+      assignmentCurrentPage: 1,
+      problemCurrentPage: 1,
+      assignmentTotal: 0,
+      problemTotal: 0,
       courseId: null,
       createdBy: {},
       title: '',
@@ -109,7 +145,22 @@ export default {
         }
       ],
       assignmentList: [
-      ]
+      ],
+      problemListField: [
+        'title',
+        {
+          key: 'assignment_name',
+          label: 'Assignment'
+        },
+        {
+          key: 'create_time',
+          label: 'Create Time',
+          formatter: (value) => {
+            return moment(value).format('YYYY-M-D HH:mm')
+          }
+        }
+      ],
+      problemList: []
     }
   },
   async mounted () {
@@ -125,25 +176,41 @@ export default {
     } catch (err) {
       this.$error(err)
     }
-    this.getAssignmentList(1)
+    await this.getCourseProblem(1)
+    await this.getAssignmentList(1)
     this.pageLocations[0].text = this.title + '_' + this.courseCode + '-' + this.classNumber
   },
   methods: {
-    async currentChange (page) {
-      this.currentPage = page
+    async currentAssignmentChange (page) {
+      this.assignmentCurrentPage = page
       await this.getAssignmentList(page)
     },
+    async currentProblemChange (page) {
+      this.problemCurrentPage = page
+      await this.getCourseProblem(page)
+    },
     async getAssignmentList (page) {
       this.loading = true
       try {
         const res = await api.getAssignmentList(this.courseId, null, this.pageSize, (page - 1) * this.pageSize)
-        this.total = res.data.data.total
+        this.assignmentTotal = res.data.data.total
         this.assignmentList = res.data.data.results
       } catch (err) {
       } finally {
         this.loading = false
       }
     },
+    async getCourseProblem (page) {
+      this.loading = true
+      try {
+        const res = await api.getCourseProblem(this.$route.params.courseId, null, this.pageSize, (page - 1) * this.pageSize)
+        this.problemList = res.data.data.results
+        this.problemTotal = res.data.data.total
+      } catch (err) {
+      } finally {
+        this.loading = false
+      }
+    },
     async updateCourseList () {
       try {
         const res = await api.getCourseList()
@@ -156,8 +223,11 @@ export default {
     }
   },
   computed: {
-    updateCurrentPage () {
-      return this.currentChange(this.currentPage)
+    updateAssignmentCurrentPage () {
+      return this.currentAssignmentChange(this.assignmentCurrentPage)
+    },
+    updateProblemCurrentPage () {
+      return this.currentProblemChange(this.problemCurrentPage)
     }
   }
 }

frontend/src/pages/prof/views/index.js

@@ -7,7 +7,8 @@ import Home from './Home.vue'
 import QnA from './qna/QnA.vue'
 import ProblemGrade from './problem/ProblemGrade.vue'
 import CourseBookmark from './general/CourseBookmark.vue'
+import CourseProblem from './problem/CourseProblem.vue'
 
 export {
-  Dashboard, CourseDashboard, Problem, AssignmentList, Login, Home, QnA, ProblemGrade, CourseBookmark
+  Dashboard, CourseDashboard, Problem, CourseProblem, AssignmentList, Login, Home, QnA, ProblemGrade, CourseBookmark
 }