feat: update views dkhp

forge.config.ts

@@ -1,11 +1,11 @@
-import type { ForgeConfig } from "@electron-forge/shared-types";
-import { MakerSquirrel } from "@electron-forge/maker-squirrel";
-import { MakerZIP } from "@electron-forge/maker-zip";
-import { MakerDeb } from "@electron-forge/maker-deb";
-import { MakerRpm } from "@electron-forge/maker-rpm";
-import { VitePlugin } from "@electron-forge/plugin-vite";
-import { FusesPlugin } from "@electron-forge/plugin-fuses";
-import { FuseV1Options, FuseVersion } from "@electron/fuses";
+import type { ForgeConfig } from '@electron-forge/shared-types';
+import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
+import { MakerDeb } from '@electron-forge/maker-deb';
+import { MakerRpm } from '@electron-forge/maker-rpm';
+import { VitePlugin } from '@electron-forge/plugin-vite';
+import { FusesPlugin } from '@electron-forge/plugin-fuses';
+import { FuseV1Options, FuseVersion } from '@electron/fuses';
 
 const config: ForgeConfig = {
   packagerConfig: {
@@ -14,19 +14,19 @@ const config: ForgeConfig = {
   rebuildConfig: {},
   makers: [
     new MakerSquirrel({}),
-    new MakerZIP({}, ["darwin"]),
+    new MakerZIP({}, ['darwin']),
     new MakerRpm({}),
     new MakerDeb({}),
   ],
   publishers: [
     {
-      name: "@electron-forge/publisher-github",
+      name: '@electron-forge/publisher-github',
       config: {
         repository: {
-          owner: "maikusobu",
-          name: "QuanLyDangKyMonHocVaThuPhiSV-Desktop",
+          owner: 'maikusobu',
+          name: 'QuanLyDangKyMonHocVaThuPhiSV-Desktop',
         },
-        prerelease: false,
+        prerelease: true,
       },
     },
   ],
@@ -37,19 +37,19 @@ const config: ForgeConfig = {
       build: [
         {
           // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
-          entry: "src/main.ts",
-          config: "vite.main.config.ts",
+          entry: 'src/main.ts',
+          config: 'vite.main.config.ts',
         },
         {
-          entry: "src/preload.ts",
-          config: "vite.preload.config.ts",
+          entry: 'src/preload.ts',
+          config: 'vite.preload.config.ts',
         },
       ],
 
       renderer: [
         {
-          name: "main_window",
-          config: "vite.renderer.config.ts",
+          name: 'main_window',
+          config: 'vite.renderer.config.ts',
         },
       ],
     }),

src/api/axiosClient.ts

@@ -3,14 +3,13 @@ import { setupCache } from 'axios-cache-interceptor/dev';
 
 export const axiosClient = setupCache(
   axios.create({
-    baseURL: 'http://localhost:3000/api/v1',
+    baseURL: 'https://se104-be-3-e0a6f7e74fba.herokuapp.com/api/v1',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'application/json',
     },
   }),
   {
-    debug: console.log,
     methods: ['get', 'post', 'patch', 'delete'],
     cachePredicate: {
       statusCheck: (status) => true,

src/renderer/views/student-department/student/CourseRegistration.vue

@@ -1,20 +1,38 @@
 <script lang="ts" setup>
 import ListMajor from './components/ListMajor.vue';
-import ListOpenCourse from './components/ListOpenCourse.vue';
+import { onMounted } from 'vue';
+import { useRegistrationStore } from './stores/registration';
 import { getTermYear } from '../../../../utils/resolveCurrentTerm';
 
 const currentTerm = getTermYear();
+const registrationStore = useRegistrationStore();
+onMounted(async () => {
+  await registrationStore.getCurrentTermYearRegistration();
+});
 </script>
 
 <template>
   <div class="flex flex-col gap-5">
-    <div class="center">
-      <h1>Đăng ký môn học</h1>
+    <div class="flex gap-40">
+      <div class="center px-5">
+        <h1 class="font-bold text-2xl">Đăng ký môn học</h1>
+        <div>
+          <p>
+            Học kỳ hiện tại:
+            <span class="font-bold">{{ currentTerm.term }}</span> - Năm học:
+            <span class="font-bold">{{ currentTerm.year }}</span>
+          </p>
+        </div>
+      </div>
       <div>
-        <p>
-          Học kỳ hiện tại: <span>{{ currentTerm.term }}</span> - Năm học:
-          <span>{{ currentTerm.year }}</span>
-        </p>
+        <button
+          v-if="registrationStore.isAvailable"
+          class="btn btn-block btn-primary"
+          type="button"
+          @click="registrationStore.closeCurrentState()"
+        >
+          Chốt đăng ký học phần
+        </button>
       </div>
     </div>
     <div

src/renderer/views/student-department/student/components/CreateRegistration.vue

@@ -1,6 +1,28 @@
 <script lang="ts" setup>
 import Table from './Table.vue';
-import Row from './Row.vue';
+import { onMounted } from 'vue';
+import {
+  type MajorWithCourse,
+  useRegistrationStore,
+} from '../stores/registration';
+
+const registrationStore = useRegistrationStore();
+onMounted(async () => {
+  await registrationStore.getOpenCourses();
+});
+const props = defineProps<{
+  id?: string;
+}>();
+const handleSubmit = async (e: Event) => {
+  e.preventDefault();
+  const form = e.target as HTMLFormElement;
+  const checkboxes = form.querySelectorAll('.checkbox');
+  const courseIds = Array.from(checkboxes)
+    .filter((checkbox) => (checkbox as HTMLInputElement).checked)
+    .map((checkbox) => (checkbox as HTMLInputElement).value)
+    .map((id) => parseInt(id));
+  await registrationStore.submitRegistration(parseInt(props.id), courseIds);
+};
 </script>
 
 <template>
@@ -17,7 +39,7 @@ import Row from './Row.vue';
           ✕
         </button>
       </form>
-      <form>
+      <form @submit.prevent="handleSubmit">
         <table class="table table-pin-rows table-zebra mt-4">
           <thead>
             <tr>
@@ -29,17 +51,30 @@ import Row from './Row.vue';
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr
+              v-for="course in registrationStore.openCourses"
+              :key="course.id"
+            >
               <td>
-                <input class="checkbox" type="checkbox" />
+                <input :value="course.id" class="checkbox" type="checkbox" />
+              </td>
+              <td class="w-[10%] overflow-hidden">{{ course.id }}</td>
+              <td class="w-[25%] overflow-hidden">{{ course.name }}</td>
+              <td class="w-[15%] overflow-hidden">
+                {{ course.courseType.name }}
+              </td>
+              <td class="w-[30%] overflow-hidden">
+                {{ course.numberOfPeriods }}
               </td>
-              <td class="w-[10%] overflow-hidden">1</td>
-              <td class="w-[25%] overflow-hidden">Khoa hoc</td>
-              <td class="w-[15%] overflow-hidden">Lý thuyết</td>
-              <td class="w-[30%] overflow-hidden">4</td>
             </tr>
           </tbody>
         </table>
+        <button
+          class="btn w-[90px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+          type="submit"
+        >
+          Đăng ký
+        </button>
       </form>
     </div>
   </dialog>

src/renderer/views/student-department/student/components/ListMajor.vue

@@ -12,8 +12,7 @@ const setMajor = (major_Name: string) => {
   majorName.value = major_Name;
 };
 onMounted(async () => {
-  await registrationStore.getCurrentTermYearRegistration();
-  majorName.value = majors[0].name;
+  majors && setMajor(majors[0]?.name || '');
 });
 </script>
 
@@ -41,10 +40,25 @@ onMounted(async () => {
   </div>
   <div class="w-[calc(100%-300px)]">
     <Registration
-      :id="majors.find((major) => major.name === majorName)?.id"
+      v-if="registrationStore.isAvailable"
+      :id="majors.find((item) => item.name === majorName)?.id.toString()"
+      :_id="
+        registrationStore.currentTermYearRegistration.find(
+          (item) => item.major.name === majorName
+        )?._id
+      "
+      :courses="
+        registrationStore.currentTermYearRegistration.find(
+          (item) => item.major.name === majorName
+        )?.courses
+      "
       :majorName="majorName"
-      :majors="registrationStore.currentTermYearRegistration?.majors"
     />
+    <div>
+      <h3 class="text-indigo-700 font-bold text-center">
+        Chốt đăng ký học đã đóng trong học kỳ này, xin đợi sang học kỳ sau
+      </h3>
+    </div>
   </div>
 </template>
 

src/renderer/views/student-department/student/components/ListOpenCourse.vue

@@ -1,20 +1,32 @@
-<script setup>
-import notFound from '../../../../../assets/images/9169206.jpg';
+<script lang="ts" setup>
+import type { OpenCourse } from '../stores/registration';
+
+defineProps<{
+  courses: OpenCourse[];
+}>();
 </script>
 
 <template>
   <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
     <table class="table table-pin-rows table-zebra">
       <thead>
         <tr>
-          <th class="w-[10%] overflow-hidden">Ma môn</th>
+          <th class="w-[10%] overflow-hidden">Mã môn</th>
           <th class="w-[25%] overflow-hidden">Tên Môn</th>
           <th class="w-[15%] overflow-hidden">Loại môn</th>
           <th class="w-[30%] overflow-hidden">Số tiết</th>
           <th class="w-[20%] overflow-hidden">Khoa</th>
         </tr>
       </thead>
-      <tbody></tbody>
+      <tbody>
+        <tr v-for="course in courses" :key="course.id">
+          <td>{{ course.id }}</td>
+          <td>{{ course.name }}</td>
+          <td>{{ course.courseType.name }}</td>
+          <td>{{ course.numberOfPeriods }}</td>
+          <td>{{ course.faculty.name }}</td>
+        </tr>
+      </tbody>
     </table>
     <!--    <div-->
     <!--      v-if="studentStore.students.length === 0"-->

src/renderer/views/student-department/student/components/Registration.vue

@@ -1,34 +1,33 @@
 <script lang="ts" setup>
 import { useRegistrationStore } from '../stores/registration';
-import ListOpenCourse from './ListOpenCourse.vue';
-import type { MajorWithCourse } from '../stores/registration';
+
+import type { OpenCourse } from '../stores/registration';
 import CreateRegistration from './CreateRegistration.vue';
+import ListOpenCourse from './ListOpenCourse.vue';
 
 const registrationStore = useRegistrationStore();
-defineProps<{
+const props = defineProps<{
   id?: string;
   majorName?: string;
-  majors?: MajorWithCourse[];
+  _id?: string;
+  courses?: OpenCourse[];
 }>();
+const handleDelete = async () => {
+  await registrationStore.deleteRegistration(props._id);
+};
 </script>
 
 <template>
-  <div
-    v-if="
-      majors && majors.findIndex((major) => major.name === majorName) !== -1
-    "
-  >
+  <div v-if="courses && _id">
     <div>
-      <div class="flex">
+      <div class="flex justify-around">
         <div>
           <div>Ngành học: {{ majorName }}</div>
           <h3>Đã đăng ký</h3>
         </div>
-        <button class="btn btn-error">Xóa</button>
+        <button class="btn btn-error" @click="handleDelete">Xóa</button>
       </div>
-      <ListOpenCourse
-        :courses="majors.find((major) => major.name === majorName).courses"
-      />
+      <ListOpenCourse :courses="courses" />
     </div>
   </div>
   <div v-else>
@@ -37,7 +36,7 @@ defineProps<{
         <div>Ngành học: {{ majorName }}</div>
         <h3>Chưa đăng ký</h3>
       </div>
-      <CreateRegistration />
+      <CreateRegistration :id="id" />
     </div>
   </div>
 </template>