@xy-planning-network/trees 0.4.0-rc-7 → 0.4.2

package/src/lib-components/lists/Table.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { AxiosResponse } from "axios"
+import {
+  ComponentPublicInstance,
+  computed,
+  getCurrentInstance,
+  ref,
+  watch,
+} from "vue"
+import DateRangePicker from "../forms/DateRangePicker.vue"
+import Paginator from "../navigation/Paginator.vue"
+import BaseAPI from "../../api/base"
+import * as TableTypes from "@/composables/table"
+
+const props = withDefaults(
+  defineProps<{
+    clickable?: boolean
+    loader?: boolean
+    tableData: TableTypes.Dynamic
+  }>(),
+  {
+    clickable: false,
+    loader: true,
+  }
+)
+
+const currentSort = ref(
+  props.tableData.defaultSort ? props.tableData.defaultSort : ""
+)
+const currentSortDirection = ref(
+  props.tableData.defaultSortDirection
+    ? props.tableData.defaultSortDirection
+    : "desc"
+)
+const dateRange = ref({
+  minDate: 0,
+  maxDate: 0,
+})
+const items = ref<any[]>([])
+const pagination = ref({
+  page: 1,
+  perPage: 10,
+  totalItems: 0,
+  totalPages: 0,
+})
+const query = ref("")
+const cellValue = (
+  item: Record<string, any>,
+  col: TableTypes.Column
+): string => {
+  if (col.key) {
+    // NOTE(dlk): supports dot notation for nested keys
+    return col.key.split(".").reduce((o, i) => o[i], item as any)
+  }
+
+  if (col.presenter) {
+    // TODO: discuss this pattern.  Current usage can be replaced with modules.
+    // https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
+    const internalInstance = getCurrentInstance()
+    return col.presenter(
+      item,
+      internalInstance?.proxy as ComponentPublicInstance
+    )
+  }
+
+  return ""
+}
+const dateRangeChanged = (newDateRange: {
+  minDate: number
+  maxDate: number
+}): void => {
+  pagination.value.page = 1
+  dateRange.value = newDateRange
+  loadAndRender()
+}
+const handleSort = (selectedSort: string): void => {
+  if (currentSort.value == selectedSort) {
+    currentSortDirection.value =
+      currentSortDirection.value === "desc" ? "asc" : "desc"
+  } else {
+    currentSort.value = selectedSort
+    currentSortDirection.value = "desc"
+  }
+
+  loadAndRender()
+}
+const loadAndRender = (): void => {
+  const params = {
+    minDate: dateRange.value.minDate,
+    maxDate: dateRange.value.maxDate,
+    page: pagination.value.page,
+    perPage: pagination.value.perPage,
+    sort: currentSort.value,
+    sortDir: currentSortDirection.value,
+    q: query.value,
+  }
+
+  BaseAPI.get(props.tableData.url, { skipLoader: !props.loader }, params).then(
+    (success: AxiosResponse) => {
+      pagination.value = {
+        page: success.data.page,
+        perPage: success.data.perPage,
+        totalItems: success.data.totalItems,
+        totalPages: success.data.totalPages,
+      }
+      items.value = success.data.items
+    },
+    () => {
+      window.VueBus.emit(
+        "Flash-show-generic-error",
+        "membership@xyplanningnetwork.com"
+      )
+    }
+  )
+}
+
+const reloadTable = (): void => {
+  pagination.value.page = 1
+  loadAndRender()
+}
+
+const hasContent = computed((): boolean => {
+  return items.value.length ? true : false
+})
+
+watch(
+  () => props.tableData.refreshTrigger,
+  () => {
+    // This lets parent components trigger a refresh of the current page depending on external actions.
+    loadAndRender()
+  }
+)
+
+watch(
+  () => props.tableData.reloadTrigger,
+  () => {
+    // This lets parent components trigger a reload of page 1 depending on external actions.
+    reloadTable()
+  }
+)
+
+// onCreated
+loadAndRender()
+</script>
+<template>
+  <div>
+    <div
+      class="flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between"
+    >
+      <div class="w-full max-w-lg lg:max-w-xs" v-if="tableData.search">
+        <label for="search" class="sr-only">Search</label>
+        <div class="relative">
+          <div
+            class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+          >
+            <svg
+              class="w-5 h-5 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <input
+            class="pl-10"
+            type="search"
+            v-model.trim="query"
+            placeholder="Search"
+            @change="reloadTable()"
+          />
+        </div>
+      </div>
+      <div class="w-full max-w-lg lg:max-w-xs" v-if="tableData.dateSearch">
+        <DateRangePicker
+          v-model="dateRange"
+          @update:modelValue="dateRangeChanged"
+        />
+      </div>
+    </div>
+
+    <div
+      class="relative z-0 min-w-full align-middle border-b border-gray-200 shadow sm:rounded-lg overflow-x-auto"
+    >
+      <table class="min-w-full">
+        <thead>
+          <tr>
+            <th
+              class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-900 uppercase border-b border-gray-200 bg-gray-50 leading-4"
+              v-for="(col, idx) in tableData.columns"
+              :key="idx"
+            >
+              <span v-if="!!col.display.length">{{ col.display }}</span>
+              <span
+                class="cursor-pointer"
+                @click.prevent="handleSort(col.sort as string)"
+                v-if="col.sort"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  class="h-5 inline"
+                  v-if="currentSort !== col.sort"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M8 9l4-4 4 4m0 6l-4 4-4-4"
+                  />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  class="h-5 inline"
+                  v-else-if="currentSortDirection == 'desc'"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  class="h-5 inline"
+                  v-else
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="bg-white">
+          <tr
+            v-for="(item, rowIdx) in items"
+            :key="item.id ? item.id : rowIdx"
+            @click="$emit('handleClick', item)"
+            :class="{ 'cursor-pointer': clickable }"
+          >
+            <td
+              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
+              v-for="(col, colIdx) in tableData.columns"
+              :key="rowIdx + '-' + colIdx"
+              :class="col.class"
+            >
+              <component
+                :is="col.component"
+                v-if="col.component"
+                :props-data="item"
+                :current-user="tableData.currentUser"
+                :attribute="col.key"
+                :items="col.items"
+              ></component>
+              <div v-else v-text="cellValue(item, col)"></div>
+            </td>
+          </tr>
+
+          <tr v-if="!hasContent">
+            <td
+              :colspan="tableData.columns.length"
+              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
+            >
+              No items were found!
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <Paginator
+      v-model="pagination"
+      @update:modelValue="loadAndRender()"
+      v-if="hasContent"
+    />
+  </div>
+</template>

