@paris-ias/list 1.0.111 → 1.0.113

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

@@ -0,0 +1,80 @@
+<template>
+  <v-menu>
+    <template #activator="{ props: menu }">
+      <v-tooltip location="top">
+        <template #activator="{ props: tooltip }">
+          <v-btn
+            x-large
+            outlined
+            tile
+            flat
+            icon
+            :class="{
+              'mt-3': isXsDisplay,
+            }"
+            v-bind="mergeProps(menu, tooltip)"
+          >
+            <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
+          </v-btn>
+        </template>
+        <div
+          v-html="
+            $t('list.sort-mode') +
+            $t('list.' + current.text || defaultSort.text)
+          "
+        />
+      </v-tooltip>
+    </template>
+    <v-list density="compact">
+      <template v-for="(item, index) in items">
+        <v-list-item
+          v-if="item.text !== current.text"
+          :key="index"
+          @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>
+  </v-menu>
+</template>
+
+<script setup>
+import { mergeProps } from "vue";
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, computed, ref, 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
+  }
+});
+const items = ref($stores[props.type].sort);
+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 updateSort = async (value) => {
+  await rootStore.updateSort({ value, type: props.type, lang: locale.value });
+};
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <v-menu>
+    <template #activator="{ props: menu }">
+      <v-tooltip location="top">
+        <template #activator="{ props: tooltip }">
+          <v-btn
+            x-large
+            tile
+            flat
+            :icon="'mdi-' + current?.icon || defaultView?.icon"
+            :class="{
+              'mt-3': isXsDisplay,
+            }"
+            v-bind="mergeProps(menu, tooltip)"
+          />
+        </template>
+        <div
+          v-html="
+            $t('list.view-mode') +
+            $t('list.' + current.name || defaultView.name)
+          "
+        />
+      </v-tooltip>
+    </template>
+    <v-list density="compact">
+      <v-list-item
+        v-for="(value, key, index) in items"
+        :key="index"
+        @click="updateView(value.name || key)"
+      >
+        <template #prepend>
+          <v-icon>mdi-{{ value.icon }}</v-icon>
+        </template>
+        <v-list-item-title>
+          {{ $t("list." + (value.name || key)) }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+import { mergeProps } from "vue";
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, ref, useI18n } from "#imports";
+const { locale } = useI18n();
+const { $stores } = useNuxtApp();
+const props = defineProps({
+  type: {
+    type: String,
+    default: "articles",
+    required: true
+  }
+});
+const { xs: isXsDisplay } = useDisplay();
+const rootStore = useRootStore();
+const items = ref($stores[props.type].views);
+const current = ref($stores[props.type].view);
+const updateView = async (value) => {
+  await rootStore.updateView({ value, type: props.type, lang: locale.value });
+};
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="perpage-select" :class="smAndDown ? 'text-center' : ''">
+    <span class="grey--text pr-3" :class="{ 'ml-6': !scrolled }">{{
+      $t("items-per-page")
+    }}</span>
+  </div>
+  <v-select
+    v-model="itemsPerPage"
+    class="perPageSelect"
+    density="compact"
+    variant="outlined"
+    :items="itemsPerPageArray"
+    hide-details
+  />
+</template>
+
+<script setup>
+import { useNuxtApp } from "#imports";
+import { useDisplay } from "vuetify";
+import { computed, ref } from "vue";
+const { smAndDown } = useDisplay();
+const { $stores } = useNuxtApp();
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: ""
+  }
+});
+const itemsPerPage = ref($stores[props.type].itemsPerPage);
+const itemsPerPageArray = computed(() => $stores[props.type].itemsPerPageArray);
+const scrolled = computed(() => $stores.scrolled);
+</script>

package/dist/runtime/runtime/components/list/inputs/AutoComplete.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-autocomplete
+    v-model="val"
+    :items="props.items"
+    :multiple="$stores[type].filters[name]?.multiple || false"
+  />
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const { $stores } = useNuxtApp();
+const props = defineProps(["type", "items", "name"]);
+const val = computed({
+  get() {
+    return $stores[props.type].filters[props.name]?.value || [];
+  },
+  set(value) {
+    return rootStore.updateFilter(props.name, value, props.type, locale.value);
+  }
+});
+</script>

package/dist/runtime/runtime/components/list/inputs/BooleanSwitch.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-switch v-model="val" />
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps(["type", "items", "name"]);
+const { $stores } = useNuxtApp();
+const val = computed({
+  get() {
+    return $stores[props.type].filters[props.name]?.value;
+  },
+  set(value) {
+    rootStore.updateFilter(props.name, value, props.type, locale.value);
+  }
+});
+</script>

