News items can be edited from admin interface

backend/src/predicTCR_server/app.py

@@ -450,6 +450,7 @@ def runner_result():
                     max_filesize_h5_mb=50,
                     max_filesize_csv_mb=10,
                     about_md="",
+                    news_items_json="[]",
                 )
             )
             db.session.commit()

backend/src/predicTCR_server/model.py

@@ -57,6 +57,7 @@ class Settings(db.Model):
     max_filesize_h5_mb: Mapped[int] = mapped_column(Integer, nullable=False)
     max_filesize_csv_mb: Mapped[int] = mapped_column(Integer, nullable=False)
     about_md: Mapped[str] = mapped_column(String, nullable=False)
+    news_items_json: Mapped[str] = mapped_column(String, nullable=False)
 
     def as_dict(self):
         return {c: getattr(self, c) for c in inspect(self).attrs.keys()}

backend/tests/test_app.py

@@ -146,6 +146,7 @@ def test_get_settings_valid(client):
         "max_filesize_h5_mb": 50,
         "max_filesize_csv_mb": 10,
         "about_md": "",
+        "news_items_json": "[]",
     }
 
 
@@ -165,6 +166,7 @@ def test_update_settings_valid(client):
         "max_filesize_csv_mb": 12,
         "about_md": "# About",
         "invalid-key": "invalid",
+        "news_items_json": "[{'id': '1', 'url': 'https://example.com', 'text': 'Example'}]",
     }
     response = client.post("/api/admin/settings", headers=headers, json=new_settings)
     assert response.status_code == 200

frontend/src/components/AboutEditor.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { FwbButton, FwbTextarea } from "flowbite-vue";
+import { useSettingsStore } from "@/stores/settings";
+
+const settingsStore = useSettingsStore();
+</script>
+
+<template>
+  <div class="flex flex-col mb-2 p-2" v-if="settingsStore.settings">
+    <fwb-textarea
+      v-model="settingsStore.settings.about_md"
+      :rows="32"
+      class="mb-2"
+      label="About page text (markdown)"
+    ></fwb-textarea>
+    <fwb-button @click="settingsStore.saveChanges" class="mt-2" color="green">
+      Save
+    </fwb-button>
+  </div>
+</template>

frontend/src/components/CarouselComponent.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { VueperSlides, VueperSlide } from "vueperslides";
 import "vueperslides/dist/vueperslides.css";
-import items from "@/assets/news.json";
+import { useSettingsStore } from "@/stores/settings";
+const settingsStore = useSettingsStore();
+
+const items = computed(() => {
+  try {
+    return JSON.parse(settingsStore.settings.news_items_json);
+  } catch {
+    return [];
+  }
+});
 </script>
 
 <template>

frontend/src/components/NewsEditor.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { FwbButton, FwbInput, FwbListGroupItem } from "flowbite-vue";
+import { computed } from "vue";
+import { useSettingsStore } from "@/stores/settings";
+
+const settingsStore = useSettingsStore();
+
+type Item = {
+  id: string;
+  url: string;
+  text: string;
+};
+
+const items = computed((): Array<Item> => {
+  try {
+    return JSON.parse(settingsStore.settings.news_items_json);
+  } catch (e) {
+    console.log(e);
+    return [];
+  }
+});
+
+function add() {
+  settingsStore.settings.news_items_json = JSON.stringify(
+    items.value.concat([{ id: "", url: "", text: "" }]),
+  );
+}
+
+function remove(id: string) {
+  settingsStore.settings.news_items_json = JSON.stringify(
+    items.value.filter((item) => item.id !== id),
+  );
+}
+
+function save() {
+  settingsStore.settings.news_items_json = JSON.stringify(items.value);
+  settingsStore.saveChanges();
+}
+</script>
+
+<template>
+  <div class="flex flex-col mb-2 p-2" v-if="settingsStore.settings">
+    <fwb-list-group-item v-for="item in items" v-bind:key="item.id">
+      <div class="flex flex-col mb-4 flex-grow mr-2">
+        <fwb-input v-model="item.id" label="ID" class="mb-1" />
+        <fwb-input v-model="item.url" label="URL" class="mb-1" />
+        <fwb-input v-model="item.text" label="Text" class="mb-1" />
+        <fwb-button
+          color="red"
+          class="grow-0"
+          @click="
+            () => {
+              remove(item.id);
+            }
+          "
+          >Delete</fwb-button
+        >
+      </div>
+    </fwb-list-group-item>
+    <fwb-list-group-item>
+      <fwb-button @click="add" class="my-2 grow">Add new item</fwb-button>
+    </fwb-list-group-item>
+    <fwb-button @click="save" class="mt-2" color="green"> Save </fwb-button>
+  </div>
+</template>

