feat: use new composable to sync store and URL query

ICIJ · Sep 11, 2024 · feea92c · feea92c
1 parent df51694
commit feea92c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/src/views/ProjectList.vue b/src/views/ProjectList.vue
@@ -5,16 +5,22 @@ import { computed, ref, onBeforeMount } from 'vue'
 
 import PageHeader from '@/components/PageHeader/PageHeader'
 import ProjectEntries from '@/components/Project/ProjectEntries/ProjectEntries'
+import { useUrlParam, useUrlParamWithStore, useUrlParamsWithStore } from '@/composables/url-params'
 import { useCore } from '@/composables/core'
 
 const { core } = useCore()
 
-const searchQuery = ref('')
+const searchQuery = useUrlParam('q', '')
 
-const page = ref(1)
+const page = useUrlParam('page', {
+  transform: (value) => parseInt(value),
+  initialValue: 1
+})
 
-const perPage = computed(() => {
-  return core?.store.getters['app/getSettings']('projectList', 'perPage')
+const perPage = useUrlParamWithStore('perPage', {
+  transform: (value) => parseInt(value),
+  get: () => core?.store.getters['app/getSettings']('projectList', 'perPage'),
+  set: (value) => core?.store.commit('app/setSettings', { view: 'projectList', perPage: parseInt(value) })
 })
 
 const documentsCountByProject = ref({})
@@ -84,22 +90,24 @@ const projects = computed(() => {
   return sortedProjects.value.slice(start, start + perPage.value)
 })
 
-const layout = computed(() => {
-  return core?.store.getters['app/getSettings']('projectList', 'layout')
+const layout = useUrlParamWithStore('layout', {
+  get: () => core?.store.getters['app/getSettings']('projectList', 'layout'),
+  set: (layout) => core?.store.commit('app/setSettings', { view: 'projectList', layout })
 })
 
-const orderBy = computed(() => {
-  return core?.store.getters['app/getSettings']('projectList', 'orderBy')
+const orderBy = useUrlParamsWithStore(['sort', 'order'], {
+  get: () => core?.store.getters['app/getSettings']('projectList', 'orderBy'),
+  set: (sort, order) => core?.store.commit('app/setSettings', { view: 'projectList', orderBy: [sort, order] })
 })
 
 const sort = computed({
   get: () => orderBy.value?.[0],
-  set: (value) => core?.store.commit('app/setSettings', { view: 'projectList', orderBy: [value, order.value] })
+  set: (value) => (orderBy.value = [value, order.value])
 })
 
 const order = computed({
   get: () => orderBy.value?.[1],
-  set: (value) => core?.store.commit('app/setSettings', { view: 'projectList', orderBy: [sort.value, value] })
+  set: (value) => (orderBy.value = [sort.value, value])
 })
 </script>
 

diff --git a/src/views/ProjectListSettings.vue b/src/views/ProjectListSettings.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { noop } from 'lodash'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { LAYOUTS } from '@/enums/layouts'
 import { useCore } from '@/composables/core'
+import { useUrlParamWithStore, useUrlParamsWithStore } from '@/composables/url-params'
 import PageSettings from '@/components/PageSettings/PageSettings'
 import PageSettingsSection from '@/components/PageSettings/PageSettingsSection'
 
@@ -13,7 +14,7 @@ const layout = ref({
   label: 'View',
   type: 'radio',
   open: true,
-  modelValue: computed({
+  modelValue: useUrlParamWithStore('layout', {
     get: () => core?.store.getters['app/getSettings']('projectList', 'layout'),
     set: (layout) => core?.store.commit('app/setSettings', { view: 'projectList', layout })
   }),
@@ -35,7 +36,7 @@ const perPage = ref({
   label: 'Projects per page',
   type: 'radio',
   open: true,
-  modelValue: computed({
+  modelValue: useUrlParamWithStore('perPage', {
     get: () => core?.store.getters['app/getSettings']('projectList', 'perPage'),
     set: (perPage) => core?.store.commit('app/setSettings', { view: 'projectList', perPage })
   }),
@@ -59,9 +60,9 @@ const sortBy = ref({
   label: 'Sort by',
   type: 'radio',
   open: true,
-  modelValue: computed({
+  modelValue: useUrlParamsWithStore(['sort', 'order'], {
     get: () => core?.store.getters['app/getSettings']('projectList', 'orderBy'),
-    set: (orderBy) => core?.store.commit('app/setSettings', { view: 'projectList', orderBy })
+    set: (sort, order) => core?.store.commit('app/setSettings', { view: 'projectList', orderBy: [sort, order] })
   }),
   options: [
     {
@@ -81,11 +82,11 @@ const sortBy = ref({
       text: 'Latest update (old)'
     },
     {
-      value: ['documentsCount', 'desc'],
+      value: ['documentsCount', 'asc'],
       text: 'Documents (increasing)'
     },
     {
-      value: ['documentsCount', 'asc'],
+      value: ['documentsCount', 'desc'],
       text: 'Documents (decreasing)'
     }
   ]