@paris-ias/list 1.0.3 → 1.0.5

package/src/runtime/components/fellowships/View.vue

@@ -0,0 +1,210 @@
+<template>
+  <!--  {{ name }} -->
+  <v-row justify="center">
+    <v-col cols="12" sm="11" md="10" lg="9" xl="8">
+      <v-row
+        v-if="item && item.image && item.image.length"
+        class="justify-center"
+      >
+        <v-col cols="12" sm="10" md="6" lg="4" xl="3" class="text-center">
+          <!--   FELLOWSHIP IMAGE -->
+          <MiscAtomsImageContainer
+            contain
+            :loading
+            :src="item.image"
+            :ratio="1 / 1"
+          />
+        </v-col>
+      </v-row>
+      <v-row justify="center">
+        <v-col cols="12">
+          <v-skeleton-loader
+            v-if="loading"
+            :type="
+              [
+                'avatar, paragraph',
+                'avatar, paragraph',
+                'heading, ossein,	avatar, text, ossein, chip@3',
+                'heading, ossein,	avatar, text, ossein, chip@3',
+                'heading, ossein, avatar, text, ossein, chip@3',
+                'heading',
+              ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+            "
+          />
+
+          <div v-else class="d-flex align-center flex-column mt-12">
+            <div class="d-flex text-center text-wrap text-h3 text-black">
+              {{ item.name }}
+            </div>
+            <v-divider width="154px" class="mb-1 mt-6" />
+            <v-divider width="154px" />
+            <div class="d-flex text-center text-wrap text-h5 text-black mt-6">
+              <MDC v-if="item.subtitle" :value="item.subtitle" />
+            </div>
+            <MiscMoleculesChipContainer
+              :items="[
+                $t(
+                  'list.filters.fellowships.fellowshipType.' +
+                    item.fellowshipType
+                ),
+                ...(props.item && props.item.disciplines
+                  ? props.item.disciplines.map((discipline) => discipline.name)
+                  : []),
+              ]"
+              class="mt-2"
+            />
+            <div class="mt-5">
+              <FellowshipsBadges :item="item" :view="view" />
+            </div>
+          </div>
+          <div class="mx-6">
+            <!-- DIVIDERS -->
+            <v-responsive class="mx-auto my-9" width="120">
+              <v-divider class="mb-1" />
+              <v-divider />
+            </v-responsive>
+
+            <!-- FELLOWSHIP DESCRIPTION -->
+            <v-skeleton-loader
+              v-if="loading"
+              :type="
+                [
+                  'text@50',
+                  'text@50',
+                  'text@50',
+                  'text@50',
+                  'text@50',
+                  'text@50',
+                ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+              "
+            />
+            <MDC v-if="item.description" :value="item.description" />
+
+            <v-responsive class="mx-auto my-9" width="120">
+              <v-divider class="mb-1" />
+              <v-divider />
+            </v-responsive>
+            <v-skeleton-loader v-if="loading" />
+            <v-expansion-panels
+              v-else
+              v-model="accordeon"
+              flat
+              ripple
+              variant="accordion"
+              class="py-8"
+            >
+              <v-expansion-panel
+                v-for="(value, key) in Object.keys(renderedDetails)"
+                :key="key + value"
+                class="border-thin text-black"
+                :color="key === accordeon ? 'light-grey' : 'white'"
+              >
+                <v-expansion-panel-title
+                  collapse-icon="mdi-minus"
+                  expand-icon="mdi-plus"
+                  class="text-h6"
+                  :class="{ 'font-weight-black': key === accordeon }"
+                >
+                  {{ $t(value) }}
+                </v-expansion-panel-title>
+                <v-expansion-panel-text
+                  class="py-2"
+                  style="white-space: pre; text-wrap: auto"
+                >
+                  <MDC
+                    v-if="renderedDetails[value]"
+                    :value="renderedDetails[value]"
+                  />
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+
+            <v-responsive class="mx-auto my-9" width="120">
+              <v-divider class="mb-1" />
+              <v-divider />
+            </v-responsive>
+
+            <!--      <MiscAtomsSlidingCarousel
+              v-if="item && item.fellows && item.fellows.length"
+              key="people"
+              ref="fellows"
+              :items="item.fellows || []"
+              type="people"
+              lazy
+              :loading
+            >
+              <div :class="mdAndUp ? 'text-h5' : 'text-h6'">
+                {{ $t("this-fellowship-alumni") }}
+              </div>
+            </MiscAtomsSlidingCarousel> -->
+          </div>
+        </v-col>
+        <MiscMoleculesRelated
+          v-if="!loading && item && item.related"
+          :related="item.related"
+        />
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify"
+
+const { name } = useDisplay()
+const accordeon = ref(-1)
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+})
+
+const view = ref(true)
+onMounted(() => {
+  /*   console.log("fellowship item", props.item.value) */
+})
+
+const renderedDetails = {
+  ...(props.item?.fellowshipDetails?.type && {
+    type: props.item?.fellowshipDetails?.type,
+  }),
+  ...(props.item?.fellowshipDetails?.fundingPeriod && {
+    fundingPeriod: props.item?.fellowshipDetails?.fundingPeriod,
+  }),
+  ...(props.item?.fellowshipDetails?.profile && {
+    profile: props.item?.fellowshipDetails?.profile,
+  }),
+  ...(props.item?.fellowshipDetails?.tasks && {
+    tasks: props.item?.fellowshipDetails?.tasks,
+  }),
+  ...(props.item?.fellowshipDetails?.location && {
+    location: props.item?.fellowshipDetails?.location,
+  }),
+  ...(props.item?.fellowshipDetails?.funding && {
+    funding: props.item?.fellowshipDetails?.funding,
+  }),
+  ...(props.item?.fellowshipDetails?.housing && {
+    housing: props.item?.fellowshipDetails?.housing,
+  }),
+  ...(props.item?.fellowshipDetails?.meals && {
+    meals: props.item?.fellowshipDetails?.meals,
+  }),
+  ...(props.item?.fellowshipDetails?.applicationMaterials && {
+    applicationMaterials: props.item?.fellowshipDetails?.applicationMaterials,
+  }),
+  ...(props.item?.fellowshipDetails?.selectionProcess && {
+    selectionProcess: props.item?.fellowshipDetails?.selectionProcess,
+  }),
+  ...(props.item?.fellowshipDetails?.researchProcess && {
+    researchProcess: props.item?.fellowshipDetails?.researchProcess,
+  }),
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/runtime/components/list/atoms/FiltersMenu.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props: tooltip }">
+      <v-btn
+        x-large
+        outlined
+        tile
+        flat
+        :class="{
+          'mt-3': isXsDisplay,
+        }"
+        v-bind="tooltip"
+        prepend-icon="mdi-tune-variant"
+        :append-icon="open ? 'mdi-chevron-down' : 'mdi-chevron-up'"
+        @click="$emit('open', !open)"
+      >
+        <!--     <v-icon>mdi-tune-variant</v-icon> -->
+        {{ $t("filters") }}
+      </v-btn>
+    </template>
+    <div
+      v-html="open ? $t('close-the-filter-panel') : $t('open-the-filter-panel')"
+    ></div>
+  </v-tooltip>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify"
+const {
+  name: nameDisplay,
+  xs: isXsDisplay,
+  mobile: isMobileDisplay,
+  smAndUp,
+  lgAndUp,
+  smAndDown,
+} = useDisplay()
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/runtime/components/list/atoms/SearchInput.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="d-flex flex-grow-1 flex-column">
+    <v-text-field
+      v-model.trim="search"
+      :placeholder="$t('list.search-type', [$t(type)])"
+      prepend-inner-icon="mdi-magnify"
+      single-line
+      class="transition-swing"
+      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">
+          {{ $t("list.search-type", [$t(type)]) }}
+        </div>
+      </template></v-text-field
+    >
+    <v-expand-transition v-if="type === 'all'">
+      <v-list
+        v-show="search.length"
+        lines="three"
+        item-props
+        style="max-height: 300px"
+        class="overflow-y-auto"
+      >
+        <div v-if="rootStore.loading" class="d-flex justify-center py-6">
+          <v-progress-circular color="black" size="64" indeterminate />
+        </div>
+        <template v-for="(item, index) in results">
+          <v-list-subheader
+            v-if="item.type && item.type === 'subheader'"
+            :key="'subheader-' + index"
+            >{{ item.name }}</v-list-subheader
+          >
+          <div
+            v-else-if="item.type && item.type === 'no-result'"
+            :key="'no-result-' + index"
+            class="mx-6"
+          >
+            {{ $t("no-result") }}
+          </div>
+          <v-divider
+            v-else-if="item.type && item.type === 'divider'"
+            :key="'divider-' + index"
+            inset
+          />
+          <ListAtomsSearchItem
+            v-else
+            :key="'item- ' + index"
+            :index
+            :item
+            :type="item.type"
+          />
+        </template> </v-list
+    ></v-expand-transition>
+  </div>
+</template>
+
+<script setup>
+import { useDebounceFn } from "@vueuse/core"
+import { useRootStore } from "../../../stores/root"
+const { locale, t } = useI18n()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+const results = computed(() => {
+  const storeRst = rootStore.results
+  const rst =
+    (Object.keys(storeRst).length &&
+      Object.keys(storeRst)
+        .sort((a, b) => {
+          return storeRst[b]?.items?.length - storeRst[a]?.items?.length
+        })
+        .reduce((acc, key, index) => {
+          const items = storeRst[key]?.items
+          const total = storeRst[key]?.total
+          if (total === 0 && index === 0) {
+            acc.push({ type: "no-result" })
+            return acc
+          }
+          if (items?.length) {
+            acc.push({ type: "subheader", name: t("items." + key, 2) })
+            acc.push(
+              ...items.map((item) => ({
+                prependAvatar: item?.image?.url || "mdi-square",
+                title: item.name || item.firstname + " " + item.lastname,
+                subtitle: item.summary || item.biography,
+                id: item.id,
+                type: key,
+              }))
+            )
+          }
+          acc.push({ type: "divider" })
+          return acc
+        }, [])) ||
+    {}
+
+  return rst
+})
+const search = computed({
+  get() {
+    return props.type === "all" ? rootStore.search : $stores[props.type].search
+  },
+  set: await useDebounceFn(async function (v) {
+    await rootStore.updateSearch({
+      type: props.type,
+      search: v || "",
+      lang: locale.value,
+    })
+  }, 300),
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/runtime/components/list/atoms/SearchItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-list-item :to="localePath(getPath(item.id))" class="search-item py-2">
+    <template v-slot:item :key="index.toString() + item.id"></template>
+    <template v-slot:prepend v-if="item.prependAvatar">
+      <v-avatar rounded="0" :image="item.prependAvatar"> </v-avatar>
+    </template>
+    <template v-slot:title>
+      <div v-html="item.title" class="text-black black-text"></div>
+    </template>
+    <template v-slot:subtitle>
+      <div v-html="item.subtitle" class="text-black black-text"></div>
+    </template>
+    <template v-slot:append>
+      <v-btn
+        icon="mdi-open-in-new"
+        variant="text"
+        :to="localePath(getPath(item.id))"
+        target="_blank"
+      ></v-btn>
+    </template>
+  </v-list-item>
+</template>
+<script setup>
+// import { useDisplay } from "vuetify"
+// const { smAndUp } = useDisplay()
+const localePath = useLocalePath()
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+})
+const getPath = (id) => {
+  switch (props.item.type) {
+    case "projects":
+      return "/activities/projects/" + id
+    case "publications":
+      return "/activities/publications/" + id
+    case "fellowship":
+      return "/activities/fellowships/" + id
+    default:
+      return `/${props.type}/${id}`
+  }
+}
+</script>
+<style lang="scss">
+.search-item {
+  align-items: center;
+  height: 100%;
+}
+</style>

