filters

components/GoalFilters.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-combobox
+    v-model="form.status"
+    label="Status"
+    :items="options.status"
+    item-value="type"
+    item-title="text"
+    variant="outlined"
+    @update:model-value="print"
+  ></v-combobox>
+</template>
+
+<script>
+import { GOAL_STATUS } from "~/constants/goal";
+
+import { useGoalsStore } from "~/store/goals";
+
+export default {
+  name: "GoalTab",
+  props: {
+    isEditable: Boolean,
+  },
+  data() {
+    return {
+      form: {
+        title: "",
+        type: "",
+        status: "",
+      },
+      options: {
+        status: [
+          GOAL_STATUS.COMPLETED,
+          GOAL_STATUS.ONGOING,
+          GOAL_STATUS.PAUSED,
+        ],
+      },
+    };
+  },
+  methods: {
+    print: (value) => {
+      const goalStore = useGoalsStore();
+      // goalStore.fetchGoals({ status: value.type });
+      // console.log({ status: value.type });
+    },
+  },
+};
+</script>

components/GoalList.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container>
+    <GoalFilters />
     <span v-if="recentlyCreated.isLoading">Loading...</span>
     <v-table v-else>
       <thead>

components/GoalListTabEdit.vue

@@ -4,6 +4,18 @@
       {{ state.title }}
     </nuxt-link>
     <td>{{ state.status || "---" }}</td>
+    <td>{{ state.startsOn }}</td>
+    <td>
+      <v-progress-circular
+        :rotate="360"
+        :size="60"
+        :width="10"
+        :model-value="state.percentageCompleted"
+        color="teal"
+      >
+        {{ state.percentageCompleted }}
+      </v-progress-circular>
+    </td>
     <td>
       <v-menu v-model="state.assigneeMenu" location="bottom">
         <template v-slot:activator="{ props }">

constants/goal.js

@@ -5,10 +5,10 @@ export const GOAL_TYPE = {
 }
 
 export const GOAL_STATUS = {
-  COMPLETED: { type: 'COMPLETED', text: 'Completed' },
-  ONGOING: { type: 'ONGOING', text: 'Ongoing' },
-  PAUSED: { type: 'PAUSED', text: 'Paused' }
-}
+  COMPLETED: { type: "completed", text: "Completed" },
+  ONGOING: { type: "ongoing", text: "Ongoing" },
+  PAUSED: { type: "paused", text: "Paused" },
+};
 
 export const DEFAULT_GOAL = {
   title: '',

models/Goal.ts

@@ -12,7 +12,7 @@ export class Goal extends Model {
       createdBy: this.attr(null),
       startsOn: this.string(''),
       endsOn: this.string(''),
-      precentageCompleted: this.number(0),
+      percentageCompleted: this.number(0),
       status: this.string(null),
       assignedTo: this.attr(null),
       assignedBy: this.string(null)
@@ -26,7 +26,7 @@ export class Goal extends Model {
   declare createdBy: string
   declare startsOn: string
   declare endsOn: string
-  declare precentageCompleted: number
+  declare percentageCompleted: number
   declare status: string
   declare assignedTo: string
   declare assignedBy: string