Task list improvements

src/components/task/TaskTableComponent.vue

@@ -15,21 +15,6 @@
       :filter-method="filterRows"
     >
       <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
@@ -64,6 +49,7 @@
           flatten
           debounce="300"
           color="primary"
+          clearable
           v-model="searchFilter.title"
         >
           <template v-slot:append>
@@ -121,7 +107,107 @@
           />
         </q-td>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-list dense>
+              <q-item
+                v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+                :key="col.name"
+              >
+                <q-item-section>
+                  <q-item-label>{{ col.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption v-if="col.name === 'skills'">
+                    <q-chip
+                      size="sm"
+                      v-for="skill in col.value"
+                      outline
+                      color="primary"
+                      :key="skill.$id"
+                      >{{ skill.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'tags'">
+                    <q-chip
+                      size="sm"
+                      v-for="tag in col.value"
+                      outline
+                      color="primary"
+                      :key="tag.$id"
+                      >{{ tag.name }}</q-chip
+                    ></q-item-label
+                  >
+                  <q-item-label caption v-else-if="col.name === 'actions'">
+                    <q-btn
+                      label="Sign Up"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'signup-task', params: { id: col.value } }"
+                    />
+                    <q-btn
+                      label="Edit"
+                      size="sm"
+                      color="primary"
+                      :to="{ name: 'edit-task', params: { id: col.value } }"
+                    />
+                  </q-item-label>
+                  <q-item-label v-else caption>{{ col.value }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
     </q-table>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+      <q-fab
+        v-model="fabShow"
+        vertical-actions-align="right"
+        color="primary"
+        glossy
+        icon="keyboard_arrow_up"
+        direction="up"
+      >
+        <q-fab-action
+          color="primary"
+          :disable="loading"
+          label="New Task"
+          to="/task/edit"
+          icon="add"
+        />
+        <q-fab-action
+          v-if="tasks.length !== 0"
+          class="q-ml-sm"
+          color="primary"
+          :disable="loading"
+          label="Delete task(s)"
+          @click="deleteTasks"
+          icon="delete"
+        /> </q-fab
+    ></q-page-sticky>
   </div>
 </template>
 
@@ -135,6 +221,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const selected = ref([]);
 const loading = ref(false); // Placeholder
+const fabShow = ref(false);
 const columns = <QTableProps['columns']>[
   {
     name: 'title',
@@ -240,14 +327,14 @@ const filterRows = computed(
         : true
     );
     result = result.filter((row) =>
-      terms.skillTags.length > 0
+      terms.skillTags && 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
+      terms.taskTags && terms.taskTags.length > 0
         ? row.tags.some((tag) => terms.taskTags.map((t) => t.$id).includes(tag))
         : true
     );