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

<template>
  <div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
    <!-- Action Buttons -->
    <span v-if="isRegistered" class="flex">
      <router-link
        :to="{ name: 'invite-one' }"
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
      </router-link>

      <button
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
        @click="handleShowOnboardMeeting"
      >
        <font-awesome icon="chair" class="fa-fw text-2xl" />
      </button>
    </span>
    <span v-else class="flex">
      <span
        class="flex items-center 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-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome
          icon="envelope-open-text"
          class="fa-fw text-2xl"
          @click="handleRegistrationRequired"
        />
      </span>
      <span
        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      >
        <font-awesome
          icon="chair"
          class="fa-fw text-2xl"
          @click="handleNavigateOnboardMeeting"
        />
      </span>
    </span>

    <!-- QR Code Button -->
    <button
      class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
      @click="handleQRScan"
    >
      <font-awesome icon="qrcode" class="fa-fw text-2xl" />
    </button>

    <!-- Contact Input -->
    <textarea
      v-model="inputValue"
      type="text"
      placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
    />

    <!-- Add Button -->
    <button
      class="px-4 rounded-r bg-green-200 border border-green-400"
      @click="handleSubmit"
    >
      <font-awesome icon="plus" class="fa-fw" />
    </button>
  </div>
</template>

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

/**
 * ContactInputForm - Contact input form component
 *
 * Provides a form for adding new contacts with various input formats.
 * Includes action buttons for invites, meetings, and QR scanning.
 * Uses function props for event handling to provide better parent control.
 *
 * @author Matthew Raymer
 */
@Component({
  name: "ContactInputForm",
})
export default class ContactInputForm extends Vue {
  @Prop({ required: true }) isRegistered!: boolean;

  @Prop({ type: String, default: "" }) modelValue!: string;

  /**
   * Function prop for handling contact submission
   * Called when the add button is clicked with the current input value
   */
  @Prop({ type: Function, default: () => {} })
  onSubmit!: (value: string) => void | Promise<void>;

  /**
   * Function prop for handling onboard meeting display
   * Called when the onboard meeting button is clicked for registered users
   */
  @Prop({ type: Function, default: () => {} })
  onShowOnboardMeeting!: () => void | Promise<void>;

  /**
   * Function prop for handling registration required notification
   * Called when invite button is clicked for unregistered users
   */
  @Prop({ type: Function, default: () => {} })
  onRegistrationRequired!: () => void | Promise<void>;

  /**
   * Function prop for handling onboard meeting navigation
   * Called when onboard meeting button is clicked for unregistered users
   */
  @Prop({ type: Function, default: () => {} })
  onNavigateOnboardMeeting!: () => void | Promise<void>;

  /**
   * Function prop for handling model value updates
   * Called when the input value changes for v-model binding
   */
  @Prop({ type: Function, default: () => {} })
  onUpdateModelValue!: (value: string) => void;

  /**
   * Computed property for v-model binding
   */
  get inputValue(): string {
    return this.modelValue;
  }

  set inputValue(value: string) {
    this.onUpdateModelValue(value);
  }

  /**
   * Handle submit button click
   * Calls the onSubmit function prop with current input value
   */
  private handleSubmit(): void {
    this.onSubmit(this.inputValue);
  }

  /**
   * Handle show onboard meeting button click
   * Calls the onShowOnboardMeeting function prop
   */
  private handleShowOnboardMeeting(): void {
    this.onShowOnboardMeeting();
  }

  /**
   * Handle registration required notification
   * Calls the onRegistrationRequired function prop
   */
  private handleRegistrationRequired(): void {
    this.onRegistrationRequired();
  }

  /**
   * Handle navigate onboard meeting button click
   * Calls the onNavigateOnboardMeeting function prop
   */
  private handleNavigateOnboardMeeting(): void {
    this.onNavigateOnboardMeeting();
  }

  /**
   * Handle QR scan button click
   * Emits qr-scan event for parent handling
   */
  private handleQRScan(): void {
    console.log("[ContactInputForm] QR scan button clicked");
    this.$emit("qr-scan");
  }
}
</script>