Skip to content

My Studies Page #134

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

My Studies Page #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad24393
MyStudiesPage UI update
leeyandrea Dec 3, 2024
8415cbf
MyStudiesPage UI Update #2
leeyandrea Dec 3, 2024
540a26e
improved readability
leeyandrea Dec 4, 2024
c52cc22
Merge remote-tracking branch 'origin/main' into MyStudiesPage
amberchow8 Dec 4, 2024
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
2 changes: 1 addition & 1 deletion packages/ui/src/components/ui/AppButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ defineEmits(["click"]);

<template>
<el-button
class="bg-primary-300 text-white border border-primary-400 rounded-lg px-5 py-1 justify-center"
class="bg-primary-200 text-neutral-10 border border-primary-300 rounded-lg px-5 py-1 justify-center"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should check with Christine to confirm the styling of the button

@click="$emit('click')"
>
<slot />
Expand Down
80 changes: 68 additions & 12 deletions packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { useAuthStore } from "../../stores/auth";
import { useRouter } from "vue-router";
import MyStudiesItem from "./components/MyStudiesItem.vue";
import { useQuery } from "@tanstack/vue-query";
import { useQuery, useMutation } from "@tanstack/vue-query";
import studiesAPI from "@/api/studies";
import { useMutation } from "@tanstack/vue-query";

import MyStudiesItem from "./components/MyStudiesItem.vue";
import RecentStudiesItem from "./components/RecentStudiesItem.vue";
import AppButton from "@/components/ui/AppButton.vue";

const router = useRouter();
Expand Down Expand Up @@ -36,15 +37,70 @@ const studies = data;
<AppButton @click="mutate">+ New Study</AppButton>
</div>

<div class="flex flex-col">
<MyStudiesItem
v-for="study in studies"
:id="study._id"
:key="study._id"
:name="study.name"
:description="study.description"
@deleted="refetch"
/>
<div
class="mt-8 mb-3 flex text-neutral-600 text-lg font-normal leading-tight"
>
Recent
</div>

<div class="space-y-6">
<!-- RECENT STUDIES -->
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should figure out how to show recent studies if no studies have been made yet

