From 98befa9eccda4cef77e2003cfbd1a95bc34f1d93 Mon Sep 17 00:00:00 2001
From: Nhat-Original <nhatoriginal@gmail.com>
Date: Fri, 10 May 2024 21:59:13 +0700
Subject: [PATCH 1/2] chore: small rewrite in course view

---
 .../course/components/CreateModal.vue         | 31 +++++++++----------
 .../course/components/EditModal.vue           | 14 ++++++++-
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/renderer/views/training-department/course/components/CreateModal.vue b/src/renderer/views/training-department/course/components/CreateModal.vue
index 10fa163..4624e67 100644
--- a/src/renderer/views/training-department/course/components/CreateModal.vue
+++ b/src/renderer/views/training-department/course/components/CreateModal.vue
@@ -1,4 +1,3 @@
-// TODO: fix the select field
 <template>
   <button
     class="btn bg-secondary-400 text-base-white hover:bg-secondary-300"
@@ -48,41 +47,39 @@
         </label>
         <label class="flex flex-col">
           Khoa
-          <Field
-            v-slot="{ value }"
-            as="select"
-            class="select select-bordered"
-            name="facultyId"
-          >
+          <Field as="select" class="select select-bordered" name="facultyId">
             <option
               v-for="(faculty, index) in courseStore.faculties"
               :key="faculty.id"
               :value="faculty.id"
-              :selected="index === 0"
-              v-bind="value"
             >
               {{ faculty.name }}
             </option>
           </Field>
+          <p
+            v-if="courseStore.errorMessages['facultyId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ courseStore.errorMessages['facultyId'] }}
+          </p>
         </label>
         <label class="flex flex-col">
           Loại môn học
-          <Field
-            v-slot="{ value }"
-            as="select"
-            class="select select-bordered"
-            name="courseTypeId"
-          >
+          <Field as="select" class="select select-bordered" name="courseTypeId">
             <option
               v-for="(courseType, index) in courseStore.courseTypes"
               :key="courseType.id"
               :value="courseType.id"
-              :selected="index === 0"
-              v-bind="value"
             >
               {{ courseType.name }}
             </option>
           </Field>
+          <p
+            v-if="courseStore.errorMessages['courseTypeId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ courseStore.errorMessages['courseTypeId'] }}
+          </p>
         </label>
         <button
           class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
diff --git a/src/renderer/views/training-department/course/components/EditModal.vue b/src/renderer/views/training-department/course/components/EditModal.vue
index 370aab1..8941a6c 100644
--- a/src/renderer/views/training-department/course/components/EditModal.vue
+++ b/src/renderer/views/training-department/course/components/EditModal.vue
@@ -38,7 +38,7 @@
             v-if="courseStore.errorMessages['numberOfPeriods']"
             class="text-red-700 text-[12px]"
           >
-            {{ courseStore.errorMessages['name'] }}
+            {{ courseStore.errorMessages['numberOfPeriods'] }}
           </p>
         </label>
         <label class="flex flex-col">
@@ -57,6 +57,12 @@
               {{ faculty.name }}
             </option>
           </Field>
+          <p
+            v-if="courseStore.errorMessages['facultyId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ courseStore.errorMessages['facultyId'] }}
+          </p>
         </label>
         <label class="flex flex-col">
           loại môn học
@@ -74,6 +80,12 @@
               {{ courseType.name }}
             </option>
           </Field>
+          <p
+            v-if="courseStore.errorMessages['courseTypeId']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ courseStore.errorMessages['courseTypeId'] }}
+          </p>
         </label>
         <button
           class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"

From 5dbe667b26b73be78963dd319a41aa860810f807 Mon Sep 17 00:00:00 2001
From: Nhat-Original <nhatoriginal@gmail.com>
Date: Sat, 11 May 2024 01:24:20 +0700
Subject: [PATCH 2/2] feat: added program view, missing add program item
 feature

