create SidebarGroup component

piccolo-orm · Oct 16, 2024 · 01764d0 · 01764d0
1 parent 2b1341d
commit 01764d0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 53 deletions.
diff --git a/admin_ui/src/components/FormNav.vue b/admin_ui/src/components/FormNav.vue
@@ -4,29 +4,19 @@
             <li v-for="form in formGroups.ungrouped" v-bind:key="form">
                 <router-link
                     :to="{ name: 'addForm', params: { formSlug: form.slug } }"
+                    :title="form.description"
                     class="subtle"
                     ><font-awesome-icon icon="level-up-alt" class="rotated90" />
                     <span>{{ form.name }}</span></router-link
                 >
             </li>
 
             <template v-for="(formNames, groupName) in formGroups.grouped">
-                <li class="group">
-                    <a
-                        href="#"
-                        class="subtle"
-                        @click.prevent="toggleGroup(String(groupName))"
-                        title="Click to toggle children."
-                    >
-                        <font-awesome-icon icon="layer-group" />
-                        <span class="name">{{ groupName }}</span>
-                        <span
-                            class="ellipsis"
-                            v-if="hiddenGroups.indexOf(String(groupName)) != -1"
-                            >...</span
-                        >
-                    </a>
-                </li>
+                <SidebarGroup
+                    :name="String(groupName)"
+                    :collapsed="hiddenGroups.indexOf(String(groupName)) != -1"
+                    @toggled="toggleGroup(String(groupName))"
+                />
 
                 <template v-if="hiddenGroups.indexOf(String(groupName)) == -1">
                     <li v-for="form in formNames" v-bind:key="form">
@@ -35,6 +25,7 @@
                                 name: 'addForm',
                                 params: { formSlug: form.slug }
                             }"
+                            :title="form.description"
                             class="subtle"
                             ><font-awesome-icon
                                 icon="level-up-alt"
@@ -51,8 +42,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue"
+import SidebarGroup from "./SidebarGroup.vue"
 
 export default defineComponent({
+    components: { SidebarGroup },
     data() {
         return {
             hiddenGroups: [] as string[]

diff --git a/admin_ui/src/components/SidebarGroup.vue b/admin_ui/src/components/SidebarGroup.vue
@@ -0,0 +1,52 @@
+<template>
+    <li class="group">
+        <a
+            href="#"
+            class="subtle"
+            @click.prevent="$emit('toggled')"
+            title="Click to toggle children."
+        >
+            <font-awesome-icon icon="layer-group" />
+            <span class="name">{{ name }}</span>
+            <span class="ellipsis" v-if="collapsed">...</span>
+        </a>
+    </li>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from "vue"
+
+defineProps({
+    name: {
+        type: String as PropType<string>,
+        required: true
+    },
+    collapsed: {
+        type: Boolean as PropType<boolean>,
+        required: true
+    }
+})
+
+defineEmits(["toggled"])
+</script>
+
+<style scoped lang="less">
+li.group {
+    font-size: 0.7em;
+
+    a {
+        text-transform: uppercase;
+
+        span {
+            &.name {
+                padding-left: 0;
+            }
+
+            &.ellipsis {
+                flex-grow: 1;
+                text-align: right;
+            }
+        }
+    }
+}
+</style>
diff --git a/admin_ui/src/components/TableNav.vue b/admin_ui/src/components/TableNav.vue
@@ -8,22 +8,11 @@
             />
 
             <template v-for="(tableNames, groupName) in tableGroups.grouped">
-                <li class="group">
-                    <a
-                        href="#"
-                        class="subtle"
-                        @click.prevent="toggleGroup(String(groupName))"
-                        title="Click to toggle children."
-                    >
-                        <font-awesome-icon icon="layer-group" />
-                        <span class="name">{{ groupName }}</span>
-                        <span
-                            class="ellipsis"
-                            v-if="hiddenGroups.indexOf(String(groupName)) != -1"
-                            >...</span
-                        >
-                    </a>
-                </li>
+                <SidebarGroup
+                    :collapsed="hiddenGroups.indexOf(String(groupName)) != -1"
+                    :name="String(groupName)"
+                    @toggled="toggleGroup(String(groupName))"
+                />
 
                 <template v-if="hiddenGroups.indexOf(String(groupName)) == -1">
                     <TableNavItem
@@ -39,10 +28,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue"
+import SidebarGroup from "./SidebarGroup.vue"
 import TableNavItem from "./TableNavItem.vue"
 
 export default defineComponent({
     components: {
+        SidebarGroup,
         TableNavItem
     },
     data() {
@@ -75,24 +66,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style scoped lang="less">
-li.group {
-    font-size: 0.7em;
-
-    a {
-        text-transform: uppercase;
-
-        span {
-            &.name {
-                padding-left: 0;
-            }
-
-            &.ellipsis {
-                flex-grow: 1;
-                text-align: right;
-            }
-        }
-    }
-}
-</style>