package/src/lib-components/navigation/ActionsDropdown.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
+import { DotsVerticalIcon } from "@heroicons/vue/solid"
+import { onMounted, ref } from "vue"
+import * as TableTypes from "@/composables/table"
+import User from "@/composables/user"
+
+const props = defineProps<{
+  currentUser: User
+  items: TableTypes.MenuItem[]
+  propsData: any
+}>()
+
+const hasActionItems = ref(false)
+
+const emitEvent = (event: string): void => {
+  window.VueBus.emit(event, props.propsData)
+}
+
+const show = (item: TableTypes.MenuItem): boolean => {
+  if (!item.show) return true
+  return item.show(props.propsData, props.currentUser)
+}
+
+onMounted(() => {
+  for (let item of props.items) {
+    if (!item.show) {
+      hasActionItems.value = true
+      return
+    }
+
+    const showActionItem = item.show(props.propsData, props.currentUser)
+    if (showActionItem) {
+      hasActionItems.value = true
+      return
+    }
+  }
+})
+</script>
+<template>
+  <Menu as="div" class="relative flex justify-end items-center">
+    <MenuButton
+      class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+      :disabled="!hasActionItems"
+    >
+      <span class="sr-only">Open options</span>
+      <DotsVerticalIcon class="w-5 h-5" aria-hidden="true" />
+    </MenuButton>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="z-10 mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
+      >
+        <div class="py-1">
+          <template v-for="(item, idx) in items" :key="idx">
+            <MenuItem as="div" v-slot="{ active }" v-if="show(item)">
+              <button
+                type="submit"
+                :class="[
+                  active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                  'block w-full text-left px-4 py-2 text-sm font-semibold',
+                ]"
+                v-text="item.label"
+                @click="emitEvent(item.event)"
+              ></button>
+            </MenuItem>
+          </template>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>

