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

<template>
  <div class="q-pa-sm">
    <q-table
      :rows="tasks"
      :columns="columns"
      :grid="$q.screen.xs"
      dense
      row-key="$id"
      flatten
      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"
      :filter="searchFilter"
      :filter-method="filterRows"
      @row-click="onRowClick"
    >
      <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-select
          style="width: 250px"
          multiple
          use-chips
          clearable
          label="Skills Filter"
          input-debounce="250"
          :options="skillTagOptions"
          v-model="searchFilter.skillTags"
          option-label="name"
          option-value="$id"
        >
        </q-select>
        <q-select
          style="width: 250px"
          multiple
          use-chips
          clearable
          label="Tag Filter"
          input-debounce="250"
          :options="taskTagOptions"
          v-model="searchFilter.taskTags"
          option-label="name"
          option-value="$id"
        >
          <template v-slot: prepend>
            <q-icon name="wrench"></q-icon>
          </template>
        </q-select>
        <q-space />
        <q-input
          flatten
          debounce="300"
          color="primary"
          v-model="searchFilter.title"
        >
          <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-cell-skills="props">
        <q-td :props="props" class="q-gutter-sm">
          <q-badge
            v-for="skill in props.value"
            :key="skill"
            :color="skill.tagColour"
            text-color="white"
            :label="skill.name"
          />
        </q-td>
      </template>

      <template v-slot:body-cell-tags="props">
        <q-td :props="props" class="q-gutter-sm">
          <q-badge
            v-for="tag in props.value"
            :key="tag"
            :color="tag.colour"
            text-color="white"
            :label="tag.name"
          />
        </q-td>
      </template>
    </q-table>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';
import { useTaskStore, Task, SkillTag, TaskTag } from 'src/stores/task';
import { QTableProps, date, useQuasar } from 'quasar';
import { useBoatStore } from 'src/stores/boat';
import { useRouter } from 'vue-router';

const router = useRouter();
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: (row) =>
      row.required_skills.map((s: string) => taskStore.getSkillById(s)),
    sortable: false,
  },
  {
    name: 'tags',
    align: 'left',
    label: 'Tags',
    field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
    sortable: false,
  },
  {
    name: 'boat',
    align: 'left',
    label: 'Boat',
    field: (row) =>
      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
    sortable: true,
  },
  {
    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) => taskStore.getTaskById(t))
          .filter((t: Task) => t)
          .map((t: Task) => t.title)
          .join(', ') || null
      );
    },
  },
];

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

const searchFilter = ref({
  title: '',
  skillTags: <SkillTag[]>[],
  taskTags: <TaskTag[]>[],
});

const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);

function onRowClick(evt: Event, row: Task) {
  console.log(row);
  router.push({ name: 'edit-task', params: { id: row.$id } });
}
// TODO: Implement server side search
const filterRows = computed(
  () => (rows: readonly Task[], terms: any, cols: any, cellValueFn: any) => {
    let result = rows;
    result = rows.filter((row) =>
      terms.title
        ? row.title.toLowerCase().includes(terms.title.toLowerCase())
        : true
    );
    result = result.filter((row) =>
      terms.skillTags.length > 0
        ? row.required_skills.some((req_skill) =>
            terms.skillTags.map((t) => t.$id).includes(req_skill)
          )
        : true
    );
    result = result.filter((row) =>
      terms.taskTags.length > 0
        ? row.tags.some((tag) => terms.taskTags.map((t) => t.$id).includes(tag))
        : true
    );
    return result;
  }
);

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;
    });
  });
}
</script>