frontend/src/components/SettingsTable.vue

@@ -1,24 +1,8 @@
 <script setup lang="ts">
-import { FwbButton, FwbInput, FwbRange, FwbTextarea } from "flowbite-vue";
+import { FwbButton, FwbInput, FwbRange } from "flowbite-vue";
 import { useSettingsStore } from "@/stores/settings";
-import { apiClient, logout } from "@/utils/api-client";
 
 const settingsStore = useSettingsStore();
-settingsStore.refresh();
-
-function update_settings() {
-  apiClient
-    .post("admin/settings", settingsStore.settings)
-    .then(() => {
-      console.log("Settings updated");
-    })
-    .catch((error) => {
-      if (error.response.status > 400) {
-        logout();
-      }
-      console.log(error);
-    });
-}
 </script>
 
 <template>
@@ -91,13 +75,7 @@ function update_settings() {
       :label="`Max csv upload filesize: ${settingsStore.settings.max_filesize_csv_mb}mb`"
       class="mb-2"
     />
-    <fwb-textarea
-      v-model="settingsStore.settings.about_md"
-      :rows="32"
-      class="mb-2"
-      label="About page text (markdown)"
-    ></fwb-textarea>
-    <fwb-button @click="update_settings" class="mt-2" color="green">
+    <fwb-button @click="settingsStore.saveChanges" class="mt-2" color="green">
       Save settings
     </fwb-button>
   </div>

frontend/src/stores/settings.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import type { Settings } from "@/utils/types";
 import { defineStore } from "pinia";
-import { apiClient } from "@/utils/api-client";
+import { apiClient, logout } from "@/utils/api-client";
 
 export const useSettingsStore = defineStore("settings", () => {
   const settings = ref({
@@ -17,6 +17,7 @@ export const useSettingsStore = defineStore("settings", () => {
     about_md: "",
     max_filesize_h5_mb: 1,
     max_filesize_csv_mb: 1,
+    news_items_json: "[]",
   } as Settings);
 
   function refresh() {
@@ -30,5 +31,19 @@ export const useSettingsStore = defineStore("settings", () => {
       });
   }
 
-  return { settings, refresh };
+  function saveChanges() {
+    apiClient
+      .post("admin/settings", settings.value)
+      .then(() => {
+        console.log("Settings updated");
+      })
+      .catch((error) => {
+        if (error.response?.status > 400) {
+          logout();
+        }
+        console.log(error);
+      });
+  }
+
+  return { settings, refresh, saveChanges };
 });

frontend/src/utils/types.ts

@@ -39,6 +39,7 @@ export type Settings = {
   about_md: string;
   max_filesize_h5_mb: number;
   max_filesize_csv_mb: number;
+  news_items_json: string;
 };
 
 export type Job = {

frontend/src/views/AdminView.vue

@@ -5,10 +5,12 @@ import UsersTable from "@/components/UsersTable.vue";
 import ListComponent from "@/components/ListComponent.vue";
 import JobsTable from "@/components/JobsTable.vue";
 import ListItem from "@/components/ListItem.vue";
+import NewsEditor from "@/components/NewsEditor.vue";
 import { FwbButton, FwbTab, FwbTabs } from "flowbite-vue";
 import { onUnmounted, ref } from "vue";
 import type { Sample } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
+import AboutEditor from "@/components/AboutEditor.vue";
 
 function generate_api_token() {
   apiClient.get("admin/runner_token").then((response) => {
@@ -99,6 +101,20 @@ onUnmounted(() => {
             </ListItem>
           </ListComponent>
         </fwb-tab>
+        <fwb-tab name="news" title="News">
+          <ListComponent>
+            <ListItem title="News items">
+              <NewsEditor />
+            </ListItem>
+          </ListComponent>
+        </fwb-tab>
+        <fwb-tab name="about" title="About">
+          <ListComponent>
+            <ListItem title="About page">
+              <AboutEditor />
+            </ListItem>
+          </ListComponent>
+        </fwb-tab>
         <fwb-tab name="settings" title="Settings">
           <ListComponent>
             <ListItem title="Settings">