From 34ced1b0ec1e2a9450e21530818fdbfbe0a1e444 Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Wed, 14 Sep 2022 06:39:46 -0500
Subject: [PATCH] feat(configuration): add dynamic explore banner (#1588)

---
 src/components/dao/settings-design.vue | 22 ++++++++++++++++++++--
 src/pages/dho/Configuration.vue        | 12 ++++++++++--
 src/pages/dho/Explore.vue              |  6 +++---
 src/query/dao-active.gql               |  4 ++++
 src/store/dao/mutations.js             |  5 ++++-
 5 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/dao/settings-design.vue b/src/components/dao/settings-design.vue
index 53903daf6..d51aaf497 100644
--- a/src/components/dao/settings-design.vue
+++ b/src/components/dao/settings-design.vue
@@ -22,6 +22,11 @@ export default {
     isAdmin: {
       type: Boolean,
       default: false
+    },
+
+    isHypha: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -69,7 +74,20 @@ export default {
           title: 'organisationTitle',
           paragraph: 'organisationParagraph',
           state: ''
-        }
+        },
+        ...(this.isHypha
+          ? [
+              {
+                key: 'EXPLORE',
+                label: 'Explore',
+                image: 'exploreBackgroundImage',
+                title: 'exploreTitle',
+                paragraph: 'exploreParagraph',
+                state: ''
+              }
+            ]
+          : [])
+
       ],
 
       logoBase64: null,
@@ -678,7 +696,7 @@ ${backgroundImage
                                 color="accent"
                                 dense
                                 lazy-rules
-                                maxlength="140"
+                                maxlength="300"
                                 outlined
                                 placeholder="Max 140 characters"
                                 ref="nickname"
diff --git a/src/pages/dho/Configuration.vue b/src/pages/dho/Configuration.vue
index 4fa7b733a..2530754f1 100644
--- a/src/pages/dho/Configuration.vue
+++ b/src/pages/dho/Configuration.vue
@@ -60,7 +60,11 @@ const defaultSettings = {
 
   organisationBackgroundImage: '',
   organisationTitle: '',
-  organisationParagraph: ''
+  organisationParagraph: '',
+
+  exploreBackgroundImage: '',
+  exploreTitle: '',
+  exploreParagraph: ''
 
 }
 
@@ -139,7 +143,11 @@ export default {
 
         organisationBackgroundImage: this.daoSettings?.organisationBackgroundImage ? this.daoSettings?.organisationBackgroundImage : defaultSettings.organisationBackgroundImage,
         organisationTitle: this.daoSettings?.organisationTitle ? this.daoSettings?.organisationTitle : defaultSettings.organisationTitle,
-        organisationParagraph: this.daoSettings?.organisationParagraph ? this.daoSettings?.organisationParagraph : defaultSettings.organisationParagraph
+        organisationParagraph: this.daoSettings?.organisationParagraph ? this.daoSettings?.organisationParagraph : defaultSettings.organisationParagraph,
+
+        exploreBackgroundImage: this.daoSettings?.exploreBackgroundImage ? this.daoSettings?.exploreBackgroundImage : defaultSettings.exploreBackgroundImage,
+        exploreTitle: this.daoSettings?.exploreTitle ? this.daoSettings?.exploreTitle : defaultSettings.exploreTitle,
+        exploreParagraph: this.daoSettings?.exploreParagraph ? this.daoSettings?.exploreParagraph : defaultSettings.exploreParagraph
 
       }
 
diff --git a/src/pages/dho/Explore.vue b/src/pages/dho/Explore.vue
index 60697fcf8..0bfe6a193 100644
--- a/src/pages/dho/Explore.vue
+++ b/src/pages/dho/Explore.vue
@@ -65,9 +65,9 @@ export default {
 
     banner () {
       return {
-        title: 'Discover the Hypha DAO network',
-        description: 'Welcome to the global DAO directory! Click on any card to open the DAO and to take a look under the hood. You can learn more about them, apply as a member or simply take a look around.',
-        background: ipfsy(this.daoSettings.dashboardBackgroundImage),
+        title: this.daoSettings.exploreTitle || 'Discover the Hypha DAO network',
+        description: this.daoSettings.exploreParagraph || 'Welcome to the global DAO directory! Click on any card to open the DAO and to take a look under the hood. You can learn more about them, apply as a member or simply take a look around.',
+        background: ipfsy(this.daoSettings.exploreBackgroundImage),
         color: this.daoSettings.primaryColor,
         pattern: this.daoSettings.pattern,
         patternColor: this.daoSettings.patternColor,
diff --git a/src/query/dao-active.gql b/src/query/dao-active.gql
index b7947baa5..6fc7fcf1f 100644
--- a/src/query/dao-active.gql
+++ b/src/query/dao-active.gql
@@ -66,6 +66,10 @@ query activeDao($regexp: String!) {
       settings_organisationBackgroundImage_s
       settings_organisationTitle_s
       settings_organisationParagraph_s
+
+      settings_exploreBackgroundImage_s
+      settings_exploreTitle_s
+      settings_exploreParagraph_s
     }
   }
 }
diff --git a/src/store/dao/mutations.js b/src/store/dao/mutations.js
index 44233a051..4eb7ceb50 100644
--- a/src/store/dao/mutations.js
+++ b/src/store/dao/mutations.js
@@ -74,8 +74,11 @@ export const switchDao = (state, daos) => {
 
       organisationBackgroundImage: settings?.settings_organisationBackgroundImage_s,
       organisationTitle: settings?.settings_organisationTitle_s,
-      organisationParagraph: settings?.settings_organisationParagraph_s
+      organisationParagraph: settings?.settings_organisationParagraph_s,
 
+      exploreBackgroundImage: settings?.settings_exploreBackgroundImage_s,
+      exploreTitle: settings?.settings_exploreTitle_s,
+      exploreParagraph: settings?.settings_exploreParagraph_s
     }
   }
 }