Skip to content

Commit

Permalink
Merge pull request #529 from jac-uk/feature/#528/banner_infomation_st…
Browse files Browse the repository at this point in the history
…atus

Feature/#528/banner infomation status
  • Loading branch information
tomlovesgithub authored Jun 1, 2020
2 parents f881f87 + e412850 commit f84fc55
Show file tree
Hide file tree
Showing 10 changed files with 235 additions and 69 deletions.
15 changes: 11 additions & 4 deletions src/components/Page/Banner.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div
class="moj-banner moj-banner--success"
v-if="message"
:class="status ? 'moj-banner moj-banner--'+status : 'moj-banner'"
>
<div class="moj-banner__message">
<svg
Expand All @@ -13,9 +14,9 @@
height="25"
width="25"
>
<path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z" />
<path :d="status === 'success' ? 'M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z' : 'M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v.8C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z'" />
</svg>
<span class="moj-banner__assistive">success</span>{{ message }}
<span class="moj-banner__assistive">{{ status }}</span>{{ message }}
</div>
</div>
</template>
Expand All @@ -25,7 +26,13 @@ export default {
props: {
message: {
type: String,
required: true,
default: null,
// @TODO add validator?
},
status: {
type: String,
default: null,
// @TODO add validator?
},
},
};
Expand Down
2 changes: 1 addition & 1 deletion src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ const router = new Router({
},
},
{
path: 'review/:applicationId',
path: 'review/edit',
component: ExerciseStagesReviewEdit,
name: 'exercise-stages-review-edit',
meta: {
Expand Down
36 changes: 32 additions & 4 deletions src/store/stage/review.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { firestore } from '@/firebase';
import { firestoreAction } from 'vuexfire';
import vuexfireSerialize from '@/helpers/vuexfireSerialize';
import { EXERCISE_STAGE, APPLICATION_STATUS, SHORTLISTING } from '../../helpers/constants';
import { lookup } from '@/filters';

const collectionRef = firestore.collection('applicationRecords');

Expand Down Expand Up @@ -79,7 +80,7 @@ export default {
unbind: firestoreAction(({ unbindFirestoreRef }) => {
return unbindFirestoreRef('records');
}),
updateStatus: async ( context, { applicationId, status, nextStage } ) => {
updateStatus: async ( context, { status, nextStage } ) => {
let stageValue = EXERCISE_STAGE.REVIEW; // initial value: 'review'

// CHECKBOX SELECTED TO MOVE TO NEXT STAGE: SHORTLISTED
Expand All @@ -91,12 +92,39 @@ export default {
status: status,
stage: stageValue,
};
const ref = collectionRef.doc(applicationId);
await ref.update(data);
// @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)

const selectedItems = context.state.selectedItems;
const batch = firestore.batch();
selectedItems.map( item => {
const ref = collectionRef.doc(item);
batch.update(ref, data);
});
await batch.commit();

const valueMessage = lookup(status);
context.commit('message', `Updated ${selectedItems.length} candidates to '${valueMessage}'`);

},
storeItems: ( context, { items }) => {
context.commit('changeSelectedItems', items);
},
getMessages: (context) => {
const localMsg = context.state.message;
context.commit('message', null);
return localMsg;
},
},
state: {
records: [],
message: null,
selectedItems: [],
},
mutations: {
message(state, msg) {
state.message = msg;
},
changeSelectedItems(state, items) {
state.selectedItems = items;
},
},
};
19 changes: 18 additions & 1 deletion src/store/stage/selected.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { firestore } from '@/firebase';
import { firestoreAction } from 'vuexfire';
import vuexfireSerialize from '@/helpers/vuexfireSerialize';
import { EXERCISE_STAGE, APPLICATION_STATUS } from '../../helpers/constants';
import { lookup } from '@/filters';

const collectionRef = firestore.collection('applicationRecords');

Expand Down Expand Up @@ -42,11 +43,27 @@ export default {
stage: stageValue,
};
const ref = collectionRef.doc(applicationId);
await ref.update(data);
await ref.update(data)
.then(() => {
const valueMessage = lookup(status);
context.commit('message', `Application id #${applicationId} changed to '${valueMessage}'`);
});
// @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)
},
getMessages: (context) => {
const localMsg = context.state.message;
context.commit('message', null);
return localMsg;
},
},
state: {
records: [],
message: null,
},
mutations: {
message(state, msg) {
state.message = msg;
},
},
};

