@xy-planning-network/trees 0.4.0-rc-8 → 0.4.0

package/src/lib-components/layout/SidebarLayout.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import Flash from "../overlays/Flash.vue"
+import Spinner from "../overlays/Spinner.vue"
+import {
+  Dialog,
+  DialogOverlay,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue"
+import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
+import { CogIcon } from "@heroicons/vue/solid"
+import * as NavTypes from "@/composables/nav"
+import { ref } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    activeURL?: string
+    iconURL: string
+    navigation: NavTypes.Item[]
+    userNavigation: NavTypes.Item[]
+  }>(),
+  {
+    activeURL: "",
+  }
+)
+
+const sidebarOpen = ref<boolean>(false)
+
+const isActive = (url: string): boolean => {
+  return props.activeURL === url
+}
+</script>
+<template>
+  <div class="h-screen flex overflow-hidden bg-gray-100">
+    <TransitionRoot as="template" :show="sidebarOpen">
+      <Dialog
+        as="div"
+        static
+        class="fixed inset-0 flex z-40 md:hidden"
+        @close="sidebarOpen = false"
+        :open="sidebarOpen"
+      >
+        <TransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        </TransitionChild>
+        <TransitionChild
+          as="template"
+          enter="transition ease-in-out duration-300 transform"
+          enter-from="-translate-x-full"
+          enter-to="translate-x-0"
+          leave="transition ease-in-out duration-300 transform"
+          leave-from="translate-x-0"
+          leave-to="-translate-x-full"
+        >
+          <div
+            class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-in-out duration-300"
+              enter-from="opacity-0"
+              enter-to="opacity-100"
+              leave="ease-in-out duration-300"
+              leave-from="opacity-100"
+              leave-to="opacity-0"
+            >
+              <div class="absolute top-0 right-0 -mr-12 pt-2">
+                <button
+                  class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                  @click="sidebarOpen = false"
+                >
+                  <span class="sr-only">Close sidebar</span>
+                  <XIcon class="h-6 w-6 text-white" aria-hidden="true" />
+                </button>
+              </div>
+            </TransitionChild>
+            <div class="flex-shrink-0 flex justify-center px-4">
+              <img class="w-auto h-12" :src="iconURL" alt="Logo" />
+            </div>
+            <div class="mt-5 flex-1 h-0 overflow-y-auto">
+              <nav class="px-2 space-y-1">
+                <a
+                  v-for="item in navigation"
+                  :key="item.name"
+                  :href="item.url"
+                  :class="[
+                    isActive(item.url)
+                      ? 'bg-gray-100 text-gray-900'
+                      : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
+                    'group flex items-center px-2 py-2 text-base font-medium rounded-md',
+                  ]"
+                  :target="item.openInTab ? '_blank' : '_self'"
+                >
+                  <component
+                    :is="item.icon"
+                    :class="[
+                      isActive(item.url)
+                        ? 'text-gray-600'
+                        : 'text-gray-500 group-hover:text-gray-600',
+                      'mr-4 h-6 w-6',
+                    ]"
+                    aria-hidden="true"
+                  />
+                  {{ item.name }}
+                </a>
+              </nav>
+            </div>
+          </div>
+        </TransitionChild>
+        <div class="flex-shrink-0 w-14" aria-hidden="true">
+          <!-- Dummy element to force sidebar to shrink to fit close icon -->
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <!-- Static sidebar for desktop -->
+    <div class="hidden md:flex md:flex-shrink-0">
+      <div class="flex flex-col w-64">
+        <!-- Sidebar component, swap this element with another sidebar if you like -->
+        <div
+          class="flex flex-col flex-grow border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto"
+        >
+          <div class="flex items-center flex-shrink-0 px-4">
+            <img class="w-auto h-12" :src="iconURL" alt="Logo" />
+          </div>
+          <div class="mt-5 flex-grow flex flex-col">
+            <nav class="flex-1 px-2 bg-white space-y-1">
+              <a
+                v-for="item in navigation"
+                :key="item.name"
+                :href="item.url"
+                :class="[
+                  isActive(item.url)
+                    ? 'bg-gray-100 text-gray-900'
+                    : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+                  'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
+                ]"
+                :target="item.openInTab ? '_blank' : '_self'"
+              >
+                <component
+                  :is="item.icon"
+                  :class="[
+                    isActive(item.url)
+                      ? 'text-gray-600'
+                      : 'text-gray-500 group-hover:text-gray-600',
+                    'mr-3 h-6 w-6',
+                  ]"
+                  aria-hidden="true"
+                />
+                {{ item.name }}
+              </a>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col w-0 flex-1 overflow-hidden">
+      <div class="relative z-10 flex-shrink-0 flex h-16 bg-xy-blue shadow">
+        <button
+          class="px-4 border-r border-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 md:hidden"
+          @click="sidebarOpen = true"
+        >
+          <span class="sr-only">Open sidebar</span>
+          <MenuAlt2Icon class="h-6 w-6" aria-hidden="true" />
+        </button>
+        <div class="flex-1 px-4 flex justify-between">
+          <div class="flex-1 flex">
+            <h1 class="flex items-center text-2xl text-white">
+              <slot name="header"></slot>
+            </h1>
+          </div>
+          <div class="ml-4 flex items-center md:ml-6">
+            <!-- Profile dropdown -->
+            <Menu as="div" class="ml-3 relative">
+              <div>
+                <MenuButton
+                  class="max-w-xs flex items-center text-sm text-white rounded-full hover:bg-blue-500 hover:text-gray-200 focus:outline-none focus:ring focus:text-white"
+                >
+                  <span class="sr-only">Open user menu</span>
+                  <CogIcon class="h-8 w-8" fill="currentColor" />
+                </MenuButton>
+              </div>
+              <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="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <MenuItem
+                    v-for="item in userNavigation"
+                    :key="item.name"
+                    v-slot="{ active }"
+                  >
+                    <a
+                      :href="item.url"
+                      :class="[
+                        active ? 'bg-gray-100' : '',
+                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
+                      ]"
+                      >{{ item.name }}</a
+                    >
+                  </MenuItem>
+                </MenuItems>
+              </transition>
+            </Menu>
+          </div>
+        </div>
+      </div>
+
+      <main class="flex-1 relative overflow-y-auto focus:outline-none">
+        <div class="mx-auto">
+          <!-- Replace with your content -->
+          <slot></slot>
+          <!-- /End replace -->
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <Flash />
+  <Spinner />
+</template>

