From 958749d37fc2349739399ebbd6169871d81ee19f Mon Sep 17 00:00:00 2001 From: saintsebastian Date: Fri, 14 Jan 2022 16:16:46 +0100 Subject: [PATCH] feat: handle empty collections --- packages/editor-ui/src/api/templates.ts | 7 +++---- .../editor-ui/src/components/TemplateList.vue | 12 +++++++----- packages/editor-ui/src/modules/templates.ts | 2 +- packages/editor-ui/src/views/Templates.vue | 15 ++++++++++++--- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts index bc452cd13811d..21aa4daa47de2 100644 --- a/packages/editor-ui/src/api/templates.ts +++ b/packages/editor-ui/src/api/templates.ts @@ -18,12 +18,12 @@ export async function getTemplates( id name } - collections: searchCollection(rows: ${limit}, + collections: searchCollections(rows: ${limit}, skip: ${skip}, # search parameter in string,default: null search: "${search}", # array of category id eg: [1,2] ,default: null - category: ${queryCategory}) @include(if: ${allData}){ + category: ${queryCategory}){ id name nodes{ @@ -38,7 +38,7 @@ export async function getTemplates( totalViews: views } totalworkflow: getWorkflowCount(search: "${search}", category: ${queryCategory}) - workflows: searchWorkflow(rows: ${limit}, + workflows: searchWorkflows(rows: ${limit}, skip: ${skip}, # search parameter in string,default: null search: "${search}", @@ -62,6 +62,5 @@ export async function getTemplates( created_at } }`; - console.log(query); return await post(stagingHost, `/graphql`, { query }); } diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue index d441fd6c19474..1232bad540f60 100644 --- a/packages/editor-ui/src/components/TemplateList.vue +++ b/packages/editor-ui/src/components/TemplateList.vue @@ -93,14 +93,16 @@ export default mixins( .listWrapper { // recalc with vars - height: 450px; + // height: 450px; padding-top: 20px; .listContainer { - // recalc with vars - height: 450px; - padding-top: 20px; - overflow-y: scroll; + position: absolute; + // recalc with vars + height: calc(100% - 450px); + width: calc(100% - 340px); + margin-top: 20px; + overflow-y: scroll; .templateList { border-radius: var(--border-radius-large); diff --git a/packages/editor-ui/src/modules/templates.ts b/packages/editor-ui/src/modules/templates.ts index 443dbbb1dc26c..e3c57c2d2b27b 100644 --- a/packages/editor-ui/src/modules/templates.ts +++ b/packages/editor-ui/src/modules/templates.ts @@ -65,11 +65,11 @@ const module: Module = { }); context.commit('setCategories', categories); } - context.commit('setCollections', results.collections); if (skip) { context.commit('appendWorkflows', results.workflows); } else { context.commit('setWorkflows', results.workflows); + context.commit('setCollections', results.collections); } return results; } catch(e) { diff --git a/packages/editor-ui/src/views/Templates.vue b/packages/editor-ui/src/views/Templates.vue index faa3afb80d0d7..33e8b9a138d8e 100644 --- a/packages/editor-ui/src/views/Templates.vue +++ b/packages/editor-ui/src/views/Templates.vue @@ -82,6 +82,15 @@ export default mixins( }); } }, + async updated() { + const infiniteList = document.getElementById('infiniteList'); + const collections = await this.$store.getters['templates/getCollections']; + if (infiniteList) { + const calcHeight = collections.length ? 450 : 350; + + infiniteList.style.height =window.innerHeight - calcHeight + "px"; + } + }, methods: { async onSearchInput(value: string) { await this.doSearch(); @@ -148,18 +157,18 @@ export default mixins( display: flex; .filters { - width: 188px; + min-width: 188px; + margin-right: 24px; } .search { width: -webkit-calc(100% - 188px); width: -moz-calc(100% - 188px); width: calc(100% - 188px); - margin-left: 24px; display: flex column; .searchInput { - width: calc(100% - 80px); + width: 100%; } .searchResults {