package/src/lib-components/navigation/Paginator.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { Pagination } from "@/composables/nav"
+import { computed } from "vue"
+
+const props = defineProps<{
+  modelValue: Pagination
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", pagination: Pagination): void
+}>()
+
+const changePage = (page: number): void => {
+  emit("update:modelValue", {
+    ...props.modelValue,
+    page: page,
+  })
+}
+
+const pageShortcuts = computed((): number[] => {
+  const shortcuts: number[] = []
+
+  // If total pages is less than or equal to 4, just return 1, 2, 3, 4
+  if (props.modelValue.totalPages <= 4) {
+    for (let i = 0; i < props.modelValue.totalPages; i++) {
+      shortcuts.push(i + 1)
+    }
+    return shortcuts
+  }
+
+  // If there are more than 3 pages left, show these
+  // e.g. [4, 5, 6, 7] when there are 8 total pages and the current page is 4
+  const pagesLeft: number = props.modelValue.totalPages - props.modelValue.page
+  if (pagesLeft >= 3) {
+    for (let i = 0; i < 4; i++) {
+      shortcuts.push(props.modelValue.page + i)
+    }
+    return shortcuts
+  }
+
+  // If there are less than 3 pages left, count backwards from the last page
+  // e.g. [5, 6, 7, 8] when on page 5, 6, 7, and 8 and there are 8 total pages
+  for (let i = 0; i < 4; i++) {
+    shortcuts.unshift(props.modelValue.totalPages - i)
+  }
+  return shortcuts
+})
+</script>
+<template>
+  <div class="px-4 flex items-center justify-between sm:px-0">
+    <div class="w-0 flex-1 flex">
+      <a
+        href="#"
+        class="-mt-px border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
+        @click.prevent="changePage(modelValue.page - 1)"
+        :class="
+          modelValue.page == 1
+            ? 'text-gray-500 cursor-not-allowed pointer-events-none'
+            : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
+        "
+      >
+        <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        Previous
+      </a>
+    </div>
+
+    <div class="hidden md:flex">
+      <a
+        href="#"
+        class="-mt-px border-t-2 pt-4 px-4 inline-flex items-center text-sm leading-5 font-medium"
+        v-for="i in pageShortcuts"
+        :key="i"
+        v-text="i"
+        :class="
+          modelValue.page === i
+            ? 'border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700'
+            : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400'
+        "
+        @click.prevent="changePage(i)"
+      ></a>
+    </div>
+
+    <div class="w-0 flex-1 flex justify-end">
+      <a
+        href="#"
+        class="-mt-px border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
+        @click.prevent="changePage(modelValue.page + 1)"
+        :class="
+          modelValue.page >= modelValue.totalPages
+            ? 'text-gray-500 cursor-not-allowed pointer-events-none'
+            : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
+        "
+      >
+        Next
+        <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>

