Added support for out of area contacts. (#105)

* Added Distant property.

* Added support for out of area contacts.

* Added support for out of area contacts.

* Added support for out of area contacts.

* Added support for out of area contacts.

* Added support for out of area contacts.

* Added support for out of area contacts.

* Added support for out of area contacts.

Author: rtmsft

2wr-app/src/components/prepare/family-plans/editors/emergency-contact-editor.vue

@@ -50,6 +50,12 @@
         v-model="theContact.sharePlanWith"
         label="Share Plan with this Person?"
       />
+      <v-checkbox
+        v-model="theContact.distant"
+        v-if="distant"
+        label="Out of area?"
+        disabled=true
+      />
       <v-divider></v-divider>
       <v-card-actions class="">
         <v-btn text @click="$emit(`cancel`)">Cancel</v-btn>
@@ -67,6 +73,7 @@ import _ from "lodash";
 export default defineComponent({
   props: {
     contact: { required: true },
+    distant: { required: true }
   },
   setup(props, { emit, refs }) {
     const theContact = reactive(_.cloneDeep(props.contact));

2wr-app/src/components/prepare/family-plans/emergency-contact-view.vue

@@ -61,6 +61,9 @@
       <IconTextBlock :icon="contact.sharePlanWith ? 'mdi-check-box-outline' : 'mdi-checkbox-blank-outline'">
         <div>Share Plan?</div>
       </IconTextBlock>
+      <IconTextBlock v-if="distant" :icon="distant ? 'mdi-check-box-outline' : 'mdi-checkbox-blank-outline'">
+        <div>Out of area?</div>
+      </IconTextBlock>
     </div>
   </div>
 </template>
@@ -71,6 +74,7 @@ import { defineComponent, ref } from "@vue/composition-api";
 export default defineComponent({
   props: {
     contact: { required: true },
+    distant: { required: true }
   },
   setup() {
     const showSchoolInfo = ref(false);

2wr-app/src/components/prepare/family-plans/family-plan-contacts-view.vue

@@ -2,6 +2,7 @@
   <v-container class="py-0" v-if="plan">
     <v-fab-transition>
       <v-btn
+        v-if="contacts.length == 0 || !distant"
         color="green"
         dark
         absolute
@@ -14,15 +15,17 @@
         <v-icon>mdi-plus</v-icon>
       </v-btn>
     </v-fab-transition>
-    <InfoBar :title="`${plan.title} - Emergency Contacts`"></InfoBar>  
-    <v-card class="pa-2" v-if="contacts.length == 0"><em>Press <strong>'+'</strong> to add new contacts.</em></v-card>
+    <InfoBar v-if="distant" :title="`${plan.title} - Distant Contact`"></InfoBar>
+    <InfoBar v-if="!distant" :title="`${plan.title} - Emergency Contacts`"></InfoBar>
+    <v-card class="pa-2" v-if="contacts.length == 0"><em>Press <strong>'+'</strong> to add a new contact.</em></v-card>
     <v-card v-for="contact in contacts" :key="contact.fullName">
-      <EmergencyContactView :contact="contact" @launchEditor="launchEditor"></EmergencyContactView>
+      <EmergencyContactView v-if="contact.distant === distant" :contact="contact" :distant="distant" @launchEditor="launchEditor"></EmergencyContactView>
     </v-card>
     <v-dialog v-model="showEditor" persistent>
       <EmergencyContactEditor
         v-if="showEditor"
         :contact="editorContact"
+        :distant="distant"
         @cancel="showEditor = false"
         @save="save"
       ></EmergencyContactEditor>
@@ -49,15 +52,16 @@ export default defineComponent({
     EmergencyContactView,
     EmergencyContactEditor
   },
-  props: { planId: { required: true } },
+  props: { planId: { required: true }, distant: { required: true } },
   setup(props) {
     const contacts = ref(null);
     const plan = ref(null);
-
     const editorContact = ref(null);
     const showEditor = ref(false);
+    const distant = ref(false);
 
     onMounted(() => {
+      distant.value = props.distant;
       let found = store.getters["familyPlansStore/findFamilyPlan"](
         props.planId
       );
@@ -80,10 +84,13 @@ export default defineComponent({
     }
 
     function addNew() {
-      launchEditor(new EmergencyContact());
+      let contact = new EmergencyContact();
+      contact.distant = distant.value;
+      launchEditor(contact);
     }
 
     return {
+      distant,
       contacts,
       goBack,
       plan,

2wr-app/src/components/prepare/family-plans/family-plans-view.vue

@@ -72,6 +72,19 @@
           </div>
         </v-flex>
       </v-card>
+      <v-card
+        class="mx-2 my-2"
+        color="primary"
+        ripple
+        @click="ensureNamed('Out of Area Contact', 'distantcontacts')"
+      >
+        <v-flex class="d-flex justify-space-between px-2 py-2">
+          <div>Out of Area Contacts</div>
+          <div>
+            <v-icon class="mr-2">mdi-chevron-right</v-icon>
+          </div>
+        </v-flex>
+      </v-card>
       <v-card
         class="mx-2 my-2"
         color="primary"

2wr-app/src/router/familyPlanRoutes.js

@@ -1,6 +1,7 @@
 import FamilyPlanLanding from '../views/prepare/family-plans/landing.vue';
 import FamilyPlanView from '../views/prepare/family-plans/view.vue';
 import FamilyPlanContacts from "../views/prepare/family-plans/contacts.vue"
+import FamilyPlanDistantContacts from "../views/prepare/family-plans/distant-contacts.vue"
 import FamilyPlanRoutes from "../views/prepare/family-plans/routes.vue";
 import FamilyPlanChildren from '@/views/prepare/family-plans/children.vue';
 import FamilyPlanPets from '@/views/prepare/family-plans/pets.vue';
@@ -23,6 +24,15 @@ export default [
       requiresAuth: true
     }
   },
+  {
+    path: '/prepare/familyplan/:planId/distantcontacts',
+    name: "familyplan-distantcontacts",
+    component: FamilyPlanDistantContacts,
+    props: true,
+    meta: {
+      requiresAuth: true
+    }
+  },
   {
     path: '/prepare/familyplan/:planId/emergencycontacts',
     name: "familyplay-contacts",
@@ -59,4 +69,4 @@ export default [
       requiresAuth: true
     }
   }
-];
+];

2wr-app/src/views/prepare/family-plans/contacts.vue

@@ -1,5 +1,5 @@
 <template>
-  <FamilyPlansContacts :planId="planId"></FamilyPlansContacts>
+  <FamilyPlansContacts :planId="planId" :distant=false></FamilyPlansContacts>
 </template>
 
 <script>

2wr-app/src/views/prepare/family-plans/distant-contacts.vue

@@ -0,0 +1,13 @@
+<template>
+  <FamilyPlansContacts :planId="planId" :distant=true></FamilyPlansContacts>
+</template>
+
+<script>
+import FamilyPlansContacts from "@/components/prepare/family-plans/family-plan-contacts-view.vue";
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  components: { FamilyPlansContacts },
+  props: [ "planId" ]
+});
+</script>

TwoWeeksReady.Common/FamilyPlans/Contact.cs

@@ -1,4 +1,4 @@
-using Newtonsoft.Json;
+using Newtonsoft.Json;
 
 namespace TwoWeeksReady.Common.FamilyPlans
 {
@@ -22,5 +22,7 @@ public class Contact
     public bool NotifyLastLocation { get; set; }
     [JsonProperty("sharePlanWith")]
     public bool SharePlanWith { get; set; }
+    [JsonProperty("distant")]
+    public bool Distant { get; set; }
   }
-}
+}