i18n

next-ui/src/components/filter/by/AgeRating.vue

@@ -1,8 +1,20 @@
 <template>
   <FilterSelectRange
     v-model="model"
-    label-select="Age rating"
-    label-range="Age range"
+    :label-select="
+      $formatMessage({
+        description: 'Filter by age rating: select placeholder',
+        defaultMessage: 'Age rating',
+        id: 'KBLD9U',
+      })
+    "
+    :label-range="
+      $formatMessage({
+        description: 'Filter by age rating: range label',
+        defaultMessage: 'Age range',
+        id: '5zPpyT',
+      })
+    "
     :select-items="selectItems"
     :min="min"
     :max="max"

next-ui/src/components/filter/by/ReleaseYear.vue

@@ -1,8 +1,20 @@
 <template>
   <FilterSelectRange
     v-model="model"
-    label-select="Year"
-    label-range="Year range"
+    :label-select="
+      $formatMessage({
+        description: 'Filter by release year: select placeholder',
+        defaultMessage: 'Year',
+        id: 'tn7uib',
+      })
+    "
+    :label-range="
+      $formatMessage({
+        description: 'Filter by release year: select placeholder',
+        defaultMessage: 'Year rating',
+        id: 'S39lnB',
+      })
+    "
     :select-items="selectItems"
     :min="min"
     :max="max"

next-ui/src/pages/libraries/[id]/series.vue

@@ -46,7 +46,7 @@
     <v-list>
       <v-list-subheader>
         <div class="d-flex ga-2 align-center mb-1">
-          <span>FILTERS</span>
+          <span>{{ $formatMessage(commonMessages.filterPanelHeader) }}</span>
           <v-chip
             v-if="filterCount > 0"
             color="primary"
@@ -69,14 +69,14 @@
         tile
       >
         <FilterExpansionPanel
-          title="Read status"
+          :title="$formatMessage(commonMessages.filterPanelReadStatus)"
           :count="filterReadStatus.v.length"
           @clear="clearFilter(filterReadStatus)"
         >
           <FilterByReadStatus v-model="filterReadStatus.v" />
         </FilterExpansionPanel>
         <FilterExpansionPanel
-          title="Status"
+          :title="$formatMessage(commonMessages.filterPanelSeriesStatus)"
           :count="filterSeriesStatus.v.length"
           @clear="clearFilter(filterSeriesStatus)"
         >
@@ -84,7 +84,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Genre"
+          :title="$formatMessage(commonMessages.filterPanelGenre)"
           :count="filterGenre.v.length"
           @clear="clearFilter(filterGenre)"
         >
@@ -95,7 +95,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Tag"
+          :title="$formatMessage(commonMessages.filterPanelTag)"
           :count="filterTag.v.length"
           @clear="clearFilter(filterTag)"
         >
@@ -106,7 +106,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Publisher"
+          :title="$formatMessage(commonMessages.filterPanelPublisher)"
           :count="filterPublisher.v.length"
           @clear="clearFilter(filterPublisher)"
         >
@@ -117,7 +117,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Release year"
+          :title="$formatMessage(commonMessages.filterPanelReleaseYear)"
           :count="!!filterReleaseYear.is ? 1 : !!filterReleaseYear.min ? 1 : 0"
           @clear="clearFilterSelectRange(filterReleaseYear)"
         >
@@ -125,7 +125,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Age rating"
+          :title="$formatMessage(commonMessages.filterPanelAgeRating)"
           :count="!!filterAgeRating.is ? 1 : !!filterAgeRating.min ? 1 : 0"
           @clear="clearFilterSelectRange(filterAgeRating)"
         >
@@ -133,7 +133,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Language"
+          :title="$formatMessage(commonMessages.filterPanelLanguage)"
           :count="filterLanguage.v.length"
           @clear="clearFilter(filterLanguage)"
         >
@@ -144,7 +144,7 @@
         </FilterExpansionPanel>
 
         <FilterExpansionPanel
-          title="Sharing label"
+          :title="$formatMessage(commonMessages.filterPanelSharingLabel)"
           :count="filterSharingLabel.v.length"
           @clear="clearFilter(filterSharingLabel)"
         >
