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

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

@@ -1,3 +1,35 @@
+<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 "../../types/nav"
+import User from "../../types/users"
+
+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 }">
@@ -137,58 +169,3 @@
   <Flash />
   <Spinner />
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import Flash from "../overlays/Flash.vue";
-import Spinner from "../overlays/Spinner.vue";
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-} from "@headlessui/vue";
-import {
-  BellIcon,
-  MenuIcon,
-  UserCircleIcon,
-  XIcon,
-} from "@heroicons/vue/outline";
-import NavTypes from "../../types/nav";
-import UserTypes from "../../types/users";
-
-@Options({
-  components: {
-    Flash,
-    Spinner,
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    BellIcon,
-    MenuIcon,
-    UserCircleIcon,
-    XIcon,
-  },
-  name: "StackedLayout",
-})
-export default class StackedLayout extends Vue {
-  @Prop({ type: String, required: false }) activeURL?: string;
-  @Prop({ type: Object, required: true }) currentUser!: UserTypes.User;
-  @Prop({ type: String, required: true }) iconURL!: string;
-  @Prop({ type: Array, required: true }) navigation!: NavTypes.Item[];
-  @Prop({ type: Array, required: true }) userNavigation!: NavTypes.Item[];
-
-  sidebarOpen = false;
-
-  isActive(url: string): boolean {
-    return this.activeURL === url;
-  }
-}
-</script>

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

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  cards: {
+    primary: string
+    secondary: string
+  }[]
+}>()
+</script>
 <template>
   <div
     class="mt-5 grid grid-cols-1 gap-5"
@@ -23,15 +31,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Cards" })
-export default class Cards extends Vue {
-  @Prop({ type: Array, required: true }) cards!: {
-    primary: string;
-    secondary: string;
-  }[];
-}
-</script>

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

@@ -1,3 +1,86 @@
+<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
@@ -29,86 +112,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue, Watch } from "vue-property-decorator";
-import BaseAPI from "../../api/base";
-import DateFilter from "../layout/DateFilter.vue";
-import Paginator from "../navigation/Paginator.vue";
-
-@Options({ components: { DateFilter, Paginator }, name: "DetailList" })
-export default class DetailList extends Vue {
-  @Prop({ type: Number, required: false }) refreshTrigger?: number;
-  @Prop({ type: Number, required: false }) reloadTrigger?: number;
-  @Prop({ type: String, required: true }) title!: string;
-  @Prop({ type: String, required: true }) url!: string;
-
-  @Watch("sortDir")
-  onSortDir(): void {
-    this.loadAndRender(false);
-  }
-
-  @Watch("dateRange")
-  onDateRange(): void {
-    this.loadAndRender(false);
-  }
-
-  @Watch("refreshTrigger")
-  onRefreshTrigger(): void {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    this.loadAndRender(false);
-  }
-
-  @Watch("reloadTrigger")
-  onReloadTrigger(): void {
-    // This lets parent components trigger a refresh of the current page depending on external actions.
-    this.pagination.page = 1;
-    this.loadAndRender(true);
-  }
-
-  dateRange: { minDate: number; maxDate: number } = {
-    minDate: 0,
-    maxDate: 0,
-  };
-  hasContent = true;
-  items: any[] = [];
-  pagination = {
-    page: 1,
-    perPage: 10,
-    totalItems: 0,
-    totalPages: 0,
-  };
-  sortDir = "DESC";
-
-  created() {
-    this.loadAndRender(true);
-  }
-
-  loadAndRender(checkForContent: boolean): void {
-    const params = {
-      page: this.pagination.page,
-      perPage: this.pagination.perPage,
-      sortDir: this.sortDir,
-    };
-
-    BaseAPI.get(this.url, {}, Object.assign(params, this.dateRange)).then(
-      (success: any) => {
-        this.pagination = {
-          page: success.data.page,
-          perPage: success.data.perPage,
-          totalItems: success.data.totalItems,
-          totalPages: success.data.totalPages,
-        };
-        this.items = success.data.items;
-        if (checkForContent) this.hasContent = this.items.length != 0;
-      },
-      () => {
-        window.VueBus.emit(
-          "Flash-show-generic-error",
-          "archive@xyplanningnetwork.com"
-        );
-      }
-    );
-  }
-}
-</script>

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

@@ -1,16 +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]">
+  <a :href="propsData[attribute] as string">
     <DownloadIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
   </a>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import { DownloadIcon } from "@heroicons/vue/solid";
-
-@Options({ name: "DownloadCell", components: { DownloadIcon } })
-export default class DownloadCell extends Vue {
-  @Prop({ type: Object, required: true }) propsData!: Record<string, unknown>;
-  @Prop({ type: String, required: true }) attribute!: string;
-}
-</script>

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

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { ComponentPublicInstance, getCurrentInstance } from "vue"
+import * as TableTypes from "../../types/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">
@@ -19,7 +48,7 @@
             <tbody class="bg-white divide-y divide-gray-200">
               <tr
                 v-for="(item, rowIdx) in tableData.items"
-                :key="item.id ? item.id : rowIdx"
+                :key="item.id ? (item.id as string) : rowIdx"
               >
                 <td
                   class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
@@ -52,25 +81,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { Options, Prop, Vue } from "vue-property-decorator";
-import TableTypes from "../../types/table";
-
-@Options({ name: "StaticTable" })
-export default class StaticTable extends Vue {
-  @Prop({ type: Object, required: true }) tableData!: TableTypes.Static;
-
-  cellValue(item: Record<string, any>, col: TableTypes.Column): string {
-    if (col.key) {
-      return item[col.key];
-    }
-
-    if (col.presenter) {
-      return col.presenter(item, this);
-    }
-
-    return "";
-  }
-}
-</script>

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>