From 065f8511505baef7c43d8387fc1c7ae271464b41 Mon Sep 17 00:00:00 2001
From: Ye Jun Wu <yejunwu168@gmail.com>
Date: Fri, 2 Jul 2021 16:48:31 +0200
Subject: [PATCH] feat: filter timesheet by status

---
 pages/timesheets/index.vue | 43 ++++++++++++++++++++++++++++++++++++--
 types/enums.ts             |  7 +++++++
 types/timesheets.d.ts      |  1 -
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 types/enums.ts

diff --git a/pages/timesheets/index.vue b/pages/timesheets/index.vue
index b605e75b..46e66b4f 100644
--- a/pages/timesheets/index.vue
+++ b/pages/timesheets/index.vue
@@ -1,12 +1,27 @@
 <template>
   <div class="page-wrapper">
-    <div class="content-wrapper my-5">
+    <div class="my-5 content-wrapper">
+      <b-form-group
+        label="Filter by:"
+        label-for="filter-select"
+        label-class="font-weight-bold"
+        class="filter"
+      >
+        <b-form-select id="filter-select" v-model="selected" :options="options" class="filter__select">
+          <template #first>
+            <b-form-select-option :value="null"> 
+              All 
+            </b-form-select-option>
+          </template>
+        </b-form-select>
+      </b-form-group>
       <b-table
         class="mt-3 app-table timesheet-table"
         responsive
         :items="tableData.items"
         :fields="tableData.fields"
         :sort-compare="sortCompare"
+        :filter="filter"
         sort-by="id"
         no-sort-reset
       >
@@ -44,6 +59,7 @@
 
 <script lang="ts">
 import {
+  ref,
   computed,
   defineComponent,
   useRouter,
@@ -51,6 +67,7 @@ import {
 } from "@nuxtjs/composition-api";
 
 import { recordStatus } from "~/helpers/record-status";
+import { TimesheetStatus } from "~/types/enums.ts";
 
 export default defineComponent({
   middleware: ["isAdmin"],
@@ -62,6 +79,15 @@ export default defineComponent({
   setup() {
     const store = useStore<RootStoreState>();
 
+
+    const options = Object.entries(TimesheetStatus).map(([value, text]) => ({
+      value,
+      text,
+    })).sort((a, b) => a.text.localeCompare(b.text))
+    
+    const selected = ref(null);
+    const getSelected = computed(() => selected.value);
+
     const weeksBefore = 6;
     const weeksAfter = 2;
 
@@ -88,8 +114,11 @@ export default defineComponent({
         return a.name.localeCompare(b.name);
       }
     };
-
+  
     return {
+      options,
+      selected,
+      filter: getSelected,
       recordStatus,
       openEmployeeTimesheetPage,
       tableData,
@@ -100,6 +129,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.filter {
+  &__select {
+    text-transform: capitalize;
+  }
+
+  @media (min-width: 576px) {
+      width: 25%;
+  }
+}
+
 .timesheet-table > .table.b-table > thead > tr > .table-b-table-default,
 .timesheet-table > .table.b-table > thead > tr > th {
   background: var(--color-primary);
diff --git a/types/enums.ts b/types/enums.ts
new file mode 100644
index 00000000..48968257
--- /dev/null
+++ b/types/enums.ts
@@ -0,0 +1,7 @@
+export enum TimesheetStatus {
+  NEW = "new",
+  PENDING = "pending",
+  APPROVED = "approved",
+  DENIED = "denied",
+  EMPTY = "empty",
+}
diff --git a/types/timesheets.d.ts b/types/timesheets.d.ts
index b457eee3..260a2a33 100644
--- a/types/timesheets.d.ts
+++ b/types/timesheets.d.ts
@@ -5,7 +5,6 @@ declare enum TimesheetStatus {
   DENIED = "denied",
   EMPTY = "empty",
 }
-
 interface TimesheetEmployee extends Employee {
   status: TimesheetStatus;
   pendingTimeRecords: TimeRecord[];