Matthew Raymer
1 week ago
48 changed files with 1366 additions and 821 deletions
File diff suppressed because it is too large
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<QuickNav selected="Contacts" /> |
||||
|
<TopMessage /> |
||||
|
|
||||
|
<section id="ContactEdit" class="p-6 max-w-3xl mx-auto"> |
||||
|
<div id="ViewBreadcrumb" class="mb-8"> |
||||
|
<h1 class="text-4xl text-center font-light relative px-7"> |
||||
|
<!-- Back --> |
||||
|
<button |
||||
|
@click="$router.go(-1)" |
||||
|
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
||||
|
> |
||||
|
<fa icon="chevron-left" class="fa-fw" /> |
||||
|
</button> |
||||
|
{{ contact.name || AppString.NO_CONTACT_NAME }} |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Contact Name --> |
||||
|
<div class="mt-4 flex" data-testId="contactName"> |
||||
|
<label |
||||
|
for="contactName" |
||||
|
class="block text-sm font-medium text-gray-700 mt-2" |
||||
|
> |
||||
|
Name |
||||
|
</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
class="block w-full ml-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" |
||||
|
v-model="contactName" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Contact Notes --> |
||||
|
<div class="mt-4"> |
||||
|
<label for="contactNotes" class="block text-sm font-medium text-gray-700"> |
||||
|
Notes |
||||
|
</label> |
||||
|
<textarea |
||||
|
id="contactNotes" |
||||
|
rows="4" |
||||
|
class="block w-full mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" |
||||
|
v-model="contactNotes" |
||||
|
></textarea> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Contact Methods --> |
||||
|
<div class="mt-4"> |
||||
|
<h2 class="text-lg font-medium text-gray-700">Contact Methods</h2> |
||||
|
<div |
||||
|
v-for="(method, index) in contactMethods" |
||||
|
:key="index" |
||||
|
class="flex mt-2" |
||||
|
> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="method.label" |
||||
|
class="block w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" |
||||
|
placeholder="Label" |
||||
|
/> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="method.type" |
||||
|
class="block ml-2 w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" |
||||
|
placeholder="Type" |
||||
|
/> |
||||
|
<div class="relative"> |
||||
|
<button |
||||
|
@click="toggleDropdown(index)" |
||||
|
class="px-2 py-1 bg-gray-200 rounded-md" |
||||
|
> |
||||
|
<fa icon="caret-down" class="fa-fw" /> |
||||
|
</button> |
||||
|
<div |
||||
|
v-if="dropdownIndex === index" |
||||
|
class="absolute bg-white border border-gray-300 rounded-md mt-1" |
||||
|
> |
||||
|
<div |
||||
|
@click="setMethodType(index, 'CELL')" |
||||
|
class="px-4 py-2 hover:bg-gray-100 cursor-pointer" |
||||
|
> |
||||
|
CELL |
||||
|
</div> |
||||
|
<div |
||||
|
@click="setMethodType(index, 'EMAIL')" |
||||
|
class="px-4 py-2 hover:bg-gray-100 cursor-pointer" |
||||
|
> |
||||
|
EMAIL |
||||
|
</div> |
||||
|
<div |
||||
|
@click="setMethodType(index, 'WHATSAPP')" |
||||
|
class="px-4 py-2 hover:bg-gray-100 cursor-pointer" |
||||
|
> |
||||
|
WHATSAPP |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="method.value" |
||||
|
class="block ml-2 w-1/2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" |
||||
|
placeholder="Number, email, etc." |
||||
|
/> |
||||
|
<button @click="removeContactMethod(index)" class="ml-2 text-red-500"> |
||||
|
<fa icon="trash-can" class="fa-fw" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<button @click="addContactMethod" class="mt-2"> |
||||
|
<fa |
||||
|
icon="plus" |
||||
|
class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full" |
||||
|
/> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Save Button --> |
||||
|
<div class="mt-8 flex justify-between"> |
||||
|
<button |
||||
|
class="px-4 py-2 bg-blue-500 text-white rounded-md" |
||||
|
@click="saveEdit" |
||||
|
> |
||||
|
Save |
||||
|
</button> |
||||
|
<button |
||||
|
class="ml-4 px-4 py-2 bg-slate-500 text-white rounded-md" |
||||
|
@click="$router.go(-1)" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import * as R from "ramda"; |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { RouteLocation, Router } from "vue-router"; |
||||
|
|
||||
|
import QuickNav from "../components/QuickNav.vue"; |
||||
|
import TopMessage from "../components/TopMessage.vue"; |
||||
|
import { AppString, NotificationIface } from "../constants/app"; |
||||
|
import { db } from "../db/index"; |
||||
|
import { Contact, ContactMethod } from "../db/tables/contacts"; |
||||
|
|
||||
|
@Component({ |
||||
|
components: { |
||||
|
QuickNav, |
||||
|
TopMessage, |
||||
|
}, |
||||
|
}) |
||||
|
export default class ContactEditView extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
contact: Contact = { |
||||
|
did: "", |
||||
|
name: "", |
||||
|
notes: "", |
||||
|
}; |
||||
|
contactName = ""; |
||||
|
contactNotes = ""; |
||||
|
contactMethods: Array<ContactMethod> = []; |
||||
|
dropdownIndex: number | null = null; |
||||
|
|
||||
|
AppString = AppString; |
||||
|
|
||||
|
async created() { |
||||
|
const contactDid = (this.$route as RouteLocation).params.did; |
||||
|
const contact = await db.contacts.get(contactDid || ""); |
||||
|
if (contact) { |
||||
|
this.contact = contact; |
||||
|
this.contactName = contact.name || ""; |
||||
|
this.contactNotes = contact.notes || ""; |
||||
|
this.contactMethods = contact.contactMethods || []; |
||||
|
} else { |
||||
|
this.$notify({ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Contact Not Found", |
||||
|
text: "There is no contact with DID " + contactDid, |
||||
|
}); |
||||
|
(this.$router as Router).push({ path: "/contacts" }); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
addContactMethod() { |
||||
|
this.contactMethods.push({ label: "", type: "", value: "" }); |
||||
|
} |
||||
|
|
||||
|
removeContactMethod(index: number) { |
||||
|
this.contactMethods.splice(index, 1); |
||||
|
} |
||||
|
|
||||
|
toggleDropdown(index: number) { |
||||
|
this.dropdownIndex = this.dropdownIndex === index ? null : index; |
||||
|
} |
||||
|
|
||||
|
setMethodType(index: number, type: string) { |
||||
|
this.contactMethods[index].type = type; |
||||
|
this.dropdownIndex = null; |
||||
|
} |
||||
|
|
||||
|
async saveEdit() { |
||||
|
// without this conversion, "Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned." |
||||
|
const contactMethodsObj = JSON.parse(JSON.stringify(this.contactMethods)); |
||||
|
const contactMethods = contactMethodsObj.map((method: ContactMethod) => |
||||
|
R.set(R.lensProp("type"), method.type.toUpperCase(), method), |
||||
|
); |
||||
|
if (!R.equals(contactMethodsObj, contactMethods)) { |
||||
|
this.contactMethods = contactMethods; |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Contact Methods Updated", |
||||
|
text: "Note that some methods have been updated, such as uppercasing 'email' to 'EMAIL'. Save again if the changes are acceptable.", |
||||
|
}, |
||||
|
15000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
await db.contacts.update(this.contact.did, { |
||||
|
name: this.contactName, |
||||
|
notes: this.contactNotes, |
||||
|
contactMethods: contactMethods, |
||||
|
}); |
||||
|
this.$notify({ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Contact Saved", |
||||
|
text: "The contact info has been updated successfully.", |
||||
|
}); |
||||
|
(this.$router as Router).push({ |
||||
|
path: "/did/" + encodeURIComponent(this.contact.did), |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue