Added better RS add and remove functionality.

quasar-app/src/api/railSystems.js

@@ -59,8 +59,9 @@ export function removeRailSystem(rsStore, id) {
             .then(() => {
                 rsStore.selectedRailSystem = null;
                 refreshRailSystems(rsStore)
-                    .then(() => resolve)
+                    .then(resolve)
-                    .catch(error => reject(error));
+                    .catch(reject);
-            });
+            })
+          .catch(reject);
     });
 }

quasar-app/src/components/RailSystemLink.vue

@@ -6,11 +6,16 @@
     <q-item-section>
       <q-item-label>{{railSystem.name}}</q-item-label>
     </q-item-section>
+    <q-item-section top side>
+      <q-btn size="12px" flat dense round icon="delete" @click.prevent="deleteRs"/>
+    </q-item-section>
   </q-item>
 </template>
 
 <script>
-import { RailSystem } from "src/api/railSystems";
+import { RailSystem, removeRailSystem } from "src/api/railSystems";
+import { useRailSystemsStore } from "stores/railSystemsStore";
+import { useQuasar } from "quasar";
 
 export default {
   name: "RailSystemLink",
@@ -19,6 +24,34 @@ export default {
       type: RailSystem,
       required: true
     }
+  },
+  setup() {
+    const rsStore = useRailSystemsStore();
+    const quasar = useQuasar();
+    return {rsStore, quasar};
+  },
+  methods: {
+    deleteRs() {
+      this.quasar.dialog({
+        title: "Confirm Removal",
+        message: "Are you sure you want to remove this rail system? All associated data will be deleted, permanently.",
+        cancel: true
+      }).onOk(() => {
+        removeRailSystem(this.rsStore, this.railSystem.id)
+          .then(() => {
+            this.quasar.notify({
+              color: "positive",
+              message: "Rail system removed."
+            });
+          })
+          .catch(error => {
+            this.quasar.notify({
+              color: "negative",
+              message: "An error occurred: " + error.response.data.message
+            });
+          });
+      });
+    }
   }
 };
 </script>

quasar-app/src/components/RailSystemsList.vue

@@ -13,14 +13,18 @@
         dense
         type="text"
         label="Name"
+        v-model="addRailSystemName"
       />
-      <q-btn label="Add" color="primary"></q-btn>
+      <q-btn label="Add" color="primary" @click="create"></q-btn>
     </q-item>
   </q-list>
 </template>
 
 <script>
 import RailSystemLink from "components/RailSystemLink.vue";
+import { useRailSystemsStore } from "stores/railSystemsStore";
+import { createRailSystem } from "src/api/railSystems";
+import { useQuasar } from "quasar";
 
 export default {
   name: "RailSystemsList",
@@ -30,6 +34,34 @@ export default {
       type: Array,
       required: true
     }
+  },
+  setup() {
+    const rsStore = useRailSystemsStore();
+    const quasar = useQuasar();
+    return {rsStore, quasar};
+  },
+  data() {
+    return {
+      addRailSystemName: ""
+    }
+  },
+  methods: {
+    create() {
+      createRailSystem(this.rsStore, this.addRailSystemName)
+        .then(() => {
+          this.addRailSystemName = "";
+          this.quasar.notify({
+            color: "positive",
+            message: "Rail system created."
+          });
+        })
+        .catch(error => {
+          this.quasar.notify({
+            color: "negative",
+            message: "An error occurred: " + error.response.data.message
+          });
+        });
+    }
   }
 };
 </script>