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

<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-lg text-center">
        Received from {{ contact?.name || "nobody in particular" }}
      </h1>
      <p class="py-2">{{ message }}</p>
      <input
        type="text"
        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
        placeholder="What you received"
        v-model="description"
      />
      <div class="flex flex-row">
        <span class="py-4">Hours</span>
        <input
          type="text"
          class="block w-8 rounded border border-slate-400 ml-4 text-center"
          v-model="hours"
        />
        <div class="flex flex-col px-1">
          <div>
            <fa icon="square-caret-up" size="2xl" @click="increment()" />
          </div>
          <div>
            <fa icon="square-caret-down" size="2xl" @click="decrement()" />
          </div>
        </div>
      </div>
      <div class="text-right">
        <button class="rounded border border-slate-400" @click="confirm">
          <span class="m-2">Confirm</span>
        </button>
        &nbsp;
        <button class="rounded border border-slate-400" @click="cancel">
          <span class="m-2">Cancel</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["message"],
  data() {
    return {
      contact: null,
      description: "",
      hours: "0",
      visible: false,
    };
  },
  methods: {
    open(contact) {
      this.contact = contact;
      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)}`;
    },
    confirm() {
      this.close();
      this.$emit("dialog-result", {
        action: "confirm",
        contact: this.contact,
        hours: parseFloat(this.hours),
        description: this.description,
      });
    },
    cancel() {
      this.close();
      this.$emit("dialog-result", { action: "cancel" });
    },
  },
};
</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;
}

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