@paris-ias/list 1.0.169 → 1.0.170

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.169",
+  "version": "1.0.170",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/events/View.vue

@@ -326,7 +326,7 @@ const props = defineProps({
   },
 })
 
-const panel = ref("presentation")
+const panel = ref(0)
 
 function redirectToMap(long, lat) {
   router.push(

package/dist/runtime/components/list/atoms/SortMenu.vue

@@ -6,6 +6,7 @@
           <template v-if="$stores[type].loading">
             <v-skeleton-loader type="button" :class="{ 'mt-3': isXsDisplay }" />
           </template>
+
           <template v-else>
             <v-btn
               x-large
@@ -16,40 +17,28 @@
               :class="{ 'mt-3': isXsDisplay }"
               v-bind="mergeProps(menu, tooltip)"
             >
-              <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
+              <v-icon>mdi-{{ currentSort?.icon || defaultSort?.icon }}</v-icon>
             </v-btn>
           </template>
         </template>
+
         <div
           v-html="
             $t('list.sort-mode') +
-            $t('list.' + (current?.text || defaultSort?.text))
+            $t('list.' + (currentSort?.text || defaultSort?.text))
           "
         />
       </v-tooltip>
     </template>
-    <v-list density="compact">
-      <!-- <template v-for="(item, index) in $stores[props.type].sort">
-        <v-list-item
-          v-if="item.text !== current.text"
-          :key="index"
-          :disabled="$stores[type].loading"
-          @click="updateSort(item.value)"
-        >
-          <template #prepend>
-            <v-icon>mdi-{{ item.icon }}</v-icon>
-          </template>
-          <v-list-item-title>{{ $t("list." + item.text) }}</v-list-item-title>
-        </v-list-item>
-      </template> -->
 
+    <v-list density="compact">
       <v-list-item
-        v-for="(item, index) in $stores[props.type].sort"
-        :key="index"
-        :disabled="$stores[type].loading || isActiveSort(item)"
-        :active="isActiveSort(item)"
+        v-for="(item, key) in $stores[type].sort"
+        :key="key"
+        :disabled="$stores[type].loading || isActiveSort(key)"
+        :active="isActiveSort(key)"
         active-class="bg-black text-white"
-        @click="updateSort(item.value)"
+        @click="onSelectSort(key)"
       >
         <template #prepend>
           <v-icon>mdi-{{ item.icon }}</v-icon>
@@ -62,59 +51,60 @@
 </template>
 
 <script setup>
+import { computed } from "vue"
 import { mergeProps } from "vue"
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../../stores/root"
-import { useNuxtApp, computed, ref, useI18n } from "#imports"
+import { useNuxtApp, useI18n } from "#imports"
+
 const { $stores } = useNuxtApp()
 const { xs: isXsDisplay } = useDisplay()
 const { locale } = useI18n()
 const rootStore = useRootStore()
 
 const props = defineProps({
-  type: {
-    type: String,
-    default: "articles",
-    required: true,
-  },
+  type: { type: String, default: "articles", required: true },
 })
-const items = ref()
-const defaultSort = ref(
-  $stores[props.type].sort[
-    Object.keys($stores[props.type].sort).find(
-      (item) => $stores[props.type].sort[item].default === true,
-    )
-  ],
-)
 
-const current = computed(() => {
-  try {
-    return $stores[props.type].sort[
-      Object.keys($stores[props.type].sort).find((item) => {
-        return (
-          $stores[props.type].sort[item].value[0] ===
-            $stores[props.type].sortBy[0] &&
-          $stores[props.type].sort[item].value[1] ===
-            $stores[props.type].sortDesc[0]
-        )
-      })
-    ]
-  } catch (error) {
-    console.log("error: ", error)
-    return items[Object.keys(items).find((item) => item.default)]
-  }
+const sortObj = computed(() => $stores[props.type]?.sort || {})
+
+const defaultSortKey = computed(() => {
+  const keys = Object.keys(sortObj.value)
+  return keys.find((k) => sortObj.value[k]?.default) || keys[0]
+})
+
+const activeSortKey = computed(() => {
+  const keys = Object.keys(sortObj.value)
+  return keys.find((k) => sortObj.value[k]?.active) || defaultSortKey.value
 })
 
-const updateSort = async (value) => {
-  rootStore.updateSort({ value, type: props.type, lang: locale.value })
+const defaultSort = computed(() =>
+  defaultSortKey.value ? sortObj.value[defaultSortKey.value] : undefined
+)
+
+const currentSort = computed(() =>
+  activeSortKey.value ? sortObj.value[activeSortKey.value] : defaultSort.value
+)
+
+const isActiveSort = (key) => activeSortKey.value === key
+
+const onSelectSort = async (key) => {
+  setActiveSort(key)
+
+  const item = sortObj.value[key]
+  if (!item?.value) return
+
+  rootStore.updateSort({
+    value: item.value,
+    type: props.type,
+    lang: locale.value,
+    sort: key,
+  })
 }
 
-const isActiveSort = (item) => {
-  return (
-    item?.value?.[0] === $stores[props.type].sortBy?.[0] &&
-    item?.value?.[1] === $stores[props.type].sortDesc?.[0]
-  )
+const setActiveSort = (activeKey) => {
+  for (const k of Object.keys(sortObj.value)) {
+    sortObj.value[k].active = k === activeKey
+  }
 }
 </script>
-
-<style lang="scss"></style>

package/dist/runtime/components/list/atoms/ViewMenu.vue

@@ -65,6 +65,7 @@ const items = computed(() => store.value?.views ?? {})
 
 const current = computed(() => store.value?.view ?? null)
 
+console.log("current", current.value)
 const defaultView = computed(() => {
   const views = store.value?.views ?? {}
   const key = Object.keys(views).find((k) => views[k]?.default === true)

package/dist/runtime/stores/root.d.ts

@@ -21,6 +21,7 @@ interface RootStoreState {
     numberOfPages: number;
     search: string;
     results: SearchResults;
+    sort: string;
 }
 export declare const useRootStore: import("pinia").StoreDefinition<"rootStore", RootStoreState, {}, {
     setLoading(value: boolean, type?: string): void;
@@ -29,10 +30,11 @@ export declare const useRootStore: import("pinia").StoreDefinition<"rootStore",
     setFiltersCount(type: string): void;
     updateRouteQuery(type: string): void;
     resetState(type: string, lang?: string): void;
-    updateSort({ value, type, }: {
+    updateSort({ value, type, lang, sortKey, }: {
         value: (number | string)[];
         type: string;
         lang?: string;
+        sort: string;
     }): void;
     updateView({ value, type, lang, }: {
         value: string;

package/dist/runtime/stores/root.js

@@ -22,7 +22,8 @@ export const useRootStore = defineStore("rootStore", {
       files: {},
       mailing: {},
       tags: {}
-    }
+    },
+    sort: ""
   }),
   actions: {
     setLoading(value, type = "") {
@@ -102,18 +103,17 @@ export const useRootStore = defineStore("rootStore", {
     },
     updateSort({
       value,
-      type
+      type,
+      lang,
+      sortKey
     }) {
       console.log("Z - updateSort", {
         value,
         type
       });
       const { $stores } = useNuxtApp();
-      if ($stores[type]) {
-        $stores[type].sortBy = [String(value[0])];
-        $stores[type].sortDesc = [Number(value[1])];
-      }
       this.page = 1;
+      this.sort = sort;
       $stores[type].loading = true;
       this.updateRouteQuery(type);
     },
@@ -204,9 +204,6 @@ export const useRootStore = defineStore("rootStore", {
     buildListVariables(type, lang = "en") {
       const { $stores } = useNuxtApp();
       const itemsPerPage = type === "all" ? 3 : $stores[type]?.itemsPerPage || 10;
-      const _viewName = $stores[type]?.view && $stores[type].view.name;
-      const _sortByName = $stores[type]?.sortBy && $stores[type].sortBy;
-      const _sortDescName = $stores[type]?.sortDesc && $stores[type].sortDesc;
       const filters = {};
       if (type !== "all") {
         const storeFilters = $stores[type]?.filters ?? {};
@@ -222,8 +219,7 @@ export const useRootStore = defineStore("rootStore", {
           options: {
             skip: +$stores[type]?.page === 1 ? 0 : (+$stores[type]?.page - 1) * itemsPerPage,
             limit: itemsPerPage,
-            sortBy: type === "all" ? "searchScore" : $stores[type]?.sortBy || ["created"],
-            sortDesc: type === "all" ? -1 : ($stores[type]?.sortDesc?.[0] || 0) > 0 ? true : false,
+            // sortBy: this.sort,
             ...this.search?.length && type !== "all" && { search: this.search },
             filters
           },

package/package.json

@@ -1,14 +1,14 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.169",
+  "version": "1.0.170",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",
     "type": "git"
   },
   "dependencies": {
-    "@paris-ias/trees": "^2.0.36"
+    "@paris-ias/trees": "^2.0.37"
   },
   "description": "Paris IAS List Module",
   "peerDependencies": {