Add remove filter. Lint and type-check

Author: chrissearle

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,

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>

web/src/components/AggregateTotals.vue

@@ -7,20 +7,24 @@ 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(() => {
   return props.aggregate.languages.map((item) => {
         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>

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>

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";

web/src/types/api.ts

@@ -11,6 +11,7 @@ export interface Speaker {
 }
 
 export interface Session {
+    id: string
     title: string
     video?: string
     year: number

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"/>

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>