ShowEasyFrontEnd/FrontEnd/components/newComponent/modal/UserDeleteContactModal.vue

<template>
  <modal name="delete-contact-modal" width="100%" :clickToClose="false">
    <div class="tw-p-[20px] md:tw-p-[30px] tw-overflow-auto">
      <div
        class="modal-header tw-flex tw-justify-between tw-w-full tw-items-center tw-mb-[30px]"
      >
        <div
          class="tw-grid tw-grid-cols-[24px_auto] tw-gap-[10px] tw-items-center tw-mr-[10px] md:tw-gap-[15px]"
        >
          <img src="~/assets/svg/deleteWarning.svg" alt="" />
          <div class="tw-text-[18px] tw-font-bold md:tw-text-[20px]">
            {{ $t("Delete Contact Info") }}
          </div>
        </div>
        <button
          class="close tw-transition tw-btn-md"
          @click="$modal.hide('delete-contact-modal')"
        ></button>
      </div>
      <div
        class="tw-text-[14px] tw-mb-[30px] md:tw-text-[16px] md:tw-mb-[40px]"
      >
        {{ `"${contactName}" ` + $t("will be removed in your list") }}
      </div>
      <div class="modal-footer tw-grid tw-grid-cols-2 tw-gap-[15px]">
        <button
          class="tw-bg-white tw-text-error-default tw-text-[16px] tw-rounded-[12px] tw-py-[10px] md:tw-text-[18px]"
          @click="$modal.hide('delete-contact-modal')"
        >
          {{ $t("Cancel") }}
        </button>
        <button
          class="tw-bg-error-default tw-text-white tw-text-[16px] tw-rounded-[12px] tw-py-[10px] md:tw-text-[18px]"
          @click="deleteContactInfo"
        >
          {{ $t("Delete") }}
        </button>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  name: "delete-contact-modal",
  props: {
    contactId: {
      type: String,
    },
    contactName: {
      type: String,
    },
  },
  methods: {
    deleteContactInfo() {
      this.$axios
        .delete(
          `/member/contacts/${this.contactId}?jwt=${
            this.$auth.$storage.getUniversal("jwt").token
          }`
        )
        .then((result) => {
          if (result.status === 200) {
            this.$modal.hide("delete-contact-modal");
            this.$emit("update");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.close {
  // position: absolute;
  right: 30px;
  top: 32px;
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
  @media screen and (min-width: 768px) {
    right: 40px;
    top: 40px;
  }
}

.v--modal-overlay::v-deep {
  .v--modal {
    // max-width: 294px !important;

    width: fit-content !important;
    height: fit-content !important;
    border-radius: 16px;
    @media screen and (min-width: 768px) {
      width: fit-content !important;
    }
  }

  .v--modal-box {
    width: 294px !important;
    height: fit-content !important;
    @media screen and (min-width: 768px) {
      width: fit-content !important;
    }
  }

  .v--modal-background-click {
    display: flex;
    align-items: center;
  }
}
</style>