@@ -155,7 +155,11 @@
         </FilterExpansionPanel>
       </v-expansion-panels>
 
-      <v-divider><span class="text-body-medium text-medium-emphasis">Creators</span></v-divider>
+      <v-divider
+        ><span class="text-body-medium text-medium-emphasis">{{
+          $formatMessage(commonMessages.filterPanelCreators)
+        }}</span></v-divider
+      >
 
       <v-expansion-panels
         v-model="filterExpansionPanels"
@@ -181,11 +185,9 @@
 
       <v-divider />
 
-      <v-list-subheader>SORT</v-list-subheader>
+      <v-list-subheader>{{ $formatMessage(commonMessages.filterPanelSort) }}</v-list-subheader>
     </v-list>
   </TempDrawer>
-  <div>CONDITION</div>
-  <div>{{ conds }}</div>
 
   <template v-if="series">
     <v-data-iterator
@@ -283,6 +285,7 @@ import {
 import { useRouteQuerySchema } from '@/composables/useRouteQuerySchema'
 import { authorRoles } from '@/types/referential'
 import { useIntl } from 'vue-intl'
+import { commonMessages } from '@/utils/i18n/common-messages'
 
 const route = useRoute('/libraries/[id]/series')
 const libraryId = route.params.id
@@ -395,6 +398,9 @@ const conds = computed(() => ({
   ],
 }))
 
+// clear selection if filter changes
+watch(conds, () => selectionStore.clear())
+
 const { data: series } = useQuery(() =>
   seriesListQuery({
     search: {

next-ui/src/utils/i18n/common-messages.ts

@@ -52,4 +52,64 @@ export const commonMessages = {
       "By default the media server doesn't remove information for media right away. This helps if a drive is temporarily disconnected. When you empty the trash for a library, all information about missing media is deleted.",
     id: 'kDc7YL',
   }),
+  filterPanelHeader: defineMessage({
+    description: 'Filter panel header',
+    defaultMessage: 'FILTERS',
+    id: '0sIkhg',
+  }),
+  filterPanelCreators: defineMessage({
+    description: 'Filter panel sub-section: Creators',
+    defaultMessage: 'Creators',
+    id: 'WT63aY',
+  }),
+  filterPanelSort: defineMessage({
+    description: 'Filter panel sub-section: Sort',
+    defaultMessage: 'SORT',
+    id: 'I9L5Ag',
+  }),
+  filterPanelReadStatus: defineMessage({
+    description: 'Filter panel: Read status',
+    defaultMessage: 'Read status',
+    id: 'XRbUyd',
+  }),
+  filterPanelSeriesStatus: defineMessage({
+    description: 'Filter panel: Series status',
+    defaultMessage: 'Status',
+    id: 'Pp3+1S',
+  }),
+  filterPanelGenre: defineMessage({
+    description: 'Filter panel: Genre',
+    defaultMessage: 'Genre',
+    id: 'hBanlz',
+  }),
+  filterPanelTag: defineMessage({
+    description: 'Filter panel: Tag',
+    defaultMessage: 'Tag',
+    id: 'NwK2Kv',
+  }),
+  filterPanelPublisher: defineMessage({
+    description: 'Filter panel: Publisher',
+    defaultMessage: 'Publisher',
+    id: 'NruW40',
+  }),
+  filterPanelReleaseYear: defineMessage({
+    description: 'Filter panel: Release year',
+    defaultMessage: 'Release year',
+    id: 'xpBvz8',
+  }),
+  filterPanelAgeRating: defineMessage({
+    description: 'Filter panel: Age rating',
+    defaultMessage: 'Age rating',
+    id: '8P7Yn+',
+  }),
+  filterPanelLanguage: defineMessage({
+    description: 'Filter panel: Language',
+    defaultMessage: 'Language',
+    id: '3qQjnw',
+  }),
+  filterPanelSharingLabel: defineMessage({
+    description: 'Filter panel: Sharing label',
+    defaultMessage: 'Sharing label',
+    id: 'hGFogR',
+  }),
 }