22 changes: 11 additions & 11 deletions src/views/Exercises/Show.vue
Original file line number Diff line number Diff line change
Expand Up @@ -132,17 +132,17 @@ export default {
{ page: 'Independent Assessments', name: 'exercise-show-independent-assessments' },
],
});
// pages.push({
// page: 'Stages',
// name: 'exercise-stages',
// children: [
// { page: 'Review', name: 'exercise-stages-review-list' },
// { page: 'Shortlisted', name: 'exercise-stages-shortlist-list' },
// { page: 'Selected', name: 'exercise-stages-selected-list' },
// { page: 'Recommended', name: 'exercise-stages-recommended-list' },
// { page: 'Handover', name: 'exercise-stages-handover-list' },
// ],
// });
pages.push({
page: 'Stages',
name: 'exercise-stages',
children: [
{ page: 'Review', name: 'exercise-stages-review-list' },
{ page: 'Shortlisted', name: 'exercise-stages-shortlist-list' },
{ page: 'Selected', name: 'exercise-stages-selected-list' },
{ page: 'Recommended', name: 'exercise-stages-recommended-list' },
{ page: 'Handover', name: 'exercise-stages-handover-list' },
],
});
pages.push({
page: 'Reports',
name: 'exercise-show-reports',
Expand Down
15 changes: 11 additions & 4 deletions src/views/Exercises/Stages/ReviewEdit.vue
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,6 @@ export default {
};
},
computed: {
applicationId() {
return this.$route.params.applicationId;
},
availableStatuses() {
const shortlistingMethods = this.exercise.shortlistingMethods;
const otherShortlistingMethod = this.exercise.otherShortlistingMethod || [];
Expand All @@ -72,10 +69,20 @@ export default {
exercise() {
return this.$store.state.exerciseDocument.record;
},
itemsToChange() {
const selectedItems = this.$store.state.stageReview.selectedItems;
return selectedItems;
},
},
created() {
// on refresh if there's no IDs to change => redirect to the list
if (this.itemsToChange.length === 0) {
this.$router.push({ name: 'exercise-stages-review-list' });
}
},
methods: {
async save() {
await this.$store.dispatch('stageReview/updateStatus', { applicationId: this.applicationId, status: this.newSelectedStatus, nextStage: this.nextStageStatus });
await this.$store.dispatch('stageReview/updateStatus', { status: this.newSelectedStatus, nextStage: this.nextStageStatus });
this.$router.push({ name: 'exercise-stages-review-list' });
},
},
Expand Down
70 changes: 59 additions & 11 deletions src/views/Exercises/Stages/ReviewList.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,81 @@
<template>
<div>
<Banner :message="message" />
<h1>Review</h1>
<ul>
<li
v-for="item in applicationRecords"
:key="item.application.id"
<form @submit.prevent="checkForm">
<button
class="govuk-button govuk-!-margin-right-2"
:disabled="isButtonDisabled"
>
<RouterLink
:to="{ name: 'exercise-stages-review-edit', params: { applicationId: item.application.id } }"
Set status
</button>
<table>
<tr
v-for="item in applicationRecords"
:key="item.application.id"
>
{{ item.candidate.fullName }}, {{ item.status }}
</RouterLink>
</li>
</ul>
<td>
<CheckboxGroup
:id="`item-${item.application.id}`"
v-model="selectedItems"
label=""
hint=""
value=""
>
<CheckboxItem
:value="item.application.id"
label=""
/>
</CheckboxGroup>
</td>
<td>
{{ item.candidate.fullName }}, {{ item.status }}
</td>
</tr>
</table>
</form>
</div>
</template>

<script>
import Banner from '@/components/Page/Banner';
import CheckboxGroup from '@/components/Form/CheckboxGroup';
import CheckboxItem from '@/components/Form/CheckboxItem';
export default {
components: {
Banner,
CheckboxGroup,
CheckboxItem,
},
data() {
return {
message: null,
selectedItems: null,
};
},
computed: {
applicationRecords() {
return this.$store.state.stageReview.records;
},
exercise() {
return this.$store.state.exerciseDocument.record;
},
isButtonDisabled() {
const isDisabled = this.selectedItems && this.selectedItems.length;
return !isDisabled;
},
},
created() {
async created() {
this.$store.dispatch('stageReview/bind', { exerciseId: this.exercise.id });
this.message = await this.$store.dispatch('stageReview/getMessages');
this.$store.dispatch('stageReview/storeItems', { items: [] });
},
methods: {
checkForm() {
this.$store.dispatch('stageReview/storeItems', { items: this.selectedItems });
this.$router.push({ name: 'exercise-stages-review-edit' });
},
},
};
</script>
9 changes: 8 additions & 1 deletion src/views/Exercises/Stages/SelectedList.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div>
<Banner :message="message" />
<h1>Selected</h1>
<ul>
<li
Expand All @@ -17,7 +18,12 @@
</template>

<script>
import Banner from '@/components/Page/Banner';
export default {
components: {
Banner,
},
computed: {
applicationRecords() {
return this.$store.state.stageSelected.records;
Expand All @@ -26,8 +32,9 @@ export default {
return this.$store.state.exerciseDocument.record;
},
},
created() {
async created() {
this.$store.dispatch('stageSelected/bind', { exerciseId: this.exercise.id });
this.message = await this.$store.dispatch('stageSelected/getMessages');
},
};
</script>
30 changes: 6 additions & 24 deletions src/views/Sandbox.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,14 @@
<template>
<div>
<TabsList
:tabs="tabs"
:active-tab.sync="activeTab"
/>
{{ activeTab }}
</div>
<Banner
:message="'gabe'"
:status="'success'"
/>
</template>
<script>
import TabsList from '@/components/Page/TabsList';
import Banner from '@/components/Page/Banner';
export default {
components: {
TabsList,
},
data() {
return {
tabs: [
{
ref: 'one',
title: 'this is tab 1',
},
{
ref: 'two',
title: 'here is tab 2',
},
],
activeTab: null,
};
Banner,
},
};
</script>
Loading

0 comments on commit f84fc55

Please sign in to comment.