AlertsModal.vue

<template>
  <OmniBsModal
    id="alertsModal"
    modalSizeCSSClass="modal-xl"
    ref="alertsModal"
    :title="capitaliseSentence(alertName)"
    @modal-hidden="hideAlertsModal"
  >
    <template #body>
      <div class="container-fluid header-content my-0 mx-0 border-0 shadow-none">
        <button
          class="btn btn-icon-onlyP p-0 m-0"
        >
          <img
            src="@/assets/icon/Back-Arrow.svg"
            alt="Back"
            id="back-arrow"
          >
        </button>
        <span class="name">
          {{ campaignName }}
        </span>
      </div>

      <p class="mt-3">List of Ad Sets / Ads that have triggered this alert.</p>
      <p class="mt-5">CAMPAIGN-LEVEL ALERT <b><i>TODO</i></b></p>
      <p class="mt-5">AD SETS ALERT</p>
      <pre>adSetTableHeaders: {{ adSetTableHeaders }}</pre>
      <pre>
        adSetsTableData - can't get this to appear in the table below! : {{ adSetsTableData }}
      </pre>
      <!-- TODO: For some reason, data in the omni bs table is not being loaded -->
      <OmniBsTable
        :showTableTitle="false"
        :headers="adSetTableHeaders"
        :tableData="adSetsTableData"
        :showSearchBar="false"
        :removeHoverEffect="true"
      >
        <template #status="{ data }">
          <WarningOrErrorIconColumn
            :errorCondition="data"
          />
          {{ data }}
        </template>
        <template #adSetName="{ data }">
          {{ data }}
          <span class="text-capitalize">{{ data }}</span>
        </template>
        <template #adsManager="{ data }">
          <span>{{ data }}</span>
        </template>
      </OmniBsTable>

      <p class="mt-5">AD ALERTS <b><i>TODO</i></b></p>
    </template>
  </OmniBsModal>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import OmniBsModal from '@/components/Omni/OmniBsModal.vue'
import OmniBsTable from '@/components/Omni/OmniBsTable.vue'
import { capitaliseSentence } from '@/utils/helperFunctions'
import WarningOrErrorIconColumn from './WarningOrErrorIconColumn.vue'

const alertsModal = ref(null)

const props = defineProps({
  alertName: {
    type: String,
    default: 'Alerts',
  },
  campaignName: {
    type: String,
    default: null,
  },
  violatingAdSets: {
    type: Array,
    default: () => [],
  },
  violatingAds: {
    type: Array,
    default: () => [],
  },
})

// TODO: temporarily commented out until we get one table working.
// This can then be used for the ad table
// const adsTableData = computed(() => props.violatingAds.map((ad) => ({
//   status: true, // todo
//   adName: ad.ad_name,
//   adsManager: 'Todo',
// })))

const adSetsTableData = computed(() => props.violatingAdSets.map((adSet) => ({
  status: true, // todo
  adSetName: adSet.ad_set_name,
  adsManager: 'Todo',
})))

// TODO: use this for ad table
// const adTableHeaders = [
//   {
//     text: 'PAUSE',
//     value: 'status',
//     sortable: false,
//     columnSize: 2,
//   },
//   {
//     text: 'NAME',
//     value: 'adName',
//     sortable: false,
//     columnSize: 4,
//   },
//   {
//     text: 'ADS MANAGER',
//     value: 'adsManager',
//     sortable: false,
//     columnSize: 2,
//   },
// ]

const adSetTableHeaders = [
  {
    text: 'PAUSE',
    value: 'status',
    sortable: false,
    columnSize: 2,
  },
  {
    text: 'NAME',
    value: 'adSetName',
    sortable: false,
    columnSize: 4,
  },
  {
    text: 'ADS MANAGER',
    value: 'adsManager',
    sortable: false,
    columnSize: 2,
  },
]

const emit = defineEmits(['alertsModalClosed'])

const hideAlertsModal = () => {
  alertsModal.value.hide()
  emit('alertsModalClosed')
}

onMounted(() => {
  alertsModal.value.show()
})
</script>