crowd-funder-for-time-pwa/src/views/ContactEditView.vue

<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">
      <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>

    <!-- Save Button -->
    <div class="mt-4 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 { 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 } 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 = "";

  AppString = AppString;

  async created() {
    const contactDid = (this.$route as RouteLocation).params.did;
    if (!contactDid) {
      this.$notify({
        group: "alert",
        type: "error",
        title: "Contact Not Found",
        text: "There is no contact with that DID.",
      });
      (this.$router as Router).push({ path: "/contacts" });
      return;
    }
    const contact = await db.contacts.get(contactDid);
    if (contact) {
      this.contact = contact;
      this.contactName = contact.name || "";
      this.contactNotes = contact.notes || "";
    }
  }

  async saveEdit() {
    await db.contacts.update(this.contact.did, {
      name: this.contactName,
      notes: this.contactNotes,
    });
    this.$notify({
      group: "alert",
      type: "success",
      title: "Notes Saved",
      text: "The contact notes have been updated successfully.",
    });
    (this.$router as Router).push({
      path: "/did/" + encodeURIComponent(this.contact.did),
    });
  }
}
</script>