Listing page for impact reports

APPS-1903

cypress/e2e/impactreportpage.cy.js

@@ -1,6 +1,6 @@
 describe('Impact Report Page', () => {
     it('Visit the Impact Report Page', () => {
-        cy.visit('/impact')
+        cy.visit('/impact/2022')
 
         // UCLA Library brand
         cy.get('.logo-ucla').should('be.visible')

gql/queries/ReportsList.gql

@@ -0,0 +1,20 @@
+#import "~/gql/fragments/Image"
+
+query ReportsList {
+  entry(section: "listingImpactReports") {
+    ... on listingImpactReports_listingImpactReports_Entry {
+      title
+      summary
+    }
+  }
+  entries(section: "impactReport", orderBy: "postDate desc") {
+    ... on impactReport_impactReport_Entry {
+      title
+      to: uri
+      richText
+      image {
+          ...Image
+      }
+    }
+  }
+}

pages/about/reports/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <main
+        id="main"
+        class="page page-news"
+    >
+        <nav-breadcrumb
+            to="/about"
+            :title="page.entry.title"
+            parent-title="About Us"
+        />
+        <banner-text
+            :title="page.entry.title"
+            :text="page.entry.summary"
+            button-text="View this year's report"
+            :to="parsedReportsList[0].to"
+        />
+
+        <section-wrapper theme="divider">
+            <divider-way-finder
+                color="about"
+            />
+        </section-wrapper>
+
+        <section-wrapper>
+            <section-staff-article-list :items="parsedReportsList" />
+        </section-wrapper>
+
+        <section-wrapper theme="divider">
+            <divider-way-finder
+                color="about"
+            />
+        </section-wrapper>
+
+        <section-wrapper>
+            <block-call-to-action
+                class="block-call-to-action"
+                :is-global="true"
+            />
+        </section-wrapper>
+    </main>
+</template>
+
+<script>
+// HELPERS
+import _get from "lodash/get"
+import fixUri from "~/utils/fixUri"
+import removeTags from "~/utils/removeTags"
+
+// GQL
+import REPORTS_LIST from "~/gql/queries/ReportsList"
+
+export default {
+    async asyncData({ $graphql, params }) {
+        const data = await $graphql.default.request(REPORTS_LIST)
+
+        return {
+            page: data,
+        }
+    },
+    head() {
+        let title = this.page ? this.page.entry.title : "... loading"
+        let metaDescription = removeTags(this.page.entry.summary)
+
+        return {
+            title: title,
+            meta: [
+                {
+                    hid: "description",
+                    name: "description",
+                    content: metaDescription,
+                },
+            ],
+        }
+    },
+    computed: {
+        parsedReportsList() {
+            return this.page.entries.map((obj) => {
+                return {
+                    to: fixUri(_get(obj, "to", null)),
+                    image: _get(obj, "image[0]", null),
+                    title: _get(obj, "title", "hi"),
+                    description: _get(obj, "richText", null),
+                }
+            })
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.page-news {
+    padding-left: 50px;
+
+    .entry-count {
+        @include step-2;
+        color: var(--color-primary-blue-03);
+        margin: var(--space-m);
+    }
+
+    .section-heading {
+        @include step-2;
+        color: var(--color-primary-blue-03);
+        margin-bottom: var(--space-m);
+    }
+
+    .all-news-heading {
+        @include step-1;
+        color: var(--color-primary-blue-03);
+    }
+
+    .news-item-link {
+        list-style: none;
+        display: flex;
+        justify-content: space-between;
+        @include step-1;
+        color: var(--color-primary-blue-03);
+    }
+}
+</style>

static/_redirects

@@ -210,7 +210,7 @@
 /help/services-resources/research-data-services/	/help/services-resources/data-services
 /help/services-resources/teaching-with-special-collections	/help/services-resources/teaching-with-library-special-collections
 /hours	/visit/locations
-/impact	/impact/all
+/impact/all	/about/reports
 /lauc-la-affiliate-libraries-centers	/visit/locations
 /lauc-la-librarian-year-marjorie-lee	https://guides.library.ucla.edu/lauc-la/librarian-of-the-year#Marjorie
 /libraries/Arts/9824.cfm	/visit/locations/arts-library