Ens

Author: mslaursen

frontend/src/components/modal/EditFieldModal.vue

@@ -1,13 +1,13 @@
 <template>
   <main class="field-modal-container">
-    <div class="grid-2x2">
+    <div class="input-container">
       <div class="input-group">
-        <label class="field-label">Field Name:</label>
+        <label class="field-label">Field name</label>
         <input class="field-input" v-model="fieldName" type="text" />
       </div>
 
       <div class="input-group">
-        <label class="field-label">Type:</label>
+        <label class="field-label">Type</label>
         <select class="field-select" v-model="type">
           <option disabled value="">-- Select type --</option>
           <option value="String">String</option>
@@ -20,25 +20,23 @@
       </div>
 
       <div class="input-group">
-        <label class="field-label">Default Value:</label>
+        <label class="field-label">Default value</label>
         <input class="field-input" v-model="defaultValue" type="text" />
       </div>
 
-      <div class="input-group checkbox-inline">
-        <label class="field-label">Primary Key:</label>
-        <input type="checkbox" v-model="isPrimaryKey" />
-      </div>
+
     </div>
 
     <div class="checkbox-group">
+      <label><input type="checkbox" v-model="isPrimaryKey" /> Primary key</label>
       <label><input type="checkbox" v-model="isNullable" /> Nullable</label>
       <label><input type="checkbox" v-model="isUnique" /> Unique</label>
       <label><input type="checkbox" v-model="isIndex" /> Index</label>
     </div>
 
     <div class="action-group">
-      <button class="delete-field-btn" @click="deleteField">Delete</button>
       <button class="save-field-btn" @click="saveField">Save</button>
+      <button class="delete-field-btn" @click="deleteField">Delete</button>
     </div>
   </main>
 </template>
@@ -89,77 +87,59 @@ const deleteField = () => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  border: 2px solid black;
   padding: 1rem;
-  box-shadow: 4px 4px 0px black;
-  background-color: #fff;
+  background-color: #ffdb58;
 }
 
-.grid-2x2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.input-container {
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
 }
 
 .input-group {
   display: flex;
   flex-direction: column;
+  gap: 0.15rem;
 }
 
