fixed lint format

src/pages/ListIncidents.vue

@@ -1,82 +1,92 @@
 <template>
-  <div>
+    <div>
-    <h1>Incident Reports</h1>
+        <h1>Incident Reports</h1>
-    <div v-if="isLoading">Loading...</div>
+        <div v-if="isLoading">Loading...</div>
-    <div v-else-if="filteredReports.length">
+        <div v-else-if="filteredReports.length">
-      <div v-for="report in filteredReports" :key="report._id" class="big-padding">
+            <div
-
+                v-for="report in filteredReports"
-        <h3>{{ formatDate(report._createdDate) }}</h3>
+                :key="report._id"
-        <hr>
+                class="big-padding"
-        <h4>{{ report._title }}</h4>
+            >
-        <p>{{ report._content }}</p>
+                <h3>{{ formatDate(report._createdDate) }}</h3>
-        <hr><br><br>
+                <hr />
-
+                <h4>{{ report._title }}</h4>
-      </div>
+                <p>{{ report._content }}</p>
+                <hr />
+                <br /><br />
+            </div>
+        </div>
+        <p v-else>No incident reports found or an error occurred.</p>
     </div>
-    <p v-else>No incident reports found or an error occurred.</p>
-  </div>
 </template>
 
 <script>
 export default {
-  data() {
+    data() {
-    return {
+        return {
-      incidentReports: [],
+            incidentReports: [],
-      isLoading: false,
+            isLoading: false,
-      error: null,
+            error: null,
-    };
+        };
-  },
-  mounted() {
-    this.fetchIncidentReports();
-  },
-  methods: {
-    async fetchIncidentReports() {
-      this.isLoading = true;
-      try {
-        const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
-        const data = await response.json();
-        this.incidentReports = data;
-      } catch (error) {
-        this.error = error;
-        console.error("Error fetching incident reports:", error);
-      } finally {
-        this.isLoading = false;
-      }
     },
-    formatDate(dateString) {
+    mounted() {
-      const date = new Date(dateString);
+        this.fetchIncidentReports();
-      return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
     },
-  },
+    methods: {
-  computed: {
+        async fetchIncidentReports() {
-    filteredReports() {
+            this.isLoading = true;
-      return this.incidentReports
+            try {
-        .slice() // Create a copy to avoid mutating the original array
+                const response = await fetch("/api/incident-reports"); // Replace with your API endpoint
-        .sort((a, b) => new Date(b._createdDate) - new Date(a._createdDate))
+                const data = await response.json();
-        .slice(-25); // Get the last 25 sorted reports
+                this.incidentReports = data;
+            } catch (error) {
+                this.error = error;
+                console.error("Error fetching incident reports:", error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+        formatDate(dateString) {
+            const date = new Date(dateString);
+            return date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        },
+    },
+    computed: {
+        filteredReports() {
+            return this.incidentReports
+                .slice() // Create a copy to avoid mutating the original array
+                .sort(
+                    (a, b) =>
+                        new Date(b._createdDate) - new Date(a._createdDate),
+                )
+                .slice(-25); // Get the last 25 sorted reports
+        },
     },
-  },
 };
 </script>
 <style>
 .incident-report-container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  gap: 10px; /* Adjust gap between boxes */
+    gap: 10px; /* Adjust gap between boxes */
 }
 
 .incident-report {
-  background-color: #fff;
+    background-color: #fff;
-  border-radius: 10px;
+    border-radius: 10px;
-  padding: 20px;
+    padding: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 .jumbotron {
-  background-color: #fff;
+    background-color: #fff;
-  border-radius: 10px;
+    border-radius: 10px;
-  padding: 20px;
+    padding: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px; /* Add spacing between jumbotrons */
+    margin-bottom: 20px; /* Add spacing between jumbotrons */
 }
-
 </style>
+