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

<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">
        {{ message }} {{ giver?.name || "somebody not specified" }}
      </h1>
      <input
        type="text"
        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
        placeholder="What was received"
        v-model="description"
      />
      <div class="flex flex-row mb-6">
        <span
          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center px-2 py-2"
          >Hours</span
        >
        <div
          class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
          @click="decrement()"
        >
          <fa icon="chevron-left" />
        </div>
        <input
          type="text"
          class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
          v-model="hours"
        />
        <div
          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
          @click="increment()"
        >
          <fa icon="chevron-right" />
        </div>
      </div>
      <p class="text-center mb-2 italic">Sign & Send to publish to the world</p>
      <button
        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
        @click="confirm"
      >
        Sign &amp; Send
      </button>
      <button
        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
        @click="cancel"
      >
        Cancel
      </button>
    </div>
  </div>
</template>

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

@Component
export default class GiftedDialog extends Vue {
  @Prop message = "";

  giver = null;
  description = "";
  hours = "0";
  visible = false;

  open(giver) {
    // giver: GiverInputInfo
    this.giver = giver;
    this.visible = true;
  }

  close() {
    this.visible = false;
  }

  increment() {
    this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
  }

  decrement() {
    this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
  }

  @Emit("dialog-result")
  confirm() {
    const result = {
      action: "confirm",
      giver: this.giver,
      hours: parseFloat(this.hours),
      description: this.description,
    };
    this.close();
    this.description = "";
    this.giver = null;
    this.hours = "0";

    return result;
  }

  @Emit("dialog-result")
  cancel() {
    const result = { action: "cancel" };
    this.close();
    return result;
  }
}
</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>