Open some of tree view by default

jkocik · Mar 1, 2019 · bbf1ddb · bbf1ddb
1 parent 9a21eee
commit bbf1ddb
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 1 deletion.
diff --git a/src/components/dashboard/details/TabException.vue b/src/components/dashboard/details/TabException.vue
@@ -14,6 +14,7 @@
         <tree-view
             :data="tracker.exception.trace"
             label="trace"
+            :openFirstLevel="true"
         ></tree-view>
     </section>
 </template>

diff --git a/src/components/dashboard/details/TabHttpRequestSummary.vue b/src/components/dashboard/details/TabHttpRequestSummary.vue
@@ -25,6 +25,7 @@
         <tree-view
             :data="tracker.request.header"
             label="headers"
+            :openFirstLevel="true"
         ></tree-view>
     </section>
 </template>

diff --git a/src/components/dashboard/details/TabHttpResponseSummary.vue b/src/components/dashboard/details/TabHttpResponseSummary.vue
@@ -14,6 +14,7 @@
         <tree-view
             :data="tracker.response.headers"
             label="headers"
+            :openFirstLevel="true"
         ></tree-view>
     </section>
 </template>

diff --git a/src/components/dashboard/details/TabHttpSession.vue b/src/components/dashboard/details/TabHttpSession.vue
@@ -2,6 +2,7 @@
     <tree-view
         :data="tracker.session"
         label="session"
+        :openFirstLevel="true"
     ></tree-view>
 </template>
 

diff --git a/src/tree-view/components/TreeView.vue b/src/tree-view/components/TreeView.vue
@@ -3,6 +3,7 @@
         <span>{{ label }}</span> <span class="desc">({{ count() }})</span>
         <tree-view-single-level
             :data="data"
+            :open="openFirstLevel"
         ></tree-view-single-level>
     </section>
 </template>
@@ -18,6 +19,7 @@
         props: {
             data: [Array, Object],
             label: String,
+            openFirstLevel: Boolean,
         },
         methods: {
             count() {

diff --git a/src/tree-view/components/TreeViewSingleLevel.vue b/src/tree-view/components/TreeViewSingleLevel.vue
@@ -1,7 +1,7 @@
 <template>
     <ul>
         <li v-for="(key, index) of keys()" :key="index">
-            <span v-if="! hasValue(key)" :class="toggleableClass(key)" @click="toggle(key)">
+            <span v-if="! hasValue(key)" :class="toggleableClass(key)" @click="toggle(key)" ref="clickable">
                 <span :key="`${index}-right`" v-if="count(key) && ! opened[key]"><i class="fas fa-angle-right"></i></span>
                 <span :key="`${index}-down`" v-if="count(key) && opened[key]"><i class="fas fa-angle-down"></i></span>
                 {{ key }} <span class="desc">({{ descOf(key) }}: {{ count(key) }})</span>
@@ -22,6 +22,10 @@
         name: 'tree-view-single-level',
         props: {
             data: [Array, Object],
+            open: Boolean,
+        },
+        mounted() {
+            this.open && (this.$refs.clickable || []).forEach(el => el.click());
         },
         data() {
             return {

diff --git a/test/feature/specs/components/dashboard/details/TabException.spec.js b/test/feature/specs/components/dashboard/details/TabException.spec.js
@@ -28,5 +28,6 @@ describe('TabException Component', () => {
 
         expect(wrapperTreeView.props().data).to.deep.equal(tracker.exception.trace);
         expect(wrapperTreeView.props().label).to.equal('trace');
+        expect(wrapperTreeView.props().openFirstLevel).to.be.true;
     });
 });
diff --git a/test/feature/specs/components/dashboard/details/TabHttpRequestSummary.spec.js b/test/feature/specs/components/dashboard/details/TabHttpRequestSummary.spec.js
@@ -79,5 +79,6 @@ describe('TabHttpRequestSummary Component', () => {
 
         expect(wrapperTreeView.props().data).to.deep.equal(tracker.request.header);
         expect(wrapperTreeView.props().label).to.equal('headers');
+        expect(wrapperTreeView.props().openFirstLevel).to.be.true;
     });
 });
diff --git a/test/feature/specs/components/dashboard/details/TabHttpResponseSummary.spec.js b/test/feature/specs/components/dashboard/details/TabHttpResponseSummary.spec.js
@@ -24,5 +24,6 @@ describe('TabHttpResponseSummary Component', () => {
 
         expect(wrapperTreeView.props().data).to.deep.equal(tracker.response.headers);
         expect(wrapperTreeView.props().label).to.equal('headers');
+        expect(wrapperTreeView.props().openFirstLevel).to.be.true;
     });
 });
diff --git a/test/feature/specs/components/dashboard/details/TabHttpSession.spec.js b/test/feature/specs/components/dashboard/details/TabHttpSession.spec.js
@@ -16,5 +16,6 @@ describe('TabHttpSession Component', () => {
 
         expect(wrapperTreeView.props().data).to.deep.equal(tracker.session);
         expect(wrapperTreeView.props().label).to.equal('session');
+        expect(wrapperTreeView.props().openFirstLevel).to.be.true;
     });
 });
diff --git a/test/feature/specs/tree-view/TreeView.spec.js b/test/feature/specs/tree-view/TreeView.spec.js
@@ -92,4 +92,21 @@ describe('TreeView Component', () => {
         expect(li2.find('ul').text()).to.contain('a: 1');
         expect(li2.find('ul').text()).to.contain('b: 2');
     });
+
+    it('can have opened first level using props', async () => {
+        let wrapper = mount(TreeView, {
+            propsData: {
+                data: { x: { a: 1, b: 2 } },
+                openFirstLevel: true,
+            },
+        });
+
+        await wrapper.vm.$nextTick();
+        let li0 = wrapper.findAll('ul > li').at(0);
+
+        expect(li0.find('i').classes()).to.not.contain('fa-angle-right');
+        expect(li0.find('i').classes()).to.contain('fa-angle-down');
+        expect(li0.find('ul').text()).to.contain('a: 1');
+        expect(li0.find('ul').text()).to.contain('b: 2');
+    });
 });