bab-app/src/components/task/TaskTableComponent.vue

<template>
  <div class="q-pa-sm">
    <q-table
      :rows="tasks"
      :columns="columns"
      dense
      row-key="$id"
      no-data-label="I didn't find anything for you"
      no-results-label="The filter didn't uncover any results"
      selection="multiple"
      v-model:selected="selected"
    >
      <template v-slot:top>
        <q-btn
          color="primary"
          :disable="loading"
          label="New Task"
          to="/task/edit"
        />
        <q-btn
          v-if="tasks.length !== 0"
          class="q-ml-sm"
          color="primary"
          :disable="loading"
          label="Delete task(s)"
          @click="deleteTasks"
        />
        <q-space />
        <q-input borderless debounce="300" color="primary" v-model="filter">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th key="desc" auto-width>
            <q-checkbox dense v-model="props.selected"></q-checkbox>
          </q-th>
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>

      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="desc" auto-width>
            <q-checkbox dense v-model="props.selected"></q-checkbox>
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <div v-if="col.name == 'skills'" class="q-gutter-sm">
              <q-badge
                v-for="skill in props.row.required_skills"
                :key="skill"
                :color="skill.tagColour"
                text-color="white"
              >
                {{ skill.name }}
              </q-badge>
            </div>
            <div v-else-if="col.name == 'tags'" class="q-gutter-sm">
              <q-badge
                v-for="tag in props.row.tags"
                :key="tag"
                :color="tag.colour"
                text-color="white"
              >
                {{ tag.name }}
              </q-badge>
            </div>
            <div v-else>
              {{ col.value }}
            </div>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { useTaskStore, Task } from 'src/stores/task';
import { QTableProps, date, useQuasar } from 'quasar';
import { useBoatStore } from 'src/stores/boat';
import BoatPickerComponent from '../boat/BoatPickerComponent.vue';

const selected = ref([]);
const loading = ref(false); // Placeholder
const columns = <QTableProps['columns']>[
  {
    name: 'title',
    required: true,
    label: 'Title',
    align: 'left',
    field: 'title',
    sortable: true,
  },
  {
    name: 'due_date',
    align: 'left',
    label: 'Due Date',
    field: 'due_date',
    format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
    sortable: true,
  },
  {
    name: 'status',
    align: 'left',
    label: 'Status',
    field: 'status',
    sortable: true,
  },
  {
    name: 'skills',
    align: 'left',
    label: 'Skills',
    field: 'required_skills',
    sortable: false,
  },
  {
    name: 'tags',
    align: 'left',
    label: 'Tags',
    field: 'tags',
    sortable: false,
  },
  {
    name: 'boat',
    align: 'left',
    label: 'Boat',
    field: (row) =>
      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
    sortable: false,
  },
  {
    name: 'volunteers',
    align: 'left',
    label: "People Req'd",
    field: 'volunteers_required',
    sortable: false,
  },
  {
    name: 'signedup',
    align: 'left',
    label: 'Signed Up',
    field: (row) => row.volunteers.length,
    sortable: false,
  },
  {
    name: 'depends',
    align: 'left',
    label: 'Dependent Tasks',
    field: 'depends_on',
    format: (val) => {
      return (
        val
          .map((t: string) => lookupTaskFromId(t))
          .filter((t: Task) => t)
          .map((t: Task) => t.title)
          .join(', ') || null
      );
    },
  },
];

const props = defineProps<{ tasks: Task[] }>();
const taskStore = useTaskStore();
const $q = useQuasar();
taskStore.fetchTaskTags();
taskStore.fetchSkillTags();

function lookupTaskFromId(id: string): Task {
  return taskStore.tasks.find((t) => t.$id === id) || undefined;
}

function deleteTasks() {
  confirmDelete(selected.value);
}
function confirmDelete(tasks: Task[]) {
  $q.dialog({
    title: 'Confirm',
    message:
      'You are about to delete ' + tasks.length + ' tasks.  Are you sure?',
    cancel: true,
    persistent: true,
  }).onOk(() => {
    selected.value.map((task: Task) => {
      taskStore.deleteTask(task);
      return;
    });
  });
}
const filter = ref('');
</script>