#1709 admin main page improvements (#1936)

* wip

* update ui

* fix dependency

* update modal style

* change text back

* use govuk class

* show most relevant timeline events

* update timeline

src/components/Micro/SimpleBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="background-light-grey govuk-!-padding-4 govuk-!-margin-bottom-3">
-    <h2 class="govuk-heading-m">
+    <h2 class="govuk-heading-m govuk-!-margin-bottom-0">
       {{ text }}
     </h2>
   </div>

src/components/Micro/WarningDetails.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="background-light-grey govuk-!-padding-left-4 govuk-!-padding-right-4 govuk-!-padding-top-4 govuk-!-margin-bottom-3">
-    <div class="govuk-warning-text">
+  <div class="govuk-!-margin-bottom-4">
+    <div class="govuk-warning-text govuk-!-margin-bottom-0 govuk-!-padding-bottom-0">
       <span
         class="govuk-warning-text__icon"
         aria-hidden="true"

src/filters.js

@@ -36,6 +36,7 @@ const lookup = (value) => {
     additionalInfo: 'Additional Information',
 
     // exercise states
+    draft: 'Draft',
     registration: 'Registration',
     shortlisting: 'Shortlisting',
     selection: 'Selection',

src/helpers/exerciseHelper.js

@@ -293,8 +293,8 @@ function isEditable(data) {
   if (data === null) return false;
   switch (data.state) {
     case 'draft':
-    case 'ready':
       return true;
+    case 'ready':
     default:
       return false;
   }

src/store/exercise/document.js

@@ -138,6 +138,7 @@ export default {
       const ref = collection.doc(id);
       const data = {
         state: 'draft',
+        published: false,
         testingState: null,
         _approval: null,
       };

src/views/Exercise.vue

@@ -8,26 +8,53 @@
       <div class="govuk-grid-row print-none">
         <div class="govuk-grid-column-one-quarter">
           <router-link
-            class="govuk-back-link govuk-!-margin-top-0"
+            class="govuk-back-link govuk-!-margin-0"
             :to="goBack"
           >
             Back
           </router-link>
         </div>
+      </div>
+      <div class="govuk-grid-row govuk-!-margin-top-4">
         <div
-          v-if="hasPermissions([PERMISSIONS.exercises.permissions.canUpdateExercises.value])"
-          class="govuk-grid-column-three-quarters"
+          class="govuk-grid-column-full"
+          style="display: flex; justify-content: space-between; align-items: center;"
         >
-          <div class="float-right govuk-!-margin-0">
-            <AddToFavouritesButton
+          <div>
+            <span
+              v-show="isInFavourites"
+              class="govuk-tag--yellow govuk-!-margin-right-3"
+              style="display: inline-block; padding: 5px 8px 4px 8px; font-weight: 700; font-size: 16px; line-height: 16px; letter-spacing: 1px;"
+            >
+              FAVOURITE
+            </span>
+            <a
+              href="#"
+              class="govuk-link print-none"
+              @click.prevent="updateFavourites"
+            >
+              {{ isInFavourites ? 'Remove from favourite' : 'Add to favourite' }}
+            </a>
+          </div>
+          <div class="print-none govuk-!-margin-0">
+            <ActionButton
+              v-if="canUpdateExercises && isApproved"
               class="govuk-!-margin-bottom-0"
-              :in-favourites="isInFavourites"
-              @click="updateFavourites"
-            />
+              @click="copyToClipboard"
+            >
+              Copy to clipboard
+            </ActionButton>
+            <button
+              v-if="canArchiveExercises"
+              class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0 govuk-!-margin-left-3"
+              @click="openArchiveModal"
+            >
+              {{ isArchived ? 'Unarchive exercise' : 'Archive exercise' }}
+            </button>
           </div>
         </div>
       </div>
-      <div class="govuk-grid-row clearfix govuk-!-margin-bottom-2">
+      <div class="govuk-grid-row clearfix govuk-!-margin-top-4 govuk-!-margin-bottom-2">
         <div class="govuk-grid-column-full">
           <span class="govuk-caption-xl">
             {{ exercise.referenceNumber }}
@@ -42,6 +69,26 @@
           >
             Edit name
           </router-link>
+
+          <div
+            v-if="!isProduction"
+            class="govuk-!-margin-top-4"
+          >
+            <button
+              v-if="isReadyForTesting && !isArchived"
+              class="govuk-button govuk-button--secondary"
+              @click="changeNoOfTestApplications()"
+            >
+              Create demo applications
+            </button>
+            <ActionButton
+              v-if="isTesting"
+              ref="createTestApplicationsBtn"
+              @click="createTestApplications()"
+            >
+              Create demo applications
+            </ActionButton>
+          </div>
         </div>
       </div>
       <div class="govuk-grid-row">
@@ -53,25 +100,46 @@
         </div>
       </div>
       <RouterView />
+
+      <Modal ref="archiveModal">
+        <ModalInner
+          @close="closeArchiveModal"
+          @confirmed="archive"
+        />
+      </Modal>
+      <Modal ref="modalChangeNoOfTestApplications">
+        <ChangeNoOfTestApplications
+          :no-of-test-applications="1"
+          @close="cancelChangeNoOfTestApplications()"
+          @confirmed="confirmedNoOfTestApplications()"
+        />
+      </Modal>
     </div>
   </div>
 </template>
 
 <script>
 import LoadingMessage from '@jac-uk/jac-kit/draftComponents/LoadingMessage';
-import AddToFavouritesButton from '@jac-uk/jac-kit/draftComponents/AddToFavouritesButton';
 import SubNavigation from '@/components/Navigation/SubNavigation';
+import Modal from '@jac-uk/jac-kit/components/Modal/Modal';
+import ModalInner from '@jac-uk/jac-kit/components/Modal/ModalInner';
+import ActionButton from '@jac-uk/jac-kit/draftComponents/ActionButton';
+import ChangeNoOfTestApplications from '@/components/ModalViews/ChangeNoOfTestApplications';
 import { mapState } from 'vuex';
-import { isEditable, hasQualifyingTests, isProcessing } from '@/helpers/exerciseHelper';
+import { isEditable, hasQualifyingTests, isProcessing, applicationCounts, isApproved, isArchived } from '@/helpers/exerciseHelper';
 import permissionMixin from '@/permissionMixin';
-import { applicationCounts } from '@/helpers/exerciseHelper';
+import { logEvent } from '@/helpers/logEvent';
+import { functions } from '@/firebase';
 
 export default {
   name: 'ExerciseView',
   components: {
     LoadingMessage,
-    AddToFavouritesButton,
     SubNavigation,
+    Modal,
+    ModalInner,
+    ActionButton,
+    ChangeNoOfTestApplications,
   },
   mixins: [permissionMixin],
   data() {
@@ -102,9 +170,33 @@ export default {
     exerciseName() {
       return this.exercise.name && this.exercise.name.length < 80 ? this.exercise.name : `${this.exercise.name.substring(0,79)}..`;
     },
+    canUpdateExercises() {
+      return this.hasPermissions([this.PERMISSIONS.exercises.permissions.canUpdateExercises.value]);
+    },
+    canArchiveExercises() {
+      return this.hasPermissions([this.PERMISSIONS.exercises.permissions.canAmendAfterLaunch.value]);
+    },
     isInFavourites() {
       return this.userId && this.exercise && this.exercise.favouriteOf && this.exercise.favouriteOf.indexOf(this.userId) >= 0;
     },
+    isArchived() {
+      return isArchived(this.exercise);
+    },
+    isApproved() {
+      return isApproved(this.exercise);
+    },
+    isPublished() {
+      return this.exercise.published;
+    },
+    isReadyForTesting() {
+      return this.isPublished && this.isApproved && !this.isTesting && !this.isTested;
+    },
+    isTesting() {
+      return this.exercise && this.exercise.testingState && this.exercise.testingState === 'testing';
+    },
+    isProduction() {
+      return this.$store.getters['isProduction'];
+    },
     hasOpened() {
       if (this.exercise && this.exercise.applicationOpenDate <= new Date()) {
         return true;
@@ -179,6 +271,56 @@ export default {
         this.$store.dispatch('exerciseDocument/addToFavourites', this.userId);
       }
     },
+    async copyToClipboard() {
+      const exercise = await this.$store.dispatch('exerciseDocument/getDocumentData', this.exerciseId);
+      await this.$store.dispatch('clipboard/write', {
+        environment: this.$store.getters.appEnvironment,
+        type: 'exercise',
+        title: `${exercise.referenceNumber} ${exercise.name}`,
+        content: exercise,
+      });
+    },
+    openArchiveModal() {
+      this.$refs.archiveModal.openModal();
+    },
+    closeArchiveModal() {
+      this.$refs.archiveModal.closeModal();
+    },
+    archive() {
+      if (this.isArchived) {
+        this.$store.dispatch('exerciseDocument/unarchive');
+        logEvent('info', 'Exercise unarchived', {
+          exerciseId: this.exerciseId,
+          exerciseRef: this.exercise.referenceNumber,
+        });
+      } else {
+        this.$store.dispatch('exerciseDocument/archive');
+        logEvent('info', 'Exercise archived', {
+          exerciseId: this.exerciseId,
+          exerciseRef: this.exercise.referenceNumber,
+        });
+      }
+      this.$refs.archiveModal.closeModal();
+    },
+    changeNoOfTestApplications() {
+      this.$refs['modalChangeNoOfTestApplications'].openModal();
+      this.$store.dispatch('exerciseDocument/testing');
+    },
+    async createTestApplications() {
+      const noOfTestApplications = this.$store.getters['exerciseDocument/noOfTestApplications'];
+      if (!noOfTestApplications) return;
+      await functions.httpsCallable('createTestApplications')({ exerciseId: this.exerciseId, noOfTestApplications });
+      this.$store.dispatch('exerciseDocument/tested');
+      this.$store.dispatch('exerciseDocument/changeNoOfTestApplications', 0);
+    },
+    cancelChangeNoOfTestApplications() {
+      this.$refs['modalChangeNoOfTestApplications'].closeModal();
+      this.$store.dispatch('exerciseDocument/isReadyForTest');
+    },
+    confirmedNoOfTestApplications() {
+      this.$refs['modalChangeNoOfTestApplications'].closeModal();
+      this.$refs['createTestApplicationsBtn'].$el.click();
+    },
   },
 };
 </script>