update

src/components/Card.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
-
 const props = defineProps<{
   transparent?: boolean;
 }>();

src/components/profile/ActionLog.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="border-b">
+    <h3 class="font-bold">Action Log</h3>
+  </div>
+  <div class="m-5">
+    <div v-if="fetching" class="m-5">
+      <Spinner />
+    </div>
+    <div v-else>
+      <div v-if="actionLogEntries.length === 0">
+        <h3>No record found. If you believe this was an error please make a ticket.</h3>
+      </div>
+      <div v-else class="relative overflow-x-auto">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500">
+          <thead class="text-xs text-gray-700 uppercase bg-gray-100">
+            <tr>
+              <th scope="col" class="px-6 py-3">Entry</th>
+              <th scope="col" class="px-6 py-3">Date</th>
+              <th scope="col" class="px-6 py-3">Added By</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(ale, idx) in actionLogEntries" :key="idx" class="bg-white border-b">
+              <th scope="row" class="text-wrap px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+                {{ ale.entry }}
+              </th>
+              <td class="px-6 py-4">
+                {{ new Date(ale.created_at).toLocaleDateString() }}
+              </td>
+              <td class="px-6 py-4">
+                {{ ale.created_by }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ActionLog } from "@/types";
+import useUserStore from "@/stores/user";
+
+import Spinner from "@/components/animations/Spinner.vue";
+
+const userStore = useUserStore();
+
+const actionLogEntries = ref<ActionLog[]>([]);
+const fetching = ref<boolean>(true);
+
+onMounted(async () => {
+  actionLogEntries.value = await userStore.fetchActionLog(userStore.self.cid);
+  fetching.value = false;
+});
+</script>
+
+<style scoped></style>

src/router/index.ts

