crowd-funder-from-jason/src/components/InviteDialog.vue

<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Invitation & Notes</h1>

      These are optional notes for your use; they are comments to help you
      recall who it is when they accept it. These notes are sent to the server.
      If you want to store your own way, the invitation ID is:
      {{ inviteIdentifier }}
      <input
        type="text"
        placeholder="Notes"
        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
        v-model="text"
      />

      <!-- Add date selection element -->
      Expiration
      <input
        type="date"
        class="block rounded border border-slate-400 mb-4 px-3 py-2"
        v-model="expiresAt"
      />

      <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>
          <!-- SHOW ME instead while processing saving changes -->
          <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";

import { NotificationIface } from "@/constants/app";

@Component
export default class InviteDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  callback: (text: string, expiresAt: string) => void = () => {};
  inviteIdentifier = "";
  text = "";
  visible = false;
  expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 30 * 3)
    .toISOString()
    .substring(0, 10);

  async open(
    inviteIdentifier: string,
    aCallback: (text: string, expiresAt: string) => void,
  ) {
    this.callback = aCallback;
    this.inviteIdentifier = inviteIdentifier;
    this.visible = true;
  }

  async onClickSaveChanges() {
    if (!this.expiresAt) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Needs Expiration",
          text: "You must select an expiration date.",
        },
        5000,
      );
    } else {
      this.callback(this.text, this.expiresAt);
      this.visible = false;
    }
  }

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

<style>
.dialog-overlay {
  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>