update(Frontend V2): Rename store.ts > projectStore.ts (#97)

Author: mslaursen

frontend/src/assets/main.css

@@ -1,4 +1,4 @@
 body {
   font-family: "DM Sans", sans-serif;
   font-optical-sizing: auto;
-}
+}

frontend/src/components/StepWizard.vue

@@ -14,9 +14,7 @@
     </div>
 
     <div class="step-actions">
-      <button v-if="currentStep > 0" @click="currentStep--" class="btn prev-btn">
-        Previous
-      </button>
+      <button v-if="currentStep > 0" @click="currentStep--" class="btn prev-btn">Previous</button>
       <button v-if="currentStep < steps.length - 1" @click="nextStep" class="btn next-btn">
         Next
       </button>
@@ -55,7 +53,7 @@ const goToStep = (index) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%
+  height: 100%;
 }
 
 .step-indicators {
@@ -77,7 +75,9 @@ const goToStep = (index) => {
   cursor: pointer;
   border: 2px solid black;
   box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
-  transition: transform 0.1s ease-out, box-shadow 0.1s;
+  transition:
+    transform 0.1s ease-out,
+    box-shadow 0.1s;
 }
 
 .step:hover {
@@ -125,7 +125,9 @@ const goToStep = (index) => {
   border-radius: 4px;
   background-color: #f4f4f0;
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
-  transition: transform 0.1s ease-in-out, box-shadow 0.1s;
+  transition:
+    transform 0.1s ease-in-out,
+    box-shadow 0.1s;
   font-weight: bold;
 }
 

frontend/src/components/modal/AddFieldModal.vue

@@ -42,14 +42,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 
 const props = defineProps<{
   id: string
 }>()
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const fieldName = ref("")
@@ -62,7 +62,7 @@ const isIndex = ref(false)
 
 const saveField = () => {
   if (!fieldName.value || !type.value) return
-  store.addField(props.id, {
+  projectStore.addField(props.id, {
     name: fieldName.value,
     type: type.value,
     default: defaultValue.value || undefined,

frontend/src/components/modal/AddRelationModal.vue

@@ -43,14 +43,14 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 
 const props = defineProps<{
   id: string
 }>()
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const fieldName = ref("")
@@ -61,12 +61,12 @@ const nullable = ref(false)
 const unique = ref(false)
 const indexed = ref(false)
 
-const filteredNodes = computed(() => store.nodes.filter((node) => node.id !== props.id))
+const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id !== props.id))
 
 const saveSelect = () => {
   if (!selectedNodeId.value || !fieldName.value) return
 
-  store.addRelation(props.id, selectedNodeId.value, {
+  projectStore.addRelation(props.id, selectedNodeId.value, {
     fieldName: fieldName.value,
     targetModel: selectedNodeId.value,
     backPopulates: backPopulates.value,

frontend/src/components/modal/EditFieldModal.vue

@@ -23,8 +23,6 @@
         <label class="field-label">Default value</label>
         <input class="field-input" v-model="defaultValue" type="text" />
       </div>
-
-
     </div>
 
     <div class="checkbox-group">
@@ -43,7 +41,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { Field } from "@/types/types"
 
@@ -52,7 +50,7 @@ const props = defineProps<{
   field: Field
 }>()
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const fieldName = ref(props.field.name)
@@ -64,7 +62,7 @@ const isUnique = ref(props.field.isUnique || false)
 const isIndex = ref(props.field.isIndex || false)
 
 const saveField = () => {
-  store.updateField(props.id, props.field.name, {
+  projectStore.updateField(props.id, props.field.name, {
     name: fieldName.value,
     type: type.value,
     default: defaultValue.value || undefined,
@@ -77,7 +75,7 @@ const saveField = () => {
 }
 
 const deleteField = () => {
-  store.deleteField(props.id, props.field.name)
+  projectStore.deleteField(props.id, props.field.name)
   modalStore.close()
 }
 </script>
@@ -103,8 +101,6 @@ const deleteField = () => {
   gap: 0.15rem;
 }
 
-
-
 .field-label {
   font-weight: bold;
   margin-bottom: 5px;
@@ -120,7 +116,7 @@ const deleteField = () => {
 
 .checkbox-group {
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
   gap: 0.5rem;
   font-weight: bold;
 }
@@ -139,7 +135,9 @@ const deleteField = () => {
   border-radius: 4px;
   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 {
@@ -155,7 +153,9 @@ const deleteField = () => {
   border-radius: 4px;
   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/EditRelationModal.vue

@@ -46,7 +46,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { RelationalRelationField } from "@/types.types"
 
@@ -55,7 +55,7 @@ const props = defineProps<{
   relation: RelationalRelationField
 }>()
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const originalFieldName = ref("")
@@ -78,12 +78,12 @@ onMounted(() => {
   indexed.value = props.relation.isIndex || false
 })
 
-const filteredNodes = computed(() => store.nodes.filter((node) => node.id !== props.id))
+const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id !== props.id))
 
 const saveChanges = () => {
   if (!selectedNodeId.value || !fieldName.value) return
 
-  store.updateRelation(props.id, props.relation.targetModel, props.relation.fieldName, {
+  projectStore.updateRelation(props.id, props.relation.targetModel, props.relation.fieldName, {
     fieldName: fieldName.value,
     targetModel: selectedNodeId.value,
     backPopulates: backPopulates.value,
@@ -97,7 +97,7 @@ const saveChanges = () => {
 }
 
 const deleteRelation = () => {
-  store.deleteRelation(props.id, props.relation.targetModel, props.relation.fieldName)
+  projectStore.deleteRelation(props.id, props.relation.targetModel, props.relation.fieldName)
   modalStore.close()
 }
 </script>

frontend/src/components/modal/GlobalModal.vue

@@ -7,7 +7,21 @@
             <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>
+            <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>
         <div class="modal-body">

frontend/src/components/modal/RenameNodeModal.vue

@@ -11,14 +11,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 
 const props = defineProps<{
   id: string
 }>()
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const newNodeId = ref(props.id)
@@ -29,7 +29,7 @@ const rename = () => {
     return
   }
 
-  store.renameNode(props.id, newNodeId.value.trim())
+  projectStore.renameNode(props.id, newNodeId.value.trim())
   modalStore.close()
 }
 </script>

frontend/src/components/schema_editor/SchemaEditor.vue

@@ -8,11 +8,24 @@
       </div>
 
       <div class="vue-flow-viewport">
-        <VueFlow v-model:nodes="store.nodes" v-model:edges="store.edges">
+        <VueFlow v-model:nodes="projectStore.nodes" v-model:edges="projectStore.edges">
           <div class="create-wrapper">
             <div v-if="showInput" class="floating-create-expanded">
               <button class="collapse-btn" @click="showInput = false">
-                <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-chevron-left size-4 rdp-nav_icon"><path d="m15 18-6-6 6-6"></path></svg>
+                <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-chevron-left size-4 rdp-nav_icon"
+                >
+                  <path d="m15 18-6-6 6-6"></path>
+                </svg>
               </button>
               <input
                 class="create-model-input"
@@ -54,26 +67,26 @@ import EditFieldModal from "@/components/modal/EditFieldModal.vue"
 import EditRelationModal from "@/components/modal/EditRelationModal.vue"
 import AddRelationModal from "@/components/modal/AddRelationModal.vue"
 import RenameNodeModal from "@/components/modal/RenameNodeModal.vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 import { VueFlow } from "@vue-flow/core"
 import { useModalStore } from "@/stores/useModalStore"
 import type { RelationalRelationField, RelationalField } from "@/types.types"
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
 const modelName = ref("")
 const showInput = ref(false)
 
 const handleCreateClick = () => {
   if (modelName.value.trim() === "") return
-  store.createNode(modelName.value)
+  projectStore.createNode(modelName.value)
   modelName.value = ""
   showInput.value = false
 }
 
 const deleteNode = (id: string) => {
-  store.deleteNode(id)
+  projectStore.deleteNode(id)
 }
 
 const openRenameNodeModal = (id: string) => {
@@ -167,7 +180,9 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
   font-weight: bold;
   z-index: 10;
   box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
-  transition: transform 0.1s ease-out, box-shadow 0.1s;
+  transition:
+    transform 0.1s ease-out,
+    box-shadow 0.1s;
 }
 
 .create-circle:hover {
@@ -224,6 +239,4 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
 .create-model-btn:hover {
   background-color: #2fff2f;
 }
-
-
-</style>
+</style>

frontend/src/components/steps/DatabaseStep.vue

@@ -9,7 +9,7 @@
           v-for="db in databases"
           :key="db"
           :class="{
-            confirmed: store.getDatabase() === db,
+            confirmed: projectStore.getDatabase() === db,
             disabled: db !== 'PostgreSQL',
             enabled: db === 'PostgreSQL',
           }"
@@ -24,19 +24,19 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue"
-import { useProjectStore } from "@/stores/store"
+import { useProjectStore } from "@/stores/useProjectStore"
 
-const store = useProjectStore()
+const projectStore = useProjectStore()
 const databases = ["PostgreSQL", "MySQL", "SQLite"]
 
 const handleDatabaseClick = (db) => {
   if (db !== "PostgreSQL") return
-  store.setDatabase(store.getDatabase() === db ? "" : db)
+  projectStore.setDatabase(projectStore.getDatabase() === db ? "" : db)
 }
 
 onMounted(() => {
-  if (store.getDatabase() && store.getDatabase() !== "PostgreSQL") {
-    store.setDatabase("")
+  if (projectStore.getDatabase() && projectStore.getDatabase() !== "PostgreSQL") {
+    projectStore.setDatabase("")
   }
 })
 </script>