MyStudiesPage responsiveness UI update

.eslintrc.json

@@ -6,6 +6,7 @@
   },
   "extends": [
     "eslint:recommended",
+    "prettier",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/stylistic",
     "plugin:vue/vue3-recommended",
@@ -21,7 +22,8 @@
     "prettier/prettier": [
       "error",
       {
-        "endOfLine": "auto"
+        "endOfLine": "auto",
+        "tabWidth": 2
       }
     ],
     "@typescript-eslint/no-empty-function": "off"

packages/ui/src/components/AppNavbar.vue

@@ -1,3 +1,4 @@
+<!-- This component represents a vertical nav menu that changes based on the current user's authentication state. -->
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";

packages/ui/src/components/AuthForm.vue

@@ -1,3 +1,4 @@
+<!-- This component represents the login/sign-up card with a form. -->
 <script setup lang="ts">
 import { ref } from "vue";
 import { ElNotification } from "element-plus";

packages/ui/src/components/AuthLoginForm.vue

@@ -1,3 +1,4 @@
+<!-- This component handles user login functionality. -->
 <script setup lang="ts">
 import { useMutation } from "@tanstack/vue-query";
 import authAPI from "@/api/auth";

packages/ui/src/components/AuthSignupForm.vue

@@ -1,3 +1,4 @@
+<!-- This component handles user signup functionality. -->
 <script setup lang="ts">
 import { useMutation } from "@tanstack/vue-query";
 import authAPI from "@/api/auth";

packages/ui/src/components/ui/AppButton.vue

@@ -1,10 +1,11 @@
+<!--  This component defines a simple button and allows parent component to handle click. */ -->
 <script setup lang="ts">
 defineEmits(["click"]);
 </script>
 
 <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"
     @click="$emit('click')"
   >
     <slot />

packages/ui/src/components/ui/AppEditModal.vue

@@ -1,3 +1,4 @@
+<!-- This component represents a customizable modal with a header, optional subheader, and slot. */ -->
 <script setup lang="ts">
 import useImmutable from "@/util/useImmutable";
 import AppButton from "./AppButton.vue";

packages/ui/src/pages/AdminPage/AdminPage.vue

@@ -1,3 +1,5 @@
+<!-- This component serves as the Admin interface for managing tasks and editing battery templates. -->
+
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";

packages/ui/src/pages/AdminPage/components/AdminTaskLibrary.vue

@@ -1,3 +1,5 @@
+<!-- This component represents the Task Template Library for managing task batteries. -->
+
 <script setup lang="ts">
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import taskAPI from "@/api/tasks";

packages/ui/src/pages/AdminPage/components/BatteryEditForm.vue

@@ -1,3 +1,5 @@
+<!-- This component provides an interface for editing a battery template, allowing users to modify its name, description, stages, and image. Users can also delete the template, cancel editing, preview, or save changes. -->
+
 <script setup lang="ts">
 import { ref } from "vue";
 import { storeToRefs } from "pinia";

packages/ui/src/pages/AdminPage/components/BatteryEditFormSection.vue

@@ -1,3 +1,5 @@
+<!-- This component represents a form section for editing a specific group of options in a battery template. -->
+
 <script setup lang="ts">
 import type { DTO, IBattery } from "@seitz/shared";
 

packages/ui/src/pages/AdminUsersPage/AdminUsersPage.vue

@@ -1,3 +1,4 @@
+<!-- This component allows admins to promote a user to an admin role by submitting their email address. -->
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";

packages/ui/src/pages/CarPage/CarPage.vue

@@ -1,3 +1,5 @@
+<!-- This component handles the fetching and displaying of a list of cars. -->
+
 <script setup lang="ts">
 import { useQuery } from "@tanstack/vue-query";
 import carAPI from "@/api/example";

packages/ui/src/pages/CarPage/components/CreateCarForm.vue

@@ -1,3 +1,5 @@
+<!-- This component allows users to create a new car entry by submitting details such as make, model, miles, and year. -->
+
 <script setup lang="ts">
 import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import carAPI from "@/api/example";

packages/ui/src/pages/CarPage/components/DraggableList.vue

@@ -1,3 +1,5 @@
+<!-- This represents a draggable list component -->
+
 <script setup lang="ts">
 import { useDragStore } from "@/stores/drag";
 import { ref } from "vue";

packages/ui/src/pages/HelloWorldPage.vue

@@ -1,3 +1,4 @@
+<!-- simple button with count displayed -->
 <script setup lang="ts">
 import { ref } from "vue";
 

packages/ui/src/pages/MyStudiesPage/MyStudiesPage.vue

@@ -1,10 +1,13 @@
+<!-- This file displays the MyStudies page, where a user can see a table-view of all their studies and see their most recent studies at the top. A user is able to click on a study card and be taken to the  -->
+
 <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 MyStudiesTable from "./components/MyStudiesTable.vue";
+import RecentStudiesSection from "./components/RecentStudiesSection.vue";
 import AppButton from "@/components/ui/AppButton.vue";
 
 const router = useRouter();
@@ -28,23 +31,20 @@ const { mutate, isLoading } = useMutation({
 
 const studies = data;
 </script>
+
 <template>
-  <div v-loading="isLoading" class="mt-14 mx-auto w-3/4 min-w-[600px]">
-    <div class="flex items-center">
+  <div v-loading="isLoading" class="mt-14 mx-auto w-full max-w-7xl px-4">
+    <div class="flex items-center justify-between flex-wrap gap-4">
       <h1 class="text-3xl font-bold">My Studies</h1>
-      <div class="flex-1"></div>
       <AppButton @click="mutate">+ New Study</AppButton>
     </div>
+    <h4 class="mt-8 mb-3 text-neutral-600 font-normal leading-tight">Recent</h4>
 
-    <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="space-y-6">
+      <!-- RECENT STUDIES -->
+      <RecentStudiesSection :studies="studies || []" @deleted="refetch" />
+      <!-- STUDY TABLE -->
+      <MyStudiesTable :studies="studies || []" @deleted="refetch" />
     </div>
   </div>
 </template>

packages/ui/src/pages/MyStudiesPage/components/MyStudiesTable.vue

@@ -0,0 +1,92 @@
+<!-- This component displays all studies in a table format using proper HTML table elements -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  studies: {
+    _id: string;
+    name: string;
+    description: string;
+    status?: string;
+    conditions?: number;
+    lastModified?: string;
+  }[];
+}>();
+
+const hasStudies = computed(() => props.studies && props.studies.length > 0);
+</script>
+
+<template>
+  <div class="rounded-xl border border-neutral-300 overflow-y-auto">
+    <table v-if="hasStudies" class="w-full">
+      <thead>
+        <tr class="bg-neutral-50 border-b border-neutral-300 h-14 max-h-[56px]">
+          <th
+            class="px-8 py-2 text-left text-neutral-600 text-lg font-bold w-[212px]"
+          >
+            Name
+          </th>
+          <th class="px-4 py-2 text-left text-neutral-600 text-lg font-bold">
+            Description
+          </th>
+          <th
+            class="px-4 py-2 text-left text-neutral-600 text-lg font-bold w-[150px]"
+          >
+            Status
+          </th>
+          <th
+            class="px-4 py-2 text-center text-neutral-600 text-lg font-bold w-[110px]"
+          >
+            Conditions
+          </th>
+          <th
+            class="px-8 py-2 text-left text-neutral-600 text-lg font-bold w-[180px]"
+          >
+            Last Modified
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="study in studies"
+          :key="study._id"
+          class="bg-neutral-10 border-b border-neutral-300 hover:bg-neutral-50 transition-colors"
+        >
+          <td class="px-8 py-4 text-neutral-600 text-lg font-normal w-[212px]">
+            <RouterLink :to="{ name: 'study', params: { id: study._id } }">
+              {{ study.name }}
+            </RouterLink>
+          </td>
+          <td
+            class="px-8 pt-5 text-neutral-600 text-lg font-normal line-clamp-1"
+          >
+            {{ study.description }}
+          </td>
+          <td class="px-4 py-4">
+            <div
+              class="px-3 py-1.5 bg-primary-50 rounded-lg border border-primary-100 inline-block"
+            >
+              <div class="text-neutral-600 text-lg font-normal leading-tight">
+                Editing
+              </div>
+            </div>
+          </td>
+          <td
+            class="px-4 py-4 text-center text-neutral-600 text-lg font-normal"
+          >
+            50
+          </td>
+          <td class="px-8 py-4 text-neutral-500 text-lg font-normal">
+            10.24.2024
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-else class="p-6 text-neutral-500 text-center">
+      You haven't created any studies yet. Click the "+ New Study" button to get
+      started.
+    </div>
+  </div>
+</template>

packages/ui/src/pages/MyStudiesPage/components/RecentStudiesItem.vue

@@ -0,0 +1,74 @@
+<!-- This component represents a single card in the "recent studies" top area of the MyStudiesPage. Each card has the study's details (name, description, status, # of conditions, and last modified date). -->
+
+<script setup lang="ts">
+import studiesAPI from "@/api/studies";
+import { useMutation } from "@tanstack/vue-query";
+import { ElCard } from "element-plus";
+
+const emit = defineEmits(["deleted"]);
+const props = defineProps<{
+  name: string;
+  description: string;
+  id: string;
+}>();
+
+useMutation({
+  mutationFn: () => studiesAPI.deleteStudy(props.id),
+  onSuccess: () => {
+    emit("deleted");
+  },
+});
+</script>
+
+<template>
+  <ElCard
+    shadow="hover"
+    class="min-w-[400px] max-w-[400px] h-[180px] flex-shrink-0 px-6 py-5 rounded-2xl border border-neutral-300"
+  >
+    <RouterLink
+      :to="{ name: 'study', params: { id } }"
+      class="block -m-4 h-full"
+    >
+      <div class="flex flex-col h-full justify-between gap-3">
+        <div>
+          <div class="text-neutral-600 text-2xl font-bold leading-7 mb-2">
+            {{ name }}
+          </div>
+          <div
+            class="min-h-[36px] text-neutral-600 text-sm font-medium leading-[18px] line-clamp-2"
+          >
+            {{ description }}
+          </div>
+        </div>
+
+        <div class="flex justify-between items-end">
+          <div class="flex flex-col gap-1">
+            <div>
+              <span class="text-neutral-600 text-sm font-bold leading-tight"
+                >Conditions:
+              </span>
+              <span class="text-neutral-600 text-sm font-medium leading-[18px]"
+                >50</span
+              >
+            </div>
+            <div class="flex items-center gap-1">
+              <span class="text-neutral-400 text-sm font-medium"
+                >Last Modified</span
+              >
+              <div class="w-1 h-1 bg-[#b9adaa] rounded-full"></div>
+              <span class="text-neutral-400 text-sm font-medium"
+                >Oct 24, 2024</span
+              >
+            </div>
+          </div>
+
+          <div
+            class="px-3 py-1.5 bg-primary-50 rounded-lg border border-primary-100"
+          >
+            <div class="text-neutral-600 text-base font-normal">Editing</div>
+          </div>
+        </div>
+      </div>
+    </RouterLink>
+  </ElCard>
+</template>

packages/ui/src/pages/MyStudiesPage/components/RecentStudiesSection.vue

@@ -0,0 +1,40 @@
+<!-- This component displays the recent studies section with Element Plus Cards -->
+
+<script setup lang="ts">
+import { computed } from "vue";
+import RecentStudyCard from "./RecentStudiesItem.vue";
+
+const props = defineProps<{
+  studies: {
+    _id: string;
+    name: string;
+    description: string;
+  }[];
+}>();
+
+const emit = defineEmits(["deleted"]);
+
+const hasStudies = computed(() => props.studies && props.studies.length > 0);
+</script>
+
+<template>
+  <div class="overflow-x-auto pb-2">
+    <div v-if="hasStudies" class="flex gap-6">
+      <RecentStudyCard
+        v-for="study in studies"
+        :id="study._id"
+        :key="study._id"
+        :name="study.name"
+        :description="study.description"
+        @deleted="emit('deleted')"
+      />
+    </div>
+    <div
+      v-else
+      class="p-6 bg-neutral-50 rounded-xl text-neutral-500 text-center"
+    >
+      You haven't created any studies yet. Click the "+ New Study" button to get
+      started.
+    </div>
+  </div>
+</template>