From 49630dc784b36190cc9f246dc06a282f49b21356 Mon Sep 17 00:00:00 2001
From: hujtomi <hujtomi@gmail.com>
Date: Wed, 15 Mar 2023 00:10:52 +0100
Subject: [PATCH] Move Family Members to top section of family plan #112

---
 .../family-plans/family-plans-view.vue        | 253 +++++++++++-------
 2wr-app/src/router/familyPlanRoutes.js        |  10 +
 .../family-plans/add-family-member.vue        | 145 ++++++++++
 3 files changed, 317 insertions(+), 91 deletions(-)
 create mode 100644 2wr-app/src/views/prepare/family-plans/add-family-member.vue

diff --git a/2wr-app/src/components/prepare/family-plans/family-plans-view.vue b/2wr-app/src/components/prepare/family-plans/family-plans-view.vue
index a460d0d..9487668 100644
--- a/2wr-app/src/components/prepare/family-plans/family-plans-view.vue
+++ b/2wr-app/src/components/prepare/family-plans/family-plans-view.vue
@@ -1,70 +1,117 @@
 <template>
   <v-container class="py-0" v-if="plan">
-      <v-fab-transition>
-      <v-btn
-        color="red"
-        dark
-        absolute
-        bottom
-        right
-        fab
-        class="mb-12"
-        @click="deletePlan"
-      >
+    <v-fab-transition>
+      <v-btn color="red"
+             dark
+             absolute
+             bottom
+             right
+             fab
+             class="mb-12"
+             @click="deletePlan">
         <v-icon>mdi-delete-forever</v-icon>
       </v-btn>
     </v-fab-transition>
 
     <InfoBar title="Family Plan"></InfoBar>
     <v-flex>
-      <v-row justify="end" class="py-6 cursor-pointer" @click="toggleAlerts" >
+      <v-row justify="end" class="py-6 cursor-pointer" @click="toggleAlerts">
         <div class="text-button px-6">{{ plan.allowAlerts ? 'Alerts Enabled' : 'Alerts Disabled'}}</div>
-        <v-icon
-          plain
-          large
-          class="mr-6"
-          :class="{ 'red--text': plan.allowAlerts }"
-          >{{ plan.allowAlerts ? 'mdi-alarm-light' : 'mdi-alarm-light-off'}}</v-icon
-        >
+        <v-icon plain
+                large
+                class="mr-6"
+                :class="{ 'red--text': plan.allowAlerts }">{{ plan.allowAlerts ? 'mdi-alarm-light' : 'mdi-alarm-light-off'}}</v-icon>
       </v-row>
     </v-flex>
-    <EditableTextBlock
-      label="Plan Name"
-      v-model="plan.title"
-      isTitle
-      :rules="rules.title"
-      @save="updatePlan"
-      class="mt-2"
-    ></EditableTextBlock>
+    <EditableTextBlock label="Plan Name"
+                       v-model="plan.title"
+                       isTitle
+                       :rules="rules.title"
+                       @save="updatePlan"
+                       class="mt-2"></EditableTextBlock>
     <v-spacer class="my-4" />
-    <v-card class="py-10">
-      <v-row justify="space-around">
-        <v-btn color="#222" dark>Walkthrough</v-btn>
-        <v-btn color="#222" dark>Manage</v-btn>
-      </v-row>
-    </v-card>
+    <AddressView @save="updatePlan"
+                 v-model="plan.address"
+                 title="Home Address"></AddressView>
     <v-spacer class="my-4" />
-    <AddressView
-      @save="updatePlan"
-      v-model="plan.address"
-      title="Home Address"
-    ></AddressView>
+    <EditableTextBlock icon="mdi-phone"
+                       label="Phone Number"
+                       v-model="plan.phoneNumber"
+                       @save="updatePlan"
+                       :rules="rules.phone"></EditableTextBlock>
     <v-spacer class="my-4" />