@@ -19,25 +19,32 @@ const routes = [
     },
   },
   {
-    path: "/facility",
-    name: "Facility",
-    component: () => import("@/views/controllers/Facility.vue"),
+    path: "/pilots",
+    children: [
+      {
+        path: "feedback",
+        name: "Leave Feedback",
+        component: () => import("@/views/pilots/LeaveFeedback.vue"),
+      },
+    ],
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: "/leave-feedback",
-    name: "Leave Feedback",
-    component: () => import("@/views/pilots/LeaveFeedback.vue"),
-    meta: {
-      requiresAuth: true,
-    },
-  },
-  {
-    path: "/feedback",
-    name: "My Feedback",
-    component: () => import("@/views/controllers/MyFeedback.vue"),
+    path: "/controllers",
+    children: [
+      {
+        path: "facility",
+        name: "Facility",
+        component: () => import("@/views/controllers/Facility.vue"),
+      },
+      {
+        path: "feedback",
+        name: "My Feedback",
+        component: () => import("@/views/controllers/MyFeedback.vue"),
+      },
+    ],
     meta: {
       requiresAuth: true,
     },

src/stores/facility.ts

@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { Facility } from "@/types";
+import { Facility, Roster } from "@/types";
 
 interface FacilityState {
-  facilities: Facility[] | null;
+  facilities: Facility[];
   error: string | null;
   fetching: boolean;
   hasFetched: boolean;
@@ -14,7 +14,7 @@ const useFacilityStore = defineStore({
   id: "facility",
   state: () =>
     ({
-      facilities: null,
+      facilities: [],
       error: null,
       fetching: false,
       hasFetched: false,
@@ -38,6 +38,17 @@ const useFacilityStore = defineStore({
         this.hasFetched = true;
       }
     },
+    async fetchRoster(facility: string): Promise<Roster[]> {
+      this.fetching = true;
+      try {
+        const { data } = await API.get(`/v3/facility/${facility}/roster`);
+        return data;
+      } catch (e) {
+        return [];
+      } finally {
+        this.fetching = false;
+      }
+    },
   },
 });
 

src/stores/feedback.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { Feedback } from "@/types";
+import { Feedback, FeedbackRequest } from "@/types";
 
 interface FeedbackState {
   myFeedback: Feedback;
@@ -33,6 +33,11 @@ const useFeedbackStore = defineStore({
         this.hasFetched = true;
       }
     },
+    async submitFeedback(facility: string, feedback: FeedbackRequest): Promise<void> {
+      this.loading = API.post(`/v3/facility/${facility}/feedback`, feedback);
+      await this.loading;
+      this.loading = null;
+    },
   },
 });
 

src/stores/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { User } from "@/types";
+import { ActionLog, User } from "@/types";
 import { getControllerRating, getPilotRating } from "@/utils/rating";
 import { notify } from "notiwind";
 
@@ -103,6 +103,15 @@ const useUserStore = defineStore({
         this.hasFetchedRosters = true;
       }
     },
+    async fetchActionLog(cid: number): Promise<ActionLog[]> {
+      try {
+        const { data } = await API.get(`/v3/user/${cid}/action-log`);
+        return data;
+      } catch (e) {
+        console.error(e);
+        return [];
+      }
+    },
     async logout(): Promise<void> {
       this.fetching = true;
       try {

src/types/index.d.ts

@@ -47,14 +47,27 @@ export interface Feedback {
   facility: string;
   position: number;
   comment: string;
-  notes: string;
+  feedback: string;
   rating: string;
   status: string;
   created_at: string;
 }
 
+export interface FeedbackRequest {
+  callsign: string;
+  controller_cid: number;
+  pilot_cid: number;
+  position: number;
+  comment: string;
+  feedback: string;
+  rating: string;
+  status: string;
+}
+
 export interface Roster {
   id: number;
+  first_name: string;
+  last_name: string;
   cid: number;
   facility: string;
   operating_initials: string;
@@ -78,3 +91,13 @@ export interface Facility {
   name: string;
   url: string;
 }
+
+export interface ActionLog {
+  id: number;
+  cid: number;
+  entry: string;
+  created_at: string;
+  created_by: string;
+  updated_at: string;
+  updated_by: string;
+}

src/views/Profile.vue

@@ -25,6 +25,9 @@
           <div v-else-if="selectedTab == 2" key="2">
             <Discord :user="userStore.user" />
           </div>
+          <div v-else-if="selectedTab == 3" key="3">
+            <ActionLog :user="userStore.user" />
+          </div>
         </transition>
       </div>
     </Card>
@@ -42,6 +45,7 @@ import Discord from "@/components/profile/Discord.vue";
 import Notifications from "@/components/profile/Notifications.vue";
 import Page from "@/components/Page.vue";
 import Profile from "@/components/profile/Profile.vue";
+import ActionLog from "@/components/profile/ActionLog.vue";
 
 const userStore = useUserStore();
 

src/views/controllers/MyFeedback.vue

@@ -50,7 +50,7 @@
                   {{ feedback.rating }}
                 </th>
                 <td class="px-6 py-4">
-                  {{ feedback.comment }}
+                  {{ feedback.feedback }}
                 </td>
                 <td class="px-6 py-4">{{ feedback.facility }} / {{ feedback.position }}</td>
               </tr>
@@ -65,13 +65,15 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
 import useFeedbackStore from "@/stores/feedback";
+import useUserStore from "@/stores/user.ts";
 
 // Components
 import Page from "@/components/Page.vue";
 import Card from "@/components/Card.vue";
 import Spinner from "@/components/animations/Spinner.vue";
 
 const feedbackStore = useFeedbackStore();
+const userStore = useUserStore();
 
 const search = ref<string>("");
 
@@ -114,7 +116,7 @@ const feedbackRating = computed(() => {
 
 onMounted(() => {
   if (!feedbackStore.hasFetched) {
-    feedbackStore.fetchFeedback(1293257);
+    feedbackStore.fetchFeedback(userStore.self.cid);
   }
 });
 </script>