crowd-funder-for-time-pwa/src/components/ContactNameDialog.vue

<!-- similar to UserNameDialog -->
<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1>
      {{ message }}
      Note that their name is only stored on this device.
      <input
        v-model="newText"
        type="text"
        placeholder="Name"
        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
      />

      <div class="mt-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
          <button
            type="button"
            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="onClickSaveChanges()"
          >
            Save
          </button>
          <button
            type="button"
            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
            @click="onClickCancel()"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-facing-decorator";

@Component
export default class ContactNameDialog extends Vue {
  cancelCallback: () => void = () => {};
  saveCallback: (name?: string) => void = () => {};
  message = "";
  newText = "";
  title = "Contact Name";
  visible = false;

  async open(
    title?: string,
    message?: string,
    saveCallback?: (name?: string) => void,
    cancelCallback?: () => void,
    defaultName?: string,
  ) {
    this.cancelCallback = cancelCallback || this.cancelCallback;
    this.saveCallback = saveCallback || this.saveCallback;
    this.message = message ?? this.message;
    this.newText = defaultName ?? "";
    this.title = title ?? this.title;
    this.visible = true;
  }

  async onClickSaveChanges() {
    this.visible = false;
    if (this.saveCallback) {
      this.saveCallback(this.newText);
    }
  }

  onClickCancel() {
    this.visible = false;
    if (this.cancelCallback) {
      this.cancelCallback();
    }
  }
}
</script>

<style>
.dialog-overlay {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 500px;
}
</style>