-.checkbox-inline {
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
+
 
 .field-label {
   font-weight: bold;
-  margin-bottom: 0.25rem;
+  margin-bottom: 5px;
 }
 
 .field-input,
 .field-select {
   border: 2px solid black;
-  border-radius: 4px;
-  padding: 0.5rem;
-  box-shadow: 3px 3px 0px black;
-  background-color: #f4f4f0;
-  transition:
-    transform 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out;
-}
-
-.field-input:focus,
-.field-select:focus {
-  outline: none;
-  transform: translate(2px, 2px);
-  box-shadow: none;
+  border-radius: 6px;
+  padding: 0.6rem;
+  background-color: white;
 }
 
 .checkbox-group {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
+  flex-direction: column; 
+  gap: 0.5rem;
   font-weight: bold;
 }
 
 .action-group {
+  gap: 0.5rem;
+  margin-top: 2rem;
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
+  flex-direction: column;
 }
 
 .delete-field-btn {
-  align-self: flex-end;
+  width: 100%;
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  font-weight: bold;
   background-color: #ff6b6b;
   box-shadow: 3px 3px 0px black;
-  transition:
-    transform 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
 .delete-field-btn:hover {
@@ -169,16 +149,13 @@ const deleteField = () => {
 }
 
 .save-field-btn {
-  align-self: flex-end;
+  width: 100%;
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  font-weight: bold;
   background-color: #2fff2f;
   box-shadow: 3px 3px 0px black;
-  transition:
-    transform 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
 .save-field-btn:hover {

frontend/src/components/modal/GlobalModal.vue

@@ -4,9 +4,11 @@
       <div class="modal">
         <div class="modal-header">
           <div class="modal-title">
-            <slot name="title">Modal Title</slot>
+            <div name="title">{{ modalTitle }}</div>
+          </div>
+          <div class="modal-actions" @click="close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
           </div>
-          <div class="modal-actions" @click="close">×</div>
         </div>
         <div class="modal-body">
           <component v-if="currentComponent" :is="currentComponent" v-bind="props" @close="close" />
@@ -21,7 +23,7 @@ import { storeToRefs } from "pinia"
 import { useModalStore } from "@/stores/useModalStore"
 
 const modalStore = useModalStore()
-const { isOpen, currentComponent, props } = storeToRefs(modalStore)
+const { modalTitle, isOpen, currentComponent, props } = storeToRefs(modalStore)
 
 function close() {
   modalStore.close()
@@ -43,51 +45,45 @@ function close() {
 }
 
 .modal {
+  font-family: sans-serif;
   border: 2px solid black;
   border-radius: 6px;
-  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
   overflow: hidden;
   background-color: white;
+  max-width: 350px;
+  width: 100%;
+  margin: 0 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 2px solid black;
-  width: 100%;
-  height: 32px;
+  background-color: #ffdb58;
+  padding: 0.75rem 1rem;
 }
 
 .modal-title {
   font-weight: bold;
-  background-color: #ffdb58;
-  width: 100%;
-  height: 100%;
+  flex-grow: 1;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 0 8px;
+  font-size: 1rem;
 }
 
 .modal-actions {
   cursor: pointer;
-  width: 32px;
-  height: 100%;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-left: 2px solid black;
-  font-size: 1.2rem;
-}
-
-.modal-actions:hover {
-  background-color: #f0f0f0;
 }
 
 .modal-body {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
+  background-color: #ffdb58;
+  overflow: hidden;
 }
 </style>

frontend/src/components/schema_editor/SchemaEditor.vue

@@ -45,7 +45,7 @@ import RenameNodeModal from "@/components/modal/RenameNodeModal.vue"
 import { useProjectStore } from "@/stores/store"
 import { VueFlow } from "@vue-flow/core"
 import { useModalStore } from "@/stores/useModalStore"
-import type { RelationalRelationField } from "@/types.types"
+import type { RelationalRelationField, RelationalField } from "@/types.types"
 
 const store = useProjectStore()
 const modalStore = useModalStore()
@@ -63,23 +63,23 @@ const deleteNode = (id: string) => {
 }
 
 const openRenameNodeModal = (id: string) => {
-  modalStore.open(RenameNodeModal, { id })
+  modalStore.open(id, RenameNodeModal, { id })
 }
 
 const openAddFieldModal = (id: string) => {
-  modalStore.open(AddFieldModal, { id })
+  modalStore.open(id, AddFieldModal, { id })
 }
 
-const openEditFieldModal = (id: string, field: object) => {
-  modalStore.open(EditFieldModal, { id, field })
+const openEditFieldModal = (id: string, field: RelationalField) => {
+  modalStore.open("Edit field", EditFieldModal, { id, field })
 }
 
 const openAddRelationModal = (id: string) => {
-  modalStore.open(AddRelationModal, { id })
+  modalStore.open(id, AddRelationModal, { id })
 }
 
 const openEditRelationModal = (id: string, relation: RelationalRelationField) => {
-  modalStore.open(EditRelationModal, { id, relation })
+  modalStore.open(relation.fieldName, EditRelationModal, { id, relation })
 }
 </script>
 

frontend/src/stores/store.ts

@@ -154,7 +154,7 @@ export const useProjectStore = defineStore("projectSpec", () => {
     fieldName: string,
   ) => {
     const node = findNodeById(source)
-    if (!node) return
+    if (!node) throw new Error(`Model does not exist: ${source}`)
     node.data.fields = node.data.fields.filter(
       (field) => field.name !== fieldName
     )
@@ -196,13 +196,12 @@ export const useProjectStore = defineStore("projectSpec", () => {
       (rel) => rel.fieldName === originalFieldName
     )
     node.data.relations[index] = relationData
-    if (originalTarget === relationData.targetModel) return;
 
-    const edgeId =  `(${source})-(${originalTarget})-(${originalFieldName})`
+    const edgeId = formatEdgeId(source, originalTarget, originalFieldName)
     const edge = getEdgeById(edgeId)
     if (!edge) return;
 
-    const newEdgeId = `(${source})-(${relationData.targetModel})-(${relationData.fieldName})`
+    const newEdgeId = formatEdgeId(source, relationData.targetModel, relationData.fieldName)
     edge.id = newEdgeId
     edge.source = source
     edge.target = relationData.targetModel
@@ -214,14 +213,18 @@ export const useProjectStore = defineStore("projectSpec", () => {
     return edges.value.find((edge) => edge.id === id)
   }
 
+  const formatEdgeId = (source: string, target: string, fieldName: string): string => {
+    return `(${source})-(${target})-(${fieldName})`
+  }
+
   const createEdge = (
     source: string, 
     target: string, 
     fieldName: string
   ): void => {
     if (source === target) return
     edges.value.push({
-      id: `(${source})-(${target})-(${fieldName})`,
+      id: formatEdgeId(source, target, fieldName),
       source,
       target,
     })
@@ -233,7 +236,7 @@ export const useProjectStore = defineStore("projectSpec", () => {
     fieldName: string
   ) => {
     edges.value = edges.value.filter(
-      (edge) => edge.id !== `(${source})-(${target})-(${fieldName})`
+      (edge) => edge.id !== formatEdgeId(source, target, fieldName)
     )
   }
 

frontend/src/stores/useModalStore.ts

@@ -3,23 +3,27 @@ import { ref, shallowRef, markRaw, type Component } from "vue"
 
 export const useModalStore = defineStore("modal", () => {
   const isOpen = ref(false)
+  const modalTitle = ref("")
   const currentComponent = shallowRef<Component | null>(null)
   const props = ref<Record<string, any>>({})
 
-  function open(component: Component, componentProps: Record<string, any> = {}) {
+  function open(title: string, component: Component, componentProps: Record<string, any> = {}) {
     currentComponent.value = markRaw(component)
     props.value = componentProps
+    modalTitle.value = title
     isOpen.value = true
   }
 
   function close() {
     isOpen.value = false
     currentComponent.value = null
     props.value = {}
+    modalTitle.value = ""
   }
 
   return {
     isOpen,
+    modalTitle,
     currentComponent,
     props,
     open,