-    <EditableTextBlock
-      icon="mdi-phone"
-      label="Phone Number"
-      v-model="plan.phoneNumber"
-      @save="updatePlan"
-      :rules="rules.phone"
-    ></EditableTextBlock>
+
+    <div class="my-family">
+      <v-row>
+
+        <v-col cols="6" v-for="child in plan.children" :key="child.id">
+          <v-card class="pa-2 mb-1">
+            <IconTextBlock icon="mdi-pencil"
+                           :allowSelected="true"
+                           @selected="launchChildEditor(child)">
+              <v-row>
+                <v-col class="flex-grow-0 flex-shrink-0">
+                  <v-layout v-if="!child.image" class="mr-n3" style="width: 50px; height: 50px;">&nbsp;</v-layout>
+                  <SecureImg v-if="child.image"
+                             :src="child.image"
+                             :alt="child.name"
+                             class="img-cover mr-n3"
+                             max-width="100%"
+                             width="50" height="50" />
+                </v-col>
+                <v-col>
+                  <h3>{{ child.name }}</h3>
+                </v-col>
+              </v-row>
+            </IconTextBlock>
+          </v-card>
+        </v-col>
+
+        <v-col cols="6" v-for="pet in plan.pets" :key="pet.id">
+          <v-card class="pa-2 mb-1">
+            <IconTextBlock icon="mdi-pencil"
+                           :allowSelected="true"
+                           @selected="launchPetEditor(pet)">
+              <v-row>
+                <v-col class="flex-grow-0 flex-shrink-0">
+                  <v-layout v-if="!pet.image" class="mr-n3" style="width: 50px; height: 50px;">&nbsp;</v-layout>
+                  <SecureImg v-if="pet.image"
+                             :src="pet.image"
+                             :alt="pet.name"
+                             class="img-cover mr-n3"
+                             max-width="100%"
+                             width="50" height="50" />
+                </v-col>
+                <v-col>
+                  <h3>{{ pet.name }}</h3>
+                </v-col>
+              </v-row>
+            </IconTextBlock>
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card class="pa-2 mb-1"
+                  ripple
+                  @click="ensureNamed('Add Family Member', 'addfamilymember')">
+            <v-flex class="d-flex justify-space-between px-2 py-2">
+              <div>Add</div>
+              <div>
+                <v-icon class="mr-2">mdi-plus</v-icon>
+              </div>
+            </v-flex>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+
     <v-spacer class="my-4" />
+
     <div class="info-table">
-      <v-card
-        class="mx-2 my-2"
-        color="primary"
-        ripple
-        @click="ensureNamed('Emergency Contacts', 'emergencycontacts')"
-      >
+      <v-card class="mx-2 my-2"
+              color="primary"
+              ripple
+              @click="ensureNamed('Emergency Contacts', 'emergencycontacts')">
         <v-flex class="d-flex justify-space-between px-2 py-2">
           <div>Emergency Contacts</div>
           <div>
@@ -72,12 +119,10 @@
           </div>
         </v-flex>
       </v-card>
-      <v-card
-        class="mx-2 my-2"
-        color="primary"
-        ripple
-        @click="ensureNamed('Out of Area Contact', 'distantcontacts')"
-      >
+      <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 Contact</div>
           <div>
@@ -85,12 +130,10 @@
           </div>
         </v-flex>
       </v-card>
-      <v-card
-        class="mx-2 my-2"
-        color="primary"
-        ripple
-        @click="ensureNamed('Routes and Locations', 'routes')"
-      >
+      <v-card class="mx-2 my-2"
+              color="primary"
+              ripple
+              @click="ensureNamed('Routes and Locations', 'routes')">
         <v-flex class="d-flex justify-space-between px-2 py-2">
           <div>Reunification</div>
           <div>
@@ -98,35 +141,23 @@
           </div>
         </v-flex>
       </v-card>
-      <v-card
-        class="mx-2 my-2"
-        color="primary"
-        ripple
-        @click="ensureNamed('Children', 'children')"
-      >
-        <v-flex class="d-flex justify-space-between px-2 py-2">
-          <div>Children</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"
-        ripple
-        @click="ensureNamed('Pets', 'pets')"
-      >
-        <v-flex class="d-flex justify-space-between px-2 py-2">
-          <div>Pets</div>
-          <div>
-            <v-icon class="mr-2">mdi-chevron-right</v-icon>
-          </div>
-        </v-flex>
-      </v-card>
     </div>
     <ConfirmDialog ref="theDialog"></ConfirmDialog>
