Merge pull request #1092 from jac-uk/feature/1063-extension

#1063 Extend Application

.circleci/config.yml

@@ -18,7 +18,9 @@ jobs:
       - checkout
       - run:
           name: 'Setup'
-          command: npm ci
+          command: |
+            echo "//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}" > ~/.npmrc
+            npm ci
       - persist_to_workspace:
           root: .
           paths:
@@ -54,7 +56,7 @@ jobs:
           name: 'Deploy to production'
           command: |
             npm run build-production
-            node_modules/.bin/firebase target:apply hosting production-admin-app jac-apply-admin-production --project production 
+            node_modules/.bin/firebase target:apply hosting production-admin-app jac-apply-admin-production --project production
             node_modules/.bin/firebase deploy --force --token=$FIREBASE_DEPLOY_TOKEN --only hosting:production-admin-app --project production
 
   build-and-deploy-staging:
@@ -117,6 +119,6 @@ workflows:
             - test
           filters:
             branches:
-              only: 
+              only:
                 - master
                 - /hotfix/.*/

.npmrc

@@ -0,0 +1 @@
+registry=https://npm.pkg.github.com/jac-uk

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/',
+    '/node_modules/(?!@jac-uk)',
   ],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^16.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
+    "@jac-uk/jackit": "0.0.6",
     "@ministryofjustice/frontend": "0.0.17-alpha",
     "@sentry/browser": "^5.20.1",
     "@sentry/integrations": "^5.20.1",

src/components/EditableField.vue

@@ -51,7 +51,7 @@
       class="edit-field"
     >
       <TextField
-        v-if="isText || isEmail"
+        v-if="isText || isEmail || isRoute"
         :id="`editable-field-${id}`"
         v-model="localField"
       />
@@ -94,7 +94,7 @@ export default {
       default: 'value',
     },
     value: {
-      type: [String, Date, Number],
+      type: [String, Date, Number, Object],
       default: '',
     },
     type: {

src/components/ModalViews/SubmissionExtension.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="modal__title govuk-!-padding-2 govuk-heading-m">
+      Submission Extension
+    </div>
+    <div class="modal__content govuk-!-margin-6">
+      <div class="govuk-grid-row">
+        <form
+          ref="formRef"
+        >
+          <fieldset>
+            <TextField
+              id="date-extension-reason"
+              v-model="dateExtensionReason"
+              label="Reason for extension"
+              required
+            />
+            <DateInput
+              id="date-extension"
+              v-model="dateExtension"
+              :value="dateExtension"
+            />
+          </fieldset>
+          <button 
+            class="govuk-button govuk-!-margin-right-3"
+            @click.prevent="save"
+          >
+            Save
+          </button>
+          <button 
+            class="govuk-button govuk-button--secondary govuk-!-margin-right-3"
+            @click.prevent="closeModal"
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import firebase from '@firebase/app';
+import TextField from '@/components/Form/TextField';
+import DateInput from '@/components/Form/DateInput';
+
+export default {
+  name: 'SubmissionExtension',
+  components: {
+    TextField,
+    DateInput,
+  },
+  data() {
+    return {
+      dateExtension: null,
+      dateExtensionReason: null,
+    };
+  },
+  created() {
+    this.dateExtension = this.$attrs.dateExtension;
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close');
+    },          
+    confirmModal() {
+      this.modalOpen = false;
+      this.$emit('confirmed');
+      document.body.style.overflow = '';
+    },  
+    async save() {
+      const data = {
+        dateExtension: this.dateExtension,
+      };
+      const dataNotes = {
+        applicationId: this.$attrs.applicationId,
+        body: `Application extended to: ${this.dateExtension}: ${this.dateExtensionReason}`,
+        candidate: {
+          id: this.$attrs.userId,
+        },
+        created: firebase.firestore.FieldValue.serverTimestamp(),
+      };
+
+      await this.$store.dispatch('application/update', { data: data, id: this.$attrs.applicationId });
+      await this.$store.dispatch('notes/save', { data: dataNotes });
+      this.closeModal();
+    },     
+  },
+};
+</script>
+
+<style scoped>
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+</style>

src/components/Notes/Notes.vue

@@ -65,6 +65,10 @@ export default {
       type: String,
       default: '',
     },
+    applicationId: {
+      type: String,
+      default: '',
+    },
     title: {
       type: String,
       default: 'Notes',
@@ -97,6 +101,7 @@ export default {
   created() {
     const data = {};
     data.candidateId = this.candidateId || null;
+    data.applicationId = this.applicationId || null;
     this.$store.dispatch('notes/bind', data );
   },
   methods: {
@@ -107,6 +112,9 @@ export default {
           id: this.candidateId || null,
         };
       }
+      if (this.applicationId) {
+        data.applicationId = this.applicationId;
+      }
       this.noteSelectedObj = data;
       this.notesAction = STEPS.new;
     },

src/store/notes.js

@@ -7,13 +7,16 @@ const collection = firestore.collection('notes');
 export default {
   namespaced: true,
   actions: {
-    bind: firestoreAction(async ({ bindFirestoreRef }, { candidateId }) => {
-      let firestoreRef;
+    bind: firestoreAction(async ({ bindFirestoreRef }, { candidateId, applicationId }) => {
+      let firestoreRef = collection;
       if (candidateId) {
-        firestoreRef = collection
+        firestoreRef = firestoreRef
           .where('candidate.id', '==', candidateId)
           .orderBy('created', 'desc');
       }
+      if (applicationId) {
+        firestoreRef = firestoreRef.where('applicationId', '==', applicationId);
+      }
       if (firestoreRef) {
         await bindFirestoreRef('records', firestoreRef, { serialize: vuexfireSerialize });
       }