Noticeable changes that need small fixes (#93)

apps/ui/src/components/Markdown.vue

@@ -20,7 +20,12 @@ function formatNode(node: VNodeArrayChildren | VNodeChild): VNode {
   }
 
   if(typeof node === "string") {
-    return h("div", { innerHTML: DOMPurify.sanitize(marked(node)) });
+    return h("div", { innerHTML: marked(DOMPurify.sanitize(node, {
+		    ALLOWED_TAGS: ["kbd", "mark", "q", "ruby", "rp", "rt", "sub", "sup", "wbr", "details", "summary"],
+		    ALLOWED_ATTR: ["cite", "open", "translate"],
+		    ALLOW_ARIA_ATTR: false,
+		    ALLOW_DATA_ATTR: false
+	    })) });
   }
 
   if(Array.isArray(node)) {

apps/ui/src/components/person/PersonDetailsInput/ReviewTable.vue

@@ -23,10 +23,10 @@
           <td>Image(s)</td>
           <td>
             <v-chip-group column v-if="images.length">
-              <v-dialog v-for="image in images" :key="image.id" width="400" scrim="black">
+              <v-dialog v-for="image in images" :key="image.imageId" width="400" scrim="black">
                 <template #activator="{ props }">
                   <v-chip v-bind="props" >
-                    Image ID: {{ image.id }}
+                    Image ID: {{ image.imageId }}
                   </v-chip>
                 </template>
                 <template #default>

apps/ui/src/components/person/PersonDetailsInput/RoleRow.vue

@@ -4,7 +4,7 @@
     <div class="chip-group">
       <v-dialog v-for="(role, i) in roles" :key="role.roleId" max-width="500">
         <template #activator="{ props }">
-          <v-chip class="ml-1" closable v-bind="props"
+          <v-chip class="ml-1" closable v-bind="props" v-tooltip="role.role?.name"
                 @click:close="roles.splice(i, 1)" >
             <v-icon icon="fa:fas fa-pen-to-square" />&nbsp;Role ID: {{ role.roleId }}
           </v-chip>

apps/ui/src/components/person/PersonList.vue

@@ -46,9 +46,6 @@
      :loading="queryData.loading.value"
      loading-text="Loading People..."
     >
-      <template #item.description="{ item }">
-        {{ item.description?.length ? item.description : "No description provided." }}
-      </template>
       <template #item.actions="{ index, item }">
         <RouterPopup
           v-if="ability.can(AbilityActions.Update, subject(AbilitySubjects.Person, {
@@ -153,7 +150,6 @@ const deleteMutation = useMutation(DeletePersonDocument);
 const headers = [
   { title: "ID", sortable: true, key: "id" },
   { title: "Name", key: "name", sortable: true },
-  { title: "Description", key: "description", sortable: false},
   { title: "Actions", key: "actions", sortable: false, minWidth: "150px" }
 ]
 
@@ -210,7 +206,6 @@ function canDelete(person: Person): boolean {
   return ability.can(AbilityActions.Delete, subject(AbilitySubjects.Person, {
     id: person.id,
     name: person.name,
-    description: person.description,
   }))
 }
 

apps/ui/src/graphql/FindPersonRoles.graphql

@@ -1,26 +1,22 @@
-query FindPersonRoles($filter: FilterPersonRoleInput) {
+query FindPersonRoles($filter: FilterPersonRoleInput, $pagination: PaginationInput!) {
   totalPersonRoles: personRoleCount(filter: $filter)
-  personRoles: findManyPersonRole(filter: $filter) {
+  personRoles: findManyPersonRole(filter: $filter, pagination: $pagination) {
     id
     startTime
     endTime
     person {
-      id
       name
       profilePicture {
-        id
         name
         path
       }
     }
     role {
       name
-      description
       displayInLeadership
       displayInMembership
       priority
     }
     personId
-
   }
 }

apps/ui/src/views/AboutView.vue

@@ -23,7 +23,7 @@
         <h2 v-if="officers.length" class="ml-5">Leadership</h2>
           <div class="members mt-2 ml-5">
             <div v-for="officer in officers" :key="officer.id">
-              <RouterLink class="member-container" :to="personURL + officer.person?.id">
+              <RouterLink class="member-container" :to="personURL + officer.personId">
                 <v-avatar :rounded="officer.person?.profilePicture?.path ? 'default' : 0" size="150"
                           :image="officer.person?.profilePicture?.path ?? rpitvLogo" />
                 <p>{{ officer.person?.name }}</p>
@@ -34,7 +34,7 @@
         <h2 v-if="members.length" class="ml-5">Members</h2>
         <div class="members mt-2 ml-5">
           <div v-for="member in members" :key="member.id">
-            <RouterLink class="member-container" :to="personURL + member.person?.id">
+            <RouterLink class="member-container" :to="personURL + member.personId">
               <v-avatar :rounded="member.person?.profilePicture?.path ? 'default' : 0" size="150"
                         :image="member.person?.profilePicture?.path ?? rpitvLogo" />
               <p>{{ member.person?.name }}</p>
@@ -74,7 +74,10 @@ const queryData = useQuery(FindPersonRolesDocument, {
       {
         endTime: null
       }
-    ]
+    ],
+  },
+  pagination: {
+    take: 70
   }
 });
 
@@ -158,5 +161,6 @@ a {
 .role {
   color: #ff8697;
   font-size: 16px;
+  text-align: center;
 }
 </style>

apps/ui/src/views/PersonView.vue

@@ -10,7 +10,9 @@
           <v-avatar :size="200" :image="personDetails?.profilePicture?.path ?? RPITV_Logo" />
           <h1>{{ personDetails?.name }}</h1>
           <footer>{{ personDetails?.pronouns }}</footer>
-          <p class="description">{{ personDetails?.description }}</p>
+	        <Markdown class="description">
+		        {{ personDetails?.description }}
+	        </Markdown>
           <v-dialog v-if="personImageData.result.value?.personImageCount" v-model="isPersonImageDialogOpened" width="1100">
             <template #activator="{ props: activatorProps }">
               <v-btn class="mt-7" @click="imageDetails = []" v-bind="activatorProps">View Photos</v-btn>
@@ -22,7 +24,7 @@
           </v-dialog>
           <h1 class="mt-5">Club Positions</h1>
           <div class="roles">
-            <div class="text-center" v-for="role in personDetails?.roles">
+            <div class="text-center club-roles" v-for="role in personDetails?.roles">
               <p class="name" style="color: #ff6363">{{ role.role?.name }}</p>
               <p>{{ moment(role.startTime).format("LL") }}</p>
                 -
@@ -63,6 +65,7 @@ import RPITV_Logo from "../assets/rpitv_logo.svg";
 import moment from "moment";
 import ProductionCard from "@/components/ProductionCard.vue";
 import PersonImageCard from "@/components/PersonImageCard.vue";
+import Markdown from "@/components/util/Markdown.vue";
 
 const route = useRoute();
 
@@ -181,6 +184,7 @@ async function loadProductions(load: { done: (status: 'loading' | 'error' | 'emp
   justify-content: center;
   column-gap: 50px;
   row-gap: 25px;
+	align-items: center;
 }
 
 .description {
@@ -192,13 +196,23 @@ async function loadProductions(load: { done: (status: 'loading' | 'error' | 'emp
   gap: 20px;
 }
 
+h1 {
+	font-size: 2rem;
+}
+
 p {
-  font-size: 16px;
-  font-weight: lighter;
+	font-size: 16px;
+	font-weight: lighter;
 }
 
 .name {
-  font-size: 24px;
+	font-size: 1.5rem;
+	font-weight: bold;
+}
+
+.club-roles {
+	
+	width: 250px;
 }
 
 </style>

apps/ui/src/views/account/AccountProfileView.vue

@@ -100,7 +100,9 @@
       </div>
       <div class="details">
         <p class="label">Description:
-          <span v-if="personData.description" class="info">{{ personData.description }}</span>
+	        <Markdown class="info" v-if="personData.description">
+		        {{ personData.description }}
+	        </Markdown>
           <span v-else><em>No description provided</em></span>
         </p>
         <v-btn @click="editableValues.description.dialog = true;" variant="text" icon="fa-solid fa-pen-to-square" />
@@ -138,6 +140,7 @@ import { useQuery, useMutation } from "@vue/apollo-composable";
 import { GenerateOwnPersonDocument, UpdatePersonDocument, UserDetailsDocument } from "@/graphql/types";
 import type { Person, User } from "@/graphql/types";
 import moment from "moment";
+import Markdown from "@/components/util/Markdown.vue";
 
 const auth = useAuthStore();
 const generatePerson = useMutation(GenerateOwnPersonDocument);