Skip to content

Commit

Permalink
Merge pull request #73 from ssciwr/fix_52_news_items_editable_from_ad…
Browse files Browse the repository at this point in the history
…min_interface

News items can be edited from admin interface
  • Loading branch information
lkeegan authored Jan 3, 2025
2 parents 0c1b7df + a3b75b4 commit d91b3e4
Show file tree
Hide file tree
Showing 11 changed files with 136 additions and 44 deletions.
1 change: 1 addition & 0 deletions backend/src/predicTCR_server/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
1 change: 1 addition & 0 deletions backend/src/predicTCR_server/model.py
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand Down
2 changes: 2 additions & 0 deletions backend/tests/test_app.py
Original file line number Diff line number Diff line change
Expand Up @@ -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": "[]",
}


Expand All @@ -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
Expand Down
17 changes: 0 additions & 17 deletions frontend/src/assets/news.json

This file was deleted.

20 changes: 20 additions & 0 deletions frontend/src/components/AboutEditor.vue
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 11 additions & 1 deletion frontend/src/components/CarouselComponent.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
65 changes: 65 additions & 0 deletions frontend/src/components/NewsEditor.vue
Original file line number Diff line number Diff line change
@@ -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>
26 changes: 2 additions & 24 deletions frontend/src/components/SettingsTable.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down
19 changes: 17 additions & 2 deletions frontend/src/stores/settings.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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() {
Expand All @@ -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 };
});
1 change: 1 addition & 0 deletions frontend/src/utils/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/views/AdminView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit d91b3e4

Please sign in to comment.