+
     <!-- <pre class="caption">{{ plan }}</pre> -->
+
+    <v-dialog v-model="showPetEditor" persistent>
+      <PetEditor v-if="showPetEditor"
+                 :pet="editorPet"
+                 @cancel="showPetEditor = false"
+                 @save="savePet"></PetEditor>
+    </v-dialog>
+
+    <v-dialog v-model="showChildEditor" persistent>
+      <ChildEditor :child="editorChild"
+                   @cancel="showChildEditor = false"
+                   @save="saveChild"></ChildEditor>
+    </v-dialog>
   </v-container>
 </template>
 
@@ -142,16 +173,23 @@ import FamilyPlan from "@/models/family-plans/FamilyPlan";
 import _ from "lodash";
 import goBack from "@/functions/goBack";
 import { phoneNumber, required, minLength } from "@/rules";
+import PetEditor from "./editors/pet-editor.vue";
+import ChildEditor from "./editors/child-editor.vue";
 
 import AddressView from "./address-view.vue";
 import router from "@/router";
 
 export default defineComponent({
   name: "family-plan-view",
-  components: { AddressView },
+  components: { AddressView, PetEditor, ChildEditor },
   props: { planId: { required: true } },
   setup(props, { refs }) {
+
     const plan = ref(null);
+    const showPetEditor = ref(false);
+    const editorPet = ref(null);
+    const showChildEditor = ref(false);
+    const editorChild = ref(null);
 
     onMounted(() => {
       // Determine which plan to use
@@ -162,7 +200,7 @@ export default defineComponent({
           props.planId
         );
         if (found) {
-          plan.value = reactive(_.cloneDeep(found));
+          plan.value = found;
         } else {
           goBack();
         }
@@ -221,7 +259,40 @@ export default defineComponent({
       }
     }
 
+    function launchPetEditor(pet) {
+      editorPet.value = pet;
+      showPetEditor.value = true;
+    }
+
+    async function savePet(pet) {
+      await store.dispatch("familyPlansStore/updatePetAsync", { pet, planId: props.planId });
+      showPetEditor.value = false;
+    }
+
+    function launchChildEditor(child) {
+      editorChild.value = child;
+      showChildEditor.value = true;
+    }
+
+    async function saveChild(child) {
+      await store.dispatch("familyPlansStore/updateChildAsync", {
+        child,
+        planId: props.planId,
+      });
+      showChildEditor.value = false;
+    }
+
     return {
+      launchPetEditor,
+      showPetEditor,
+      editorPet,
+      savePet,
+
+      launchChildEditor,
+      showChildEditor,
+      editorChild,
+      saveChild,
+
       deletePlan,
       toggleAlerts,
       ensureNamed,
diff --git a/2wr-app/src/router/familyPlanRoutes.js b/2wr-app/src/router/familyPlanRoutes.js
index 52cfc3d..16e41c6 100644
--- a/2wr-app/src/router/familyPlanRoutes.js
+++ b/2wr-app/src/router/familyPlanRoutes.js
@@ -5,6 +5,7 @@ import FamilyPlanDistantContacts from "../views/prepare/family-plans/distant-con
 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';
+import AddFamilyMember from '@/views/prepare/family-plans/add-family-member.vue'
 
 export default [
   {
@@ -68,5 +69,14 @@ export default [
     meta: {
       requiresAuth: true
     }
+  },
+  {
+    path: '/prepare/familyplan/:planId/addfamilymember',
+    name: "familyplan-addfamilymember",
+    component: AddFamilyMember,
+    props: true,
+    meta: {
+      requiresAuth: true
+    }
   }
 ];
diff --git a/2wr-app/src/views/prepare/family-plans/add-family-member.vue b/2wr-app/src/views/prepare/family-plans/add-family-member.vue
new file mode 100644
index 0000000..31d1f77
--- /dev/null
+++ b/2wr-app/src/views/prepare/family-plans/add-family-member.vue
@@ -0,0 +1,145 @@
+<template>
+  <v-container class="py-0">
+    <v-app-bar app flat dense fixed color="background">
+      <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
+      <v-toolbar-title>Make A Plan</v-toolbar-title>
+    </v-app-bar>
+    <v-row dense>
+      <v-col cols="12">
+        <p class="pa-2 headline">Add A Person</p>
+      </v-col>
+    </v-row>
+
+    <v-fab-transition>
+      <v-card class="mx-2 my-2"
+              color="primary"
+              ripple
+              @click="addNewChild()">
+        <v-flex class="d-flex justify-space-between px-2 py-2">
+          <div>Manual Entry</div>
+          <div>
+            <v-icon class="mr-2">mdi-plus</v-icon>
+          </div>
+        </v-flex>
+      </v-card>
+    </v-fab-transition>
+
+    <v-row dense>
+      <v-col cols="12">
+        <p class="pa-2 headline">Add A Pet</p>
+      </v-col>
+    </v-row>
+
+    <v-fab-transition>
+      <v-card class="mx-2 my-2"
+              color="primary"
+              ripple
+              @click="addNewPet()">
+        <v-flex class="d-flex justify-space-between px-2 py-2">
+          <div>Manual Entry</div>
+          <div>
+            <v-icon class="mr-2">mdi-plus</v-icon>
+          </div>
+        </v-flex>
+      </v-card>
+    </v-fab-transition>
+
+    <v-dialog v-model="showPetEditor" persistent>
+      <PetEditor v-if="showPetEditor"
+                 :pet="editorPet"
+                 @cancel="showPetEditor = false"
+                 @save="savePet"></PetEditor>
+    </v-dialog>
+
+    <v-dialog v-model="showChildEditor" persistent>
+      <ChildEditor :child="editorChild"
+                   @cancel="showChildEditor = false"
+                   @save="saveChild"></ChildEditor>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from "@vue/composition-api";
+import goBack from "@/functions/goBack";
+import Pet from "@/models/family-plans/Pet";
+import Child from "@/models/family-plans/Child";
+import PetEditor from "../../../components/prepare/family-plans/editors/pet-editor.vue";  
+import ChildEditor from "../../../components/prepare/family-plans/editors/child-editor.vue";
+import store from "@/store";
+
+export default defineComponent({
+  components: { PetEditor, ChildEditor },
+  props: { planId: { required: true } },
+
+  setup(props) {
+    const pets = ref(null);
+    const showPetEditor = ref(false);
+    const editorPet = ref(null);
+    const showChildEditor = ref(false);
+    const editorChild = ref(null);
+
+    onMounted(() => {
+      const result = store.getters[
+        "familyPlansStore/findFamilyPlan"](
+          props.planId
+        );
+      if (result) {
+        pets.value = result.pets;
+      } else {
+        goBack();
+      }
+    });
+
+    function launchPetEditor(pet) {
+      editorPet.value = pet;
+      showPetEditor.value = true;
+    }
+
+    function addNewPet() {
+      launchPetEditor(new Pet());
+    }
+
+    async function savePet(pet) {
+      await store.dispatch("familyPlansStore/updatePetAsync", { pet, planId: props.planId });
+      showPetEditor.value = false;
+    }
+
+    function launchChildEditor(child) {
+      editorChild.value = child;
+      showChildEditor.value = true;
+    }
+
+    function addNewChild() {
+      launchChildEditor(new Child());
+    }
+
+    async function saveChild(child) {
+      await store.dispatch("familyPlansStore/updateChildAsync", {
+        child,
+        planId: props.planId,
+      });
+      showChildEditor.value = false;
+    }
+
+    return { 
+      goBack,
+
+      editorPet,
+      savePet,
+      showPetEditor,
+      addNewPet,
+      launchPetEditor, 
+
+      addNewChild,
+      launchChildEditor,
+      showChildEditor,
+      editorChild,
+      saveChild,
+    };
+  },
+});
+</script>
+
+<style>
+</style>
\ No newline at end of file