@xy-planning-network/trees 0.3.2 → 0.4.0-rc-1

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

@@ -1,3 +1,147 @@
+<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 "../../types/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
@@ -52,7 +196,7 @@
               <span v-if="!!col.display.length">{{ col.display }}</span>
               <span
                 class="cursor-pointer"
-                @click.prevent="handleSort(col.sort)"
+                @click.prevent="handleSort(col.sort as string)"
                 v-if="col.sort"
               >
                 <svg
@@ -140,128 +284,8 @@
 
     <Paginator
       v-model="pagination"
-      @update:modelValue="loadAndRender(false)"
+      @update:modelValue="loadAndRender()"
       v-if="hasContent"
     />
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Watch, Vue } from "vue-property-decorator";
-import { AxiosResponse } from "axios";
-import DateRangePicker from "../forms/DateRangePicker.vue";
-import Paginator from "../navigation/Paginator.vue";
-import BaseAPI from "../../api/base";
-import TableTypes from "../../types/table";
-
-@Options({ components: { DateRangePicker, Paginator }, name: "Table" })
-export default class Table extends Vue {
-  @Prop({ type: Boolean, required: false, default: false }) clickable!: boolean;
-  @Prop({ type: Boolean, required: false, default: true }) loader!: boolean;
-  @Prop({ type: Object, required: true }) tableData!: TableTypes.Dynamic;
-
-  currentSort = "";
-  currentSortDirection = "";
-  dateRange: { minDate: number; maxDate: number } = {
-    minDate: 0,
-    maxDate: 0,
-  };
-  items: any[] = [];
-  pagination = {
-    page: 1,
-    perPage: 10,
-    totalItems: 0,
-    totalPages: 0,
-  };
-  query = "";
-
-  @Watch("tableData.refreshTrigger")
-  onRefreshTrigger(): void {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    this.loadAndRender();
-  }
-
-  @Watch("tableData.reloadTrigger")
-  onReloadTrigger(): void {
-    // This lets parent components trigger a reload of page 1 depending on external actions.
-    this.reloadTable();
-  }
-
-  created() {
-    if (this.tableData.defaultSort) {
-      this.currentSort = this.tableData.defaultSort;
-      this.currentSortDirection = this.tableData.defaultSortDirection
-        ? this.tableData.defaultSortDirection
-        : "desc";
-    }
-
-    this.loadAndRender();
-  }
-
-  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) {
-      return col.presenter(item, this);
-    }
-
-    return "";
-  }
-  dateRangeChanged(dateRange: { minDate: number; maxDate: number }): void {
-    this.pagination.page = 1;
-    this.dateRange = dateRange;
-    this.loadAndRender();
-  }
-  handleSort(selectedSort: string): void {
-    if (this.currentSort == selectedSort) {
-      this.currentSortDirection =
-        this.currentSortDirection === "desc" ? "asc" : "desc";
-    } else {
-      this.currentSort = selectedSort;
-      this.currentSortDirection = "desc";
-    }
-
-    this.loadAndRender();
-  }
-  loadAndRender(): void {
-    const params = {
-      minDate: this.dateRange.minDate,
-      maxDate: this.dateRange.maxDate,
-      page: this.pagination.page,
-      perPage: this.pagination.perPage,
-      sort: this.currentSort,
-      sortDir: this.currentSortDirection,
-      q: this.query,
-    };
-
-    BaseAPI.get(this.tableData.url, { skipLoader: !this.loader }, params).then(
-      (success: AxiosResponse) => {
-        this.pagination = {
-          page: success.data.page,
-          perPage: success.data.perPage,
-          totalItems: success.data.totalItems,
-          totalPages: success.data.totalPages,
-        };
-        this.items = success.data.items;
-      },
-      () => {
-        window.VueBus.emit(
-          "Flash-show-generic-error",
-          "membership@xyplanningnetwork.com"
-        );
-      }
-    );
-  }
-  reloadTable(): void {
-    this.pagination.page = 1;
-    this.loadAndRender();
-  }
-
-  get hasContent(): boolean {
-    return this.items.length ? true : false;
-  }
-}
-</script>

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

@@ -1,3 +1,42 @@
+<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 "../../types/table"
+import User from "../../types/users"
+
+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
@@ -37,46 +76,3 @@
     </transition>
   </Menu>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { DotsVerticalIcon } from "@heroicons/vue/solid";
