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

<template>
  <NotificationGroup group="customModal">
    <div class="fixed z-[100] top-0 inset-x-0 w-full">
      <Notification
        v-slot="{ notifications, close }"
        enter="transform ease-out duration-300 transition"
        enter-from="translate-y-2 opacity-0 sm:translate-y-4"
        enter-to="translate-y-0 opacity-100 sm:translate-y-0"
        leave="transition ease-in duration-500"
        leave-from="opacity-100"
        leave-to="opacity-0"
        move="transition duration-500"
        move-delay="delay-300"
      >
        <div
          v-for="notification in notifications"
          :key="notification.id"
          class="w-full"
          role="alert"
        >
          <div
            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
          >
            <div
              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
            >
              <div class="w-full px-6 py-6 text-slate-900 text-center">
                <span class="font-semibold text-lg">{{ title }}</span>
                <p class="text-sm mb-2">{{ text }}</p>

                <button
                  @click="handleOption1(close)"
                  class="block w-full text-center text-md font-bold capitalize bg-blue-800 text-white px-2 py-2 rounded-md mb-2"
                >
                  {{ option1Text }}
                </button>

                <button
                  @click="handleOption2(close)"
                  class="block w-full text-center text-md font-bold capitalize bg-blue-700 text-white px-2 py-2 rounded-md mb-2"
                >
                  {{ option2Text }}
                </button>

                <button
                  @click="handleOption3(close)"
                  class="block w-full text-center text-md font-bold capitalize bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                >
                  {{ option3Text }}
                </button>

                <button
                  @click="handleCancel(close)"
                  class="block w-full text-center text-md font-bold capitalize bg-slate-600 text-white px-2 py-2 rounded-md"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      </Notification>
    </div>
  </NotificationGroup>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { NotificationIface } from "../constants/app";

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

  title = "";
  text = "";
  option1Text = "";
  option2Text = "";
  option3Text = "";
  onOption1?: () => void;
  onOption2?: () => void;
  onOption3?: () => void;
  onCancel?: () => Promise<void>;

  open(options: {
    title: string;
    text: string;
    option1Text?: string;
    option2Text?: string;
    option3Text?: string;
    onOption1?: () => void;
    onOption2?: () => void;
    onOption3?: () => void;
    onCancel?: () => Promise<void>;
  }) {
    this.title = options.title;
    this.text = options.text;
    this.option1Text = options.option1Text || "";
    this.option2Text = options.option2Text || "";
    this.option3Text = options.option3Text || "";
    this.onOption1 = options.onOption1;
    this.onOption2 = options.onOption2;
    this.onOption3 = options.onOption3;
    this.onCancel = options.onCancel;

    this.$notify(
      {
        group: "customModal",
        type: "confirm",
        title: this.title,
        text: this.text,
        option1Text: this.option1Text,
        option2Text: this.option2Text,
        option3Text: this.option3Text,
        onOption1: this.onOption1,
        onOption2: this.onOption2,
        onOption3: this.onOption3,
        onCancel: this.onCancel,
      } as NotificationIface,
      -1,
    );
  }

  handleOption1(close: (id: string) => void) {
    if (this.onOption1) {
      this.onOption1();
    }
    close("string that does not matter");
  }

  handleOption2(close: (id: string) => void) {
    if (this.onOption2) {
      this.onOption2();
    }
    close("string that does not matter");
  }

  handleOption3(close: (id: string) => void) {
    if (this.onOption3) {
      this.onOption3();
    }
    close("string that does not matter");
  }

  handleCancel(close: (id: string) => void) {
    if (this.onCancel) {
      this.onCancel();
    }
    close("string that does not matter");
  }
}
</script>