Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor frontend #27

Merged
merged 1 commit into from
Oct 21, 2024
Merged

Refactor frontend #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions frontend/src/components/CardComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script setup lang="ts">
import { FwbCard } from "flowbite-vue";

defineProps({
title: String,
img: String,
});
</script>

<template>
<div class="flex mb-4 justify-center !max-w-full">
<fwb-card :img-src="img" variant="horizontal" href="">
<div class="p-5">
<h5
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
{{ title }}
</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">
<slot></slot>
</p>
</div>
</fwb-card>
</div>
</template>
9 changes: 9 additions & 0 deletions frontend/src/components/ListComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { FwbTimeline } from "flowbite-vue";
</script>

<template>
<fwb-timeline>
<slot></slot>
</fwb-timeline>
</template>
34 changes: 18 additions & 16 deletions frontend/src/components/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<script setup lang="ts">
import { FwbCard } from "flowbite-vue";
import {
FwbTimelineBody,
FwbTimelineContent,
FwbTimelineItem,
FwbTimelinePoint,
FwbTimelineTitle,
} from "flowbite-vue";

defineProps({
title: String,
img: String,
});
</script>

<template>
<div class="flex mb-4 justify-center !max-w-full">
<fwb-card :img-src="img" variant="horizontal" href="">
<div class="p-5">
<h5
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
{{ title }}
</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">
<slot></slot>
</p>
</div>
</fwb-card>
</div>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" alt="predicTCR" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title>{{ title }}</fwb-timeline-title>
<fwb-timeline-body>
<slot></slot>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
</template>
1 change: 0 additions & 1 deletion frontend/src/components/LoginComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { FwbInput, FwbButton, FwbAlert } from "flowbite-vue";
import { apiClient } from "@/utils/api-client";
import ListItem from "@/components/ListItem.vue";
import router from "@/router";
const userStore = useUserStore();
const login_email_address = ref("");
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/ResetComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref } from "vue";
import { apiClient } from "@/utils/api-client";
import ListItem from "@/components/ListItem.vue";
import CardComponent from "@/components/CardComponent.vue";
import { FwbInput, FwbButton, FwbAlert } from "flowbite-vue";
const reset_email_address = ref("");
const reset_message = ref("");
Expand All @@ -20,7 +20,7 @@ function do_reset() {
</script>

<template>
<ListItem title="Reset password">
<CardComponent title="Reset password">
<p>
If you have forgotten your password you can request a password reset email
by entering the email address you used to sign up:
Expand All @@ -41,5 +41,5 @@ function do_reset() {
{{ reset_message }}
</fwb-alert>
</div>
</ListItem>
</CardComponent>
</template>
2 changes: 0 additions & 2 deletions frontend/src/components/UsersTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script setup lang="ts">
// @ts-ignore
import {
FwbButton,
FwbTable,
Expand All @@ -15,7 +14,6 @@ import {
import type { User } from "@/utils/types";
import { apiClient, logout } from "@/utils/api-client";
import { ref, computed } from "vue";
import SignupComponent from "@/components/SignupComponent.vue";

const props = defineProps<{
is_runner: boolean;
Expand Down
125 changes: 40 additions & 85 deletions frontend/src/views/AboutView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,8 @@
<script setup lang="ts">
import {
FwbA,
FwbJumbotron,
FwbButton,
FwbTimeline,
FwbTimelineBody,
FwbTimelineContent,
FwbTimelineItem,
FwbTimelinePoint,
FwbTimelineTitle,
FwbModal,
} from "flowbite-vue";
import { FwbA, FwbJumbotron, FwbButton, FwbModal } from "flowbite-vue";
import { ref } from "vue";
import ListComponent from "@/components/ListComponent.vue";
import ListItem from "@/components/ListItem.vue";
import LoginComponent from "@/components/LoginComponent.vue";
import SignupComponent from "@/components/SignupComponent.vue";
import { RouterLink } from "vue-router";
Expand Down Expand Up @@ -56,79 +47,43 @@ function openModalSignup() {
</div>
</fwb-jumbotron>
<div class="p-4">
<fwb-timeline>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title> About </fwb-timeline-title>
<fwb-timeline-body>
Based on code from the
<fwb-a href="https://www.dkfz.de/" target="_blank">DKFZ</fwb-a>.
Read our paper at
<fwb-a
href="https://www.nature.com/articles/s41587-024-02161-y"
target="_blank"
>Nature Biotechnology</fwb-a
>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title> Feedback </fwb-timeline-title>
<fwb-timeline-body>
<p>
Questions or feedback about this service are welcome at
<fwb-a href="mailto:[email protected]">[email protected]</fwb-a>
</p>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title> References </fwb-timeline-title>
<fwb-timeline-body>
<p>
The
<fwb-a href="https://github.com/ssciwr/predicTCR"
>predicTCR web service</fwb-a
>
was developed by the
<fwb-a href="https://ssc.iwr.uni-heidelberg.de/"
>Scientific Software Center</fwb-a
>
of Heidelberg University.
</p>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title> Funding </fwb-timeline-title>
<fwb-timeline-body>
<div class="flex flex-col md:flex-row">
<a href="https://dktk.dkfz.de/"
><img class="h-8 m-2 md:pr-5" src="/dktk.jpg" alt="DKTK"
/></a>
<a href="https://www.dkfz.de/"
><img class="h-8 m-2" src="/dkfz.png" alt="DKFZ"
/></a>
</div>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
</fwb-timeline>
<ListComponent>
<ListItem title="About">
Based on code from the
<fwb-a href="https://www.dkfz.de/" target="_blank">DKFZ</fwb-a>. Read
our paper at
<fwb-a
href="https://www.nature.com/articles/s41587-024-02161-y"
target="_blank"
>Nature Biotechnology</fwb-a
>
</ListItem>
<ListItem title="Feedback">
Questions or feedback about this service are welcome at
<fwb-a href="mailto:[email protected]">[email protected]</fwb-a>
</ListItem>
<ListItem title="References">
The
<fwb-a href="https://github.com/ssciwr/predicTCR"
>predicTCR web service</fwb-a
>
was developed by the
<fwb-a href="https://ssc.iwr.uni-heidelberg.de/"
>Scientific Software Center</fwb-a
>
of Heidelberg University.
</ListItem>
<ListItem title="Funding">
<div class="flex flex-col md:flex-row">
<a href="https://dktk.dkfz.de/"
><img class="h-8 m-2 md:pr-5" src="/dktk.jpg" alt="DKTK"
/></a>
<a href="https://www.dkfz.de/"
><img class="h-8 m-2" src="/dkfz.png" alt="DKFZ"
/></a>
</div>
</ListItem>
</ListComponent>
</div>
</main>

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/views/ActivateView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import ListItem from "@/components/ListItem.vue";
import { ref } from "vue";
import { apiClient } from "@/utils/api-client";
import CardComponent from "@/components/CardComponent.vue";
const props = defineProps({ activation_token: String });

const title = ref("");
Expand Down Expand Up @@ -30,9 +30,9 @@ apiClient

<template>
<main>
<ListItem :title="title">
<CardComponent :title="title">
<p>{{ message }}</p>
<p>Go to <RouterLink to="/login">login</RouterLink> page.</p>
</ListItem>
</CardComponent>
</main>
</template>
90 changes: 26 additions & 64 deletions frontend/src/views/AdminView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
<script setup lang="ts">
import SamplesTable from "@/components/SamplesTable.vue";
import UsersTable from "@/components/UsersTable.vue";
import {
FwbTimeline,
FwbTimelineBody,
FwbTimelineContent,
FwbTimelineItem,
FwbTimelinePoint,
FwbTimelineTitle,
FwbButton,
} from "flowbite-vue";
import ListComponent from "@/components/ListComponent.vue";
import ListItem from "@/components/ListItem.vue";
import { FwbButton } from "flowbite-vue";
import { ref } from "vue";
import type { Sample } from "@/utils/types";
import { apiClient, logout } from "@/utils/api-client";
Expand Down Expand Up @@ -52,61 +46,29 @@ get_samples();
<template>
<main>
<div class="p-4">
<fwb-timeline>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title>Generate runner API Token</fwb-timeline-title>
<fwb-timeline-body>
<p>
Here you can generate a new runner user with an API token for
authentication. Note the token should be kept secret! It is
valid for 6 months, then you will need to generate a new one:
</p>
<p>
<fwb-button @click="generate_api_token">
Generate API Token and copy to clipboard
</fwb-button>
</p>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title>Runners</fwb-timeline-title>
<fwb-timeline-body>
<UsersTable :is_runner="true"></UsersTable>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title>Users</fwb-timeline-title>
<fwb-timeline-body>
<UsersTable :is_runner="false"></UsersTable>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
<fwb-timeline-item>
<fwb-timeline-point>
<img src="/logo.png" />
</fwb-timeline-point>
<fwb-timeline-content>
<fwb-timeline-title>Samples</fwb-timeline-title>
<fwb-timeline-body>
<SamplesTable :samples="samples" :admin="true"></SamplesTable>
</fwb-timeline-body>
</fwb-timeline-content>
</fwb-timeline-item>
</fwb-timeline>
<ListComponent title="Generate runner API Token">
<ListItem>
<p>
Here you can generate a new runner user with an API token for
authentication. Note the token should be kept secret! It is valid
for 6 months, then you will need to generate a new one:
</p>
<p>
<fwb-button @click="generate_api_token">
Generate API Token and copy to clipboard
</fwb-button>
</p>
</ListItem>
<ListItem title="Runners">
<UsersTable :is_runner="true"></UsersTable>
</ListItem>
<ListItem title="Users">
<UsersTable :is_runner="false"></UsersTable>
</ListItem>
<ListItem title="Samples">
<SamplesTable :samples="samples" :admin="true"></SamplesTable>
</ListItem>
</ListComponent>
</div>
</main>
</template>
Loading
Loading