-import TableTypes from "../../types/table";
-import UserTypes from "../../types/users";
-
-@Options({
-  components: { DotsVerticalIcon, Menu, MenuButton, MenuItem, MenuItems },
-  name: "ActionsDropdown",
-})
-export default class ActionsDropdown extends Vue {
-  @Prop({ type: Object, required: true }) currentUser!: UserTypes.User;
-  @Prop({ type: Array, required: true }) items!: Array<TableTypes.MenuItem>;
-  @Prop({ type: Object, required: true }) propsData!: any;
-
-  hasActionItems = false;
-
-  mounted(): void {
-    for (let item of this.items) {
-      if (!item.show) {
-        this.hasActionItems = true;
-        return;
-      }
-
-      const showActionItem = item.show(this.propsData, this.currentUser);
-      if (showActionItem) {
-        this.hasActionItems = true;
-        return;
-      }
-    }
-  }
-
-  emitEvent(event: string): void {
-    window.VueBus.emit(event, this.propsData);
-  }
-  show(item: TableTypes.MenuItem): boolean {
-    if (!item.show) return true;
-    return item.show(this.propsData, this.currentUser);
-  }
-}
-</script>

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

@@ -1,12 +1,72 @@
+<script lang="ts">
+// TODO: explore this further as a pattern for exporting commonly used types
+export interface Pagination {
+  page: number
+  perPage: number
+  totalItems: number
+  totalPages: number
+}
+</script>
+<script setup lang="ts">
+import { computed, ref } from "vue"
+
+const props = defineProps<{
+  modelValue: Pagination
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", pagination: Pagination): void
+}>()
+
+const pagination = ref<Pagination>(props.modelValue)
+
+const updateModelValue = () => {
+  emit("update:modelValue", pagination.value)
+}
+
+const changePage = (page: number): void => {
+  pagination.value.page = page
+  updateModelValue()
+}
+
+const pageShortcuts = computed((): number[] => {
+  const shortcuts: number[] = []
+
+  // If total pages is less than or equal to 4, just return 1, 2, 3, 4
+  if (pagination.value.totalPages <= 4) {
+    for (let i = 0; i < pagination.value.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 = pagination.value.totalPages - pagination.value.page
+  if (pagesLeft >= 3) {
+    for (let i = 0; i < 4; i++) {
+      shortcuts.push(pagination.value.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(pagination.value.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)"
+        @click.prevent="changePage(pagination.page - 1)"
         :class="
-          modelValue.page == 1
+          pagination.page == 1
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -30,7 +90,7 @@
         :key="i"
         v-text="i"
         :class="
-          modelValue.page === i
+          pagination.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'
         "
@@ -42,9 +102,9 @@
       <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)"
+        @click.prevent="changePage(pagination.page + 1)"
         :class="
-          modelValue.page >= modelValue.totalPages
+          pagination.page >= pagination.totalPages
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -61,78 +121,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Emit, Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Paginator" })
-export default class Paginator extends Vue {
-  @Prop({ type: Object, required: true }) modelValue!: {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-  };
-
-  @Emit("update:modelValue")
-  updateModelValue(): {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-  } {
-    return this.modelValue;
-  }
-
-  changePage(page: number): void {
-    this.modelValue.page = page;
-    this.updateModelValue();
-  }
-  changePerPage(parent: HTMLElement, perPage: number): void {
-    parent.blur();
-    this.modelValue.page = 1;
-    this.modelValue.perPage = perPage;
-    this.updateModelValue();
-  }
-
-  get endingItem(): number {
-    const end = this.modelValue.page * this.modelValue.perPage;
-    return end > this.modelValue.totalItems ? this.modelValue.totalItems : end;
-  }
-  get pageShortcuts(): number[] {
-    const shortcuts: number[] = [];
-
-    // If total pages is less than or equal to 4, just return 1, 2, 3, 4
-    if (this.modelValue.totalPages <= 4) {
-      for (let i = 0; i < this.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 = this.modelValue.totalPages - this.modelValue.page;
-    if (pagesLeft >= 3) {
-      for (let i = 0; i < 4; i++) {
-        shortcuts.push(this.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(this.modelValue.totalPages - i);
-    }
-    return shortcuts;
-  }
-  get startingItem(): number {
-    const start =
-      this.modelValue.page * this.modelValue.perPage -
-      this.modelValue.perPage +
-      1;
-    return this.modelValue.totalItems === 0 ? 0 : start;
-  }
-}
-</script>

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

@@ -1,3 +1,34 @@
+<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">
@@ -32,41 +63,21 @@
 
     <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">
-          Back
-        </button>
+        <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 ? nextText : 'Next'"
+          v-text="nextText"
         ></button>
       </span>
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Emit, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Steps" })
-export default class Steps extends Vue {
-  @Prop({ type: Boolean, required: false }) hideActions?: boolean;
-  @Prop({ type: Boolean, required: false }) hidePrevious?: boolean;
-  @Prop({ type: String, required: false }) nextText?: string;
-  @Prop({ type: Number, required: true }) step!: number;
-  @Prop({ type: Number, required: true }) total!: number;
-
-  @Emit()
-  next(): void {
-    return;
-  }
-
-  @Emit()
-  previous(): void {
-    return;
-  }
-}
-</script>