Merge pull request #34 from Connected-Places/SUTTON-sc-2768-introduce…

…-pages-into-update-request-concept

Sutton sc 2768 introduce pages into update request concept

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",

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 },

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}`

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;

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"
@@ -26,7 +28,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 +68,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 +95,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({

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>

src/views/pages/List.vue

@@ -2,13 +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>
@@ -58,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
@@ -85,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">
@@ -135,6 +137,7 @@ export default {
  { value: "information", text: "Information page" },
  { value: "landing", text: "Landing page" },
  ],
+ updated: false,
  };
  },
  computed: {
@@ -155,8 +158,13 @@ export default {
  }
  return params;
  },
- showEdit() {
- return this.auth.isContentAdmin;
+ showView() {
+ return this.auth.canView("pages");
+ },
+ updatedPage() {
+ return this.updated
+ ? this.pages.find((page) => page.id === this.updated)
+ : null;
  },
  },
  methods: {
@@ -221,6 +229,7 @@ export default {
  },
  },
  created() {
+ this.updated = this.$route.query.updated || false;
  this.fetchPages();
  },
 };