package/dist/runtime/runtime/components/list/inputs/Checkbox.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-checkbox v-model="val" />
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps(["type", "items", "name"]);
+const { $stores } = useNuxtApp();
+const val = computed({
+  get() {
+    return $stores[props.type].filters[props.name]?.value;
+  },
+  set(value) {
+    rootStore.updateFilter(props.name, value, props.type, locale.value);
+  }
+});
+</script>

package/dist/runtime/runtime/components/list/inputs/Select.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-select
+    v-model="val"
+    :items="props.items"
+    :multiple="$stores[type].filters[name]?.multiple || false"
+  />
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useNuxtApp, computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const { $stores } = useNuxtApp();
+const props = defineProps(["type", "items", "name"]);
+const val = computed({
+  get() {
+    console.log(
+      "$stores[props.type].filters[props.name]?.value: ",
+      $stores[props.type].filters[props.name]?.value
+    );
+    return $stores[props.type].filters[props.name]?.value || [];
+  },
+  set(value) {
+    rootStore.updateFilter(props.name, value, props.type, locale.value || "en");
+  }
+});
+</script>

package/dist/runtime/runtime/components/list/molecules/Filters.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-row>
+    <template v-for="filterItem in Object.keys($stores[type].filters)">
+      <v-col
+        v-if="computeVisibility(filterItem)"
+        :key="type + filterItem"
+        cols="12"
+        sm="6"
+        md="4"
+      >
+        <component
+          :is="ComponentName(filterItem)"
+          tile
+          :name="filterItem"
+          hide-details
+          :filter="true"
+          :dense="smAndDown"
+          :items="getItems(filterItem)"
+          clearable
+          :label="$t('list.filters.' + type + '.' + filterItem + '.label')"
+          min-height="56"
+          variant="outlined"
+          :loading="$stores[type].loading"
+          :type="type"
+          color="black"
+          style="min-width: 150px"
+          class="transition-swing pb-1"
+        />
+        <!--    <template
+      v-else
+      v-for="filterItem in Object.keys(rootStore[type].list.filters).slice()"
+    >
+      <div v-if="computeVisibility(filterItem)">
+        {{ filterItem }}
+      </div>
+    </template> -->
+      </v-col>
+    </template>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../../stores/root";
+import { capitalize } from "../../../composables/useUtils";
+import { useNuxtApp, onMounted, resolveComponent, useI18n } from "#imports";
+const { smAndDown } = useDisplay();
+const i18n = useI18n();
+const { locale, messages } = useI18n();
+const { $stores, $filters } = useNuxtApp();
+const rootStore = useRootStore();
+const props = defineProps(["type", "expanded"]);
+const ComponentName = (name) => {
+  return resolveComponent(
+    "ListInputs" + capitalize($stores[props.type].filters[name].type)
+  );
+};
+const getItems = (name) => {
+  if ($stores[props.type].filters[name].type === "Checkbox") {
+    return [];
+  }
+  if ($filters?.[props.type]?.[name]) {
+    console.log("filters found for ", name, $filters[props.type][name]);
+    return $filters[props.type][name].filter((key) => key !== "label").map((item) => ({
+      title: i18n.t(
+        props.type === "people" && name === "vintage" ? item : `list.filters.${props.type}.${name}.${item}`
+      ),
+      value: item
+    }));
+  }
+  if (messages.value[locale.value].list.filters[props.type][name] === void 0) {
+    console.log("name not found, no item for this filmter: ", name);
+    return [];
+  }
+  return Object.keys(
+    messages.value[locale.value].list.filters[props.type][name]
+  ).filter((key) => key !== "label").map((item) => ({
+    title: i18n.t(`list.filters.${props.type}.${name}.${item}`),
+    value: item
+  }));
+};
+onMounted(() => {
+  rootStore.loadRouteQuery(props.type);
+});
+const computeVisibility = (filterItem) => {
+  return (
+    // if anything is set in the visibility key
+    !$stores[props.type].filters[filterItem].visibility || $stores[props.type].filters[filterItem].visibility?.default || $stores[props.type].filters[filterItem].visibility?.switchIf.find(
+      // for each of the rules set in the switchIf key
+      (rule) => {
+        return Object.keys(rule).find((value, index, obj) => {
+          return $stores[props.type].filters[value].multiple ? $stores[props.type].filters[value]?.value && $stores[props.type].filters[value]?.value.includes(rule[value]) : $stores[props.type].filters[value]?.value === rule[value];
+        });
+      }
+    )
+  );
+};
+</script>