package/src/lib-components/navigation/Steps.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// TODO: think about whether there is value in updating and emiting step with next/previous
+// TODO: add to docs
+
+withDefaults(
+  defineProps<{
+    hideActions?: boolean
+    hidePrevious?: boolean
+    nextText?: string
+    previousText?: string
+    step: number
+    total: number
+  }>(),
+  {
+    hideActions: false,
+    hidePrevious: false,
+    nextText: "Next",
+    previousText: "Back",
+  }
+)
+
+const emit = defineEmits(["next", "previous"])
+
+const next = (): void => {
+  emit("next")
+}
+
+const previous = (): void => {
+  emit("previous")
+}
+</script>
+<template>
+  <div>
+    <nav class="flex items-center justify-center space-x-8">
+      <p class="font-medium">Step {{ step }} of {{ total }}</p>
+      <ul class="flex items-center space-x-5">
+        <li v-for="index in total" :key="index">
+          <span
+            class="block w-2.5 h-2.5 bg-xy-green rounded-full hover:bg-green-900 focus:bg-green-900"
+            v-if="step > index"
+          ></span>
+
+          <div
+            class="relative flex items-center justify-center"
+            v-else-if="step === index"
+          >
+            <span class="absolute w-5 h-5 p-px flex">
+              <span class="w-full h-full rounded-full bg-green-100"></span>
+            </span>
+            <span
+              class="relative block w-2.5 h-2.5 bg-xy-green rounded-full"
+            ></span>
+          </div>
+
+          <span
+            href="#"
+            class="block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400 focus:bg-gray-400"
+            v-else
+          ></span>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="flex flex-shrink-0" v-if="!hideActions">
+      <span class="inline-flex rounded-md shadow-sm" v-if="!hidePrevious">
+        <button
+          type="button"
+          class="xy-btn-white"
+          @click="previous"
+          v-text="previousText"
+        ></button>
+      </span>
+      <span class="ml-3 inline-flex rounded-md shadow-sm">
+        <button
+          type="button"
+          class="xy-btn"
+          @click="next"
+          v-text="nextText"
+        ></button>
+      </span>
+    </div>
+  </div>
+</template>

package/src/lib-components/navigation/Tabs.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    pillDesign?: boolean
+    tabs: Array<{
+      label: string
+      value: string
+    }>
+  }>(),
+  {
+    pillDesign: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: string): void
+}>()
+
+const updateModelValue = (modelValue: string): void => {
+  emit("update:modelValue", modelValue)
+}
+
+const classes = (currentTab: string, pastFirstTab: boolean): string => {
+  let c = ""
+
+  if (props.pillDesign) {
+    c =
+      "px-12 py-2 font-semibold text-md leading-5 rounded-t-md focus:outline-none "
+
+    if (props.modelValue === currentTab) {
+      c = c + "focus:bg-white text-gray-700 bg-white border-b-2 border-blue-500"
+    } else {
+      c =
+        c +
+        "text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:bg-gray-100 border border-gray-200"
+    }
+
+    return c
+  }
+
+  c =
+    "px-1 py-4 text-sm font-semibold border-b-2 whitespace-nowrap leading-5 focus:outline-none "
+  if (props.modelValue === currentTab) {
+    c =
+      c +
+      "border-blue-500 text-xy-blue focus:text-blue-800 focus:border-blue-700"
+  } else {
+    c =
+      c +
+      "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:text-gray-900 focus:border-gray-300"
+  }
+
+  if (pastFirstTab) c = c + " ml-8"
+
+  return c
+}
+
+const notPillDesign = computed((): boolean => {
+  return !props.pillDesign
+})
+</script>
+<template>
+  <div>
+    <div class="sm:hidden" :class="{ 'mb-4': pillDesign }">
+      <label for="tabs" class="sr-only">Select a tab</label>
+      <Select
+        name="tabs"
+        :modelValue="modelValue"
+        @update:modelValue="updateModelValue($event)"
+        :options="tabs"
+      />
+    </div>
+    <div class="hidden sm:block">
+      <div :class="{ 'border-b border-gray-200': notPillDesign }">
+        <nav class="flex" :class="[pillDesign ? 'ml-8' : '-mb-px']">
+          <a
+            href="#"
+            :class="classes(tab.value, idx > 0)"
+            v-for="(tab, idx) in tabs"
+            :key="idx"
+            v-text="tab.label"
+            @click.prevent="updateModelValue(tab.value)"
+          >
+          </a>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>