package/src/lib-components/layout/StackedLayout.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import Flash from "../overlays/Flash.vue"
+import Spinner from "../overlays/Spinner.vue"
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+} from "@headlessui/vue"
+import { MenuIcon, UserCircleIcon, XIcon } from "@heroicons/vue/outline"
+import * as NavTypes from "@/composables/nav"
+import User from "@/composables/user"
+
+const props = withDefaults(
+  defineProps<{
+    activeURL?: string
+    currentUser: User
+    iconURL: string
+    navigation: NavTypes.Item[]
+    userNavigation: NavTypes.Item[]
+  }>(),
+  {
+    activeURL: "",
+  }
+)
+const isActive = (url: string): boolean => {
+  return props.activeURL === url
+}
+</script>
+<template>
+  <div class="min-h-screen bg-gray-100">
+    <Disclosure as="nav" class="bg-white shadow-sm" v-slot="{ open }">
+      <div class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+          <div class="flex">
+            <div class="flex-shrink-0 flex items-center">
+              <img class="block h-8 w-auto" :src="iconURL" alt="XY Trees" />
+            </div>
+            <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+              <a
+                v-for="item in navigation"
+                :key="item.name"
+                :href="item.url"
+                :class="[
+                  isActive(item.url)
+                    ? 'border-blue-500 text-gray-900'
+                    : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-blue-500',
+                  'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-semibold',
+                ]"
+                :aria-current="isActive(item.url) ? 'page' : undefined"
+                >{{ item.name }}</a
+              >
+            </div>
+          </div>
+          <div class="hidden sm:ml-6 sm:flex sm:items-center">
+            <!-- Profile dropdown -->
+            <Menu as="div" class="ml-3 relative">
+              <div>
+                <MenuButton
+                  class="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                >
+                  <span class="sr-only">Open user menu</span>
+                  <UserCircleIcon class="text-gray-500 h-8 w-8 rounded-full" />
+                </MenuButton>
+              </div>
+              <transition
+                enter-active-class="transition ease-out duration-200"
+                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="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <MenuItem
+                    v-for="item in userNavigation"
+                    :key="item.name"
+                    v-slot="{ active }"
+                  >
+                    <a
+                      :href="item.url"
+                      :class="[
+                        active ? 'bg-gray-100' : '',
+                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
+                      ]"
+                      >{{ item.name }}</a
+                    >
+                  </MenuItem>
+                </MenuItems>
+              </transition>
+            </Menu>
+          </div>
+          <div class="-mr-2 flex items-center sm:hidden">
+            <!-- Mobile menu button -->
+            <DisclosureButton
+              class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <span class="sr-only">Open main menu</span>
+              <MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
+              <XIcon v-else class="block h-6 w-6" aria-hidden="true" />
+            </DisclosureButton>
+          </div>
+        </div>
+      </div>
+
+      <DisclosurePanel class="sm:hidden">
+        <div class="pt-2 pb-3 space-y-1">
+          <a
+            v-for="item in navigation"
+            :key="item.name"
+            :href="item.url"
+            :class="[
+              isActive(item.url)
+                ? 'bg-blue-50 border-blue-500 text-blue-700'
+                : 'border-transparent text-gray-700 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900',
+              'block pl-3 pr-4 py-2 border-l-4 text-base font-semibold',
+            ]"
+            :aria-current="isActive(item.url) ? 'page' : undefined"
+            >{{ item.name }}</a
+          >
+        </div>
+        <div class="pt-4 pb-3 border-t border-gray-200">
+          <div class="flex items-center px-4">
+            <div class="flex-shrink-0">
+              <UserCircleIcon class="text-gray-500 h-10 w-10 rounded-full" />
+            </div>
+            <div class="ml-3">
+              <div
+                class="text-base font-medium text-gray-800"
+                v-if="currentUser.name"
+                v-text="currentUser.name"
+              ></div>
+              <div
+                class="text-sm font-medium text-gray-500"
+                v-text="currentUser.email"
+              ></div>
+            </div>
+          </div>
+          <div class="mt-3 space-y-1">
+            <a
+              v-for="item in userNavigation"
+              :key="item.name"
+              :href="item.url"
+              class="block px-4 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
+              >{{ item.name }}</a
+            >
+          </div>
+        </div>
+      </DisclosurePanel>
+    </Disclosure>
+
+    <slot name="header"></slot>
+
+    <main>
+      <div class="mx-auto sm:px-6 lg:px-8">
+        <!-- Replace with your content -->
+        <div class="px-4 py-8 sm:px-0">
+          <slot></slot>
+        </div>
+        <!-- /End replace -->
+      </div>
+    </main>
+  </div>
+
+  <Flash />
+  <Spinner />
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  cards: {
+    primary: string
+    secondary: string
+  }[]
+}>()
+</script>
+<template>
+  <div
+    class="mt-5 grid grid-cols-1 gap-5"
+    :class="'lg:grid-cols-' + cards.length"
+  >
+    <div
+      class="bg-white overflow-hidden shadow rounded-lg"
+      v-for="(card, idx) in cards"
+      :key="idx"
+    >
+      <div class="px-4 py-5 sm:p-6 text-center">
+        <dl>
+          <dd
+            class="mt-1 text-3xl leading-9 font-semibold text-xy-blue"
+            v-text="card.primary"
+          ></dd>
+          <dt
+            class="text-sm leading-5 font-medium text-gray-700 truncate"
+            v-text="card.secondary"
+          ></dt>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import BaseAPI from "../../api/base"
+import DateFilter from "../layout/DateFilter.vue"
+import Paginator from "../navigation/Paginator.vue"
+
+const props = withDefaults(
+  defineProps<{
+    refreshTrigger?: number
+    reloadTrigger?: number
+    title: string
+    url: string
+  }>(),
+  {
+    refreshTrigger: 0,
+    reloadTrigger: 0,
+  }
+)
+
+const dateRange = ref<{ minDate: number; maxDate: number }>({
+  minDate: 0,
+  maxDate: 0,
+})
+const hasContent = ref(true)
+const items = ref<any[]>([])
+const pagination = ref({
+  page: 1,
+  perPage: 10,
+  totalItems: 0,
+  totalPages: 0,
+})
+const sortDir = ref("DESC")
+
+const loadAndRender = (checkForContent: boolean): void => {
+  const params = {
+    page: pagination.value.page,
+    perPage: pagination.value.perPage,
+    sortDir: sortDir.value,
+  }
+
+  BaseAPI.get(props.url, {}, Object.assign(params, dateRange.value)).then(
+    (success: any) => {
+      pagination.value = {
+        page: success.data.page,
+        perPage: success.data.perPage,
+        totalItems: success.data.totalItems,
+        totalPages: success.data.totalPages,
+      }
+      items.value = success.data.items
+      if (checkForContent) hasContent.value = items.value.length != 0
+    },
+    () => {
+      // TODO: let's make this really generic or configurable
+      window.VueBus.emit(
+        "Flash-show-generic-error",
+        "archive@xyplanningnetwork.com"
+      )
+    }
+  )
+}
+
+watch([sortDir, dateRange], () => {
+  loadAndRender(false)
+})
+
+watch(
+  () => props.refreshTrigger,
+  () => {
+    loadAndRender(false)
+  }
+)
+
+watch(
+  () => props.reloadTrigger,
+  () => {
+    // This lets parent components trigger a refresh of the current page depending on external actions.
+    pagination.value.page = 1
+    loadAndRender(true)
+  }
+)
+
+loadAndRender(true)
+</script>
+<template>
+  <div>
+    <DateFilter
+      :date-range="dateRange"
+      :sort-dir="sortDir"
+      :title="title"
+      @sort-dir-changed="sortDir = $event"
+      @date-range-changed="dateRange = $event"
+    />
+
+    <div class="shadow overflow-hidden sm:rounded-md border" v-if="hasContent">
+      <ul>
+        <li
+          v-for="(item, idx) in items"
+          :key="idx"
+          :class="{ 'border-t border-gray-200': idx > 0 }"
+        >
+          <slot :item="item"></slot>
+        </li>
+      </ul>
+    </div>
+
+    <slot name="empty" v-else></slot>
+
+    <Paginator
+      v-model="pagination"
+      @update:modelValue="loadAndRender(false)"
+      v-if="hasContent"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { DownloadIcon } from "@heroicons/vue/solid"
+defineProps<{
+  propsData: Record<string, unknown>
+  attribute: string
+}>()
+</script>
+<template>
+  <a :href="propsData[attribute] as string">
+    <DownloadIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
+  </a>
+</template>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ComponentPublicInstance, getCurrentInstance } from "vue"
+import * as TableTypes from "@/composables/table"
+
+defineProps<{
+  tableData: TableTypes.Static
+}>()
+
+const cellValue = (
+  item: Record<string, any>,
+  col: TableTypes.Column
+): string => {
+  if (col.key) {
+    return item[col.key]
+  }
+
+  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 ""
+}
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div
+          class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg"
+        >
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead>
+              <tr>
+                <th
+                  class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-900 uppercase bg-gray-50 leading-4"
+                  v-for="(col, idx) in tableData.columns"
+                  :key="idx"
+                  v-text="col.display"
+                ></th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr
+                v-for="(item, rowIdx) in tableData.items"
+                :key="item.id ? (item.id as string) : rowIdx"
+              >
+                <td
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                  v-for="(col, colIdx) in tableData.columns"
+                  :key="rowIdx + '-' + colIdx"
+                >
+                  <component
+                    :is="col.component"
+                    v-if="col.component"
+                    :props-data="item"
+                    :current-user="tableData.currentUser"
+                    :attribute="col.key"
+                  ></component>
+                  <span v-else v-text="cellValue(item, col)"></span>
+                </td>
+              </tr>
+
+              <tr v-if="tableData.items.length == 0">
+                <td
+                  :colspan="tableData.columns.length"
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
+                >
+                  No items were found!
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>