@paris-ias/list 1.0.4 → 1.0.7

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

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

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

@@ -0,0 +1,22 @@
+<template>
+  <v-autocomplete
+    v-model="val"
+    :items="props.items"
+    :multiple="$stores[type].filters[name]?.multiple || false"
+  />
+</template>
+<script setup>
+import { useRootStore } from "../../../stores/root"
+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)
+  },
+})
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,18 @@
+<template>
+  <v-switch v-model="val" />
+</template>
+<script setup>
+import { useRootStore } from "../../../stores/root"
+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)
+  },
+})
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,21 @@
+<template>
+  <v-checkbox v-model="val" />
+</template>
+<script setup>
+import { useRootStore } from "../../../stores/root"
+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)
+  },
+})
+onMounted(() => {
+  console.log(props.data)
+})
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,25 @@
+<template>
+  <v-select
+    v-model="val"
+    :items="props.items"
+    :multiple="$stores[type].filters[name]?.multiple || false"
+  />
+</template>
+<script setup>
+import { useRootStore } from "../../../stores/root"
+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) {
+    rootStore.updateFilter(props.name, value, props.type)
+  },
+})
+onMounted(() => {
+  console.log(props)
+})
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,97 @@
+<template>
+  <v-row>
+    <template v-for="filterItem in Object.keys($stores[type].filters)">
+      <v-col v-if="computeVisibility(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 { useRootStore } from "../../../stores/root"
+import { useDisplay } from "vuetify"
+const { smAndDown } = useDisplay()
+const i18n = useI18n()
+const { locale, messages } = useI18n()
+const { $stores } = 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 (
+    messages.value[locale.value].list.filters[props.type][name] === undefined
+  ) {
+    console.log("name not found, no item for this filmter: ", name)
+    return []
+  }
+  // TODO replace with package based values
+  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) => {
+        // we check if each of the condition are fulfilled
+        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]
+        })
+      }
+    )
+  )
+  return true
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,47 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <!--    <v-btn
+        v-if="rootStore.addBtn"
+        x-large
+        :height="mdAndUp ? '56' : '40'"
+        outlined
+        :rounded="0"
+        color="primary"
+        :to="localePath($route.fullPath + '/create')"
+      >
+        <v-icon left>mdi-plus</v-icon>
+        {{ $t("new-x", { item: $tc("x-" + type, 1) }) }}
+      </v-btn> -->
+      <div class="d-flex">
+        <ListAtomsFiltersMenu
+          :open="filtersOpen"
+          @open="filtersOpen = $event"
+        />
+        <v-spacer />
+        <ListAtomsViewMenu :type="type" />
+        <ListAtomsSortMenu :type="type" />
+      </div>
+      <v-expand-transition>
+        <div v-if="filtersOpen" class="mb-7">
+          <ListMoleculesFilters :type="type" /></div
+      ></v-expand-transition>
+      <ListAtomsSearchInput :type="type" />
+      <ListAtomsSearchString :type="type" />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+const route = useRoute()
+
+const filtersOpen = ref(!!Object.keys(route.query)?.length)
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: false,
+    default: "",
+  },
+})
+</script>

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