---
 src/renderer/router/index.ts                  |   5 +
 .../student/stores/student.ts                 |  12 +-
 .../TrainingDepartment.vue                    |   1 +
 .../course/components/EditModal.vue           |  28 ++--
 .../training-department/program/Program.vue   |  17 +++
 .../components/AddProgramItemModal.vue        | 118 +++++++++++++++
 .../components/EditProgramItemModal.vue       | 117 +++++++++++++++
 .../program/components/FunctionBar.vue        |  16 +++
 .../program/components/MajorList.vue          |  24 ++++
 .../program/components/ProgramItemTable.vue   |  47 ++++++
 .../program/stores/program.ts                 | 135 ++++++++++++++++++
 11 files changed, 497 insertions(+), 23 deletions(-)
 create mode 100644 src/renderer/views/training-department/program/Program.vue
 create mode 100644 src/renderer/views/training-department/program/components/AddProgramItemModal.vue
 create mode 100644 src/renderer/views/training-department/program/components/EditProgramItemModal.vue
 create mode 100644 src/renderer/views/training-department/program/components/FunctionBar.vue
 create mode 100644 src/renderer/views/training-department/program/components/MajorList.vue
 create mode 100644 src/renderer/views/training-department/program/components/ProgramItemTable.vue
 create mode 100644 src/renderer/views/training-department/program/stores/program.ts

diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 96e770e..6b55cfd 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -7,6 +7,7 @@ import FinanceDepartment from '../views/finance-department/FinanceDepartment.vue
 import Course from '../views/training-department/course/Course.vue';
 import StudentDepartment from '../views/student-department/StudentDepartment.vue';
 import Student from '../views/student-department/student/Student.vue';
+import Program from '../views/training-department/program/Program.vue';
 import resolveDepartmentRoute from '../../utils/resolveDepartmentRoute';
 import getSession from '../../utils/getSession';
 
@@ -43,6 +44,10 @@ const routes: Array<RouteRecordRaw> = [
         path: 'course',
         component: Course,
       },
