ShowEasyFrontEnd/FrontEnd/components/user/companyDeleteDialog.vue

<template>
  <modal name="delete-company-modal" :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 Company Info") }}
          </div>
        </div>
        <button
          class="close tw-transition tw-btn-md"
          @click="$modal.hide('delete-company-modal')"
        ></button>
      </div>

      <div
        class="modal-content tw-text-[14px] tw-text-neutrals-800 tw-mb-[30px] md:tw-text-[16px] md:tw-mb-[40px]"
      >
        {{ $t("“Showeasy Co., Ltd.” 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-company-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="deleteUserCompanyConfirm"
        >
          {{ $t("Delete") }}
        </button>
      </div>
    </div>
  </modal>
  <!-- <v-dialog v-model="deleteCompanyInfoDialogAcitve" :width="$vuetify.breakpoint.smAndUp ? '423px' : '294px'" @click:outside="$emit('closeCompanyDeleteDialog')" style="z-index:500">
    <v-card class="border-radius-16" :width="$vuetify.breakpoint.smAndUp ? '423px' : '294px' ">
      <v-spacer class="pa-7">
        <v-spacer class="d-flex align-center mb-6">
          <span class="font-weight-bold">{{ $t("userProfile.deleteCompanyInfo") }}</span>
          <v-spacer></v-spacer>
          <v-btn @click="$emit('closeCompanyDeleteDialog')" icon>
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-spacer>
        <v-spacer class="mb-6">
          {{  '"' + companyData.company_name || '' + '"' }}
          {{ $t("userProfile.deleteMessage") }}
        </v-spacer>
        <v-spacer class="d-flex justify-end">
          <v-btn @click="$emit('closeCompanyDeleteDialog')" width="112px" class="border-radius-16 me-5 text-capitalize primary--text" color="white">
            <span>{{ $t("userProfile.deleteCompanyCancel") }}</span>
          </v-btn>
          <v-btn @click="deleteUserCompanyConfirm" width="112px" color="primary" class="border-radius-16 text-capitalize">
            <span>{{ $t("userProfile.deleteCompanyConfirm") }}</span>
          </v-btn>
        </v-spacer>
      </v-spacer>
    </v-card>
  </v-dialog> -->
</template>
<script>
export default {
  name: "delete-company-modal",
  props: {
    deleteCompanyInfoDialogAcitve: {
      type: Boolean,
      required: true,
      default: false,
    },
    companyData: {
      type: Object,
      required: true,
      default: {},
    },
  },
  methods: {
    deleteUserCompanyConfirm() {
      const deleteData = {
        company_id: this.companyData.company_uuid,
      };
      this.$axios
        .post(
          `/member/company/delete?jwt=${
            this.$auth.$storage.getUniversal("jwt").token || ""
          }`,
          deleteData
        )
        .then((res) => {
          this.$emit("refetch-user");
          this.$emit("refetch-company");
          this.$emit("closeCompanyDeleteDialog");
          this.$modal.hide("delete-company-modal");
        })
        .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>