Community banner

web-app/packages/lib/src/common/components/AppSection.vue

@@ -12,12 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         : 'surface-section border-round-xl overflow-hidden'
     ]"
   >
-    <header
-      v-if="!!$slots.title"
-      class="flex justify-content-between align-items-center p-4"
-    >
-      <h2 class="text-sm text-color m-0"><slot name="title"></slot></h2>
-      <slot name="extra"></slot>
+    <header v-if="!!$slots.title" class="flex align-items-center p-4">
+      <h2 class="text-sm text-color"><slot name="title"></slot></h2>
     </header>
     <slot></slot>
   </section>

web-app/packages/lib/src/common/components/AppSectionBanner.vue

@@ -0,0 +1,72 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <section>
+    <PPanel
+      :toggleable="!!$slots.default"
+      :collapsed="true"
+      :pt="{
+        header(options) {
+          return {
+            class: [
+              'surface-section border-none p-4',
+              // Toggle border radius by open / closed panel
+              options.state.d_collapsed
+                ? 'border-round-xl'
+                : 'border-round-top-xl'
+            ]
+          }
+        },
+        content: {
+          class: 'border-none border-round-bottom-2xl p-4 pt-2'
+        }
+      }"
+    >
+      <template v-if="!$slots.header" #header>
+        <header
+          class="w-full flex flex-column lg:flex-row align-items-center justify-content-between row-gap-4"
+        >
+          <div
+            class="flex flex-column lg:flex-row align-items-center row-gap-2"
+          >
+            <div class="flex lg:mr-4">
+              <slot name="header-image"></slot>
+            </div>
+            <div class="flex flex-column gap-2 text-center lg:text-left">
+              <h3 class="text-color text-sm font-semibold m-0">
+                <slot name="title"></slot>
+              </h3>
+              <p class="text-xs m-0 opacity-80">
+                <slot name="description"></slot>
+              </p>
+            </div>
+          </div>
+          <slot name="header-actions"></slot>
+        </header>
+      </template>
+      <!-- Header without additional styles -->
+      <template v-else #header><slot name="header"></slot></template>
+      <slot></slot>
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer"></slot>
+      </template>
+      <template #icons>
+        <slot name="icons"></slot>
+      </template>
+      <template #togglericon="{ collapsed }">
+        <i
+          :class="[
+            'font-semibold text-color-forest ti',
+            collapsed ? 'ti-chevron-down' : 'ti-chevron-up'
+          ]"
+        ></i>
+      </template>
+    </PPanel>
+  </section>
+</template>
+
+<script lang="ts" setup></script>

web-app/packages/lib/src/modules/dashboard/components/DashboardProjectsRow.vue

@@ -9,15 +9,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <app-container>
     <app-section>
       <template #title>Recent active projects</template>
-      <template #default>
-        <projects-table-data-loader
-          :show-namespace="false"
-          :showFooter="false"
-          :public="false"
-          :can-create-project="canCreateProject"
-          :initialOptions="initialOptions"
-        />
-      </template>
+      <projects-table-data-loader
+        :show-namespace="false"
+        :showFooter="false"
+        :public="false"
+        :can-create-project="canCreateProject"
+        :initialOptions="initialOptions"
+      />
     </app-section>
   </app-container>
 </template>

web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue

@@ -8,12 +8,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <div>
     <slot name="usageInfo" />
     <slot name="content"></slot>
+    <community-banner />
     <dashboard-footer />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { DashboardFooter } from '@/modules/dashboard'
+import CommunityBanner from '@/modules/project/components/CommunityBanner.vue'
 </script>
 
 <style scoped lang="scss"></style>

web-app/packages/lib/src/modules/project/components/CommunityBanner.vue

@@ -0,0 +1,37 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <app-container>
+    <app-section-banner>
+      <template #header-image>
+        <img width="50" height="50" src="@/assets/globe.svg" />
+      </template>
+      <template #header-actions
+        ><PButton label="Browse community projects" @click.stop="click"
+      /></template>
+      <template #title>Community projects</template>
+      <template #description
+        >Explore various template projects within our community.</template
+      >
+    </app-section-banner>
+  </app-container>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+import { ProjectRouteName } from '../routes'
+
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppSectionBanner from '@/common/components/AppSectionBanner.vue'
+
+const router = useRouter()
+
+function click() {
+  router.push({ name: ProjectRouteName.ProjectsExplore })
+}
+</script>

web-app/packages/lib/src/modules/project/components/index.ts

@@ -23,3 +23,4 @@ export { default as UploadPanel } from './UploadPanel.vue'
 export { default as AccessRequestTableTemplate } from './AccessRequestTableTemplate.vue'
 export { default as FileDetailSidebar } from './FileDetailSidebar.vue'
 export { default as VersionDetailSidebar } from './VersionDetailSidebar.vue'