+      {
+        path: 'program',
+        component: Program,
+      },
     ],
   },
   {
diff --git a/src/renderer/views/student-department/student/stores/student.ts b/src/renderer/views/student-department/student/stores/student.ts
index 84c3596..8239749 100644
--- a/src/renderer/views/student-department/student/stores/student.ts
+++ b/src/renderer/views/student-department/student/stores/student.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { axiosClient } from '../../../../../api/axiosClient';
 import { toast } from '../../../../../utils/toast';
+import { arrayToObject } from '../../../../../utils/arrayToObject';
 
 type Faculty = {
   id: number;
@@ -47,17 +48,6 @@ enum TypeQuery {
   mssv = 'mssv',
 }
 
-function arrayToObject(array: string[]) {
-  const result: Record<string, any> = {};
-
-  array.forEach((item) => {
-    const [key, ...value] = item.split(' ');
-    result[key] = value.join(' ');
-  });
-
-  return result;
-}
-
 export const useStudentStore = defineStore('student', {
   state: () => ({
     currentStudent: null as Student | null,
diff --git a/src/renderer/views/training-department/TrainingDepartment.vue b/src/renderer/views/training-department/TrainingDepartment.vue
index bd2e560..777502b 100644
--- a/src/renderer/views/training-department/TrainingDepartment.vue
+++ b/src/renderer/views/training-department/TrainingDepartment.vue
@@ -5,6 +5,7 @@
       :routes="[
         { name: 'bảng điều khiển', path: '/training-department' },
         { name: 'môn học', path: '/training-department/course' },
+        { name: 'chương trình học', path: '/training-department/program' },
       ]"
     />
     <div class="flex flex-col grow">
diff --git a/src/renderer/views/training-department/course/components/EditModal.vue b/src/renderer/views/training-department/course/components/EditModal.vue
index 8941a6c..d463f0d 100644
--- a/src/renderer/views/training-department/course/components/EditModal.vue
+++ b/src/renderer/views/training-department/course/components/EditModal.vue
@@ -87,18 +87,22 @@
             {{ courseStore.errorMessages['courseTypeId'] }}
           </p>
         </label>
-        <button
-          class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
-          type="submit"
-        >
-          Lưu lại
-        </button>
-        <button
-          class="row-start-4 btn w-[200px] bg-error-text text-base-white hover:bg-delete-button-hover"
-          @click="handleDelete"
-        >
-          Xóa
-        </button>
+        <div class="col-span-3 flex gap-10">
+          <button
+            class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+            type="submit"
+          >
+            Lưu lại
+          </button>
+
+          <button
+            class="row-start-4 btn w-[200px] bg-error-text text-base-white hover:bg-delete-button-hover"
+            type="button"
+            @click="handleDelete"
+          >
+            Xóa
+          </button>
+        </div>
       </Form>
     </div>
   </dialog>
diff --git a/src/renderer/views/training-department/program/Program.vue b/src/renderer/views/training-department/program/Program.vue
new file mode 100644
index 0000000..c23eeb9
--- /dev/null
+++ b/src/renderer/views/training-department/program/Program.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="grow flex flex-col gap-8 items-center p-[40px]">
+    <FunctionBar />
+    <div class="flex h-[calc(100vh-300px)] w-full">
+      <MajorList />
+      <ProgramItemTable />
+    </div>
+    <EditProgramItemModal />
+  </div>
+</template>
+
+<script setup>
+import FunctionBar from './components/FunctionBar.vue';
+import MajorList from './components/MajorList.vue';
+import ProgramItemTable from './components/ProgramItemTable.vue';
+import EditProgramItemModal from './components/EditProgramItemModal.vue';
+</script>
diff --git a/src/renderer/views/training-department/program/components/AddProgramItemModal.vue b/src/renderer/views/training-department/program/components/AddProgramItemModal.vue
new file mode 100644
index 0000000..e820455
--- /dev/null
+++ b/src/renderer/views/training-department/program/components/AddProgramItemModal.vue
@@ -0,0 +1,118 @@
+// TODO: handle add program item logic
+<template>
+  <button
+    class="btn bg-secondary-400 text-base-white hover:bg-secondary-300"
+    onclick="add_program_item_modal.showModal()"
+  >
+    Thêm môn học vào chương trình
+  </button>
+  <dialog id="add_program_item_modal" class="modal">
+    <div class="modal-box min-w-[900px] w p-20">
+      <form method="dialog">
+        <button
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          @click="handleCloseModal"
+        >
+          ✕
+        </button>
+      </form>
+      <h1 class="font-semibold text-3xl">Thêm môn học vào chương trình</h1>
+      <button class="flex items-center gap-2">
+        <img :src="plusCircleIcon" alt="add icon" />
+        <p>Nhập từ CSV</p>
+      </button>
+      <Form class="mt-8 grid grid-cols-4 gap-10" @submit="handleSubmit">
+        <label>
+          Học kì
+          <Field as="select" class="select select-bordered" name="term">
+            <option value="first">học kì 1</option>
+            <option value="second">học kì 2</option>
+            <option value="third">học kì hè</option>
+          </Field>
+
+          <p
+            v-if="programStore.errorMessages['term']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ programStore.errorMessages['term'] }}
+          </p>
+        </label>
+
+        <label class="flex flex-col col-span-3">
+          Ghi chú
+          <Field class="input input-bordered" name="note" type="text" />
+          <p
+            v-if="programStore.errorMessages['note']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ programStore.errorMessages['note'] }}
+          </p>
+        </label>
+        <label class="row-start-2 col-span-4">
+          Môn học
+          <div class="overflow-x-auto w-full h-[300px] border">
+            <table class="table table-zebra">
+              <thead>
+                <tr>
+                  <th>Mã môn học</th>
+                  <th>Tên môn học</th>
+                  <th>Số tiết</th>
+                  <th>Khoa</th>
+                  <th>Loại môn học</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="course in programStore.courses"
+                  :key="course.id"
+                  class="hover:!bg-secondary-100"
+                  :class="{ 'bg-secondary-100': course.id === localCourseId }"
+                  @click="() => handleRowClick(course)"
+                >
+                  <td>{{ course.id }}</td>
+                  <td>{{ course.name }}</td>
+                  <td>{{ course.numberOfPeriods }}</td>
+                  <td>{{ course.faculty.name }}</td>
+                  <td>{{ course.courseType.name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </label>
+        <button
+          class="btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+          type="submit"
+        >
+          Lưu lại
+        </button>
+      </Form>
+    </div>
+  </dialog>
+</template>
+
+<script setup>
+import plusCircleIcon from '../../../../../assets/images/plusCircleIcon.svg';
+import { useProgramStore } from '../stores/program';
+import { Form, Field } from 'vee-validate';
+import { ref } from 'vue';
+
+const programStore = useProgramStore();
+
+programStore.getCourses();
+
+const handleCloseModal = () => {
+  programStore.clearErrorMessages();
+  document.getElementById('add_program_item_modal').close();
+};
+const handleSubmit = async (value, { resetForm }) => {
+  if (Object.keys(courseStore.errorMessages).length === 0) {
+    resetForm();
+    handleCloseModal();
+  }
+};
+const handleRowClick = (course) => {
+  localCourseId.value = course.id;
+};
+
+const localCourseId = ref(null);
+</script>
diff --git a/src/renderer/views/training-department/program/components/EditProgramItemModal.vue b/src/renderer/views/training-department/program/components/EditProgramItemModal.vue
new file mode 100644
index 0000000..068ab2b
--- /dev/null
+++ b/src/renderer/views/training-department/program/components/EditProgramItemModal.vue
@@ -0,0 +1,117 @@
+<template>
+  <dialog id="edit_program_item_modal" class="modal">
+    <div class="modal-box min-w-[900px] w p-20">
+      <form method="dialog">
+        <button
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          @click="handleCloseModal"
+        >
+          ✕
+        </button>
+      </form>
+      <h1 class="font-semibold text-3xl">Chỉnh sửa môn chương trình học</h1>
+      <Form class="mt-8 grid grid-cols-4 gap-10" @submit="handleSubmit">
+        <label>
+          Học kì
+          <Field
+            as="select"
+            class="select select-bordered"
+            name="term"
+            v-model="localFormData.term"
+          >
+            <option value="first">học kì 1</option>
+            <option value="second">học kì 2</option>
+            <option value="third">học kì hè</option>
+          </Field>
+
+          <p
+            v-if="programStore.errorMessages['term']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ programStore.errorMessages['term'] }}
+          </p>
+        </label>
+
+        <label class="flex flex-col col-span-3">
+          Ghi chú
+          <Field
+            class="input input-bordered"
+            name="note"
+            type="text"
+            v-model="localFormData.note"
+          />
+          <p
+            v-if="programStore.errorMessages['note']"
+            class="text-red-700 text-[12px]"
+          >
+            {{ programStore.errorMessages['note'] }}
+          </p>
+        </label>
+
+        <div class="col-span-3 flex gap-10">
+          <button
+            class="row-start-4 btn w-[200px] bg-secondary-400 text-base-white hover:bg-secondary-300"
+            type="submit"
+          >
+            Lưu lại
+          </button>
+
+          <button
+            class="row-start-4 btn w-[200px] bg-error-text text-base-white hover:bg-delete-button-hover"
+            type="button"
+            @click="handleDelete"
+          >
+            Xóa
+          </button>
+        </div>
+      </Form>
+    </div>
+  </dialog>
+</template>
+
+<script setup>
+import { Form, Field } from 'vee-validate';
+import { useProgramStore } from '../stores/program';
+import { reactive, watch } from 'vue';
+
+const programStore = useProgramStore();
+
+const handleCloseModal = () => {
+  programStore.clearErrorMessages();
+  programStore.setCurrentProgramItem(null);
+  document.getElementById('edit_program_item_modal').close();
+};
+const handleSubmit = async (value) => {
+  await programStore.updateProgramItem(value);
+
+  if (Object.keys(programStore.errorMessages).length === 0) {
+    handleCloseModal();
+  }
+};
+const handleDelete = async () => {
+  await programStore.deleteProgramItem(programStore.currentProgramItem?.id);
+
+  if (Object.keys(programStore.errorMessages).length === 0) {
+    handleCloseModal();
+  }
+};
+
+const localFormData = reactive({
+  term: null,
+  note: null,
+});
+
+watch(
+  () => programStore.currentProgramItem,
+  (newVal) => {
+    if (newVal) {
+      Object.assign(localFormData, programStore.currentProgramItem);
+    } else {
+      Object.assign(localFormData, {
+        term: null,
+        note: null,
+      });
+    }
+  }
+);
+</script>
diff --git a/src/renderer/views/training-department/program/components/FunctionBar.vue b/src/renderer/views/training-department/program/components/FunctionBar.vue
new file mode 100644
index 0000000..7c82918
--- /dev/null
+++ b/src/renderer/views/training-department/program/components/FunctionBar.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="w-full flex items-center justify-between gap-[50px]">
+    <AddProgramItemModal />
+    <div>
+      <span class="font-bold">Ngành học:</span>
+      {{ programStore.currentProgram?.major.name }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import AddProgramItemModal from './AddProgramItemModal.vue';
+import { useProgramStore } from '../stores/program';
+
+const programStore = useProgramStore();
+</script>
diff --git a/src/renderer/views/training-department/program/components/MajorList.vue b/src/renderer/views/training-department/program/components/MajorList.vue
new file mode 100644
index 0000000..cf50a83
--- /dev/null
+++ b/src/renderer/views/training-department/program/components/MajorList.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="overflow-y-scroll w-[250px]">
+    <div class="p-4 font-bold text-center">Chương trình học</div>
+    <ul>
+      <li
+        v-for="major in programStore.majors"
+        :key="major.id"
+        class="p-4 hover:bg-base-grey-300 cursor-pointer w-full"
+        :class="{
+          'bg-base-grey-300': programStore.currentProgram?.majorId === major.id,
+        }"
+        @click="() => programStore.getProgramByMajorId(major.id)"
+      >
+        {{ major.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { useProgramStore } from '../stores/program.ts';
+const programStore = useProgramStore();
+programStore.getMajors();
+</script>
diff --git a/src/renderer/views/training-department/program/components/ProgramItemTable.vue b/src/renderer/views/training-department/program/components/ProgramItemTable.vue
new file mode 100644
index 0000000..791e931
--- /dev/null
+++ b/src/renderer/views/training-department/program/components/ProgramItemTable.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
+    <table class="table table-zebra">
+      <thead>
+        <tr>
+          <th>Mã môn học</th>
+          <th>Tên môn học</th>
+          <th>Học kì</th>
+          <th>Ghi chú</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="programItem in programStore.currentProgram?.programItems"
+          :key="programItem.id"
+          class="hover:!bg-secondary-100"
+          @click="() => handleRowClick(programItem)"
+        >
+          <td>{{ programItem.course?.id }}</td>
+          <td>{{ programItem.course?.name }}</td>
+          <td>
+            {{
+              programItem.term === 'first'
+                ? 'học kì 1'
+                : programStore.term === 'second'
+                  ? 'học kì 2'
+                  : 'học kì hè'
+            }}
+          </td>
+          <td>{{ programItem.note }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { useProgramStore } from '../stores/program';
+const programStore = useProgramStore();
+
+programStore.getProgramByMajorId(programStore.majors[0]?.id);
+
+const handleRowClick = (programItem) => {
+  programStore.setCurrentProgramItem(programItem);
+  document.getElementById('edit_program_item_modal').showModal();
+};
+</script>
diff --git a/src/renderer/views/training-department/program/stores/program.ts b/src/renderer/views/training-department/program/stores/program.ts
new file mode 100644
index 0000000..f1ddd48
--- /dev/null
+++ b/src/renderer/views/training-department/program/stores/program.ts
@@ -0,0 +1,135 @@
+import { defineStore } from 'pinia';
+import { axiosClient } from '../../../../../api/axiosClient';
+import { toast } from '../../../../../utils/toast';
+import { arrayToObject } from '../../../../../utils/arrayToObject';
+
+enum Term {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+}
+
+type Course = {
+  id: number;
+  name: string;
+  numberOfPeriods: number;
+  courseTypeId: number;
+  facultyId: number;
+};
+
+type ProgramItem = {
+  id: number;
+  programId: number;
+  courseId: number;
+  term: Term;
+  note: string;
+  course: Course;
+};
+
+type Major = {
+  id: number;
+  name: string;
+  facultyId: number;
+};
+
+type Program = {
+  id: number;
+  majorId: number;
+  major: Major;
+  programItems: ProgramItem[];
+};
+
+type State = {
+  majors: Major[];
+  courses: Course[];
+  currentProgram: Program | null;
+  currentProgramItem: ProgramItem | null;
+  errorMessages: Record<string, string>;
+  searchQuery: string;
+};
+
+const useProgramStore = defineStore('program', {
+  state: (): State => ({
+    majors: [],
+    courses: [],
+    currentProgram: null,
+    currentProgramItem: null,
+    errorMessages: {},
+    searchQuery: '',
+  }),
+  actions: {
+    async getMajors() {
+      const response = await axiosClient.get('/major');
+      this.majors = response.data;
+      await this.getProgramByMajorId(this.majors[0].id);
+    },
+
+    async getCourses() {
+      const response = await axiosClient.get(
+        `/course?search=${this.searchQuery}`,
+        {
+          id: `list-course`,
+          cache: {
+            update: {
+              [`list-course`]: 'delete',
+            },
+          },
+        }
+      );
+      this.courses = response.data;
+    },
+
+    async getProgramByMajorId(majorId: number) {
+      const response = await axiosClient.get(`/major/${majorId}/program`, {
+        id: `program-major-${majorId}`,
+        cache: {
+          update: {
+            [`program-major-${majorId}`]: 'delete',
+          },
+        },
+      });
+      this.currentProgram = response.data;
+    },
+
+    async updateProgramItem(programItem: Partial<ProgramItem>) {
+      try {
+        await axiosClient.patch(
+          `/program-item/${this.currentProgramItem?.id}`,
+          programItem
+        );
+        this.clearErrorMessages();
+        this.getProgramByMajorId(this.currentProgram?.majorId);
+        toast('Cập nhật môn chương trình học thành công', 'success');
+      } catch (error) {
+        this.errorMessages = arrayToObject(error.response.data.message) || {};
+        toast('Cập nhật môn chương trình học thất bại', 'error');
+      }
+    },
+
+    async deleteProgramItem(id: number | string) {
+      try {
+        await axiosClient.delete(`/program-item/${id}`);
+        this.currentProgramItem = null;
+        this.getProgramByMajorId(this.currentProgram?.majorId);
+        toast('Xóa môn chương trình học thành công', 'success');
+      } catch (error) {
+        toast('Xóa môn chương trình học thất bại', 'error');
+      }
+    },
+
+    updateSearchQuery(value: string) {
+      this.searchQuery = value;
+      this.getCourses();
+    },
+
+    clearErrorMessages() {
+      this.errorMessages = {};
+    },
+
+    setCurrentProgramItem(programItem: ProgramItem) {
+      this.currentProgramItem = programItem;
+    },
+  },
+});
+
+export { useProgramStore };