rebuild dialog code | fix #4

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import JsonInput from './components/JsonInput.vue';
 import EndpointCard from './components/EndpointCard.vue';
-import AddEndpoint from './components/AddEndpoint.vue';
+import EditDialogueButton from './components/EditDialogueButton.vue';
 import FilterInput from './components/FilterInput.vue';
 import CopyButton from './components/CopyButton.vue';
 import { useEndpointDataStore } from './store/endpointData';
@@ -44,7 +44,7 @@ const renderJson = computed(() => {
       <JsonInput />
       <div class="action-wrapper">
         <FilterInput />
-        <AddEndpoint />
+        <EditDialogueButton label="Add Teleport Endpoint" />
         <CopyButton />
       </div>
     </div>

src/components/EditDialogueButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DialogWrapperProps } from '@/types/props';
+import EditEndpointDialogue from './EditEndpointDialogue.vue';
+import { ref } from 'vue';
+
+defineProps<DialogWrapperProps>();
+
+const dialog = ref<HTMLDialogElement | null>(null);
+
+const openModal = () => dialog.value?.showModal();
+const closeModal = () => dialog.value?.close();
+</script>
+
+<template>
+  <button
+    class="button"
+    @click="openModal"
+  >
+    {{ label }}
+  </button>
+  <dialog
+    class="box m-auto p-0"
+    ref="dialog"
+    @click.self="closeModal"
+  >
+    <EditEndpointDialogue :endpoint-data />
+  </dialog>
+</template>
+
+<style scoped>
+dialog {
+  border: 1px solid #80808080;
+  display: none;
+  max-width: 525px;
+
+  &[open] {
+    display: block;
+  }
+}
+</style>

src/components/EditEndpointDialogue.vue

@@ -1,46 +1,26 @@
 <script setup lang="ts">
 import { addressToXYZ, createEndpoint, endpointToGlyphs } from '@/common';
+import { useId } from '@/helpers/id';
 import { useEndpointDataStore } from '@/store/endpointData';
-import { teleporterTypesEnum, type TeleporterTypes, type TeleportEndpoint } from '@/types/teleportEndpoint';
+import type { DialogProps } from '@/types/props';
+import { teleporterTypesEnum, type TeleporterTypes } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref } from 'vue';
 
-interface Props {
-  open: boolean;
-  endpointData?: TeleportEndpoint;
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<DialogProps>(), {
   open: false,
   endpointData: () => createEndpoint(),
 });
 
-const dialog = ref<HTMLDialogElement | null>(null);
+const endpointData = useEndpointDataStore();
+const { json } = storeToRefs(endpointData);
+
 const newEndpointName = ref<string>(props.endpointData.Name);
 const newEndpointAddress = ref<string>(endpointToGlyphs(props.endpointData));
 const newEndpointGalaxy = ref<string>((props.endpointData.UniverseAddress.RealityIndex + 1).toString());
 const newEndpointType = ref<TeleporterTypes>(props.endpointData.TeleporterType);
 
