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

<!-- similar to UserNameDialog -->
<template>
  <div v-if="visible" :class="overlayClasses">
    <div :class="dialogClasses">
      <h1 :class="titleClasses">{{ title }}</h1>
      {{ message }}
      Note that their name is only stored on this device.
      <input
        v-model="newText"
        type="text"
        placeholder="Name"
        :class="inputClasses"
      />

      <div :class="buttonContainerClasses">
        <div :class="buttonGridClasses">
          <button
            type="button"
            :class="saveButtonClasses"
            @click="onClickSaveChanges()"
          >
            Save
          </button>
          <button
            type="button"
            :class="cancelButtonClasses"
            @click="onClickCancel()"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

/**
 * ContactNameDialog Component
 *
 * A modal dialog component for editing contact names. This component provides
 * a simple form interface for users to input or modify contact names with
 * save and cancel functionality.
 *
 * Features:
 * - Modal overlay with backdrop
 * - Text input for contact name
 * - Save and cancel buttons with callbacks
 * - Responsive design with proper z-indexing
 * - Customizable title and message
 * - Default value support
 */
@Component({ name: "ContactNameDialog" })
export default class ContactNameDialog extends Vue {
  cancelCallback: () => void = () => {};
  saveCallback: (name?: string) => void = () => {};
  message = "";
  newText = "";
  title = "Contact Name";
  visible = false;

  /**
   * CSS classes for the modal overlay backdrop
   */
  get overlayClasses(): string {
    return "z-index-50 fixed top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center p-6";
  }

  /**
   * CSS classes for the modal dialog container
   */
  get dialogClasses(): string {
    return "bg-white p-4 rounded-lg w-full max-w-[500px]";
  }

  /**
   * CSS classes for the dialog title
   */
  get titleClasses(): string {
    return "text-xl font-bold text-center mb-4";
  }

  /**
   * CSS classes for the text input field
   */
  get inputClasses(): string {
    return "block w-full rounded border border-slate-400 mb-4 px-3 py-2";
  }

  /**
   * CSS classes for the button container
   */
  get buttonContainerClasses(): string {
    return "mt-8";
  }

  /**
   * CSS classes for the button grid layout
   */
  get buttonGridClasses(): string {
    return "grid grid-cols-1 sm:grid-cols-2 gap-2";
  }

  /**
   * CSS classes for the save button
   */
  get saveButtonClasses(): string {
    return "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";
  }

  /**
   * CSS classes for the cancel button
   */
  get cancelButtonClasses(): string {
    return "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";
  }

  /**
   * Opens the contact name dialog with the specified options
   *
   * @param title - Optional title for the dialog (defaults to "Contact Name")
   * @param message - Optional message to display above the input
   * @param saveCallback - Callback function called when save is clicked
   * @param cancelCallback - Callback function called when cancel is clicked
   * @param defaultName - Optional default value for the name input
   */
  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;
  }

  /**
   * Handles the save button click
   *
   * Closes the dialog and calls the save callback with the entered name
   */
  async onClickSaveChanges() {
    this.visible = false;
    if (this.saveCallback) {
      this.saveCallback(this.newText);
    }
  }

  /**
   * Handles the cancel button click
   *
   * Closes the dialog and calls the cancel callback
   */
  onClickCancel() {
    this.visible = false;
    if (this.cancelCallback) {
      this.cancelCallback();
    }
  }
}
</script>