✨ 🚧 Add admin api and ui for timetable management

src/components/settings/expand-section.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-vue-next";
+import { ref } from "vue";
+
+const collapsed = ref(true);
+
+defineProps(["title"]);
+</script>
+
+<template>
+  <div class="title" @click="collapsed = !collapsed">
+    <ChevronRightIcon v-if="collapsed" />
+    <ChevronDownIcon v-else />
+    <span>{{ title }}</span>
+  </div>
+  <slot v-if="!collapsed" />
+</template>
+
+<style scoped>
+.title {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  user-select: none;
+  font-size: 19px;
+  margin: 5px 0px;
+}
+</style>

src/components/settings/timetable-card.vue

@@ -11,7 +11,7 @@ import {
 } from "lucide-vue-next";
 import { DownloadIcon } from "lucide-vue-next";
 
-defineProps(["timetable", "editable", "remote", "selected"]);
+defineProps(["timetable", "editable", "remote", "selected", "admin"]);
 defineEmits(["click", "edit", "delete", "copy", "export", "upload"]);
 
 const deleteConfirm = ref(false);
@@ -32,16 +32,17 @@ watch(deleteConfirm, (value) => {
       <div class="info">
         <span class="name">{{ timetable.title }}</span>
         <span class="detail"
-          >{{ $t("settings.source") }}: {{ timetable.source }}</span
+          >{{ $t("settings.source") }}: {{ timetable.source }}
+          <span v-if="admin">, Class: {{ timetable.class }}</span></span
         >
       </div>
     </div>
 
     <div class="buttons">
-      <DownloadIcon @click="$emit('export')" />
+      <DownloadIcon v-if="!admin" @click="$emit('export')" />
       <Edit2Icon v-if="editable && !remote" @click="$emit('edit')" />
       <UploadCloudIcon v-if="editable && remote" @click="$emit('upload')" />
-      <CopyIcon @click="$emit('copy')" />
+      <CopyIcon v-if="!admin" @click="$emit('copy')" />
       <TrashIcon
         v-if="editable && !remote && !deleteConfirm"
         @click="deleteConfirm = true"