Skip to content

Commit

Permalink
Move Family Members to top section of family plan HTBox#112
Browse files Browse the repository at this point in the history
  • Loading branch information
@hujtomi
hujtomi committed Mar 14, 2023
1 parent 89b4adf commit 49630dc
Show file tree
Hide file tree
Showing 3 changed files with 317 additions and 91 deletions.
253 changes: 162 additions & 91 deletions 2wr-app/src/components/prepare/family-plans/family-plans-view.vue
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,163 @@
<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>
<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('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>
<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('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>
<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('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>

Expand All @@ -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
Expand All @@ -162,7 +200,7 @@ export default defineComponent({
props.planId
);
if (found) {
plan.value = reactive(_.cloneDeep(found));
plan.value = found;
} else {
goBack();
}
Expand Down Expand Up @@ -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,
Expand Down
10 changes: 10 additions & 0 deletions 2wr-app/src/router/familyPlanRoutes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
{
Expand Down Expand Up @@ -68,5 +69,14 @@ export default [
meta: {
requiresAuth: true
}
},
{
path: '/prepare/familyplan/:planId/addfamilymember',
name: "familyplan-addfamilymember",
component: AddFamilyMember,
props: true,
meta: {
requiresAuth: true
}
}
];
Loading

0 comments on commit 49630dc

Please sign in to comment.