package/dist/runtime/runtime/components/list/molecules/GlobalSearchInput.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="d-flex flex-grow-1 flex-column">
+    <div class="d-flex align-center">
+      <v-text-field
+        v-model.trim="search"
+        :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
+        prepend-inner-icon="mdi-magnify"
+        single-line
+        class="transition-swing flex-grow-1"
+        variant="outlined"
+        hide-details
+        clearable
+        tile
+        type="search"
+        :loading="rootStore.loading"
+      >
+        <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
+        $store.state.scrolled }" -->
+        <template v-if="!search" #label>
+          <div class="searchLabel">
+            {{
+              type === "all"
+                ? $t("search")
+                : $t("list.search-type", [$t("items." + type, 2)])
+            }}
+          </div>
+        </template>
+      </v-text-field>
+
+      <v-menu
+        v-model="filterMenuOpen"
+        :close-on-content-click="false"
+        location="bottom end"
+        offset="4"
+      >
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            v-bind="menuProps"
+            :rounded="0"
+            variant="outlined"
+            size="large"
+            height="56"
+          >
+            <v-icon>mdi-filter</v-icon>
+            <v-icon class="ml-1" size="small">
+              {{ filterMenuOpen ? "mdi-chevron-up" : "mdi-chevron-down" }}
+            </v-icon>
+          </v-btn>
+        </template>
+
+        <v-card min-width="200">
+          <v-list density="compact">
+            <v-list-item
+              v-for="option in filterOptions"
+              :key="option.value"
+              @click="toggleFilter(option)"
+            >
+              <template #prepend>
+                <v-checkbox
+                  hide-details
+                  :model-value="categories.includes(option.value)"
+                  @update:model-value="toggleFilter(option)"
+                />
+              </template>
+              <v-list-item-title>{{ option.label }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useDebounceFn } from "@vueuse/core";
+import { useRootStore } from "../../../stores/root";
+import { computed, useI18n, ref } from "#imports";
+const { locale, t } = useI18n();
+const rootStore = useRootStore();
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const emit = defineEmits(["filter-change"]);
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  categories: {
+    type: Array,
+    default: () => []
+  }
+});
+const filterMenuOpen = ref(false);
+const filterOptions = [
+  { value: "people", label: capitalize(t("items.people", 2)) },
+  { value: "events", label: capitalize(t("items.events", 2)) },
+  { value: "news", label: capitalize(t("items.news", 2)) },
+  { value: "publications", label: capitalize(t("items.publications", 2)) },
+  { value: "fellowships", label: capitalize(t("items.fellowships", 2)) },
+  { value: "projects", label: capitalize(t("items.projects", 2)) }
+];
+const toggleFilter = (option) => {
+  const currentCategories = [...props.categories];
+  const index = currentCategories.indexOf(option.value);
+  if (index > -1) {
+    currentCategories.splice(index, 1);
+  } else {
+    currentCategories.push(option.value);
+  }
+  emit("filter-change", {
+    name: option.value,
+    value: currentCategories.includes(option.value),
+    categories: currentCategories
+  });
+};
+const search = computed({
+  get() {
+    return rootStore.search;
+  },
+  set: await useDebounceFn(async function(v) {
+    await rootStore.updateSearch({
+      type: props.type,
+      search: v || "",
+      lang: locale.value
+    });
+  }, 300)
+});
+</script>

package/dist/runtime/runtime/components/list/molecules/Header.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <div class="d-flex">
+        <ListAtomsFiltersMenu
+          :open="filtersOpen ?? visible"
+          @open="filtersOpen = $event"
+        />
+        <v-spacer />
+        <ListAtomsResetButton v-if="$stores[type].filtersCount" :type="type" />
+        <ListAtomsViewMenu :type="type" />
+        <ListAtomsSortMenu :type="type" />
+      </div>
+      <v-expand-transition>
+        <div v-show="filtersOpen" class="mb-7">
+          <ListMoleculesFilters :type="type" />
+        </div>
+      </v-expand-transition>
+      <ListAtomsSearchInput :type="type" />
+      <ListAtomsSearchString :type="type" />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useNuxtApp } from "#imports";
+const { $stores } = useNuxtApp();
+const filtersOpen = ref(false);
+const visible = computed(() => {
+  console.log(
+    "$stores[props.type]?.filtersCount > 0: ",
+    $stores[props.type]?.filtersCount > 0
+  );
+  console.log(
+    "$stores[props.type]?.filtersCount: ",
+    $stores[props.type]?.filtersCount
+  );
+  console.log(
+    !!($stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0)
+  );
+  return !!($stores[props.type]?.filtersCount && $stores[props.type]?.filtersCount > 0);
+});
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: ""
+  }
+});
+</script>