<div class="overflow-y-auto">
<div class="flex gap-4">
<RecentStudiesItem
v-for="study in studies"
:id="study._id"
:key="study._id"
:name="study.name"
:description="study.description"
@deleted="refetch"
/>
</div>
</div>
<!-- STUDY TABLE -->
<div class="rounded-xl border border-neutral-300 overflow-y-auto">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using div for the table, could look into using HTML tables (https://www.w3schools.com/html/html_tables.asp) or Element Plus tables (https://element-plus.org/en-US/component/table.html#table)

<!-- TABLE HEADERS -->
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an issue with clipping and responsiveness when screen is small I think due to the way the studies items are being handled within the MyStudiesItem component and the table headers in the MyStudiesPage. Not immediately noticeable. will fix when I figure out how

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like there's a large margin being applied to the entire my studies page that cuts off study items when the screen becomes small

<div
class="px-8 py-[18px] bg-neutral-50 rounded-t-xl border-b border-neutral-300 flex justify-between items-start"
>
<div class="flex items-center gap-[130px]">
<div
class="w-[82px] text-neutral-600 text-lg font-bold leading-tight"
>
Name
</div>
<div
class="w-[432px] text-neutral-600 text-lg font-bold leading-tight"
>
Description
</div>
</div>
<div class="flex items-center gap-24">
<div class="text-neutral-600 text-lg font-bold leading-tight">
Status
</div>
<div class="text-neutral-600 text-lg font-bold leading-tight">
Conditions
</div>
<div
class="w-[110px] text-neutral-600 text-lg font-bold leading-tight"
>
Last Modified
</div>
</div>
</div>
<!-- STUDIES -->
<div class="self-stretch">
<MyStudiesItem
v-for="study in studies"
:id="study._id"
:key="study._id"
:name="study.name"
:description="study.description"
@deleted="refetch"
/>
</div>
</div>
</div>
</div>
</template>
48 changes: 44 additions & 4 deletions packages/ui/src/pages/MyStudiesPage/components/MyStudiesItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script setup lang="ts">
import studiesAPI from "@/api/studies";
import { useMutation } from "@tanstack/vue-query";
import AppButton from "@/components/ui/AppButton.vue";

const emit = defineEmits(["deleted"]);
const props = defineProps<{ name: string; description: string; id: string }>();
const { mutate } = useMutation({
useMutation({
mutationFn: () => studiesAPI.deleteStudy(props.id),
onSuccess: () => {
emit("deleted");
Expand All @@ -14,7 +13,48 @@ const { mutate } = useMutation({
</script>

<template>
<div class="flex border-b border-neutral-300 py-6 items-center gap-6">
<RouterLink
:to="{ name: 'study', params: { id } }"
class="block hover:bg-neutral-50 transition-colors"
>
<div
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of divs here, so I'm wondering if it could be simplified after switching to using an HTML or Element Plus table to list all the studies. Maybe we could get rid of MyStudiesItem and change it to MyStudiesTable so all studies are contained in one component

class="flex-grow-0 w-auto px-8 py-4 bg-neutral-10 border-b border-neutral-300 justify-between items-center flex"
>
<div class="justify-start items-center gap-8 flex flex-1">
<div
class="w-[182px] text-neutral-600 text-lg font-bold leading-tight flex"
>
{{ name }}
</div>
<div
class="w-[432px] text-neutral-600 text-lg font-normal leading-tight line-clamp-1"
>
{{ description }}
</div>
</div>
<div class="justify-start items-center gap-[100px] flex">
<div
class="px-3 py-1.5 bg-primary-50 rounded-lg border border-primary-100 justify-start items-center gap-2 flex"
>
<div class="text-neutral-600 text-lg font-normal leading-tight">
Editing
</div>
</div>
<div
class="w-[60px] text-neutral-600 text-lg font-normal leading-tight"
>
50
</div>
<div
class="w-[110px] text-neutral-500 text-lg font-normal leading-tight"
>
10.24.2024
</div>
</div>
</div>
</RouterLink>

<!-- <div class="flex border-b border-neutral-300 py-6 items-center gap-6">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove commented code?

<h1 class="whitespace-nowrap text-2xl">
{{ name }}
</h1>
Expand All @@ -26,5 +66,5 @@ const { mutate } = useMutation({
<AppButton>Edit</AppButton>
</RouterLink>
<AppButton @click="mutate">Delete</AppButton>
</div>
</div> -->
</template>
73 changes: 73 additions & 0 deletions packages/ui/src/pages/MyStudiesPage/components/RecentStudiesItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<script setup lang="ts">
import studiesAPI from "@/api/studies";
import { useMutation } from "@tanstack/vue-query";
const emit = defineEmits(["deleted"]);
const props = defineProps<{ name: string; description: string; id: string }>();
useMutation({
mutationFn: () => studiesAPI.deleteStudy(props.id),
onSuccess: () => {
emit("deleted");
},
});
</script>

<template>
<RouterLink
:to="{ name: 'study', params: { id } }"
class="block hover:bg-neutral-50 transition-colors"
>
<div
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can use Element Plus Card component (https://element-plus.org/en-US/component/card.html#card) instead of a div for each item. Also seems like there are a lot of nested divs here, can look into simplifying the HTML

class="h-[179px] px-6 py-[21px] bg-neutral-10 rounded-[15px] border border-neutral-300 flex-col justify-between items-start gap-2.5"
>
<div class="self-stretch justify-start items-end">
<div
class="w-[357px] flex-col justify-start items-start gap-3 inline-flex"
>
<div class="text-neutral-600 h-7 text-2xl font-bold leading-7">
{{ name }}
</div>
<div
class="self-stretch h-9 text-neutral-600 text-sm font-medium leading-[18px] line-clamp-2"
>
{{ description }}
</div>
</div>
<div class="py-3 justify-start items-end gap-[87px] inline-flex">
<div class="w-[188px] flex-col justify-start items-start gap-1 flex">
<div class="justify-center items-center inline-flex">
<div>
<span class="text-neutral-600 text-sm font-bold leading-tight"
>Variants: </span
><span
class="text-neutral-600 text-sm font-medium leading-[18px]"
>50</span
>
</div>
</div>
<div
class="self-stretch justify-start items-center gap-[5px] inline-flex"
>
<div
class="w-[86px] h-[17px] text-neutral-400 text-sm font-medium leading-[18px]"
>
Last Modified
</div>
<div class="w-1 h-1 bg-[#b9adaa] rounded-full" />
<div
class="w-[88px] h-[17px] text-neutral-400 text-sm font-medium leading-[18px]"
>
Oct 24, 2024
</div>
</div>
</div>
<div
class="px-3 py-1.5 bg-primary-50 rounded-lg border border-primary-100 justify-start items-center gap-2 flex"
>
<div class="text-neutral-600 text-base font-normal">Editing</div>
</div>
</div>
</div>
</div>
</RouterLink>
</template>
Loading
Loading