feat: Display pages to navigate through

MellonScholarlyCommunication · Nov 17, 2023 · 2e1f0df · 2e1f0df
1 parent 01303b8
commit 2e1f0df
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 24 deletions.
diff --git a/src/components/PagesPagination.vue b/src/components/PagesPagination.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {MDBCard, MDBCardBody, MDBCardText, MDBPageItem, MDBPagination} from "mdb-vue-ui-kit";
+
+type Page = {
+  uri: string,
+  sort: any,
+  active: boolean,
+};
+
+export default defineComponent({
+  name: "PagesPagination",
+  components: {MDBCardText, MDBCardBody, MDBCard, MDBPageItem, MDBPagination},
+  props: [
+    'pages',
+    'loadPage'
+  ],
+})
+</script>
+
+<template>
+  <MDBCard v-if="pages?.length">
+    <MDBCardBody class="w-100">
+      <MDBCardText>
+        <nav>
+          <MDBPagination style="margin-bottom: 0;">
+            <MDBPageItem v-for="(page, index) in pages" :key="index" :active="page.active" @click="loadPage(page)">
+              {{ page.uri }}
+            </MDBPageItem>
+          </MDBPagination>
+        </nav>
+      </MDBCardText>
+    </MDBCardBody>
+  </MDBCard>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ScholarlyBrowser.vue b/src/components/ScholarlyBrowser.vue
@@ -9,6 +9,9 @@
         </MDBCardText>
       </MDBCardBody>
     </MDBCard>
+
+    <PagesPagination :load-page="loadPage" :pages="pages.sort((a, b) => a.sort < b.sort ? -1 : 1)"></PagesPagination>
+
     <MDBCard>
       <MDBCardBody class="w-100">
         <MDBCardText>
@@ -78,16 +81,26 @@
         </MDBCardText>
       </MDBCardBody>
     </MDBCard>
+
+    <PagesPagination :load-page="loadPage" :pages="pages.sort((a, b) => a.sort < b.sort ? -1 : 1)"></PagesPagination>
   </MDBContainer>
 </template>
 
 <script lang="ts">
 import {MDBCard, MDBCardBody, MDBCardFooter, MDBCardText, MDBCardTitle, MDBContainer, MDBInput} from "mdb-vue-ui-kit";
 import {exploreArtifact, getMembersOfFragment} from "artifact-explorer";
+import PagesPagination from "@/components/PagesPagination.vue";
+
+type Page = {
+  uri: string,
+  sort: any,
+  active: boolean,
+};
 
 export default {
   name: "ScholarlyBrowser",
   components: {
+    PagesPagination,
     MDBContainer,
     MDBCard,
     MDBCardBody,
@@ -100,9 +113,10 @@ export default {
     return {
       url: '',
       members: [] as any[],
-      pages: [] as {uri: string, sort: any}[],
+      pages: [] as Page[],
       loading: false,
       noEventLog: false,
+      artifact: undefined as any,
     };
   },
   created() {
@@ -115,6 +129,8 @@ export default {
     async urlUpdated() {
       this.noEventLog = false;
       this.loading = false;
+      this.artifact = undefined;
+      this.pages = [];
       this.members = [];
       this.$router.push({query: {url: this.url}});
 
@@ -124,40 +140,22 @@ export default {
 
       this.loading = true;
 
-      let artifact: any;
       try {
-        artifact = await exploreArtifact(this.url);
+        this.artifact = await exploreArtifact(this.url);
       } catch (e) {
         this.noEventLog = true;
         this.loading = false;
         return;
       }
       let firstPage = true;
-      artifact.pages.on('data', async (page: any) => {
+
+      this.artifact.pages.on('data', async (page: any) => {
+        page.active = false;
         this.pages.push(page);
         if (firstPage) {
           firstPage = false;
-          const members = await getMembersOfFragment(artifact.url, page.uri, artifact.type);
-
-          members.on('data', async (member: any) => {
-            member = await member;
-            member.content.mainTypes = await this.getMainTypes(member.content.types);
-            member.content.secondaryTypes = await this.getSecondaryTypes(member.content.types);
-            member.content.objectTypes = await Promise.all(await member.content?.objectTypes.map(async (type: string) => await this.getPrefixedProperty(type))) ?? [];
 
-            if (member.metadata.dateTime) {
-              const dt = member.metadata.dateTime.split(/\D+/);
-              member.metadata.dateTime = new Date(Date.UTC(dt[0], --dt[1], dt[2], dt[3], dt[4], dt[5], dt[6])).toLocaleString();
-            }
-
-            this.members.push(member);
-
-            this.loading = false;
-          });
-
-          members.on('end', () => {
-            this.loading = false;
-          });
+          await this.loadPage(page);
         }
       });
     },
@@ -200,6 +198,35 @@ export default {
         default:
           return 'light';
       }
+    },
+    async loadPage(page: Page) {
+      this.pages.forEach(page => page.active = false);
+      page.active = true;
+
+      this.members = [];
+      this.loading = true;
+
+      const members = await getMembersOfFragment(this.artifact.url, page.uri, this.artifact.type);
+
+      members.on('data', async (member: any) => {
+        member = await member;
+        member.content.mainTypes = await this.getMainTypes(member.content.types);
+        member.content.secondaryTypes = await this.getSecondaryTypes(member.content.types);
+        member.content.objectTypes = await Promise.all(await member.content?.objectTypes.map(async (type: string) => await this.getPrefixedProperty(type))) ?? [];
+
+        if (member.metadata.dateTime) {
+          const dt = member.metadata.dateTime.split(/\D+/);
+          member.metadata.dateTime = new Date(Date.UTC(dt[0], --dt[1], dt[2], dt[3], dt[4], dt[5], dt[6])).toLocaleString();
+        }
+
+        this.members.push(member);
+
+        this.loading = false;
+      });
+
+      members.on('end', () => {
+        this.loading = false;
+      });
     }
   }
 }