From e957d055cfdb010b3d221fa5806b0976756fd9ba Mon Sep 17 00:00:00 2001
From: Chris Searle <chris@chrissearle.org>
Date: Thu, 12 Sep 2024 09:42:33 +0200
Subject: [PATCH] Add remove filter. Lint and type-check

---
 .../java/conf/model/search/SessionResponse.kt |  1 +
 web/src/components/AggregateCard.vue          | 17 ++++++++-
 web/src/components/AggregateTotals.vue        | 35 +++++++++++++++----
 web/src/components/SessionItem.vue            |  2 +-
 web/src/types/aggregates.ts                   | 12 +++++--
 web/src/types/api.ts                          |  1 +
 web/src/views/AllVideosView.vue               | 16 ++-------
 web/src/views/SearchView.vue                  | 31 ++++++++++++++--
 8 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/src/main/kotlin/no/java/conf/model/search/SessionResponse.kt b/src/main/kotlin/no/java/conf/model/search/SessionResponse.kt
index c137056..1ed7a88 100644
--- a/src/main/kotlin/no/java/conf/model/search/SessionResponse.kt
+++ b/src/main/kotlin/no/java/conf/model/search/SessionResponse.kt
@@ -4,6 +4,7 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class SessionResponse(
+    val id: String,
     val title: String,
     val video: String?,
     val year: Int,
diff --git a/web/src/components/AggregateCard.vue b/web/src/components/AggregateCard.vue
index 1916b43..6e5ccdc 100644
--- a/web/src/components/AggregateCard.vue
+++ b/web/src/components/AggregateCard.vue
@@ -4,16 +4,22 @@ import type {AggregateCardRow} from "@/types/helpers";
 const props = defineProps<{
   title: string
   aggregate: AggregateCardRow[]
+  filter?: string
 }>()
 
 const emit = defineEmits<{
   filter: [value: string]
+  clear: []
 }>()
 
 const performFilter = (value: string) => {
   emit('filter', value)
 }
 
+const clearFilter = () => {
+  emit('clear')
+}
+
 </script>
 
 <template>
@@ -24,7 +30,16 @@ const performFilter = (value: string) => {
       </v-card-title>
     </v-card-item>
     <v-card-text>
-      <v-row v-for="row in props.aggregate" align="center" dense>
+      <v-row v-if="props.filter">
+        <v-col class="text-body-2">
+          <v-icon icon="far fa-window-close" @click="clearFilter()"/>
+          <div class="filter-link pl-2 d-inline-block" @click="clearFilter()">
+            {{ props.filter }}
+          </div>
+        </v-col>
+
+      </v-row>
+      <v-row v-else v-for="row in props.aggregate" :key="row.code" align="center" dense>
         <v-col class="text-body-2">
           <div class="filter-link" @click="performFilter(row.code)">{{ row.name }}</div>
         </v-col>
diff --git a/web/src/components/AggregateTotals.vue b/web/src/components/AggregateTotals.vue
index c8b6347..f54dd86 100644
--- a/web/src/components/AggregateTotals.vue
+++ b/web/src/components/AggregateTotals.vue
@@ -7,12 +7,16 @@ import type {AggregateCardRow} from "@/types/helpers";
 
 const props = defineProps<{
   aggregate: Aggregate
+  filteredYear?: number
+  filteredLanguage?: string
+  filteredFormat?: string
 }>()
 
 const emit = defineEmits<{
   filterYear: [year: number]
   filterFormat: [format: string]
   filterLanguage: [language: string]
+  clear: [filter: string]
 }>()
 
 const languageRow = computed(() => {
@@ -20,7 +24,7 @@ const languageRow = computed(() => {
         return {
           code: item.language,
           name: displayLanguage(item.language),
-          count: item.count
+          count: item.count,
         } as AggregateCardRow
       }
   )
@@ -31,7 +35,7 @@ const formatRow = computed(() => {
         return {
           code: item.format,
           name: displayFormat(item.format),
-          count: item.count
+          count: item.count,
         } as AggregateCardRow
       }
   )
@@ -42,7 +46,7 @@ const yearRow = computed(() => {
         return {
           code: item.year.toString(),
           name: item.year.toString(),
-          count: item.count
+          count: item.count,
         } as AggregateCardRow
       }
   )
@@ -64,12 +68,31 @@ const applyFilter = (filter: string, code: string) => {
     }
   }
 }
+
+const clearFilter = (filter: string) => {
+  emit('clear', filter)
+}
+
 </script>
 
 <template>
   <div v-if="props.aggregate">
-    <AggregateCard title="Languages" :aggregate="languageRow" @filter="applyFilter('LANGUAGE', $event)"/>
-    <AggregateCard title="Formats" :aggregate="formatRow" @filter="applyFilter('FORMAT', $event)"/>
-    <AggregateCard title="Years" :aggregate="yearRow" @filter="applyFilter('YEAR', $event)"/>
+    <AggregateCard title="Languages"
+                   :aggregate="languageRow"
+                   @filter="applyFilter('LANGUAGE', $event)"
+                   @clear="clearFilter('LANGUAGE')"
+                   :filter="displayLanguage(filteredLanguage)"/>
+
+    <AggregateCard title="Formats"
+                   :aggregate="formatRow"
+                   @filter="applyFilter('FORMAT', $event)"
+                   @clear="clearFilter('FORMAT')"
+                   :filter="displayFormat(filteredFormat)"/>
+
+    <AggregateCard title="Years"
+                   :aggregate="yearRow"
+                   @filter="applyFilter('YEAR', $event)"
+                   @clear="clearFilter('YEAR')"
+                   :filter="filteredYear?.toString()"/>
   </div>
 </template>
diff --git a/web/src/components/SessionItem.vue b/web/src/components/SessionItem.vue
index f273add..d614297 100644
--- a/web/src/components/SessionItem.vue
+++ b/web/src/components/SessionItem.vue
@@ -37,7 +37,7 @@ const props = defineProps<{
         <div class="text-h5">Speakers</div>
       </div>
 
-      <div v-for="speaker in props.session.speakers" class="mt-2 mb-2">
+      <div v-for="speaker in props.session.speakers" :key="speaker.name" class="mt-2 mb-2">
         <div class="text-h6">{{ speaker.name }}</div>
 
         <p v-if="speaker.bio">{{ speaker.bio }}</p>
diff --git a/web/src/types/aggregates.ts b/web/src/types/aggregates.ts
index ce92ffd..183d8bb 100644
--- a/web/src/types/aggregates.ts
+++ b/web/src/types/aggregates.ts
@@ -1,4 +1,8 @@
-export function displayLanguage(lang: string) {
+export function displayLanguage(lang?: string) {
+    if (lang === undefined) {
+        return undefined
+    }
+
     switch (lang) {
         case 'NO': {
             return "Norwegian";
@@ -12,7 +16,11 @@ export function displayLanguage(lang: string) {
     }
 }
 
-export function displayFormat(format: string) {
+export function displayFormat(format?: string) {
+    if (format === undefined) {
+        return undefined
+    }
+
     switch (format) {
         case 'PRESENTATION': {
             return "Presentation";
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
index f846d20..3f41bc3 100644
--- a/web/src/types/api.ts
+++ b/web/src/types/api.ts
@@ -11,6 +11,7 @@ export interface Speaker {
 }
 
 export interface Session {
+    id: string
     title: string
     video?: string
     year: number
diff --git a/web/src/views/AllVideosView.vue b/web/src/views/AllVideosView.vue
index 4ebcc1f..7e59eb4 100644
--- a/web/src/views/AllVideosView.vue
+++ b/web/src/views/AllVideosView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import type {Video} from "@/types/api";
 
 const data = ref<Video[]>([])
@@ -12,23 +12,13 @@ onMounted(() => {
       .then((response) => response.json())
       .then((res) => (data.value = res))
 })
-
-const items = computed(() => {
-  return data.value.map((video) => {
-    return {
-      title: video.title,
-      year: video.year,
-      link: video.video
-    }
-  })
-})
 </script>
 
 <template>
   <div class="text-h4 ma-3">All Videos</div>
 
-  <v-data-table :items="items" items-per-page="100">
-    <template v-slot:item.link="{ value }">
+  <v-data-table :items="data" items-per-page="100">
+    <template #[`item.video`]="{ value }">
       <v-btn>
         <a :href="value">
           <v-icon icon="fas fa-video"/>
diff --git a/web/src/views/SearchView.vue b/web/src/views/SearchView.vue
index 35f4ace..1319141 100644
--- a/web/src/views/SearchView.vue
+++ b/web/src/views/SearchView.vue
@@ -73,6 +73,25 @@ const filterLanguage = (language: string) => {
   performSearch()
 }
 
+const clearFilter = (filter: string) => {
+  switch (filter) {
+    case "LANGUAGE": {
+      filteredLanguage.value = undefined
+      break;
+    }
+    case "FORMAT": {
+      filteredFormat.value = undefined
+      break;
+    }
+    case "YEAR": {
+      filteredYear.value = undefined
+      break;
+    }
+  }
+
+  performSearch()
+}
+
 </script>
 
 <template>
@@ -106,13 +125,21 @@ const filterLanguage = (language: string) => {
       name="drawer"
       permanent
   >
-    <AggregateTotals v-if="data && data?.aggregateResponse" :aggregate="data?.aggregateResponse" @filterYear="filterYear" @filterFormat="filterFormat" @filterLanguage="filterLanguage"/>
+    <AggregateTotals v-if="data && data?.aggregateResponse"
+                     :aggregate="data?.aggregateResponse"
+                     @filterYear="filterYear"
+                     @filterFormat="filterFormat"
+                     @filterLanguage="filterLanguage"
+                     @clear="clearFilter"
+                     :filteredFormat="filteredFormat"
+                     :filteredLanguage="filteredLanguage"
+                     :filteredYear="filteredYear"/>
   </v-navigation-drawer>
 
 
   <div>
     <div class="d-flex flex-row flex-wrap justify-center">
-      <SessionItem v-for="session in data?.sessionsResponse" :session="session"/>
+      <SessionItem v-for="session in data?.sessionsResponse" :key="session.id" :session="session"/>
     </div>
   </div>
 </template>