Fix TypeScript errors

audiodude · Nov 6, 2024 · 358162e · 358162e
1 parent 4cdface
commit 358162e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/rainfall-frontend/src/components/Release.vue b/rainfall-frontend/src/components/Release.vue
@@ -115,6 +115,9 @@ export default defineComponent({
         this.$router.push(`/site/${this.release.site_id}`);
       }
     },
+    showDeleteModal() {
+      (this.$refs.deleteModal as typeof DeleteConfirmModal).show();
+    },
   },
   watch: {
     release(newRelease) {
@@ -185,11 +188,7 @@ export default defineComponent({
       <div v-if="!isEditing" class="p-2 bg-emerald-500 text-white">
         <div class="release-name text-xl flex justify-between">
           {{ release.name }}
-          <button
-            @click="$refs.deleteModal?.show()"
-            type="button"
-            class="delete-release-overview-button"
-          >
+          <button @click="showDeleteModal()" type="button" class="delete-release-overview-button">
             <svg
               class="inline text-red-600 w-6 h-6 relative -top-0.5 ml-px"
               xmlns="http://www.w3.org/2000/svg"
@@ -284,7 +283,7 @@ export default defineComponent({
     ></DeleteConfirmModal>
     <div v-if="isEditing" class="md:max-w-screen-md pr-4">
       <button
-        @click="$refs.deleteModal?.show()"
+        @click="showDeleteModal()"
         id="delete-release-button"
         class="block md:w-40 mx-auto md:ml-auto md:mr-0 cursor-pointer mt-4 w-10/12 p-4 md:py-2 text-xl md:text-base bg-red-700 dark:bg-red-500 text-gray-100 font-semibold rounded hover:text-white hover:bg-red-600"
       >

diff --git a/rainfall-frontend/src/components/SitesList.vue b/rainfall-frontend/src/components/SitesList.vue
@@ -6,7 +6,10 @@ import { deleteSite as deleteSiteHelper } from '@/helpers/site';
 export default {
   components: { DeleteConfirmModal },
   props: ['sites'],
-  data() {
+  data(): {
+    deleteError: string;
+    siteIdToDelete: string | null;
+  } {
     return {
       deleteError: '',
       siteIdToDelete: null,
@@ -17,10 +20,17 @@ export default {
       this.$router.push(`/site/${id}`);
     },
     async deleteSite() {
+      if (!this.siteIdToDelete) {
+        return;
+      }
       this.deleteError = await deleteSiteHelper(this.siteIdToDelete);
       this.siteIdToDelete = null;
       this.$emit('site-deleted');
     },
+    showDeleteModal(id: string) {
+      this.siteIdToDelete = id;
+      (this.$refs.deleteModal as typeof DeleteConfirmModal).show();
+    },
   },
 };
 </script>
@@ -32,21 +42,15 @@ export default {
         v-for="site in sites"
         class="flex flex-row justify-between p-2 mb-2 last:mb-0 bg-blue-500 text-white"
       >
-        <span
-          @click="editSite(site.id)"
-          class="site-name w-full flex justify-between cursor-pointer"
-        >
+        <span class="site-name w-40">
           {{ site.name }}
           <button
-            @click.stop="
-              siteIdToDelete = site.id;
-              $refs.deleteModal?.show();
-            "
+            @click="showDeleteModal(site.id)"
             type="button"
             class="delete-site-overview-button"
           >
             <svg
-              class="inline text-red-700 dark:text-red-600 w-6 h-6 relative -top-0.5 ml-px"
+              class="inline text-red-600 w-6 h-6 relative -top-0.5 ml-px"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -61,6 +65,24 @@ export default {
             </svg>
           </button>
         </span>
+        <span
+          class="edit-site-button w-8 hover:text-blue-800 cursor-pointer"
+          @click="editSite(site.id)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"
+            />
+            <path
+              d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"
+            />
+          </svg>
+        </span>
       </div>
     </div>
     <DeleteConfirmModal

diff --git a/rainfall-frontend/src/views/EditSiteView.vue b/rainfall-frontend/src/views/EditSiteView.vue
@@ -94,7 +94,7 @@ export default {
       this.sitesError = error;
     },
     async deleteSite(id: string) {
-      this.deleteError = await deleteSiteHelper(this.site.id);
+      this.deleteError = await deleteSiteHelper(id);
       this.$router.replace('/sites');
     },
     setInvalidateHandler(fn: () => void) {
@@ -127,6 +127,9 @@ export default {
       }
       this.site.name = this.newSiteName;
     },
+    showDeleteModal() {
+      (this.$refs.deleteModal as typeof DeleteConfirmModal).show();
+    },
   },
 };
 </script>
@@ -207,7 +210,7 @@ export default {
       ></DeleteConfirmModal>
       <div class="flex flex-col md:flex-row mt-8 justify-right">
         <button
-          @click="$refs.deleteModal?.show()"
+          @click="showDeleteModal()"
           id="delete-release-button"
           class="block md:w-40 mx-auto md:ml-auto md:mr-0 cursor-pointer w-10/12 md:w-48 p-4 md:py-2 text-xl md:text-base bg-red-700 dark:bg-red-500 text-gray-100 font-semibold rounded hover:text-white hover:bg-red-800"
         >