+export { default as CommunityBanner } from './CommunityBanner.vue'

web-app/packages/lib/src/modules/project/views/FileBrowserView.vue

@@ -353,7 +353,7 @@ export default defineComponent({
       return this.items.every((i) => this.selected.includes(i.path))
     },
     dataTableOpen() {
-      return (
+      return !!(
         this.searchFilter !== '' ||
         this.items.length ||
         (this.project && !this.project.permissions.upload) ||

web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue

@@ -5,68 +5,64 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <app-container>
-    <template v-if="!namespace">
-      <app-section ground class="pb-3">
-        <!-- Title with buttons -->
-        <header class="flex flex-column lg:flex-row lg:align-items-center">
-          <h1 class="text-3xl font-semibold">
-            {{ header }}
-          </h1>
-          <div
-            class="flex flex-grow-1 align-items-center lg:justify-content-end mb-4 lg:mb-0"
-          >
-            <PButton
-              v-if="canCreateProject && loggedUser && loggedUser.email"
-              @click="newProjectDialog"
-              data-cy="action-button-create"
-              class="w-auto mr-1"
+  <div>
+    <app-container>
+      <template v-if="!namespace">
+        <app-section ground class="pb-3">
+          <!-- Title with buttons -->
+          <header class="flex flex-column lg:flex-row lg:align-items-center">
+            <h1 class="text-3xl font-semibold">
+              {{ header }}
+            </h1>
+            <div
+              class="flex flex-grow-1 align-items-center lg:justify-content-end mb-4 lg:mb-0"
             >
-              Create project
-            </PButton>
-            <PButton
-              v-if="!onlyPublic && loggedUser && loggedUser.email"
-              severity="secondary"
-              @click="findPublicProjects"
-              data-cy="action-button-public-projects"
-              outlined
-              rounded
-              icon="ti ti-world text-xl"
-            />
+              <PButton
+                v-if="canCreateProject && loggedUser && loggedUser.email"
+                @click="newProjectDialog"
+                data-cy="action-button-create"
+                class="w-auto mr-1"
+              >
+                Create project
+              </PButton>
+            </div>
+          </header>
+          <!-- Filters -->
+          <div class="flex align-items-center justify-content-between">
+            <span class="p-input-icon-left flex-grow-1">
+              <i class="ti ti-search text-xl"></i>
+              <PInputText
+                placeholder="Search projects by name"
+                v-model="projectsStore.projectsSearch"
+                :pt="{ root: { class: 'border-round-xl w-full' } }"
+              />
+            </span>
+            <app-menu :items="filterMenuItems" />
           </div>
-        </header>
-        <!-- Filters -->
-        <div class="flex align-items-center justify-content-between">
-          <span class="p-input-icon-left flex-grow-1">
-            <i class="ti ti-search text-xl"></i>
-            <PInputText
-              placeholder="Search projects by name"
-              v-model="projectsStore.projectsSearch"
-              :pt="{ root: { class: 'border-round-xl w-full' } }"
-            />
-          </span>
-          <app-menu :items="filterMenuItems" />
-        </div>
-      </app-section>
-      <app-section>
-        <slot name="projects" :onlyPublic="onlyPublic"></slot>
-      </app-section>
-    </template>
-    <!-- TODO: Do not understand logic here :() -->
-    <AppSection v-else>
-      <span>
-        <b>Namespace not found</b><br />
-        Please check if address is written correctly
-      </span>
-    </AppSection>
-  </app-container>
+        </app-section>
+        <app-section>
+          <slot name="projects" :onlyPublic="onlyPublic"></slot>
+        </app-section>
+      </template>
+      <!-- TODO: Do not understand logic here :() -->
+      <AppSection v-else>
+        <span>
+          <b>Namespace not found</b><br />
+          Please check if address is written correctly
+        </span>
+      </AppSection>
+    </app-container>
+    <community-banner v-if="!onlyPublic && loggedUser && loggedUser.email" />
+  </div>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent, ref } from 'vue'
 
+import CommunityBanner from '../components/CommunityBanner.vue'
+
 import { AppContainer, AppSection } from '@/common'
 import AppMenu from '@/common/components/AppMenu.vue'
 import { useDialogStore, useProjectStore } from '@/modules'
@@ -76,7 +72,7 @@ import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'ProjectsListView',
-  components: { AppContainer, AppSection, AppMenu },
+  components: { AppContainer, AppSection, AppMenu, CommunityBanner },
   props: {
     namespace: String,
     canCreateProject: Boolean
@@ -138,11 +134,6 @@ export default defineComponent({
     ...mapActions(useDialogStore, ['show']),
     ...mapActions(useProjectStore, ['setProjectsSorting']),
 
-    findPublicProjects() {
-      this.$router.push({
-        name: 'explore'
-      })
-    },
     newProjectDialog() {
       const dialog = { persistent: true, header: 'New project' }
       this.show({