From b7891b6ed5ad16ca6525b6e76c906fefe027795f Mon Sep 17 00:00:00 2001
From: Stuart Laverick <stuart@appropriatesolutions.co.uk>
Date: Fri, 29 Sep 2023 18:19:25 +0100
Subject: [PATCH 1/2] Created page update request UI

---
 src/router.js                                 |   6 +
 src/views/events/Create.vue                   |   2 +-
 src/views/events/Edit.vue                     |   4 +-
 src/views/pages/Create.vue                    |  34 ++-
 src/views/pages/Edit.vue                      | 114 +++++----
 src/views/pages/List.vue                      |  11 +
 src/views/pages/Show.vue                      |  82 +++++-
 src/views/pages/Updated.vue                   |  56 +++++
 src/views/pages/show/PageContent.vue          |  64 +++++
 src/views/update-requests/Index.vue           |   4 +
 src/views/update-requests/Show.vue            |  35 +--
 .../update-requests/show/PageDetails.vue      | 238 ++++++++++++++++++
 12 files changed, 576 insertions(+), 74 deletions(-)
 create mode 100644 src/views/pages/Updated.vue
 create mode 100644 src/views/pages/show/PageContent.vue
 create mode 100644 src/views/update-requests/show/PageDetails.vue

diff --git a/src/router.js b/src/router.js
index 002bb2cb..57ad87c4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -339,6 +339,12 @@ let router = new Router({
           name: "pages-edit",
           component: () => import("@/views/pages/Edit"),
         },
+        {
+          path: ":page/updated",
+          name: "pages-updated",
+          component: () => import("@/views/pages/Updated"),
+          meta: { auth: true },
+        },
         {
           path: "",
           name: "pages-index",
diff --git a/src/views/events/Create.vue b/src/views/events/Create.vue
index 25c3b3fd..c62aa3a8 100644
--- a/src/views/events/Create.vue
+++ b/src/views/events/Create.vue
@@ -192,7 +192,7 @@ export default {
 
       const eventId = response.data.id;
 
-      if (this.auth.isGlobalAdmin && eventId) {
+      if (this.auth.isSuperAdmin && eventId) {
         this.$router.push({
           name: "events-show",
           params: { event: eventId },
diff --git a/src/views/events/Edit.vue b/src/views/events/Edit.vue
index 4bc622d0..438983a6 100644
--- a/src/views/events/Edit.vue
+++ b/src/views/events/Edit.vue
@@ -128,7 +128,7 @@ export default {
       return this.tabs;
     },
     updateButtonText() {
-      return this.auth.isGlobalAdmin ? "Update" : "Request update";
+      return this.auth.isSuperAdmin ? "Update" : "Request update";
     },
   },
 
@@ -262,7 +262,7 @@ export default {
         params: { event: this.event.id },
       };
 
-      if (this.auth.isGlobalAdmin) {
+      if (this.auth.isSuperAdmin) {
         try {
           const { data } = await http.get(
             `/update-requests/${updateRequestId}`
diff --git a/src/views/pages/Create.vue b/src/views/pages/Create.vue
index 53611b82..fac5cd13 100644
--- a/src/views/pages/Create.vue
+++ b/src/views/pages/Create.vue
@@ -3,6 +3,7 @@
     <vue-headful :title="`${appName} - Add Page`" />
 
     <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
+
     <gov-main-wrapper>
       <page-form
         :errors="form.$errors"
@@ -20,12 +21,25 @@
       />
     </gov-main-wrapper>
 
+    <template v-if="updateRequestCreated">
+      <gov-heading size="m" tag="h3">Create page request</gov-heading>
+      <gov-body>{{ updateRequestMessage }}</gov-body>
+      <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
+    </template>
+
     <gov-section-break size="l" />
 
     <gov-button v-if="form.$submitting" disabled type="submit"
       >Creating...</gov-button
     >
-    <gov-button v-else @click="onSubmit" type="submit">Create</gov-button>
+    <gov-button
+      v-else
+      @click="onSubmit"
+      type="submit"
+      :disabled="updateRequestCreated"
+      >Create</gov-button
+    >
+
     <ck-submit-error v-if="form.$errors.any()" />
   </gov-width-container>
 </template>
@@ -125,13 +139,27 @@ export default {
           },
         },
       },
+
+      updateRequestCreated: false,
+      updateRequestMessage: null,
     };
   },
 
   methods: {
     async onSubmit() {
-      await this.form.post("/pages");
-      this.$router.push({ name: "pages-index" });
+      const response = await this.form.post("/pages");
+
+      const pageId = response.data.id;
+
+      if (this.auth.isSuperAdmin && pageId) {
+        this.$router.push({
+          name: "pages-show",
+          params: { page: pageId },
+        });
+      } else if (!this.form.$errors.any()) {
+        this.updateRequestCreated = true;
+        this.updateRequestMessage = response.message;
+      }
     },
     onUpdateTitle(title) {
       this.form.title = title;
diff --git a/src/views/pages/Edit.vue b/src/views/pages/Edit.vue
index f79da167..ed13ad34 100644
--- a/src/views/pages/Edit.vue
+++ b/src/views/pages/Edit.vue
@@ -26,7 +26,9 @@
         <gov-button v-if="form.$submitting" disabled type="submit"
           >Updating...</gov-button
         >
-        <gov-button v-else @click="onSubmit" type="submit">Update</gov-button>
+        <gov-button v-else @click="onSubmit" type="submit">{{
+          updateButtonText
+        }}</gov-button>
 
         <ck-submit-error v-if="form.$errors.any()" />
 
@@ -64,10 +66,10 @@ export default {
   },
   computed: {
     updateButtonText() {
-      return this.auth.isContentAdmin ? "Update" : "Request update";
+      return this.auth.isSuperAdmin ? "Update" : "Request update";
     },
     canDelete() {
-      return this.auth.isContentAdmin && this.page.children.length === 0;
+      return this.auth.isSuperAdmin && this.page.children.length === 0;
     },
   },
   methods: {
@@ -91,51 +93,71 @@ export default {
       this.loading = false;
     },
     async onSubmit() {
-      await this.form.put(`/pages/${this.page.id}`, (config, data) => {
-        // Remove any unchanged values.
-        if (data.title === this.page.title) {
-          delete data.title;
+      const response = await this.form.put(
+        `/pages/${this.page.id}`,
+        (config, data) => {
+          // Remove any unchanged values.
+          if (data.title === this.page.title) {
+            delete data.title;
+          }
+          if (data.slug === this.page.slug) {
+            delete data.slug;
+          }
+          if (data.excerpt === this.page.excerpt) {
+            delete data.excerpt;
+          }
+          if (data.content === this.page.content) {
+            delete data.content;
+          }
+          if (data.page_type === this.page.page_type) {
+            delete data.page_type;
+          }
+          if (data.parent_id === this.page.parent_id) {
+            delete data.parent_id;
+          }
+          if (data.enabled === this.page.enabled) {
+            delete data.enabled;
+          }
+
+          // Remove the image from the request if unchanged.
+          if (this.page.image && data.image_file_id === this.page.image.id) {
+            delete data.image_file_id;
+          }
+
+          // Convert false to null if removed
+          if (data.image_file_id === false) {
+            data.image_file_id = null;
+          }
+
+          if (
+            JSON.stringify(data.collections) ===
+            JSON.stringify(this.page.collections)
+          ) {
+            delete data.collections;
+          }
         }
-        if (data.slug === this.page.slug) {
-          delete data.slug;
+      );
+
+      const updateRequestId = response.id;
+      let next = {
+        name: "pages-updated",
+        params: { page: this.page.id },
+      };
+
+      if (this.auth.isSuperAdmin) {
+        try {
+          const { data } = await http.get(
+            `/update-requests/${updateRequestId}`
+          );
+          if (data.approved_at) {
+            next.name = "pages-index";
+            next.query = { updated: this.page.id };
+          }
+        } catch (err) {
+          console.log(err);
         }
-        if (data.excerpt === this.page.excerpt) {
-          delete data.excerpt;
-        }
-        if (data.content === this.page.content) {
-          delete data.content;
-        }
-        if (data.page_type === this.page.page_type) {
-          delete data.page_type;
-        }
-        if (data.parent_id === this.page.parent_id) {
-          delete data.parent_id;
-        }
-        if (data.enabled === this.page.enabled) {
-          delete data.enabled;
-        }
-
-        // Remove the image from the request if unchanged.
-        if (this.page.image && data.image_file_id === this.page.image.id) {
-          delete data.image_file_id;
-        }
-
-        // Convert false to null if removed
-        if (data.image_file_id === false) {
-          data.image_file_id = null;
-        }
-
-        if (
-          JSON.stringify(data.collections) ===
-          JSON.stringify(this.page.collections)
-        ) {
-          delete data.collections;
-        }
-      });
-      this.$router.push({
-        name: "pages-index",
-        query: { updated: true },
-      });
+      }
+      this.$router.push(next);
     },
     onDelete() {
       this.$router.push({
diff --git a/src/views/pages/List.vue b/src/views/pages/List.vue
index 0148edfe..27b82711 100644
--- a/src/views/pages/List.vue
+++ b/src/views/pages/List.vue
@@ -2,6 +2,10 @@
   <div>
     <vue-headful :title="`${appName} - Pages`" />
 
+    <gov-inset-text v-if="updated"
+      >page {{ updatedPage.title }} has been updated</gov-inset-text
+    >
+
     <gov-grid-row>
       <gov-grid-column width="two-thirds">
         <gov-heading size="l">Pages</gov-heading>
@@ -135,6 +139,7 @@ export default {
         { value: "information", text: "Information page" },
         { value: "landing", text: "Landing page" },
       ],
+      updated: false,
     };
   },
   computed: {
@@ -158,6 +163,11 @@ export default {
     showEdit() {
       return this.auth.isContentAdmin;
     },
+    updatedPage() {
+      return this.updated
+        ? this.pages.find((page) => page.id === this.updated)
+        : null;
+    },
   },
   methods: {
     async fetchPages() {
@@ -221,6 +231,7 @@ export default {
     },
   },
   created() {
+    this.updated = this.$route.query.updated || false;
     this.fetchPages();
   },
 };
diff --git a/src/views/pages/Show.vue b/src/views/pages/Show.vue
index 56e77916..73212ae2 100644
--- a/src/views/pages/Show.vue
+++ b/src/views/pages/Show.vue
@@ -1,20 +1,88 @@
 <template>
   <gov-width-container>
-    <vue-headful :title="`${appName} - Show Page ${page.title}`" />
-
     <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
-    <gov-main-wrapper></gov-main-wrapper>
+    <gov-main-wrapper>
+      <ck-loader v-if="loading" />
+      <gov-grid-row v-else>
+        <vue-headful :title="`${appName} - Show Page ${page.title}`" />
+
+        <gov-grid-column width="full">
+          <gov-grid-row>
+            <gov-grid-column width="two-thirds">
+              <gov-heading size="m">
+                <gov-caption size="m">{{ page.title }}</gov-caption>
+                View page
+              </gov-heading>
+              <gov-inset-text v-if="updated"
+                >page {{ page.title }} has been updated</gov-inset-text
+              >
+            </gov-grid-column>
+            <gov-grid-column
+              v-if="auth.canEdit('page', page)"
+              width="one-third"
+              class="text-right"
+            >
+              <gov-button
+                :to="{ name: 'pages-edit', params: { page: page.id } }"
+                >Edit page</gov-button
+              >
+            </gov-grid-column>
+          </gov-grid-row>
+
+          <gov-heading tag="h3" size="m">{{
+            pageTypes[page_type]
+          }}</gov-heading>
+
+          <gov-heading tag="h2" size="l">{{ page.title }}</gov-heading>
+
+          <page-content :content="page.content" />
+
+          <template v-if="auth.canDelete('page')">
+            <gov-section-break size="l" />
+
+            <gov-body
+              >Please be certain of the action before deleting a page</gov-body
+            >
+
+            <ck-delete-button
+              resource="page"
+              :endpoint="`/pages/${this.page.id}`"
+              @deleted="onDelete"
+            />
+          </template>
+        </gov-grid-column>
+      </gov-grid-row>
+    </gov-main-wrapper>
   </gov-width-container>
 </template>
 
 <script>
+import http from "@/http";
+import PageContent from "@/views/pages/show/PageContent.vue";
+
 export default {
   name: "ShowPage",
 
-  props: {
-    page: {
-      type: Object,
-      required: true,
+  components: {
+    PageContent,
+  },
+
+  data() {
+    return {
+      loading: false,
+      page: null,
+      updated: false,
+    };
+  },
+
+  methods: {
+    async fetchPage() {
+      this.loading = true;
+
+      const response = await http.get(`/pages/${this.$route.params.page}`);
+      this.page = response.data.data;
+
+      this.loading = false;
     },
   },
 };
diff --git a/src/views/pages/Updated.vue b/src/views/pages/Updated.vue
new file mode 100644
index 00000000..7354d7f5
--- /dev/null
+++ b/src/views/pages/Updated.vue
@@ -0,0 +1,56 @@
+<template>
+  <gov-width-container>
+    <ck-loader v-if="loading" />
+    <template v-else>
+      <vue-headful :title="`${appName} - Page Updated: ${page.title}`" />
+
+      <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
+      <gov-main-wrapper>
+        <gov-grid-row>
+          <gov-grid-column width="one-half">
+            <gov-heading size="xl">Update request submitted</gov-heading>
+            <gov-body>
+              Your update request for this page has been received. It will need
+              to be approved by an admin before the changes will be applied.
+            </gov-body>
+
+            <gov-button
+              :to="{
+                name: 'pages-index',
+              }"
+              >Back to pages</gov-button
+            >
+          </gov-grid-column>
+        </gov-grid-row>
+      </gov-main-wrapper>
+    </template>
+  </gov-width-container>
+</template>
+
+<script>
+import http from "@/http";
+
+export default {
+  name: "PageUpdatedView",
+
+  data() {
+    return {
+      loading: false,
+      page: null,
+    };
+  },
+  methods: {
+    async fetchPage() {
+      this.loading = true;
+      const response = await http.get(`/pages/${this.$route.params.page}`);
+      this.page = response.data.data;
+      this.loading = false;
+    },
+  },
+  created() {
+    this.fetchPage();
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/pages/show/PageContent.vue b/src/views/pages/show/PageContent.vue
new file mode 100644
index 00000000..f9719a52
--- /dev/null
+++ b/src/views/pages/show/PageContent.vue
@@ -0,0 +1,64 @@
+<template>
+  <gov-table>
+    <template slot="body">
+      <gov-table-row
+        v-for="(content, index) in orderedContent"
+        :key="`content.${index}`"
+      >
+        <gov-table-header scope="row" top>{{ content.label }}</gov-table-header>
+        <gov-table-cell>
+          <gov-heading v-if="content.title" tag="h2">{{
+            content.title
+          }}</gov-heading>
+          <div
+            v-for="(contentItem, contentIndex) in content.content"
+            :key="`content.${index}.${contentIndex}`"
+          >
+            <div
+              v-if="contentItem.type === 'copy'"
+              v-html="toHtml(contentItem.value)"
+            ></div>
+            <div v-if="contentItem.type === 'cta'">
+              <gov-heading v-if="contentItem.title" size="s" tag="h3">{{
+                contentItem.title
+              }}</gov-heading>
+              <p v-if="contentItem.description">
+                {{ contentItem.description }}
+              </p>
+              <gov-button>{{ contentItem.buttonText }}</gov-button>
+              <gov-hint>Link to: {{ contentItem.url }}</gov-hint>
+            </div>
+          </div>
+        </gov-table-cell>
+      </gov-table-row>
+    </template>
+  </gov-table>
+</template>
+
+<script>
+export default {
+  name: "PageContent",
+
+  props: {
+    content: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    orderedContent() {
+      return Object.entries(this.content)
+        .sort((page1, page2) => {
+          if (page1[1].order === page2[1].order) {
+            return 0;
+          }
+          return page1[1].order < page2[1].order ? -1 : 1;
+        })
+        .map((contentItem) => contentItem[1]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/update-requests/Index.vue b/src/views/update-requests/Index.vue
index bcfe1e94..6d191447 100644
--- a/src/views/update-requests/Index.vue
+++ b/src/views/update-requests/Index.vue
@@ -119,6 +119,10 @@ export default {
           return "Event";
         case "new_organisation_event_created_by_org_admin":
           return "New Event";
+        case "pages":
+          return "Page";
+        case "new_page":
+          return "New Page";
         default:
           return "Invalid type";
       }
diff --git a/src/views/update-requests/Show.vue b/src/views/update-requests/Show.vue
index 95d931e6..a97d2393 100644
--- a/src/views/update-requests/Show.vue
+++ b/src/views/update-requests/Show.vue
@@ -32,17 +32,11 @@
             :service="updateRequest.data.service"
           />
 
-          <service-details
-            v-else-if="updateRequest.updateable_type === 'services'"
-            :update-request-id="updateRequest.id"
-            :requested-at="updateRequest.created_at"
-            :service="updateRequest.data"
-          />
-
           <service-details
             v-else-if="
+              updateRequest.updateable_type === 'services' ||
               updateRequest.updateable_type ===
-              'new_service_created_by_org_admin'
+                'new_service_created_by_org_admin'
             "
             :update-request-id="updateRequest.id"
             :requested-at="updateRequest.created_at"
@@ -64,20 +58,24 @@
           />
 
           <organisation-event-details
-            v-else-if="updateRequest.updateable_type === 'organisation_events'"
+            v-else-if="
+              updateRequest.updateable_type === 'organisation_events' ||
+              updateRequest.updateable_type ===
+                'new_organisation_event_created_by_org_admin'
+            "
             :update-request-id="updateRequest.id"
             :requested-at="updateRequest.created_at"
             :event="updateRequest.data"
           />
 
-          <organisation-event-details
+          <page-details
             v-else-if="
-              updateRequest.updateable_type ===
-              'new_organisation_event_created_by_org_admin'
+              updateRequest.updateable_type === 'pages' ||
+              updateRequest.updateable_type === 'new_page'
             "
             :update-request-id="updateRequest.id"
             :requested-at="updateRequest.created_at"
-            :event="updateRequest.data"
+            :page="updateRequest.data"
           />
 
           <gov-body v-else>Update request is invalid</gov-body>
@@ -125,21 +123,23 @@
 
 <script>
 import http from "@/http";
+import LocationDetails from "@/views/update-requests/show/LocationDetails";
 import OrganisationDetails from "@/views/update-requests/show/OrganisationDetails";
 import OrganisationEventDetails from "@/views/update-requests/show/OrganisationEventDetails";
 import OrganisationSignUpFormDetails from "@/views/update-requests/show/OrganisationSignUpFormDetails";
+import PageDetails from "@/views/update-requests/show/PageDetails.vue";
 import ServiceDetails from "@/views/update-requests/show/ServiceDetails";
-import LocationDetails from "@/views/update-requests/show/LocationDetails";
 import ServiceLocationDetails from "@/views/update-requests/show/ServiceLocationDetails";
 
 export default {
   name: "ShowUpdateRequest",
   components: {
+    LocationDetails,
     OrganisationDetails,
     OrganisationEventDetails,
     OrganisationSignUpFormDetails,
+    PageDetails,
     ServiceDetails,
-    LocationDetails,
     ServiceLocationDetails,
   },
   data() {
@@ -206,6 +206,11 @@ export default {
                 params: { event: this.updateRequest.updateable_id },
               });
               break;
+            case "pages":
+              this.$router.push({
+                name: "pages-index",
+              });
+              break;
             case "organisations":
               this.$router.push({
                 name: "organisations-show",
diff --git a/src/views/update-requests/show/PageDetails.vue b/src/views/update-requests/show/PageDetails.vue
new file mode 100644
index 00000000..14670cdf
--- /dev/null
+++ b/src/views/update-requests/show/PageDetails.vue
@@ -0,0 +1,238 @@
+<template>
+  <ck-loader v-if="loading" />
+  <div v-else>
+    <gov-body v-if="original">
+      For page
+      <gov-link
+        :to="{
+          name: 'pages-edit',
+          params: { page: original.id },
+        }"
+        v-text="original.title"
+      />.
+    </gov-body>
+
+    <gov-table>
+      <template slot="body">
+        <gov-table-row>
+          <gov-table-header scope="column"></gov-table-header>
+          <gov-table-header scope="column" v-if="original"
+            >From</gov-table-header
+          >
+          <gov-table-header scope="column">{{
+            original ? "To" : "New"
+          }}</gov-table-header>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('page_type')">
+          <gov-table-header top scope="row">Type</gov-table-header>
+          <gov-table-cell break v-if="original">{{
+            original.page_type | originalExists | ucfirst
+          }}</gov-table-cell>
+          <gov-table-cell break>{{ page.page_type | ucfirst }}</gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('title')">
+          <gov-table-header top scope="row">Title</gov-table-header>
+          <gov-table-cell v-if="original">{{
+            original.title | originalExists
+          }}</gov-table-cell>
+          <gov-table-cell>{{ page.title }}</gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('slug')">
+          <gov-table-header top scope="row">Slug</gov-table-header>
+          <gov-table-cell v-if="original">{{
+            original.slug | originalExists
+          }}</gov-table-cell>
+          <gov-table-cell>{{ page.slug }}</gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('enabled')">
+          <gov-table-header top scope="row">Status</gov-table-header>
+          <gov-table-cell v-if="original">{{
+            original.enabled | status
+          }}</gov-table-cell>
+          <gov-table-cell>{{ page.enabled | status }}</gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('content')">
+          <gov-table-header top scope="row">Content</gov-table-header>
+          <gov-table-cell v-if="original">
+            <div
+              v-if="
+                original.hasOwnProperty('content') &&
+                typeof original.content === 'object' &&
+                original.content.constructor === Object
+              "
+            >
+              <page-content :content="original.content" />
+            </div>
+            <template v-else>None</template>
+          </gov-table-cell>
+          <gov-table-cell>
+            <div
+              v-if="
+                page.hasOwnProperty('content') &&
+                typeof page.content === 'object' &&
+                page.content.constructor === Object
+              "
+            >
+              <page-content :content="page.content" />
+            </div>
+            <template v-else>None</template>
+          </gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('image_file_id')">
+          <gov-table-header top scope="row">Image</gov-table-header>
+          <gov-table-cell v-if="original">
+            <img
+              :src="apiUrl(`/pages/${page.id}/image.png?v=${requestedAt}`)"
+              alt="Page image"
+              class="ck-logo"
+            />
+          </gov-table-cell>
+          <gov-table-cell>
+            <img
+              v-if="page.id"
+              :src="
+                apiUrl(
+                  `/pages/${page.id}/image.png?update_request_id=${updateRequestId}`
+                )
+              "
+              alt="Page image"
+              class="ck-logo"
+            />
+            <img
+              v-else
+              :src="
+                apiUrl(
+                  `/pages/new/image.png?update_request_id=${updateRequestId}`
+                )
+              "
+              alt="Page image"
+              class="ck-logo"
+            />
+          </gov-table-cell>
+        </gov-table-row>
+
+        <gov-table-row v-if="page.hasOwnProperty('collections')">
+          <gov-table-header top scope="row">Collections</gov-table-header>
+          <gov-table-cell v-if="original">
+            <gov-list
+              bullet
+              v-if="
+                original.hasOwnProperty('collection_categories') &&
+                Array.isArray(original.collection_categories)
+              "
+            >
+              <li
+                v-for="(collection, index) in original.collection_categories"
+                :key="`collections.${index}`"
+              >
+                {{ collection.name }}
+              </li>
+            </gov-list>
+            <template v-else>None</template>
+          </gov-table-cell>
+          <gov-table-cell>
+            <gov-list bullet v-if="Array.isArray(page.collections)">
+              <li
+                v-for="(collectionId, index) in page.collections"
+                :key="`collections.${index}`"
+              >
+                {{ collectionName(findCollection(collectionId)) }}
+              </li>
+            </gov-list>
+            <template v-else>None</template>
+          </gov-table-cell>
+        </gov-table-row>
+      </template>
+    </gov-table>
+  </div>
+</template>
+
+<script>
+import http from "@/http";
+
+import PageContent from "@/views/pages/show/PageContent.vue";
+
+export default {
+  name: "PageDetails",
+
+  components: {
+    PageContent,
+  },
+
+  props: {
+    updateRequestId: {
+      required: true,
+      type: String,
+    },
+
+    requestedAt: {
+      required: true,
+      type: String,
+    },
+
+    page: {
+      required: true,
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      original: null,
+      collections: [],
+    };
+  },
+  methods: {
+    async fetchOriginal() {
+      if (this.page.id !== null) {
+        this.loading = true;
+        const {
+          data: { data: original },
+        } = await http.get(`/pages/${this.page.id}`);
+        this.original = original;
+        this.loading = false;
+      } else {
+        this.original = null;
+      }
+    },
+
+    async fetchCollections() {
+      const {
+        data: { data: collections },
+      } = await http.get("/collections/categories/all");
+      this.collections = collections;
+    },
+    findCollection(collectionId) {
+      return this.collections.find(
+        (collection) => collection.id === collectionId
+      );
+    },
+    collectionName(collection) {
+      return collection ? collection.name : "";
+    },
+  },
+
+  filters: {
+    status(status) {
+      return status === "enabled" ? "Enabled" : "Disabled";
+    },
+
+    originalExists(field) {
+      return field || "";
+    },
+  },
+
+  created() {
+    this.fetchOriginal();
+    this.fetchCollections();
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

From 0811d13aac7d1959081d696a500d5a03a15f4148 Mon Sep 17 00:00:00 2001
From: Stuart Laverick <stuart@appropriatesolutions.co.uk>
Date: Mon, 2 Oct 2023 16:44:40 +0100
Subject: [PATCH 2/2] Added show page for pages

---
 src/views/pages/Edit.vue    |  4 ++-
 src/views/pages/Index.vue   |  4 ---
 src/views/pages/List.vue    | 24 ++++++++---------
 src/views/pages/Show.vue    | 53 +++++++++++++++++++++++++++++++++----
 src/views/pages/Updated.vue |  9 ++++---
 5 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/src/views/pages/Edit.vue b/src/views/pages/Edit.vue
index ed13ad34..20266c54 100644
--- a/src/views/pages/Edit.vue
+++ b/src/views/pages/Edit.vue
@@ -4,7 +4,9 @@
     <template v-else>
       <vue-headful :title="`${appName} - Edit Page ${page.title}`" />
 
-      <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
+      <gov-back-link :to="{ name: 'pages-show', params: { page: page.id } }"
+        >Back to page</gov-back-link
+      >
       <gov-main-wrapper>
         <page-form
           :page="page"
diff --git a/src/views/pages/Index.vue b/src/views/pages/Index.vue
index 0c926533..a454a6de 100644
--- a/src/views/pages/Index.vue
+++ b/src/views/pages/Index.vue
@@ -1,14 +1,10 @@
 <template>
   <gov-width-container>
-    <vue-headful :title="`${appName}  - Pages`" />
-
     <gov-back-link :to="{ name: 'dashboard' }">Back to dashboard</gov-back-link>
 
     <gov-main-wrapper>
       <gov-grid-row>
         <gov-grid-column width="full">
-          <gov-heading size="xl">Pages</gov-heading>
-          <gov-section-break size="m" />
           <router-view />
         </gov-grid-column>
       </gov-grid-row>
diff --git a/src/views/pages/List.vue b/src/views/pages/List.vue
index 27b82711..57c51b5a 100644
--- a/src/views/pages/List.vue
+++ b/src/views/pages/List.vue
@@ -2,17 +2,15 @@
   <div>
     <vue-headful :title="`${appName} - Pages`" />
 
+    <gov-heading size="xl">Pages</gov-heading>
+    <gov-section-break size="m" />
+
     <gov-inset-text v-if="updated"
       >page {{ updatedPage.title }} has been updated</gov-inset-text
     >
 
     <gov-grid-row>
       <gov-grid-column width="two-thirds">
-        <gov-heading size="l">Pages</gov-heading>
-        <gov-body>
-          From this page, you can edit the pages available, as well as add new
-          ones.
-        </gov-body>
         <ck-table-filters @search="onSearch">
           <gov-form-group>
             <gov-label for="filter[title]">Page title</gov-label>
@@ -62,14 +60,14 @@
         <gov-list v-if="searching" :bullet="true">
           <li v-for="page in pages" :key="page.id">
             {{ page.title }}
-            <span v-if="showEdit">
+            <span v-if="showView">
               <gov-link
                 :to="{
-                  name: 'pages-edit',
+                  name: 'pages-show',
                   params: { page: page.id },
                 }"
               >
-                Edit </gov-link
+                View </gov-link
               >&nbsp;
             </span>
             <gov-tag v-if="page.page_type === 'landing'">Landing page</gov-tag
@@ -89,14 +87,14 @@
           @move-up="onMoveUp"
           @move-down="onMoveDown"
         >
-          <template v-if="showEdit" slot="edit" slot-scope="editProps">
+          <template v-if="showView" slot="edit" slot-scope="editProps">
             <gov-link
               :to="{
-                name: 'pages-edit',
+                name: 'pages-show',
                 params: { page: editProps.node.id },
               }"
             >
-              Edit
+              View
             </gov-link>
           </template>
           <template slot="status" slot-scope="statusProps">
@@ -160,8 +158,8 @@ export default {
       }
       return params;
     },
-    showEdit() {
-      return this.auth.isContentAdmin;
+    showView() {
+      return this.auth.canView("pages");
     },
     updatedPage() {
       return this.updated
diff --git a/src/views/pages/Show.vue b/src/views/pages/Show.vue
index 73212ae2..ae27028c 100644
--- a/src/views/pages/Show.vue
+++ b/src/views/pages/Show.vue
@@ -29,13 +29,48 @@
             </gov-grid-column>
           </gov-grid-row>
 
-          <gov-heading tag="h3" size="m">{{
-            pageTypes[page_type]
-          }}</gov-heading>
+          <gov-table>
+            <template slot="body">
+              <gov-table-row>
+                <gov-table-header top scope="row">Page type</gov-table-header>
+                <gov-table-cell>{{ pageTypes[page.page_type] }}</gov-table-cell>
+              </gov-table-row>
 
-          <gov-heading tag="h2" size="l">{{ page.title }}</gov-heading>
+              <gov-table-row>
+                <gov-table-header top scope="row">Status</gov-table-header>
+                <gov-table-cell>{{
+                  page.enabled ? "Enabled" : "Disabled"
+                }}</gov-table-cell>
+              </gov-table-row>
 
-          <page-content :content="page.content" />
+              <gov-table-row>
+                <gov-table-header top scope="row">Title</gov-table-header>
+                <gov-table-cell>{{ page.title }}</gov-table-cell>
+              </gov-table-row>
+
+              <gov-table-row>
+                <gov-table-header top scope="row"
+                  >Page content</gov-table-header
+                >
+                <gov-table-cell>
+                  <page-content :content="page.content" />
+                </gov-table-cell>
+              </gov-table-row>
+
+              <gov-table-row>
+                <gov-table-header top scope="row">Image</gov-table-header>
+                <gov-table-cell>
+                  <img
+                    :src="
+                      apiUrl(`/pages/${page.id}/image.png?v=${page.updated_at}`)
+                    "
+                    :alt="page.title"
+                    class="ck-logo"
+                  />
+                </gov-table-cell>
+              </gov-table-row>
+            </template>
+          </gov-table>
 
           <template v-if="auth.canDelete('page')">
             <gov-section-break size="l" />
@@ -72,6 +107,10 @@ export default {
       loading: false,
       page: null,
       updated: false,
+      pageTypes: {
+        information: "Information page",
+        landing: "Landing page",
+      },
     };
   },
 
@@ -85,6 +124,10 @@ export default {
       this.loading = false;
     },
   },
+
+  created() {
+    this.fetchPage();
+  },
 };
 </script>
 
diff --git a/src/views/pages/Updated.vue b/src/views/pages/Updated.vue
index 7354d7f5..065adc38 100644
--- a/src/views/pages/Updated.vue
+++ b/src/views/pages/Updated.vue
@@ -4,7 +4,9 @@
     <template v-else>
       <vue-headful :title="`${appName} - Page Updated: ${page.title}`" />
 
-      <gov-back-link :to="{ name: 'pages-index' }">Back to pages</gov-back-link>
+      <gov-back-link :to="{ name: 'pages-show', params: { page: page.id } }"
+        >Back to page</gov-back-link
+      >
       <gov-main-wrapper>
         <gov-grid-row>
           <gov-grid-column width="one-half">
@@ -16,9 +18,10 @@
 
             <gov-button
               :to="{
-                name: 'pages-index',
+                name: 'pages-show',
+                params: { page: page.id },
               }"
-              >Back to pages</gov-button
+              >Back to page</gov-button
             >
           </gov-grid-column>
         </gov-grid-row>