package/src/runtime/components/list/atoms/SearchString.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="mt-4 font-weight-light">
+    <template
+      v-if="
+        (!$stores[type].search || $stores[type].search.length === 0) &&
+        $stores[type].filtersCount === 0
+      "
+    >
+      {{
+        feminine
+          ? $t(
+              "list.0-items-found-f",
+              [
+                $stores[type].total,
+                $t("items." + props.type, $stores[type].total),
+              ],
+              $stores[type].total
+            )
+          : $t(
+              "list.0-items-found",
+              [
+                $stores[type].total,
+                $t("items." + props.type, $stores[type].total),
+              ],
+              $stores[type].total
+            )
+      }}
+    </template>
+    <!--  searching for "XXX" -->
+    <template
+      v-else-if="
+        !(!$stores[type].search || $stores[type].search.length === 0) &&
+        $stores[type].filtersCount === 0
+      "
+      >{{
+        feminine
+          ? $t(
+              "list.0-items-found-searching-for-f",
+              [
+                $stores[type].total,
+                $t(
+                  "items." + props.type,
+                  $stores[type].total,
+                  $stores[type].total
+                ),
+                $stores[type].search,
+              ],
+              $stores[type].total
+            )
+          : $t(
+              "list.0-items-found-searching-for",
+              [
+                $stores[type].total,
+                $t(
+                  "items." + props.type,
+                  $stores[type].total,
+                  $stores[type].total
+                ),
+                $stores[type].search,
+              ],
+              $stores[type].total
+            )
+      }}</template
+    >
+    <!--  with X filters -->
+    <template
+      v-else-if="
+        (!$stores[type].search || $stores[type].search.length === 0) &&
+        $stores[type][props.type].filtersCount > 0
+      "
+      >{{
+        feminine
+          ? $t(
+              "list.0-items-found-with-1-filter-f",
+              [
+                $stores[type].total,
+                $t(
+                  "items." + props.type,
+                  $stores[type].total,
+                  $stores[type].total
+                ),
+                $stores[type].filtersCount,
+                $t("filters", $stores[type].filtersCount),
+              ],
+              $stores[type].total
+            )
+          : $t(
+              "list.0-items-found-with-1-filter",
+              [
+                $stores[type].total,
+                $t(
+                  "items." + props.type,
+                  $stores[type].total,
+                  $stores[type].total
+                ),
+                $stores[type].filtersCount,
+                $t("filters", $stores[type].filtersCount),
+              ],
+              $stores[type].total
+            )
+      }}</template
+    >
+    <!--  searching for "XXX" with Y filters  -->
+    <template
+      v-else-if="
+        $stores[type].search &&
+        $stores[type].search.length &&
+        $stores[type].filtersCount > 0
+      "
+      >{{
+        feminine
+          ? $t(
+              "list.0-items-found-searching-for-with-1-filter-f",
+              [
+                $stores[type].total,
+                $t("items." + props.type, $stores[type].total),
+                $stores[type].search,
+                $stores[type].filtersCount,
+                $t("filters", $stores[type].filtersCount),
+              ],
+              $stores[type].total
+            )
+          : $t(
+              "list.0-items-found-searching-for-with-1-filter",
+              [
+                $stores[type].total,
+                $t("items." + props.type, $stores[type].total),
+                $stores[type].search,
+                $stores[type].filtersCount,
+                $t("filters", $stores[type].filtersCount),
+              ],
+              $stores[type].total
+            )
+      }}</template
+    >
+    <template v-if="$stores[type].numberOfPages > 1">
+      <!--   // Page X of Y -->
+      {{
+        $t("list.page-0-of-1", [
+          $stores[type].page || 1,
+          $stores[type].numberOfPages || 1,
+        ])
+      }}</template
+    >
+    <!--  X items per page -->
+    <!-- displayed by X -->
+    <!--  and sorted by X -->
+  </div>
+</template>
+<script setup>
+const { $stores } = useNuxtApp()
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+})
+const feminine = ref(["news", "publications", "people"].includes(props.type))
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,97 @@
+<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 { useRootStore } from "../../../stores/root"
+import { mergeProps } from "vue"
+import { useDisplay } from "vuetify"
+const { $stores } = useNuxtApp()
+const { xs: isXsDisplay } = useDisplay()
+
+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 })
+}
+
+onMounted(() => {
+  // Add any logic needed on component mount
+})
+</script>
+
+<style lang="scss"></style>