-const endpointData = useEndpointDataStore();
-const { json } = storeToRefs(endpointData);
-
-defineEmits<{
-  'update:open': [isOpen: boolean];
-}>();
-
-watchEffect(() => {
-  if (props.open) openModal();
-});
-
-function openModal() {
-  dialog.value?.showModal();
-}
-
-function closeModal() {
-  dialog.value?.close();
-}
-
-function cancelEndpointAdd() {
+function resetEndpointInputs() {
   newEndpointName.value = props.endpointData.Name;
   newEndpointAddress.value = endpointToGlyphs(props.endpointData);
   newEndpointGalaxy.value = (props.endpointData.UniverseAddress.RealityIndex + 1).toString();
@@ -82,14 +62,16 @@ function addEndpoint() {
   } else {
     json.value.unshift(endpoint);
   }
-  cancelEndpointAdd();
+
+  // reset to initial state
+  resetEndpointInputs();
 }
 
-const uniqueIdAddition = Math.random() + Math.random();
+const uniqueId = useId();
 const ids = {
-  nameInput: 'nameInput' + uniqueIdAddition,
-  addressInput: 'addressInput' + uniqueIdAddition,
-  galaxyInput: 'galaxyInput' + uniqueIdAddition,
+  nameInput: 'nameInput' + uniqueId,
+  addressInput: 'addressInput' + uniqueId,
+  galaxyInput: 'galaxyInput' + uniqueId,
 };
 
 const editButtonText = computed(() => (props.endpointData.Name ? 'Save Changes' : 'Add Endpoint'));
@@ -104,111 +86,95 @@ const isOutOfSafeRange = computed(() => {
 </script>
 
 <template>
-  <dialog
-    :class="{ 'dialog-hide': !open }"
-    class="box p-0 m-auto"
-    ref="dialog"
-    @click.self="closeModal"
-    @close="$emit('update:open', false)"
-  >
-    <div class="p-4 dialog-content">
-      <form
-        class="mb-4 endpoint-add-form"
-        @submit.prevent="addEndpoint"
-      >
-        <label :for="ids.nameInput">Name:</label>
-        <input
-          v-model="newEndpointName"
-          :id="ids.nameInput"
-          class="input"
-          type="text"
-          autofocus
-        />
-        <label :for="ids.addressInput">Address (Glyphs or Coordinates):</label>
-        <div>
-          <input
-            v-model="newEndpointAddress"
-            :id="ids.addressInput"
-            class="input"
-            type="text"
-            maxlength="19"
-          />
-          <p
-            v-if="isOutOfSafeRange"
-            class="warning mt-1 p-1"
-          >
-            Warning: This system may not have a space station.
-          </p>
-        </div>
-        <label :for="ids.galaxyInput">Galaxy (1-256):</label>
+  <div class="p-4">
+    <form
+      class="mb-4 endpoint-add-form"
+      @submit.prevent="addEndpoint"
+    >
+      <label :for="ids.nameInput">Name:</label>
+      <input
+        v-model="newEndpointName"
+        :id="ids.nameInput"
+        class="input"
+        type="text"
+        autofocus
+      />
+      <label :for="ids.addressInput">Address (Glyphs or Coordinates):</label>
+      <div>
         <input
-          v-model="newEndpointGalaxy"
-          :id="ids.galaxyInput"
+          v-model="newEndpointAddress"
+          :id="ids.addressInput"
           class="input"
-          maxlength="3"
           type="text"
+          maxlength="19"
         />
-        <label>Type:</label>
-        <select
-          v-model="newEndpointType"
-          class="select"
+        <p
+          v-if="isOutOfSafeRange"
+          class="warning mt-1 p-1"
         >
-          <option
-            v-for="endpointType in teleporterTypesEnum"
-            :value="endpointType"
-          >
-            {{ endpointType }}
-          </option>
-        </select>
-      </form>
-
-      <form
-        class="submit-buttons"
-        method="dialog"
+          Warning: This system may not have a space station.
+        </p>
+      </div>
+      <label :for="ids.galaxyInput">Galaxy (1-256):</label>
+      <input
+        v-model="newEndpointGalaxy"
+        :id="ids.galaxyInput"
+        class="input"
+        maxlength="3"
+        type="text"
+      />
+      <label>Type:</label>
+      <select
+        v-model="newEndpointType"
+        class="select"
       >
-        <button
-          class="button is-success"
-          @click="addEndpoint"
-        >
-          {{ editButtonText }}
-        </button>
-        <button
-          class="button is-danger"
-          @click="cancelEndpointAdd"
+        <option
+          v-for="endpointType in teleporterTypesEnum"
+          :value="endpointType"
         >
-          Cancel
-        </button>
-      </form>
-    </div>
-  </dialog>
+          {{ endpointType }}
+        </option>
+      </select>
+    </form>
+
+    <form
+      class="submit-buttons"
+      method="dialog"
+    >
+      <button
+        class="button is-success"
+        @click="addEndpoint"
+      >
+        {{ editButtonText }}
+      </button>
+      <button
+        class="button is-danger"
+        @click="resetEndpointInputs"
+      >
+        Cancel
+      </button>
+    </form>
+  </div>
 </template>
 
 <style scoped>
-dialog {
-  border: 1px solid silver;
-  max-width: 510px;
-
-  .warning {
-    background-color: orange;
-    color: black;
-    border-radius: 4px;
-    text-wrap: balance;
-  }
-
-  &.dialog-hide {
-    display: none;
-  }
+.warning {
+  background-color: orange;
+  color: black;
+  border-radius: 4px;
+  text-wrap: balance;
+}
 
-  .submit-buttons {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-  }
+.submit-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
 
-  .endpoint-add-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
+.endpoint-add-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 1rem;
 }
 </style>

src/components/EndpointCard.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import EditEndpointDialogue from './EditEndpointDialogue.vue';
 import { endpointToGlyphs } from '@/common';
 import { useEndpointDataStore } from '@/store/endpointData';
 import { type TeleportEndpoint } from '@/types/teleportEndpoint';
 import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
+import EditDialogueButton from './EditDialogueButton.vue';
 
 const props = defineProps<{
   endpointJson: TeleportEndpoint;
@@ -13,8 +13,6 @@ const props = defineProps<{
 const endpointData = useEndpointDataStore();
 const { json } = storeToRefs(endpointData);
 
-const isModalOpen = ref(false);
-
 const address = computed(() => endpointToGlyphs(props.endpointJson));
 
 function removeEndpoint() {
@@ -29,23 +27,17 @@ function removeEndpoint() {
     <div>Galaxy: {{ endpointJson.UniverseAddress.RealityIndex + 1 }}</div>
     <div>{{ endpointJson.TeleporterType }}</div>
     <div class="actions mt-2">
-      <button
-        class="button"
-        @click="isModalOpen = true"
-      >
-        Edit
-      </button>
+      <EditDialogueButton
+        :endpoint-data="endpointJson"
+        label="Edit"
+      />
       <button
         class="button is-danger"
         @click="removeEndpoint"
       >
         Delete
       </button>
     </div>
-    <EditEndpointDialogue
-      v-model:open="isModalOpen"
-      :endpoint-data="endpointJson"
-    />
   </div>
 </template>
 

src/helpers/id.ts

@@ -0,0 +1,4 @@
+// calling this function in another module will increment this local counter.
+// the counter is therefore shared across all instances and guarantees to give a unique number on every function call
+let id = 0;
+export const useId = () => id++;