@@ -0,0 +1,243 @@
+<template>
+  <v-btn-toggle
+    value="currentPage"
+    role="navigation"
+    aria-label="Pagination Navigation"
+  >
+    <!--  TODO: switch to page as route param -->
+    <v-btn
+      v-if="!(hidePrevNext && firstPageSelected())"
+      :disabled="firstPageSelected()"
+      min-width="35"
+      height="35"
+      width="35"
+      :tabindex="!hidePrevNext && firstPageSelected() ? -1 : 0"
+      aria-label="Previous Page"
+      nuxt
+      @click="updatePage(currentPage - 1)"
+      @keyup.enter="updatePage(currentPage - 1)"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+
+    <template v-for="(page, index) in renderPages" :key="page.key">
+      <v-btn
+        v-if="page.isGap"
+        min-width="35"
+        height="35"
+        width="35"
+        icon
+        nuxt
+        @keyup.enter="updatePage(getGapPage(index))"
+        @click="updatePage(getGapPage(index))"
+      >
+        ...
+      </v-btn>
+      <template v-else>
+        <v-btn
+          :class="{ 'active-page': page.current }"
+          tabindex="0"
+          outlined
+          min-width="35"
+          height="35"
+          tile
+          nuxt
+          :color="page.current ? 'white' : 'black'"
+          text
+          width="35"
+          :aria-current="page.current ? 'true' : 'false'"
+          :aria-label="
+            page.current
+              ? `Current page, Page ${page.value}`
+              : `Goto Page ${page.value}`
+          "
+          @click="updatePage(page.value)"
+          @keyup.enter="updatePage(page.value)"
+        >
+          {{ page.value }}
+        </v-btn>
+      </template>
+    </template>
+
+    <v-btn
+      v-if="!(hidePrevNext && lastPageSelected())"
+      :tabindex="!hidePrevNext && lastPageSelected() ? -1 : 0"
+      :disabled="lastPageSelected()"
+      aria-label="Next Page"
+      min-width="35"
+      height="35"
+      width="35"
+      nuxt
+      @click="updatePage(currentPage + 1)"
+      @keyup.enter="updatePage(currentPage + 1)"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </v-btn-toggle>
+</template>
+
+<script setup>
+import { computed } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useRootStore } from "../../../stores/root"
+
+const route = useRoute()
+const router = useRouter()
+const rootStore = useRootStore()
+
+// THIS COMPONENT IS INITIALLY BASED ON https://github.com/ashwinkshenoy/vue-simple/tree/master/packages/vs-pagination
+// AND MODIFIED TO FIT INTO OUR NEEDS (Vuetify + nuxt 3)
+const props = defineProps({
+  totalPages: {
+    type: Number,
+    required: true,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pagePadding: {
+    type: Number,
+    default: 1,
+    validator: (value) => {
+      return value > 0
+    },
+  },
+  pageGap: {
+    type: Number,
+    default: 2,
+    validator: (value) => {
+      return value > 0
+    },
+  },
+  hidePrevNext: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "",
+    required: true,
+  },
+})
+
+const renderPages = computed(() => {
+  const pages = []
+  for (let pageIndex = 1; pageIndex <= props.totalPages; pageIndex++) {
+    if (
+      pageIndex === props.currentPage ||
+      pageIndex < props.pageGap ||
+      pageIndex > props.totalPages - props.pageGap + 1
+    ) {
+      pages.push(createPage(pageIndex))
+      continue
+    }
+
+    let minimum
+    let maximum
+
+    if (props.currentPage <= props.pageGap + props.pagePadding) {
+      minimum = props.pageGap + 1
+      maximum = minimum + props.pagePadding * 2
+    } else if (
+      props.currentPage >=
+      props.totalPages - props.pageGap - props.pagePadding
+    ) {
+      maximum = props.totalPages - props.pageGap
+      minimum = maximum - props.pagePadding * 2
+    } else {
+      minimum = props.currentPage - props.pagePadding
+      maximum = props.currentPage + props.pagePadding
+    }
+
+    if (
+      (pageIndex >= minimum && pageIndex <= props.currentPage) ||
+      (pageIndex >= props.currentPage && pageIndex <= maximum)
+    ) {
+      pages.push(createPage(pageIndex))
+      continue
+    }
+
+    if (pageIndex === props.pageGap) {
+      if (
+        minimum > props.pageGap + 1 &&
+        props.currentPage > props.pageGap + props.pagePadding + 1
+      ) {
+        pages.push(createGap(pageIndex))
+      } else {
+        pages.push(createPage(pageIndex))
+      }
+
+      continue
+    }
+
+    if (pageIndex === props.totalPages - props.pageGap + 1) {
+      if (
+        maximum < props.totalPages - props.pageGap &&
+        props.currentPage < props.totalPages - props.pageGap - props.pagePadding
+      ) {
+        pages.push(createGap(pageIndex))
+      } else {
+        pages.push(createPage(pageIndex))
+      }
+
+      continue
+    }
+  }
+
+  return pages
+})
+
+const createPage = (pageIndex) => {
+  return {
+    key: pageIndex,
+    current: props.currentPage === pageIndex,
+    value: pageIndex,
+  }
+}
+
+const firstPageSelected = () => {
+  return props.currentPage === 1
+}
+
+const lastPageSelected = () => {
+  return props.currentPage === props.totalPages || props.totalPages === 0
+}
+
+const createGap = (pageIndex) => {
+  return {
+    key: pageIndex,
+    isGap: true,
+  }
+}
+
+const updatePage = (page) => {
+  rootStore.updatePage({ page, type: props.type })
+}
+
+const getGapPage = (index) => {
+  return Math.floor(
+    renderPages.value[index - 1].key +
+      ((renderPages.value[index + 1].key || props.totalPages) -
+        renderPages.value[index - 1].key) /
+        2
+  )
+}
+// Watch for changes in the route query and update the currentPage accordingly
+watch(
+  () => route.query.page,
+  (newPage) => {
+    if (newPage) {
+      props.currentPage = parseInt(newPage, 10)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style>
+.active-page {
+  background-color: #000 !important;
+  color: #f5f5f5 !important;
+}
+</style>

package/dist/runtime/components/list/organisms/List.vue

@@ -0,0 +1,92 @@
+<template>
+  <ListMoleculesHeader :type="type" />
+  <component :is="view">
+    <component
+      :is="itemTemplate"
+      v-for="(item, index) in items"
+      :key="index"
+      :item="item"
+      :index="index"
+    />
+  </component>
+  <div class="text-center">
+    <ListMoleculesPagination
+      v-if="numberOfPages > 1"
+      :type="type"
+      color="black"
+      large
+      :current-page="page"
+      :total-pages="numberOfPages"
+      :page-padding="1"
+      :page-gap="2"
+      :hide-prev-next="false"
+    />
+  </div>
+</template>
+<script setup>
+import { useRootStore } from "../../../stores/root"
+import { capitalize } from "../../../composables/useUtils"
+const { $stores } = useNuxtApp()
+const { locale } = useI18n()
+
+const rootStore = useRootStore()
+const props = defineProps({
+  addBtn: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  layout: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {
+        cols: 12,
+        xl: 12,
+      }
+    },
+  },
+  pagination: {
+    type: Object,
+    required: false,
+    default: () => {
+      return {}
+    },
+  },
+  addButton: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  items: [Object],
+})
+
+const view = computed(() =>
+  resolveComponent("ListViews" + capitalize($stores[props.type].view.name))
+)
+const itemTemplate = computed(() =>
+  resolveComponent(
+    (
+      capitalize(props.type) +
+      capitalize($stores[props.type].view.name) +
+      "Item"
+    ).toString()
+  )
+)
+const numberOfPages = computed(() => $stores[props.type].numberOfPages)
+
+const page = computed(() => +$stores[props.type].page)
+
+const items = computed(() => $stores[props.type].items)
+
+try {
+  await rootStore.update(props.type, locale.value)
+} catch (error) {
+  console.log("error fetching update list: ", error)
+}
+</script>

package/dist/runtime/components/list/views/Dense.vue

@@ -0,0 +1,25 @@
+<template>
+  <section class="my-6 ml-2 pb-6">
+    <slot>
+      <!-- fallback content -->
+      Dense view
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts"></script>
+<style>
+section {
+  display: table;
+  width: 100%;
+}
+
+section > * {
+  display: table-row;
+}
+
+section .v-col.dense {
+  display: table-cell;
+  vertical-align: middle;
+}
+</style>

package/dist/runtime/components/list/views/Expanded.vue

@@ -0,0 +1,10 @@
+<template>
+  <section>
+    <slot>
+      <!-- fallback content -->
+      Expanded view
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts"></script>

package/dist/runtime/components/list/views/Grid.vue

@@ -0,0 +1,13 @@
+<template>
+  GRID DISPLAY
+  <template v-for="(item, index) in items" :key="index">
+    <slot name="data" :item="item" />
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  items: [Object],
+  type: String,
+})
+</script>