better date range display and add default form button

Author: FrenchGithubUser

frontend/src/components/user-stats/SearchForm.vue

@@ -1,21 +1,57 @@
 <template>
   <div class="line">
-    <DatePicker v-model="dateRange" selectionMode="range" :manualInput="false" showIcon fluid :showOnFocus="false" @update:modelValue="fetchUserStats" />
+    <DatePicker
+      v-model="dateRange"
+      dateFormat="d M yy"
+      selectionMode="range"
+      :manualInput="false"
+      showIcon
+      fluid
+      :showOnFocus="false"
+      @update:modelValue="fetchUserStats"
+    />
     <Select v-model="selectedIndexer" :options="selectableIndexers" filter optionLabel="name" placeholder="Select an indexer" @change="fetchUserStats" />
   </div>
+  <div class="wrapper-center">
+    <MultiSelect
+      v-model="selectedValues"
+      :options="displayableValues"
+      @update:modelValue="(val) => emit('selectedValuesUpdated', val)"
+      filter
+      display="chip"
+      placeholder="Charts to display"
+    />
+  </div>
+  <div class="wrapper-center" style="margin-top: 5px">
+    <Button label="Set as default" size="small" @click="setDefaultForm" />
+  </div>
 </template>
 <script lang="ts" setup>
-import { getUserStats, type GetUserStatsQuery, type UserProfileVec } from '@/services/api/userStatsService'
-import { DatePicker, Select } from 'primevue'
+import { getUserStats, type GetUserStatsQuery, type UserProfileScrapedVec, type UserProfileVec } from '@/services/api/userStatsService'
+import { DatePicker, Select, MultiSelect, Button } from 'primevue'
 import { onMounted, ref } from 'vue'
-import { startOfWeek, endOfWeek } from 'date-fns'
+import { startOfMonth, endOfMonth } from 'date-fns'
 import { getIndexersEnriched, type IndexerEnriched } from '@/services/api/indexerService'
 import { showToast } from '@/main'
 
 const emit = defineEmits<{
   gotResults: [UserProfileVec]
+  selectedValuesUpdated: [(keyof UserProfileScrapedVec)[]]
 }>()
 
+const displayableValues = ref<(keyof UserProfileScrapedVec)[]>([
+  'downloaded',
+  'uploaded',
+  'bonus_points',
+  'leeching',
+  'seeding',
+  'ratio',
+  'uploaded_torrents',
+  'snatched',
+  'invited',
+  'torrent_comments',
+])
+const selectedValues = ref<(typeof displayableValues.value)[number][]>(['uploaded', 'downloaded'])
 const loading = ref(false)
 const selectableIndexers = ref<IndexerEnriched[]>([])
 const selectedIndexer = ref<IndexerEnriched>()
@@ -28,7 +64,7 @@ const form = ref<GetUserStatsQuery>({
 
 const setPresetRange = () => {
   const today = new Date()
-  dateRange.value = [startOfWeek(today), endOfWeek(today)]
+  dateRange.value = [startOfMonth(today), endOfMonth(today)]
 }
 const fetchUserStats = async () => {
   if (selectedIndexer.value) {
@@ -41,14 +77,30 @@ const fetchUserStats = async () => {
       .finally(() => (loading.value = false))
   }
 }
+const setDefaultForm = () => {
+  localStorage.setItem('defaultSelectedValues', JSON.stringify(selectedValues.value))
+  localStorage.setItem('defaultSelectedIndexer', JSON.stringify(selectedIndexer.value))
+  showToast('', 'Indexer and displayed values set as default', 'success', 3000)
+}
 onMounted(async () => {
   const indexers = await getIndexersEnriched(true)
   if (indexers.length === 0) {
     showToast('', 'No indexer with data available. Set them up in the settings', 'warn', 4000)
     return
   }
   selectableIndexers.value = indexers
-  selectedIndexer.value = selectableIndexers.value[0]
+  // load default form if it exists
+  const defaultSelectedValues = localStorage.getItem('defaultSelectedValues')
+  if (defaultSelectedValues) {
+    selectedValues.value = JSON.parse(defaultSelectedValues)
+    emit('selectedValuesUpdated', selectedValues.value)
+  }
+  const defaultSelectedIndexer = localStorage.getItem('defaultSelectedIndexer')
+  if (defaultSelectedIndexer) {
+    selectedIndexer.value = JSON.parse(defaultSelectedIndexer)
+  } else {
+    selectedIndexer.value = selectableIndexers.value[0]
+  }
   setPresetRange()
   await fetchUserStats()
 })

frontend/src/views/HomeView.vue

@@ -1,9 +1,6 @@
 <template>
   <main style="width: 100%">
-    <SearchForm @gotResults="gotResults" />
-    <div class="wrapper-center">
-      <MultiSelect v-model="selectedValues" :options="displayableValues" filter display="chip" placeholder="Charts to display" />
-    </div>
+    <SearchForm @gotResults="gotResults" @selectedValuesUpdated="(val) => (selectedValues = val)" />
     <IndexerStatsOverview v-if="userStats" :userStats :selectedValues style="margin-top: 40px" />
     <IndexerStatsGraphs v-if="userStats" :userStats :selectedValues style="margin-top: 40px" />
   </main>
@@ -12,24 +9,11 @@
 import IndexerStatsGraphs from '@/components/user-stats/IndexerStatsGraphs.vue'
 import IndexerStatsOverview from '@/components/user-stats/IndexerStatsOverview.vue'
 import SearchForm from '@/components/user-stats/SearchForm.vue'
-import { MultiSelect } from 'primevue'
 import type { UserProfileScrapedVec, UserProfileVec } from '@/services/api/userStatsService'
 import { ref } from 'vue'
 
 const userStats = ref<UserProfileVec>()
-const displayableValues = ref<(keyof UserProfileScrapedVec)[]>([
-  'downloaded',
-  'uploaded',
-  'bonus_points',
-  'leeching',
-  'seeding',
-  'ratio',
-  'uploaded_torrents',
-  'snatched',
-  'invited',
-  'torrent_comments',
-])
-const selectedValues = ref<(typeof displayableValues.value)[number][]>(['uploaded', 'downloaded'])
+const selectedValues = ref<(keyof UserProfileScrapedVec)[]>(['uploaded', 'downloaded'])
 
 const gotResults = (stats: UserProfileVec) => {
   userStats.value = stats