Merge pull request #3 from rfcx/feature/CE-1327-user-can-see-the-comparison-box-at-the-top-of-report

CE-1327 User can see the comparison box at the top of report

Author: Nutto55

CHANGELOG.md

@@ -4,3 +4,5 @@
 
 * **setup:** CE-1261 Setup biodiversity analytics project ([CE-1261](https://jira.rfcx.org/browse/CE-1261))
 * **setup:** CE-1297 Setup biodiversity analytics deployment ([CE-1297](https://jira.rfcx.org/browse/CE-1297))
+
+* **features:** CE-1327 User can see the comparison box at the top of report ([CE-1327](https://jira.rfcx.org/browse/CE-1327))

package-lock.json

@@ -8,6 +8,7 @@
     "build": "vue-tsc --project tsconfig.build.json --noEmit --skipLibCheck && vite build"
   },
   "dependencies": {
+    "dayjs": "^1.10.6",
     "node-sass": "^6.0.1",
     "sass-loader": "^12.1.0",
     "vue": "^3.0.5",

package.json

@@ -0,0 +1,37 @@
+import dayjs from 'dayjs'
+import { Vue } from 'vue-class-component'
+import { Emit } from 'vue-property-decorator'
+
+import { SpeciesRichnessFilter, Stream } from '@/models'
+
+const defaultAllStreams: Stream = { id: 'all', name: 'All sites' }
+const defaultFilter = new SpeciesRichnessFilter(dayjs().subtract(7, 'days'), dayjs(), [defaultAllStreams])
+
+export default class ComparisonBoxComponent extends Vue {
+  public filters: SpeciesRichnessFilter[] = [defaultFilter]
+
+  public addFilterConfig (): void {
+    this.filters.push(defaultFilter)
+  }
+
+  //  TODO: Have to improve this logic to check what is `all` meaning
+  public get isDefaultFilter (): boolean {
+    return this.filters.length === 1 && this.filters[0].streams[0].id === 'all'
+  }
+
+  public removeFilterConfig (idx: number): void {
+    this.filters.splice(idx, 1)
+    if (this.filters.length === 0) {
+      this.filters.push(defaultFilter)
+    }
+  }
+
+  public get showAddButton (): boolean {
+    return this.filters.length < 5
+  }
+
+  @Emit()
+  public select (): SpeciesRichnessFilter[] {
+    return this.filters
+  }
+}

src/components/comparison-list/comparison-list.ts

@@ -0,0 +1,42 @@
+<template>
+  <div class="overflow-x-auto">
+    <div class="flex flex-row flex-wrap">
+      <div
+        v-for="(filters, idx) in filters"
+        :key="'stream-card' + idx"
+        class="flex flex-col justify-center w-48 max-w-48 h-24 mr-4 mt-6 bg-clip-padding mirage-grey border-2 hover:bg-steel-grey cursor-pointer rounded-xl px-4 text-white text-sm"
+      >
+        <div class="flex flex-row">
+          <div
+            class="flex flex-row flex-1"
+            :title="filters.displayTitle"
+          >
+            <i class="icon-pin mr-2" /> <div class="truncate max-w-24">
+              {{ filters.displayTitle }}
+            </div>
+          </div>
+          <div
+            class="flex flex-col self-end"
+            :class="{ 'invisible': isDefaultFilter }"
+            @click="removeFilterConfig(idx)"
+          >
+            <i class="icon-close cursor-pointer" />
+          </div>
+        </div>
+        <div class="flex flex-row items-center mt-2">
+          <i class="icon-time mr-2" /> {{ filters.displayDate }}
+        </div>
+      </div>
+      <div
+        v-if="showAddButton"
+        class="flex flex-col justify-center items-center w-48 max-w-48 h-24 mt-6 bg-clip-padding mirage-grey hover:bg-steel-grey cursor-pointer border-2 border-dashed rounded-xl p-4 text-white text-sm"
+        @click="addFilterConfig"
+      >
+        <div class="uppercase">
+          + Add
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script src="./comparison-list.ts" lang="ts" />

src/components/comparison-list/comparison-list.vue

@@ -0,0 +1,25 @@
+import dayjs, { Dayjs } from 'dayjs'
+
+import { Stream } from './Stream'
+
+export class SpeciesRichnessFilter {
+  startDate: Dayjs= dayjs()
+  endDate: Dayjs = dayjs()
+  streams: Stream[] = []
+  color: string = ''
+
+  constructor (startDate = dayjs(), endDate = dayjs(), streams: Stream[] = [], color = '') {
+    this.startDate = startDate
+    this.endDate = endDate
+    this.streams = streams
+    this.color = color
+  }
+
+  get displayTitle (): string {
+    return this.streams.map(s => s.name).join(', ')
+  }
+
+  get displayDate (): string {
+    return `${this.startDate.format('MMM D')} - ${this.endDate.format('D, YYYY')}`
+  }
+}

src/models/Filter.ts

@@ -0,0 +1,8 @@
+
+// TODO: Update after connect to /stream endpoint
+export interface Stream {
+  id: string
+  name: string
+  latitude?: number
+  longitude?: number
+}

src/models/Stream.ts

@@ -0,0 +1,2 @@
+export * from './Filter'
+export * from './Stream'

src/models/index.ts

@@ -1,6 +1,6 @@
 <div id="root-page">
   <nav-bar />
-  <div>
+  <div class="max-w-screen-2xl mx-auto px-2 py-4 sm:px-6 lg:px-8">
     <router-view />
   </div>
 </div>

src/pages/root/root.html

@@ -1,3 +1,11 @@
 <div id="species-richness-page">
-  <div class="text-secondary">Species richness page</div>
+  <div class="header-container">
+    <div class="text-white text-4xl capitalize">
+      Species Richness
+    </div>
+    <div class="text-white">
+      Number of species found in the area
+    </div>
+  </div>
+  <comparison-list @select="onFilterChange" />
 </div>

src/pages/species-richness/species-richness.html

@@ -1,7 +1,15 @@
-import { Vue } from 'vue-class-component'
+import { Options, Vue } from 'vue-class-component'
 
+import ComparisonBoxComponent from '@/components/comparison-list/comparison-list.vue'
+import { SpeciesRichnessFilter } from '@/models'
+
+@Options({
+  components: {
+    'comparison-list': ComparisonBoxComponent
+  }
+})
 export default class SpeciesRichnessPage extends Vue {
-  mounted (): void {
-    console.log('Species')
+  onFilterChange (filters: SpeciesRichnessFilter[]): void {
+    //
   }
 }

src/pages/species-richness/species-richness.ts

@@ -8,6 +8,20 @@ import pluginIcons from '@windicss/plugin-icons'
 
 export default defineConfig({
   darkMode: false,
+  plugins: [
+    plugin(({ addComponents }) => {
+      const navbarItems = {
+        '.navbar-item.router-link-active': {
+          'box-shadow': 'inset 0 -3px 0 #31984f'
+        }
+      }
+      addComponents(navbarItems)
+    }),
+    pluginAspectRatio,
+    pluginForms,
+    pluginIcons,
+    pluginLineClamp
+  ],
   theme: {
     extend: {
       textColor: {
@@ -55,19 +69,5 @@ export default defineConfig({
     'btn-primary': 'bg-brand-primary hover:bg-brand-primary-dark',
     'btn-warning': 'bg-warning hover:bg-warning-dark',
     'btn-danger': 'bg-danger hover:bg-danger-dark'
-  },
-  plugins: [
-    plugin(({ addComponents }) => {
-      const navbarItems = {
-        '.navbar-item.router-link-active': {
-          'box-shadow': 'inset 0 -3px 0 #31984f'
-        }
-      }
-      addComponents(navbarItems)
-    }),
-    pluginAspectRatio,
-    pluginForms,
-    pluginIcons,
-    pluginLineClamp
-  ]
+  }
 })