sprintify-ui 0.7.11 → 0.8.0

package/src/components/BaseDataTable.stories.js

@@ -5,9 +5,10 @@ import BaseSelect from './BaseSelect.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseAppSnackbars from './BaseAppSnackbars.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
-import { onBeforeUnmount } from 'vue';
+import { computed, onBeforeUnmount } from 'vue';
 import { DateTime } from 'luxon';
-import { templateDataTable } from '../../.storybook/utils';
+import { options, templateDataTable } from '../../.storybook/utils';
+import { cloneDeep } from 'lodash';
 
 export default {
   title: 'Data/BaseDataTable',
@@ -45,41 +46,9 @@ const templateComponents = {
   BaseAppDialogs,
 };
 
-const template = `
-<div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
-<br/>
-${templateDataTable}
-<BaseAppSnackbars></BaseAppSnackbars>
-<BaseAppDialogs></BaseAppDialogs>
-`;
-
-const templateSetup = (args) => {
-  function onCellClick() {
-    alert('cell click!');
-  }
-
-  const lastFetch = ref(null);
-
-  function onFetch() {
-    lastFetch.value = new Date();
-  }
-
-  return { args, onCellClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
-};
-
-const Template = (args) => ({
-  components: templateComponents,
-  setup() {
-    return templateSetup(args);
-  },
-  template: template,
-});
-
-export const Demo = Template.bind({});
-
-Demo.args = {
-  showUrl() {
-    return '/';
+const componentProps = {
+  rowTo(row) {
+    return `/articles/${row.id}`;
   },
   editUrl() {
     return '/';
@@ -131,7 +100,6 @@ Demo.args = {
         alert('hit');
       },
     },
-
   ],
   sections: [
     {
@@ -143,20 +111,44 @@ Demo.args = {
   ],
 };
 
+const template = `
+<div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
+<br/>
+${templateDataTable}
+<BaseAppSnackbars></BaseAppSnackbars>
+<BaseAppDialogs></BaseAppDialogs>
+`;
+
+const templateSetup = (args) => {
+  function onRowClick(...args) {
+    console.log("Row clicked!");
+    console.log(JSON.parse(JSON.stringify(args)));
+  }
+
+  const lastFetch = ref(null);
+
+  function onFetch() {
+    lastFetch.value = new Date();
+  }
+
+  return { args, onRowClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
+};
+
+const Template = (args) => ({
+  components: templateComponents,
+  setup() {
+    return templateSetup(args);
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+Demo.args = componentProps;
+
 export const Small = Template.bind({});
 Small.args = {
-  editUrl() {
-    return '/';
-  },
-  deleteUrl() {
-    return '/';
-  },
   size: 'sm',
-  searchable: true,
-  toggleable: true,
-  actions: [],
-};
-
+}
 
 const VIfOnBaseTableColumn = (args) => ({
   components: templateComponents,
@@ -234,4 +226,102 @@ Simple.args = {
   searchable: false,
   toggleable: false,
   actions: [],
-};
+};
+
+const LocalTemplate = (args) => ({
+  components: templateComponents,
+  setup() {
+
+    const baseDataTableRef = ref(null);
+
+    const onCellClick = (...args) => {
+      alert('Cell clicked! View console log for details.');
+      console.log(JSON.parse(JSON.stringify(args)));
+    };
+
+    const filteredItems = computed(() => {
+      return options
+        .filter((item) => {
+          const type = baseDataTableRef.value?.query.filter?.type ?? '';
+
+          if (!type) {
+            return true;
+          }
+
+          return item.type === type;
+        });
+    });
+
+    return { args, filteredItems, baseDataTableRef, onCellClick };
+  },
+  template: `<BaseDataTable ref="baseDataTableRef" v-bind="args" :items="filteredItems">
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Label"
+    sortable
+    field="label"
+    :toggle="false"
+  >
+    <div class="max-w-sm">
+      <div class="font-medium text-slate-900">
+        {{ row.label }}
+      </div>
+      <p class="text-xs leading-tight text-slate-500">
+        {{ row.value ?? '-' }}
+      </p>
+    </div>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Value"
+    field="value"
+    :toggle="true"
+    :toggle-default="false"
+    sortable
+    customKey="value"
+  >
+    <p>{{ row.value }}</p>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Type"
+    field="type"
+    sortable
+    @click="onCellClick"
+  >
+    <p>{{ row.type }}</p>
+  </BaseTableColumn>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.filter.type ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('filter.type', $event)"
+        >
+          <option value="jedi">
+            Jedi
+          </option>
+          <option value="sith">
+            Sith
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
+</BaseDataTable>`,
+});
+
+export const Local = LocalTemplate.bind({});
+const localProps = cloneDeep(componentProps);
+localProps.url = null;
+localProps.perPage = 4;
+localProps.rowTo = undefined;
+Local.args = localProps;

package/src/components/BaseDataTable.vue

@@ -1,6 +1,8 @@
 <template>
   <BaseDataIterator
-    ref="dataIterator"
+    ref="dataIteratorRef"
+    :items="items"
+    :per-page="perPage"
     :url="url"
     :url-query="urlQuery"
     :default-query="defaultQuery"
@@ -15,17 +17,7 @@
     @fetch="onFetch"
     @will-scroll-top="onWillScrollTop"
   >
-    <template
-      #default="{
-        items,
-        loading,
-        sortField,
-        sortDirection,
-        onSortChange,
-        error,
-        firstLoad,
-      }"
-    >
+    <template #default="dataIteratorProps">
       <BaseCard
         clipped
         class="w-full overflow-hidden"
@@ -77,21 +69,22 @@
         <BaseDataTableTemplate
           ref="table"
           :checked-rows="newCheckedRows"
-          :data="items"
-          :loading="loading"
+          :data="dataIteratorProps.items"
+          :loading="dataIteratorProps.loading"
           :detailed="detailed"
           :has-detailed-visible="hasDetailedVisible"
           :checkable="checkable"
           :is-row-checkable="isRowCheckable"
-          checkbox-position="left"
-          :sort-field="sortField"
-          :sort-direction="sortDirection"
+          :sort-field="dataIteratorProps.sortField"
+          :sort-direction="dataIteratorProps.sortDirection"
           :max-height="maxHeight"
           :visible-columns="visibleColumns"
           :size="sizeInternal.size.value"
+          :row-to="rowToInternal"
+          :row-href="rowHref"
           @update:checked-rows="onCheckedRowsUpdate"
-          @sort="onSortChange"
-          @cell-click="onCellClick"
+          @sort="dataIteratorProps.onSortChange"
+          @row-click="onRowClick"
         >
           <template #default>
             <slot />
@@ -100,11 +93,11 @@
               v-slot="{ row }"
               :visible="rowActionsInternal.length"
               :toggle="false"
-              :clickable="false"
+              ignore-row-interactions
               custom-key="actions"
               class="overflow-hidden"
             >
-              <div class="flex justify-end gap-1 pr-2 text-right">
+              <div class="flex justify-end gap-1 text-right w-full">
                 <div class="btn-group">
                   <template
                     v-for="rowAction in visibleRowActions"
@@ -150,7 +143,7 @@
 
           <template #empty>
             <div
-              v-if="error"
+              v-if="dataIteratorProps.error"
               class="flex items-center justify-center py-16"
             >
               <div class="flex flex-col items-center justify-center">
@@ -164,7 +157,7 @@
               </div>
             </div>
             <div
-              v-else-if="firstLoad"
+              v-else-if="dataIteratorProps.firstLoad"
               class="flex items-center justify-center py-16"
             >
               <div class="flex flex-col items-center">
@@ -258,8 +251,6 @@ import { useInputSize } from '@/composables/inputSize';
 import BaseButton from './BaseButton.vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
 
-const router = useRouter();
-
 const http = config.http;
 
 const dialogs = useDialogsStore();
@@ -268,12 +259,29 @@ const snackbars = useSnackbarsStore();
 const table = ref<null | InstanceType<typeof BaseDataTableTemplate>>(null);
 
 const props = defineProps({
+
+  /**
+   * Data table items
+   */
+  items: {
+    default: undefined,
+    type: Array as PropType<CollectionItem[] | undefined>,
+  },
+
+  /**
+   * Per page (only when using local data)
+   */
+  perPage: {
+    default: 16,
+    type: Number,
+  },
+
   /**
    * Base URL from which to make requests
    */
   url: {
-    required: true,
-    type: String,
+    default: undefined,
+    type: String as PropType<string | undefined>,
   },
 
   /**
@@ -303,6 +311,25 @@ const props = defineProps({
     >,
   },
 
+  rowTo: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  rowHref: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => string) | undefined
+    >,
+  },
+
+  onRowClick: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem, index: number, event: MouseEvent) => void>,
+  },
+
   /**
    * Show/Hide edit button
    */
@@ -466,16 +493,25 @@ const props = defineProps({
     type: String as PropType<Size>,
   },
 
+  /**
+   * Data iterator sections
+   */
   sections: {
     default: undefined,
     type: Array as PropType<DataIteratorSection[]>,
   },
 
+  /**
+   * Row actions
+   */
   rowActions: {
     default: undefined,
     type: Array as PropType<RowAction[]>,
   },
 
+  /**
+   * Number of visible row actions
+   */
   numberOfVisibleRowActions: {
     default: 2,
     type: Number,
@@ -489,6 +525,9 @@ const props = defineProps({
     type: Boolean,
   },
 
+  /**
+   * Filters position
+   */
   filtersPosition: {
     default: 'section',
     type: String as PropType<'top' | 'section'>,
@@ -508,26 +547,21 @@ const menuSize = computed(() => {
 })
 
 const emit = defineEmits([
-  'cell-click',
   'delete',
   'update:checked-rows',
   'fetch',
 ]);
 
-const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
+const dataIteratorRef = ref<null | InstanceType<typeof BaseDataIterator>>(null);
 
-/*
-|--------------------------------------------------------------------------
-| Handlers
-|--------------------------------------------------------------------------
-*/
-
-function onCellClick(payload: CollectionItem) {
+const rowToInternal = computed(() => {
   if (props.showUrl) {
-    router.push(props.showUrl(payload));
+    console.warn('showUrl is deprecated, use rowTo instead');
+    return props.showUrl;
   }
-  emit('cell-click', payload);
-}
+
+  return props.rowTo;
+});
 
 /*
 |--------------------------------------------------------------------------
@@ -596,7 +630,7 @@ const onDelete = (row: CollectionItem) => {
 |--------------------------------------------------------------------------
 */
 
-const visibleColumns = ref<number[]>([]);
+const visibleColumns = ref<string[]>([]);
 
 // Find visible columns in local storage
 const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';
@@ -605,7 +639,7 @@ const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY =
 
 const visibleColumnsFromStorage = JSON.parse(
   localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
-) as number[];
+) as string[];
 
 // If found, set visibleColumns
 if (
@@ -759,10 +793,10 @@ function onWillScrollTop() {
   if (props.maxHeight) {
     table.value?.scrollTop();
 
-    const top = dataIterator.value?.$el?.getBoundingClientRect()?.top ?? 0;
+    const top = dataIteratorRef.value?.$el?.getBoundingClientRect()?.top ?? 0;
 
     if (top < 0) {
-      dataIterator.value?.scrollIntoView();
+      dataIteratorRef.value?.scrollIntoView();
     }
   }
 }
@@ -786,21 +820,21 @@ function onFetch(
 */
 
 function fetch() {
-  if (!dataIterator.value) {
+  if (!dataIteratorRef.value) {
     return;
   }
-  dataIterator.value.fetch();
+  dataIteratorRef.value.fetch();
 }
 
 function fetchWithoutLoading() {
-  if (!dataIterator.value) {
+  if (!dataIteratorRef.value) {
     return;
   }
-  dataIterator.value.fetchWithoutLoading();
+  dataIteratorRef.value.fetchWithoutLoading();
 }
 
 const dataIteratorQuery = computed((): DataTableQuery | null => {
-  return dataIterator.value?.query ?? null;
+  return dataIteratorRef.value?.query ?? null;
 });
 
 defineExpose({