extract side panel header to its own component

Juraci · Jul 22, 2024 · 53790e7 · 53790e7
1 parent b0bdd1f
commit 53790e7
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 85 deletions.
diff --git a/src/components/NodesArbor.vue b/src/components/NodesArbor.vue
@@ -8,28 +8,38 @@ const { nodesList } = storeToRefs(store);
 </script>
 
 <template>
-  <router-link
-    v-for="node in nodesList"
-    :key="node.uuid"
-    :to="`/nodes/${node.uuid}`"
-    style="text-decoration: none; color: inherit"
-  >
-    <Card data-test-node-item>
-      <template #title>
-        <div class="node-card-title">
-          {{ node.title }}
-        </div>
-      </template>
-      <template #content>
-        <div class="node-card-content">
-          {{ node.content }}
-        </div>
-      </template>
-    </Card>
-  </router-link>
+  <div class="side-panel-content">
+    <router-link
+      v-for="node in nodesList"
+      :key="node.uuid"
+      :to="`/nodes/${node.uuid}`"
+      style="text-decoration: none; color: inherit"
+    >
+      <Card data-test-node-item>
+        <template #title>
+          <div class="node-card-title">
+            {{ node.title }}
+          </div>
+        </template>
+        <template #content>
+          <div class="node-card-content">
+            {{ node.content }}
+          </div>
+        </template>
+      </Card>
+    </router-link>
+  </div>
 </template>
 
 <style>
+.side-panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  max-height: 94vh;
+  overflow: auto;
+}
 .node-card-title {
   white-space: nowrap;
   overflow: hidden;

diff --git a/src/components/SidePanelHeader.vue b/src/components/SidePanelHeader.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useNodeStore } from '@/stores/NodeStore';
+import { storeToRefs } from 'pinia';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import InputGroup from 'primevue/inputgroup';
+
+const { addNode } = useNodeStore();
+const { nodes, searchQuery } = storeToRefs(useNodeStore());
+
+const router = useRouter();
+
+const handleAddNode = () => {
+  const uuid = addNode();
+  router.push({ name: 'node.show', params: { uuid } });
+};
+
+const downloadNodesLink = computed(() => {
+  const jsonNodes = JSON.stringify(nodes.value);
+  const blob = new Blob([jsonNodes], { type: 'application/json' });
+
+  return URL.createObjectURL(blob);
+});
+</script>
+
+<template>
+  <div class="side-panel-header">
+    <InputGroup>
+      <InputText
+        v-model="searchQuery"
+        data-test-search-input
+        class="search-input"
+        placeholder="Search"
+        type="text"
+        @keydown.esc="searchQuery = ''"
+      />
+      <Button icon="pi pi-times" severity="secondary" @click="searchQuery = ''" />
+    </InputGroup>
+    <Button
+      icon="pi pi-save"
+      aria-label="Save"
+      severity="secondary"
+      as="a"
+      :href="downloadNodesLink"
+      :download="`solution-navigator-${new Date().toISOString()}.json`"
+    />
+    <Button
+      data-test-create-node
+      icon="pi pi-pen-to-square"
+      aria-label="Create Node"
+      severity="secondary"
+      @click="handleAddNode"
+    />
+  </div>
+</template>
+
+<style>
+.side-panel-header {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.3rem;
+}
+.search-input {
+  flex-grow: 1;
+}
+</style>
diff --git a/src/views/HomeIndex.vue b/src/views/HomeIndex.vue
@@ -1,26 +1,17 @@
 <script setup>
 import { ref, computed } from 'vue';
-import Button from 'primevue/button';
 import NodesArbor from '@/components/NodesArbor.vue';
+import SidePanelHeader from '@/components/SidePanelHeader.vue';
 import ConfirmDialog from 'primevue/confirmdialog';
-import InputText from 'primevue/inputtext';
-import InputGroup from 'primevue/inputgroup';
 import { useRouter, useRoute } from 'vue-router';
 import { useNodeStore } from '@/stores/NodeStore';
 import { useConfirm } from 'primevue/useconfirm';
-import { storeToRefs } from 'pinia';
 
 const router = useRouter();
 const route = useRoute();
 const isSidePanelVisible = ref(true);
-const { addNode, deleteNode } = useNodeStore();
+const { deleteNode } = useNodeStore();
 const confirm = useConfirm();
-const { nodes, searchQuery } = storeToRefs(useNodeStore());
-
-const handleAddNode = () => {
-  const uuid = addNode();
-  router.push({ name: 'node.show', params: { uuid } });
-};
 
 const deleteConfirmation = (nodeUuid) => {
   const accept = () => {
@@ -45,49 +36,13 @@ const gridTemplateColumns = computed(() => {
 const handleNodeNotFound = () => {
   router.push({ name: 'node.not-found' });
 };
-
-const downloadNodesLink = computed(() => {
-  const jsonNodes = JSON.stringify(nodes.value);
-  const blob = new Blob([jsonNodes], { type: 'application/json' });
-
-  return URL.createObjectURL(blob);
-});
 </script>
 
 <template>
   <div class="container" :style="{ 'grid-template-columns': gridTemplateColumns }">
     <div v-show="isSidePanelVisible" class="side-panel">
-      <div class="side-panel-header">
-        <InputGroup>
-          <InputText
-            v-model="searchQuery"
-            data-test-search-input
-            class="search-input"
-            placeholder="Search"
-            type="text"
-            @keydown.esc="searchQuery = ''"
-          />
-          <Button icon="pi pi-times" severity="secondary" @click="searchQuery = ''" />
-        </InputGroup>
-        <Button
-          icon="pi pi-save"
-          aria-label="Save"
-          severity="secondary"
-          as="a"
-          :href="downloadNodesLink"
-          :download="`solution-navigator-${new Date().toISOString()}.json`"
-        />
-        <Button
-          data-test-create-node
-          icon="pi pi-pen-to-square"
-          aria-label="Create Node"
-          severity="secondary"
-          @click="handleAddNode"
-        />
-      </div>
-      <div class="side-panel-content">
-        <NodesArbor />
-      </div>
+      <SidePanelHeader />
+      <NodesArbor />
     </div>
     <router-view
       ref="active-node"
@@ -103,27 +58,11 @@ const downloadNodesLink = computed(() => {
 <style>
 .container {
   display: grid;
-  grid-column-gap: 10px;
+  grid-column-gap: 0.5rem;
 }
 .side-panel {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.side-panel-header {
-  display: flex;
-  justify-content: flex-end;
-  gap: 5px;
-}
-.search-input {
-  flex-grow: 1;
-}
-.side-panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  height: 100%;
-  max-height: 94vh;
-  overflow: auto;
-}
 </style>