<script setup>
import { ref } from "vue";
import { useQuasar } from "quasar";
import { model, m, notify } from "#imports";
const $q = useQuasar();
const tableRef = ref(null);
const selected = ref([]);
const columns = model("Notification").columns({
  notification_id: true,
  type: true,
  title: true,
  message: true,
  link: true,
  is_read: true,
  created_time: true
});
const onBulkDelete = async () => {
  if (selected.value.length === 0) return;
  $q.dialog({
    title: $q.lang.label?.delete || "Delete",
    message: "Are you sure you want to delete " + selected.value.length + " selected notification(s)?",
    cancel: true,
    persistent: true,
    color: "negative"
  }).onOk(async () => {
    try {
      const ids = selected.value.map((n) => n.notification_id);
      await m("deleteNotifications", { ids });
      notify("Deleted " + ids.length + " notification(s)");
      selected.value = [];
      tableRef.value?.requestServerInteraction();
    } catch (e) {
      notify({ message: e.message, color: "negative" });
    }
  });
};
const onDelete = () => {
  tableRef.value?.requestServerInteraction();
};
</script>

<template>
    <l-page>
        <l-table ref="tableRef" row-key="notification_id" :columns="columns"
            selection="multiple" v-model:selected="selected"
            @request-data="$event.loadObjects('Notification')"
            :actions="['delete']"
            @delete="onDelete">
            <template #top-selection="{ rows }">
                <q-btn flat dense color="negative" icon="sym_o_delete"
                    :label="'Delete (' + selected.length + ')'" @click="onBulkDelete" />
            </template>
        </l-table>
    </l-page>
</template>
