memberApp/src/vueLib/tables/events/EventsTable.vue

<template>
  <div class="q-pa-md">
    <q-table
      flat
      bordered
      ref="tableRef"
      title="Events"
      title-class="text-bold text-blue-9"
      :no-data-label="$t('noDataAvailable')"
      :loading-label="$t('loading')"
      :rows-per-page-label="$t('recordsPerPage')"
      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
      :rows="Events"
      :columns="columns"
      row-key="id"
      v-model:pagination="pagination"
      :loading="loading"
      :filter="filter"
      :selection="selectOption ? 'multiple' : 'none'"
      v-model:selected="selected"
      binary-state-sort
      dense
      class="bigger-table-text"
    >
      <template v-slot:top-left>
        <TopButtonGroup
          :permit-add="user.isPermittedTo('events', 'write')"
          v-on:add="openAllValueDialog(null)"
          :tool-tip-add="$t('addNewEvent')"
          :permit-select="user.isPermittedTo('events', 'write')"
          :tool-tip-select="$t('selectEventOptions')"
          v-model:select-option="selectOption"
        />
        <div v-if="selectOption && selected.length > 0">
          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
            <q-item
              clickable
              v-close-popup
              @click="openRemoveDialog(...selected)"
              class="text-negative"
              >{{ $t('delete') }}</q-item
            >
          </q-menu>
        </div>
        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
          {{ $t('selected') }}: {{ selected.length }}
        </div>
      </template>

      <!-- top right of table-->

      <template v-slot:top-right>
        <SearchableInput v-model="filter" :placeholder="$t('search')" />
      </template>

      <!-- table body content-->

      <template v-slot:body-cell="props">
        <q-td v-if="props.col.field === 'attendees'" :props="props">
          <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
              props.row.attendees.length
            }}</q-badge></q-btn
          >
        </q-td>
        <component
          v-else
          :td-props="props"
          :is="props.col.component"
          :permitted="user.isPermittedTo('events', 'write') && props.col.field !== 'count'"
          v-on:onClick="openSingleValueDialog(props.col.label, props.col.name, props.row)"
          :value="props.value"
        />
      </template>
      <template v-slot:body-cell-day="props">
        <component
          :td-props="props"
          :is="props.col.component"
          :value="props.value ? $t(props.value) : ''"
        />
      </template>
      <template v-slot:body-cell-option="props">
        <component
          :is="props.col.component"
          :td-props="props"
          :permitEdit="user.isPermittedTo('events', 'write')"
          :permitDelete="user.isPermittedTo('events', 'delete')"
          :editFunction="() => openAllValueDialog(props.row)"
          :removeFunction="() => openRemoveDialog(props.row)"
        >
        </component>
      </template>
    </q-table>
  </div>
  <EditOneDialog
    ref="editOneDialog"
    endpoint="events/edit"
    query-id
    v-on:update="updateEvents"
  ></EditOneDialog>
  <EditAllDialog ref="editAllDialog" v-on:update="updateEvents"></EditAllDialog>
  <AttendeesTableDialog ref="attendeesDialog" v-on:update="updateEvents" />
  <OkDialog
    ref="okDialog"
    :dialog-label="$t('delete')"
    :text="$t('doYouWantToDelete') + ' ' + deleteText"
    label-color="red"
    :button-cancel-label="$t('cancel')"
    :button-ok-label="$t('confirm')"
    :button-ok-flat="false"
    button-ok-color="red"
    v-on:update-confirm="(val) => removeEvent(...val)"
  ></OkDialog>
</template>

<script setup lang="ts">
import { appApi } from 'src/boot/axios';
import { ref, onMounted } from 'vue';
import type { Event, Events } from 'src/vueLib/models/event';
import EditOneDialog from 'src/components/EditOneDialog.vue';
import EditAllDialog from 'src/components/EventEditAllDialog.vue';
import OkDialog from 'src/components/dialog/OkDialog.vue';
import { useNotify } from 'src/vueLib/general/useNotify';
import { useEventTable } from './EventsTable';
import { useUserStore } from 'src/vueLib/login/userStore';
import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
import type { Members } from 'src/vueLib/models/member';
import { i18n } from 'src/boot/lang';
import SearchableInput from '../components/SearchableInput.vue';
import TopButtonGroup from '../components/TopButtonGroup.vue';
import { openDatabase } from 'src/vueLib/components/DatabaseCall';

export interface EventDialog {
  getSelected: () => Events;
}

const { NotifyResponse } = useNotify();
const editOneDialog = ref();
const editAllDialog = ref();
const attendeesDialog = ref();
const okDialog = ref();
const deleteText = ref('');
const selectOption = ref(false);
const selected = ref<Events>([]);
const openSubmenu = ref(false);
const filter = ref('');
const user = useUserStore();

const { Events, pagination, loading, columns, updateEvents } = useEventTable();

//load on mounting page
onMounted(async () => {
  loading.value = true;

  await openDatabase()
    .then(() => {
      updateEvents();
    })
    .catch((err) => NotifyResponse(err, 'error'))

    .finally(() => {
      loading.value = false;
    });
});

// opens dialog for all Event values
function openSingleValueDialog(label: string, field: string, Event: Event) {
  editOneDialog.value?.open(label, field, Event);
}

//opens dialog for one value
function openAllValueDialog(Event: Event | null) {
  editAllDialog.value?.open(Event);
}

//opens remove dialog
function openRemoveDialog(...Events: Events) {
  if (Events.length === 1) {
    deleteText.value = "'";
    if (Events[0]?.name !== undefined) {
      deleteText.value += Events[0]?.name + ' ';
    }
    deleteText.value += "'";
  } else {
    deleteText.value = String(Events.length) + ' ' + i18n.global.t('events');
  }
  okDialog.value?.open(Events);
}

function openAttendees(eventArray: number, attendees: Members | null) {
  attendeesDialog.value.open(eventArray, attendees);
}

//remove Event from database
function removeEvent(...removeEvents: Events) {
  const EventIds: number[] = [];

  removeEvents.forEach((Event: Event) => {
    EventIds.push(Event.id);
  });

  appApi
    .post('events/delete', { ids: EventIds })
    .then(() => {
      updateEvents();
      selected.value = [];
    })
    .catch((err) => NotifyResponse(err, 'error'))
    .finally(() => {
      loading.value = false;
    });
}
</script>

<style>
.bigger-table-text .q-table__middle td {
  font-size: 14px;
}

.bigger-table-text .q-table__top,
.bigger-table-text .q-table__bottom,
.bigger-table-text th {
  font-size: 14px;
}
</style>