Skip to content

Move Family Members to top section of family plan #112 #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Move Family Members to top section of family plan #112 #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49630dc
Move Family Members to top section of family plan #112
hujtomi Mar 14, 2023
9212cf0
Move Family Members to top section of family plan #112
hujtomi Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 162 additions & 91 deletions 2wr-app/src/components/prepare/family-plans/family-plans-view.vue
View file
Open in desktop
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
Open in desktop
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