sprintify-ui 0.0.0

package/src/components/BaseDataTable.stories.js

@@ -0,0 +1,95 @@
+import BaseDataTable from './BaseDataTable.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseBoolean from './BaseBoolean.vue';
+
+export default {
+  title: 'Data/BaseDataTable',
+  component: BaseDataTable,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    resource: 'articles',
+    urlQuery: {
+      per_page: 5,
+    },
+    historyMode: false,
+  },
+};
+
+const template = `
+<BaseDataTable v-bind="args">
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Titre"
+    sortable
+    field="title->en"
+  >
+    <div class="max-w-sm">
+      <div class="font-medium text-slate-900">
+        {{ row.title }}
+      </div>
+      <p class="text-xs leading-tight text-slate-500">
+        {{ row.subtitle }}
+      </p>
+    <div>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="VIP"
+    field="access_level"
+    sortable
+  >
+    <BaseBoolean :model-value="row.access_level == 'vip'" />
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Vote"
+    field="votes_avg_score"
+    sortable
+  >
+    <div class="">
+      {{ Math.round(row.votes_avg_score) }} / 5
+    </div>
+  </BaseTableColumn>
+</BaseDataTable>
+`;
+
+const Template = (args) => ({
+  components: { BaseDataTable, BaseTableColumn, BaseBoolean },
+  setup() {
+    return { args };
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  searchable: true,
+  actions: [
+    {
+      label: 'Open Google',
+      icon: 'heroicons:link',
+      href: 'https://google.com',
+    },
+    {
+      label: 'Export',
+      icon: 'heroicons:table-cells',
+      action: () => alert('export!'),
+    },
+    { line: true },
+    {
+      label: 'Delete all',
+      icon: 'heroicons:trash',
+      action: () => alert('Delete All!'),
+      color: 'danger',
+    },
+  ],
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+  searchable: false,
+  actions: [],
+};

package/src/components/BaseDataTable.vue

@@ -0,0 +1,489 @@
+<template>
+  <BaseDataIterator
+    ref="dataIterator"
+    :url="url"
+    :route-key-name="routeKeyName"
+    :url-query="urlQuery"
+    :default-query="defaultQuery"
+    :searchable="searchable"
+    :actions="actions"
+    :history-mode="historyMode"
+  >
+    <template
+      #default="{
+        items,
+        loading,
+        sortField,
+        sortDirection,
+        onSortChange,
+        error,
+        firstLoad,
+      }"
+    >
+      <BaseCard clipped class="isolate w-full overflow-hidden">
+        <BaseTable
+          ref="table"
+          :data="items"
+          :loading="loading"
+          :detailed="detailed"
+          :has-detailed-visible="hasDetailedVisible"
+          :checkable="checkable"
+          :checkable-actions="checkableActions"
+          :checked-rows="checkedRows"
+          :is-row-checkable="isRowCheckable"
+          checkbox-position="left"
+          :sort-field="sortField"
+          :sort-direction="sortDirection"
+          :max-height="maxHeight"
+          :visible-columns="visibleColumns"
+          @sort="onSortChange"
+          @check="$emit('check', $event)"
+          @update:checked-rows="$emit('update:checked-rows', $event)"
+          @check-all="$emit('checkAll', $event)"
+          @click="onClick"
+        >
+          <template #default>
+            <slot />
+
+            <BaseTableColumn
+              v-slot="{ row }"
+              :visible="editButton || deleteButton || $slots.rowActions != null"
+              :always-visible="true"
+            >
+              <div class="flex justify-end text-right">
+                <slot name="rowActions" :row="row" />
+
+                <router-link
+                  v-if="editButton && editUrl"
+                  :to="editUrl(row)"
+                  :disabled="!canUpdate(row)"
+                >
+                  <button class="btn btn-white p-2">
+                    <Icon
+                      icon="heroicons:cog-6-tooth-solid"
+                      class="text-slate-500"
+                    />
+                  </button>
+                </router-link>
+
+                <button
+                  v-if="deleteButton && deleteUrl"
+                  type="button"
+                  class="btn btn-white p-2"
+                  :disabled="!canDelete(row)"
+                  @click="onDeleteClick(row)"
+                >
+                  <Icon icon="heroicons:trash-solid" class="text-slate-500" />
+                </button>
+              </div>
+            </BaseTableColumn>
+          </template>
+
+          <template #detail="propsDetail">
+            <slot name="detail" v-bind="propsDetail" />
+          </template>
+
+          <template #checkedHeader="propsCheckHeader">
+            <slot name="checkedHeader" v-bind="propsCheckHeader" />
+          </template>
+
+          <template #empty>
+            <div v-if="error" class="flex items-center justify-center py-16">
+              <div class="flex flex-col items-center justify-center">
+                <Icon
+                  icon="heroicons:x-circle"
+                  class="h-10 w-10 text-red-600"
+                />
+                <p class="mt-3 text-center text-sm text-slate-600">
+                  {{ $t('sui.whoops') }}
+                </p>
+              </div>
+            </div>
+            <div
+              v-else-if="firstLoad"
+              class="flex items-center justify-center py-16"
+            >
+              <div class="flex flex-col items-center">
+                <img
+                  :src="'/img/empty-states/data.svg'"
+                  alt="No data"
+                  width="100"
+                />
+                <p class="mt-3 text-center text-sm text-slate-600">
+                  {{ $t('sui.nothing_found') }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </BaseTable>
+      </BaseCard>
+    </template>
+
+    <template
+      v-if="$slots.filters"
+      #filters="{ query, updateQuery, updateQueryValue }"
+    >
+      <slot
+        name="filters"
+        :query="query"
+        :update-query="updateQuery"
+        :update-query-value="updateQueryValue"
+      />
+    </template>
+
+    <template #sidebarTop="sidebarProps">
+      <slot name="sidebarTop" v-bind="sidebarProps"></slot>
+    </template>
+
+    <template #sidebarBottom>
+      <div class="mb-3">
+        <h3
+          class="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-500"
+        >
+          {{ $t('sui.columns') }}
+        </h3>
+        <BaseCard>
+          <BaseCardRow size="sm">
+            <BaseDataTableToggleColumns
+              v-model:visibleColumns="visibleColumns"
+              :table="table"
+              @update:visible-columns="onUpdateVisibleColumn"
+            ></BaseDataTableToggleColumns>
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </template>
+  </BaseDataIterator>
+</template>
+
+<script lang="ts" setup>
+import { PropType, Ref } from 'vue';
+import {
+  CollectionItem,
+  DataTableQuery,
+  MenuItemInterface,
+} from '@/types/types';
+import { useDialogsStore } from '../stores/dialogs';
+import { useNotificationsStore } from '../stores/notifications';
+import BaseDataIterator from './BaseDataIterator.vue';
+import { isArray } from 'lodash';
+
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseTable from './BaseTable.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseDataTableToggleColumns from './BaseDataTableToggleColumns.vue';
+import { config } from 'src';
+
+const i18n = useI18n();
+
+const http = config.http;
+
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
+
+const table = ref(null) as Ref<null | InstanceType<typeof BaseTable>>;
+
+const props = defineProps({
+  /**
+   * Base URL from which to make requests
+   */
+  url: {
+    required: true,
+    type: String,
+  },
+
+  /**
+   * Show/Hide edit button
+   */
+  editButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Show/Hide delete button
+   */
+  deleteButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Route key name for Laravel route model binding
+   */
+  routeKeyName: {
+    default: 'id',
+    type: String,
+  },
+
+  /**
+   * Query params that always get applied
+   */
+  urlQuery: {
+    default: undefined,
+    type: Object as PropType<Record<string, any>>,
+  },
+
+  /**
+   * Query params that gets applied by default
+   * These may be overwritten by URL params generated by the data-table or filters
+   */
+  defaultQuery: {
+    default: undefined,
+    type: Object as PropType<DataTableQuery>,
+  },
+
+  /**
+   * Edit url for router link
+   */
+  editUrl: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem) => string>,
+  },
+
+  /**
+   * Delete endpoint to delete an item
+   */
+  deleteUrl: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem) => string>,
+  },
+
+  /**
+   * Show toggle-able details on each row
+   */
+  detailed: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Has detailed visible
+   */
+  hasDetailedVisible: {
+    default() {
+      return true;
+    },
+    type: Function as PropType<(row: any) => boolean>,
+  },
+
+  /**
+   * Makes row checkable
+   */
+  checkable: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Actions on each row
+   */
+  checkableActions: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+
+  /**
+   * Checked rows array
+   */
+  checkedRows: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Record<string, any>[]>,
+  },
+
+  /**
+   * Check is a given row is checkable
+   */
+  isRowCheckable: {
+    default() {
+      return () => true;
+    },
+    type: Function,
+  },
+
+  /**
+   * Adds a search bar
+   */
+  searchable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Actions
+   */
+  actions: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+
+  /**
+   * Save data table state in URL
+   */
+  historyMode: {
+    default: true,
+    type: Boolean,
+  },
+
+  /*
+   * Max height (in px)
+   */
+  maxHeight: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const emit = defineEmits([
+  'click',
+  'delete',
+  'checkAll',
+  'update:checked-rows',
+  'check',
+]);
+
+const dataIterator = ref(null) as Ref<null | InstanceType<
+  typeof BaseDataIterator
+>>;
+
+/*
+|--------------------------------------------------------------------------
+| Handlers
+|--------------------------------------------------------------------------
+*/
+
+function onClick(payload: CollectionItem) {
+  emit('click', payload);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Gate helpers
+|--------------------------------------------------------------------------
+*/
+
+const gate = (row: CollectionItem, action: string): boolean => {
+  if (row.can && Object.prototype.hasOwnProperty.call(row.can, action)) {
+    return row.can[action];
+  }
+  return true;
+};
+
+const canUpdate = (row: CollectionItem): boolean => {
+  return gate(row, 'update');
+};
+
+const canDelete = (row: CollectionItem): boolean => {
+  return gate(row, 'delete');
+};
+
+function onDeleteClick(row: CollectionItem) {
+  dialogs.push({
+    title: i18n.t('sui.delete_record') + '?',
+    message: i18n.t('sui.delete_record_description'),
+    color: 'danger',
+    closeOnOutsideClick: false,
+    confirmText: i18n.t('sui.yes_delete'),
+    onConfirm: () => onDelete(row),
+  });
+}
+
+const onDelete = (row: CollectionItem) => {
+  if (!props.deleteUrl) {
+    return;
+  }
+
+  http.delete(props.deleteUrl(row)).then((response) => {
+    if (response.data && response.data.message) {
+      notifications.push({
+        title: i18n.t('sui.success'),
+        text: response.data.message,
+        color: 'success',
+      });
+    }
+    emit('delete', row);
+
+    // Refetch even if URL is the same
+    fetch();
+  });
+};
+
+/*
+|--------------------------------------------------------------------------
+| Toggle columns
+|--------------------------------------------------------------------------
+*/
+
+const visibleColumns = ref([]) as Ref<number[]>;
+
+// Find visible columns in local storage
+const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';
+const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY =
+  VISIBLE_COLUMNS_LOCAL_STORAGE + window.location.pathname;
+
+const visibleColumnsFromStorage = JSON.parse(
+  localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
+) as number[];
+
+// If found, set visibleColumns
+if (
+  visibleColumnsFromStorage &&
+  isArray(visibleColumnsFromStorage) &&
+  visibleColumnsFromStorage.length > 0
+) {
+  visibleColumns.value = visibleColumnsFromStorage;
+}
+
+// If nothing is found, set visibleColumns to all non optional columns from table
+const unWatchTable = watch(
+  () => table.value,
+  () => {
+    if (
+      table.value &&
+      table.value.newColumns.length &&
+      visibleColumns.value.length == 0
+    ) {
+      visibleColumns.value = table.value.newColumns
+        .filter((c) => !c.optional)
+        .map((c) => c.newKey);
+      unWatchTable();
+    }
+  }
+);
+
+/**
+ * Update local storage when check input update
+ */
+function onUpdateVisibleColumn() {
+  localStorage.setItem(
+    VISIBLE_COLUMNS_LOCAL_STORAGE_KEY,
+    JSON.stringify(visibleColumns.value)
+  );
+}
+
+/*
+|--------------------------------------------------------------------------
+| Exposed functions
+|--------------------------------------------------------------------------
+*/
+
+function fetch() {
+  if (!dataIterator.value) {
+    return;
+  }
+  // Refetch even if URL is the same
+  dataIterator.value.fetch(true);
+}
+
+const dataIteratorQuery = computed((): DataTableQuery | null => {
+  return dataIterator.value?.query ?? null;
+});
+
+defineExpose({
+  fetch,
+  query: dataIteratorQuery,
+});
+</script>

package/src/components/BaseDataTableToggleColumns.vue

@@ -0,0 +1,69 @@
+<template>
+  <ul>
+    <li v-for="col in toggleableColumns" :key="col.newKey">
+      <label>
+        <input
+          :checked="visibleColumns.includes(col.newKey)"
+          type="checkbox"
+          class="mr-1.5 h-3.5 w-3.5 rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
+          :value="col.newKey"
+          @change="onVisibleColumnChange($event, col.newKey)"
+        />
+        <span class="text-xs text-slate-600">
+          {{ col.label }}
+        </span>
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { PropType } from 'vue';
+import BaseTable from './BaseTable.vue';
+
+const props = defineProps({
+  table: {
+    required: true,
+    type: Object as PropType<InstanceType<typeof BaseTable> | null>,
+  },
+  visibleColumns: {
+    required: true,
+    type: Array as PropType<number[]>,
+  },
+});
+
+const emit = defineEmits(['update:visibleColumns']);
+
+const toggleableColumns = computed(() => {
+  const tableVue = props.table;
+
+  if (tableVue == null) {
+    return [];
+  }
+
+  if (!tableVue.newColumns) {
+    return [];
+  }
+
+  return tableVue.newColumns.filter((c) => !c.alwaysVisible);
+});
+
+function onVisibleColumnChange(event: any, newKey: number) {
+  const checked = event.target.checked as boolean;
+
+  console.log(checked);
+
+  let newVisibleColumns = cloneDeep(props.visibleColumns);
+
+  if (checked) {
+    if (!newVisibleColumns.includes(newKey)) {
+      newVisibleColumns.push(newKey);
+    }
+  } else {
+    newVisibleColumns = newVisibleColumns.filter((c) => c != newKey);
+  }
+
+  emit('update:visibleColumns', newVisibleColumns);
+}
+</script>

package/src/components/BaseDatePicker.stories.js

@@ -0,0 +1,53 @@
+import BaseDatePicker from './BaseDatePicker.vue';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Form/BaseDatePicker',
+  component: BaseDatePicker,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDatePicker },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDatePicker v-bind="args">
+    </BaseDatePicker>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  modelValue: '2023-01-01',
+  inputClass: 'border-slate-300',
+};
+
+export const YearRange = Template.bind({});
+YearRange.args = {
+  modelValue: '1980-11-16',
+  inputClass: 'border-slate-300',
+  yearRange: [1920, 2020],
+};
+
+export const MinDate = Template.bind({});
+MinDate.args = {
+  modelValue: '2022-11-16',
+  inputClass: 'border-slate-300',
+  minDate: DateTime.fromISO('2022-11-10').toJSDate(),
+};
+
+export const MaxDate = Template.bind({});
+MaxDate.args = {
+  modelValue: '2022-11-16',
+  inputClass: 'border-slate-300',
+  maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: '2022-11-16',
+  inputClass: 'border-slate-300',
+  disabled: true,
+};