@paris-ias/list 1.0.111 → 1.0.113

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

@@ -0,0 +1,203 @@
+<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";
+import { ref } from "#imports";
+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);
+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>

package/dist/runtime/runtime/components/files/ExpandedItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{ item.name }}
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

package/dist/runtime/runtime/components/files/RowsItem.vue

@@ -0,0 +1,12 @@
+<template>
+  {{ item }}
+</template>
+
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  {{ item }}
+</template>
+
+<script setup>
+import { useNuxtApp } from "#imports";
+const { $stores } = useNuxtApp();
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+$stores.files.loading = false;
+</script>

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

@@ -0,0 +1,44 @@
+<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>

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

@@ -0,0 +1,33 @@
+<template>
+  <v-tooltip location="top">
+    <template #activator="{ props: tooltip }">
+      <v-btn
+        x-large
+        outlined
+        tile
+        flat
+        icon
+        class="ml-auto"
+        v-bind="tooltip"
+        @click="rootStore.resetState(type, locale)"
+      >
+        <v-icon>mdi-restore</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ $t("list.reset-filters") }}</span>
+  </v-tooltip>
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { useI18n } from "#imports";
+const rootStore = useRootStore();
+const { locale } = useI18n();
+const props = defineProps({
+  type: {
+    type: String,
+    default: "articles",
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <component
+    :is="itemTemplate"
+    v-for="(item, index) in $rootStore.results[type].items"
+    :key="index"
+    :item="item"
+    :index="index"
+  />
+</template>
+
+<script setup>
+import { capitalize } from "../../../composables/useUtils";
+import { useNuxtApp, resolveComponent, computed } from "#imports";
+const { $stores, $rootStore } = useNuxtApp();
+console.log("rootStore: ", $rootStore);
+const props = defineProps({
+  type: {
+    type: String,
+    default: "people"
+  }
+});
+const itemTemplate = computed(
+  () => resolveComponent(
+    (capitalize(props.type) + capitalize($stores[props.type].view.name) + "Item").toString()
+  )
+);
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="d-flex flex-grow-1 flex-column">
+    <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"
+      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>
+  </div>
+</template>
+
+<script setup>
+import { useDebounceFn } from "@vueuse/core";
+import { useRootStore } from "../../../stores/root";
+import { computed, useI18n } from "#imports";
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+});
+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/atoms/SearchItem.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-list-item
+    :key="index.toString() + item.id"
+    :to="localePath(getPath(item.id))"
+    class="search-item py-2"
+  >
+    <template #item />
+    <template v-if="item.prependAvatar" #prepend>
+      <v-avatar rounded="0" :image="item.prependAvatar" />
+    </template>
+    <template #title>
+      <div class="text-black black-text" v-html="item.title" />
+    </template>
+    <template #subtitle>
+      <div class="text-black black-text" v-html="item.subtitle" />
+    </template>
+    <template #append>
+      <v-btn
+        icon="mdi-open-in-new"
+        variant="text"
+        :to="localePath(getPath((item.slug && item.slug[locale]) || item.id))"
+        target="_blank"
+      />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+import { useLocalePath, useI18n } from "#imports";
+const { locale } = useI18n();
+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>
+.search-item {
+  align-items: center;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,160 @@
+<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].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." + 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." + 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." + 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>
+import { useNuxtApp, ref } from "#imports";
+const { $stores } = useNuxtApp();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  }
+});
+const feminine = ref(["news", "publications", "people"].includes(props.type));
+</script>