Refactor frontend

- rename ListItem -> CardComponent - add ListComponent and ListItem for timelines
ssciwr · Oct 21, 2024 · 9ba4d04 · 9ba4d04
1 parent e4e15c4
commit 9ba4d04
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 282 deletions.
diff --git a/frontend/src/components/CardComponent.vue b/frontend/src/components/CardComponent.vue
@@ -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>
diff --git a/frontend/src/components/ListComponent.vue b/frontend/src/components/ListComponent.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { FwbTimeline } from "flowbite-vue";
+</script>
+
+<template>
+  <fwb-timeline>
+    <slot></slot>
+  </fwb-timeline>
+</template>
diff --git a/frontend/src/components/ListItem.vue b/frontend/src/components/ListItem.vue
@@ -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>
diff --git a/frontend/src/components/LoginComponent.vue b/frontend/src/components/LoginComponent.vue
@@ -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("");

diff --git a/frontend/src/components/ResetComponent.vue b/frontend/src/components/ResetComponent.vue
@@ -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("");
@@ -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:
@@ -41,5 +41,5 @@ function do_reset() {
         {{ reset_message }}
       </fwb-alert>
     </div>
-  </ListItem>
+  </CardComponent>
 </template>
diff --git a/frontend/src/components/UsersTable.vue b/frontend/src/components/UsersTable.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// @ts-ignore
 import {
   FwbButton,
   FwbTable,
@@ -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;

diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
@@ -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";
@@ -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>
 

diff --git a/frontend/src/views/ActivateView.vue b/frontend/src/views/ActivateView.vue
@@ -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("");
@@ -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>
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
@@ -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";
@@ -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>