✨ Allow updating remote timetables with permission

src/components/settings/timetable-card.vue

@@ -7,11 +7,12 @@ import {
   TrashIcon,
   AlertCircleIcon,
   CopyIcon,
+  UploadCloudIcon,
 } from "lucide-vue-next";
 import { DownloadIcon } from "lucide-vue-next";
 
-defineProps(["timetable", "editable", "selected"]);
-defineEmits(["click", "edit", "delete", "copy", "export"]);
+defineProps(["timetable", "editable", "remote", "selected"]);
+defineEmits(["click", "edit", "delete", "copy", "export", "upload"]);
 
 const deleteConfirm = ref(false);
 
@@ -38,7 +39,8 @@ watch(deleteConfirm, (value) => {
 
     <div class="buttons">
       <DownloadIcon @click="$emit('export')" />
-      <Edit2Icon v-if="editable" @click="$emit('edit')" />
+      <Edit2Icon v-if="editable && !remote" @click="$emit('edit')" />
+      <UploadCloudIcon v-if="editable && remote" @click="$emit('upload')" />
       <CopyIcon @click="$emit('copy')" />
       <TrashIcon
         v-if="editable && !deleteConfirm"

src/permission.js

@@ -0,0 +1,14 @@
+import { sessionInfo } from "@/store";
+
+export function hasPermission(permission, forValue) {
+  let hasPermission = false;
+  for (const perm of sessionInfo.value.permissions) {
+    if (perm == permission) hasPermission = true;
+    else if (perm == permission + ":" + forValue) hasPermission = true;
+  }
+  return hasPermission;
+}
+
+export function canEditTimetable(id) {
+  return hasPermission("timetable.update", id);
+}

src/views/settings/TimetableSettings.vue

@@ -1,9 +1,18 @@
 <script setup>
 import TimetableCard from "@/components/settings/timetable-card.vue";
-import { timetables, localTimetables, timetableId } from "@/store";
+import {
+  timetable,
+  timetables,
+  localTimetables,
+  timetableId,
+  baseUrl,
+  fetchTimetables,
+} from "@/store";
+import { canEditTimetable } from "@/permission";
 import { PlusIcon, PaperclipIcon } from "lucide-vue-next";
 import { toRaw, ref } from "vue";
 import download from "downloadjs";
+import { loading, loadingProgress } from "@/store";
 
 function copyTimetable(timetable) {
   const newTimetable = structuredClone(toRaw(timetable));
@@ -47,6 +56,34 @@ function exportTimetable(timetable) {
     "application/json"
   );
 }
+
+async function uploadTimetable(id) {
+  loadingProgress.value = 0.1;
+  loading.value = true;
+
+  const timetableData = timetable.value;
+  const response = await fetch(
+    baseUrl + "/timetable?id=" + encodeURIComponent(id),
+    {
+      method: "put",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(timetableData),
+    }
+  );
+
+  if (response.status != 201) {
+    alert("Failed uploading timetable!");
+  } else {
+    loadingProgress.value = 0.5;
+    await fetchTimetables();
+    timetableId.value = id;
+  }
+
+  loadingProgress.value = 1;
+  loading.value = false;
+}
 </script>
 
 <template>
@@ -59,6 +96,7 @@ function exportTimetable(timetable) {
         :timetable="timetable"
         :selected="timetableId == timetable.id"
         :editable="true"
+        :remote="false"
         @click="timetableId = timetable.id"
         @edit="$router.push('timetable/edit/' + timetable.id)"
         @copy="copyTimetable(timetable)"
@@ -92,10 +130,12 @@ function exportTimetable(timetable) {
         :key="timetable.id"
         :timetable="timetable"
         :selected="timetableId == timetable.id"
-        :editable="false"
+        :editable="canEditTimetable(timetable.id)"
+        :remote="true"
         @click="timetableId = timetable.id"
         @copy="copyTimetable(timetable)"
         @export="exportTimetable(timetable)"
+        @upload="uploadTimetable(timetable.id)"
       />
     </div>
   </div>