@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/components/datatable/MDataTable.vue

@@ -1,651 +0,0 @@
-<template>
-  <div class="mc-datatable" :class="[getClasses, `mc-datatable--${size}`]">
-    <MDataTableTop v-if="$slots.edition || $slots.actions || $slots.filters">
-      <template #edition>
-        <slot name="edition" />
-      </template>
-      <template #actions>
-        <slot name="actions" />
-      </template>
-      <template #filters>
-        <slot name="filters" />
-      </template>
-    </MDataTableTop>
-
-    <slot />
-
-    <div class="mc-datatable__container">
-      <!-- MAIN -->
-      <div class="mc-datatable__main" :style="tableStyle">
-        <table class="mc-datatable__table" :class="getTableClasses">
-          <thead v-if="!hideHeader">
-            <tr>
-              <th
-                v-for="(header, index) in getHeaders"
-                :key="`header-${index}`"
-                :class="header.cssClass"
-                scope="col"
-              >
-                <button
-                  v-if="sorting.mode !== 'none' && header.allowSorting"
-                  type="button"
-                  class="mc-datatable__sort mc-datatable__btn"
-                  :class="header.sortOrder"
-                  @click="!loading && onSortClick({ e: $event, header })"
-                >
-                  <span class="mc-datatable__sort-label">
-                    <span class="visually-hidden">Trier par</span>
-                    {{ header.caption }}
-                  </span>
-
-                  <span class="mc-datatable__sort-arrow"></span>
-                </button>
-
-                <slot
-                  v-else
-                  :name="`header.${header.dataFieldExpr}`"
-                  :header="header"
-                >
-                  {{ header.caption }}
-                </slot>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(item, rowIndex) in getSource"
-              :key="item[dataKeyExpr]"
-              :class="rowClasses(item)"
-            >
-              <td
-                v-for="(header, index) in getHeaders"
-                :key="`${index}-${getItemValue(item, dataKeyExpr)}-${
-                  header.dataFieldExpr
-                }`"
-                :class="header.cssClass"
-                @click="
-                  allowRowClick && onRowClick({ event: $event, item: item })
-                "
-              >
-                <slot
-                  :name="`item.${header.dataFieldExpr}`"
-                  :item="item"
-                  :index="rowIndex"
-                >
-                  {{ getItemValue(item, header.dataFieldExpr) }}
-                </slot>
-              </td>
-            </tr>
-            <!-- NO-DATA -->
-            <tr v-if="getSource.length === 0">
-              <td :colspan="getHeaders.length">
-                <slot name="no-data" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- FOOTER -->
-      <div
-        v-if="pagingOptions.enabled && total != null"
-        class="mc-datatable__footer"
-      >
-        <!-- select -->
-        <div class="mc-datatable__select">
-          <label for="itemPerPage" class="mc-datatable__select-label">
-            Rows per page
-          </label>
-          <m-select
-            :id="'itemPerPage'"
-            size="s"
-            :disabled="loading"
-            :options="getPageSizes"
-            :value="getPageValue"
-            @change="onPageSizeChanged"
-          >
-            <template #text="{ option }">
-              <slot name="pager.text" :pager="option">
-                {{ option.text }}
-              </slot>
-            </template>
-          </m-select>
-        </div>
-
-        <!-- count -->
-        <div v-if="pagingOptions.displayTotal" class="mc-datatable__count">
-          <strong>{{ getTotalStringCurrentCount }}</strong> of
-          <strong>{{ total }}</strong>
-        </div>
-
-        <!-- pagination -->
-        <div class="mc-datatable__pagination">
-          <m-pagination
-            :disabled="loading"
-            :length="getPagingSize"
-            :page-label="pagingOptions.pageLabel"
-            :value="pagingOptions.index"
-            @on-update-page="onUpdatePage"
-          >
-            <template #text="{ option }">
-              <slot name="paging.text" :paging="option">
-                {{ option.text }}
-              </slot>
-            </template>
-          </m-pagination>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import MDataTableTop from './MDataTableTop.vue';
-import MPagination from '../pagination/MPagination.vue';
-import MSelect from '../select/MSelect.vue';
-
-import {
-  getObjectValueByPath,
-  isPromise,
-  deepEqual,
-  orderedArraySorted,
-  parseClasses,
-} from './helpers';
-
-/** Map headers with default values. */
-function headersMapped(headers) {
-  return headers.map((header) => ({
-    ...Column.defaultOptions,
-    ...header,
-    sortFieldExpr: header.sortFieldExpr
-      ? header.sortFieldExpr
-      : header.dataFieldExpr,
-    sortOrder: header.sortOrder ? header.sortOrder : null,
-  }));
-}
-
-/** Generate headers if there is no headers defined. */
-function autoGenerateHeaders(data, headers) {
-  if (headers.length === 0 && data.length > 0) {
-    const cols = Object.keys(data[0]).map((key) => ({
-      caption: key,
-      dataFieldExpr: key,
-    }));
-    headersMapped(cols).forEach((col) => headers.push(col));
-  }
-}
-
-/** Build options to manage request. */
-function buildOptions(
-  pagingEnabled,
-  pagerValue,
-  pagingIndex,
-  pagingSize,
-  sortedColmuns
-) {
-  const columnSorters = sortedColmuns.reduce(
-    (acc, header) => ({
-      ...acc,
-      [header.dataFieldExpr]: header.sortOrder,
-    }),
-    {}
-  );
-
-  const index = pagingIndex < pagingSize ? pagingIndex : pagingSize;
-
-  return {
-    sort: columnSorters,
-    skip: pagingEnabled ? pagerValue * (index - 1) : null,
-    take: pagingEnabled ? pagerValue : null,
-  };
-}
-
-/** Caution : I have used object but we must speak about it to know if we use it or normalize field directly in MDataTable. */
-const Pager = {
-  defaultOptions: {
-    sizes: [10, 20, 30],
-    text: 'Show',
-    value: 20,
-  },
-};
-
-const Paging = {
-  defaultOptions: {
-    enabled: false,
-    text: 'sur',
-    index: 1,
-  },
-};
-
-const Column = {
-  defaultOptions: {
-    caption: null,
-    dataFieldExpr: null,
-    sortFieldExpr: null,
-    allowSorting: false,
-    sortOrder: null,
-  },
-};
-
-const Sorting = {
-  defaultOptions: {
-    /** Get or set sorting mode. Possible value : ['none', 'single', 'multiple']. */
-    mode: 'multiple',
-  },
-};
-
-export default {
-  name: 'MDataTable',
-
-  components: { MDataTableTop, MSelect, MPagination },
-
-  props: {
-    /** Get or set the name of identity. */
-    dataKeyExpr: {
-      type: String,
-      require: true,
-      default: 'id',
-    },
-
-    /**
-     * Get or set the headers informations.
-     * @example {{ caption: string, dataFieldExpr: string, sortFieldExpr: string, allowSorting: boolean, sortOrder: 'asc' | 'desc' | null }[] }
-     */
-    headers: {
-      type: Array,
-      default: () => [],
-    },
-
-    /** Get or set the source of the data table.
-     * The source can be an Array or a Promise or a function.
-     * If the source is a function or a Promise, it's must be return or resolve an object like :
-     *
-     * @example
-     * {
-     *  data:Array = [...]  // The array of item
-     *  total:Number =      // Total count of items
-     * }
-     */
-    source: {
-      type: [Array, Function, Promise],
-      default: () => [],
-    },
-
-    /**
-     * Get or set pager informations.
-     * @type {{ sizes: number[], text: string, value: number }}
-     */
-    pager: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /**
-     * Get or set paging informations.
-     * @type {{ enabled: boolean, text: string, index: number }}
-     */
-    paging: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /** Get or set if row can clickable. */
-    allowRowClick: {
-      type: Boolean,
-      default: false,
-    },
-
-    /** Get or set if the headers are fixed. */
-    fixedHeader: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Get or set the sorting informations.
-     * @type {{ mode:'none' | 'single' | 'multiple'}}
-     */
-    sorting: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /**
-     * Defines whether headers are hidden
-     * @values false, true
-     */
-    hideHeader: {
-      type: Boolean,
-      default: false,
-    },
-
-    itemClasses: {
-      type: [String, Function, Object],
-      default: '',
-    },
-
-    size: {
-      type: String,
-      default: 'm',
-      validator: (value) => ['s', 'm', 'l'].includes(value),
-    },
-
-    /**
-     * Defines custom styles on .mc-datatable__main element
-     */
-    tableStyle: {
-      type: Object,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      headersMapped: headersMapped(this.headers),
-      sourceMapped: [],
-      pagerOptions: null,
-      pagingOptions: null,
-      sortingOptions: null,
-      total: null,
-      data: null,
-      loading: false,
-      created: false,
-    };
-  },
-
-  computed: {
-    getSource() {
-      return this.sourceMapped;
-    },
-
-    getHeaders() {
-      return this.headersMapped;
-    },
-
-    getSortHeader() {
-      return this.getHeaders.filter((header) => header.sortOrder != null);
-    },
-
-    getClasses() {
-      return {
-        'mc-datatable--sticky-header': this.fixedHeader,
-      };
-    },
-
-    getTableClasses() {
-      return {
-        'no-data': this.getSource.length === 0,
-      };
-    },
-
-    getPageSizes() {
-      return this.pagerOptions.sizes.map((size) => ({
-        value: size,
-        text: `${this.pagerOptions.text} ${size}`,
-      }));
-    },
-
-    getPageValue() {
-      const { sizes, value } = this.pagerOptions;
-
-      if (sizes.includes(value)) {
-        return value;
-      } else {
-        return sizes[0];
-      }
-    },
-
-    getPagingSize() {
-      let size = 1;
-
-      if (this.total) {
-        size = Math.ceil(this.total / this.pagerOptions.value);
-      } else {
-        size = parseInt(this.pagingOptions.index);
-      }
-
-      return size;
-    },
-
-    getPagingIndex() {
-      return this.pagingOptions.index < this.getPagingSize
-        ? this.pagingOptions.index
-        : this.getPagingSize;
-    },
-
-    getTotalStringCurrentCount() {
-      const { skip, take } = buildOptions(
-        this.pagingOptions.enabled,
-        this.getPageValue,
-        this.getPagingIndex,
-        this.getPagingSize,
-        this.getSortHeader
-      );
-      const on = skip + take;
-      return `${skip + 1} - ${on >= this.total ? this.total : on}`;
-    },
-  },
-
-  watch: {
-    source: {
-      immediate: true,
-      async handler(newValue, oldValue) {
-        if (deepEqual(newValue, oldValue)) {
-          return;
-        }
-
-        if (this.created) {
-          await this.load();
-        }
-      },
-    },
-
-    headers: {
-      deep: true,
-      async handler(newValue) {
-        this.headersMapped = headersMapped(newValue);
-
-        this.$emit('headers-changed', newValue);
-
-        if (this.created) {
-          await this.load();
-        }
-      },
-    },
-
-    pager: {
-      immediate: true,
-      handler(newValue, oldValue) {
-        if (deepEqual(newValue, oldValue)) {
-          return;
-        }
-        this.pagerOptions = {
-          ...Pager.defaultOptions,
-          ...this.pager,
-        };
-      },
-    },
-    paging: {
-      immediate: true,
-      async handler(newValue, oldValue) {
-        if (deepEqual(newValue, oldValue)) {
-          return;
-        }
-
-        this.pagingOptions = {
-          ...Paging.defaultOptions,
-          ...this.paging,
-        };
-
-        if (this.created) {
-          await this.load();
-        }
-      },
-    },
-    sorting: {
-      immediate: true,
-      handler(newValue, oldValue) {
-        if (deepEqual(newValue, oldValue)) {
-          return;
-        }
-
-        this.sortingOptions = {
-          ...Sorting.defaultOptions,
-          ...this.sorting,
-        };
-
-        // Reset
-        this.headersMapped.forEach((header) => (header.sortOrder = null));
-      },
-    },
-  },
-
-  mounted() {
-    this.load();
-    this.created = true;
-  },
-
-  methods: {
-    getItemValue(item, key) {
-      return getObjectValueByPath(item, key);
-    },
-
-    rowClasses(item) {
-      const getClasses = parseClasses(this.itemClasses, item);
-
-      return {
-        'mc-datatable__row-clickable': this.allowRowClick,
-        ...getClasses,
-      };
-    },
-
-    /** Load data. */
-    async load() {
-      this.loading = true;
-
-      if (this.source == null) {
-        return;
-      }
-
-      try {
-        const options = buildOptions(
-          this.pagingOptions.enabled,
-          this.getPageValue,
-          this.getPagingIndex,
-          this.getPagingSize,
-          this.getSortHeader
-        );
-
-        if (Array.isArray(this.source)) {
-          let data = this.source.slice();
-
-          const sortedKeys = Object.keys(options.sort);
-
-          if (sortedKeys.length > 0) {
-            data = data.sort(
-              orderedArraySorted(
-                sortedKeys.map((key) => ({
-                  fieldExpr: key,
-                  sortOrder: options.sort[key],
-                }))
-              )
-            );
-          }
-
-          if (options.skip != null && options.take != null) {
-            data = data.splice(options.skip, options.take);
-          }
-
-          this.data = data;
-
-          this.total = this.source.length;
-        } else if (this.source instanceof Function) {
-          const result = this.source(options);
-
-          const { data, total } = isPromise(result) ? await result : result;
-
-          this.data = data;
-          this.total = total;
-        }
-
-        if (this.data) {
-          autoGenerateHeaders(this.data, this.headersMapped);
-          this.sourceMapped = this.data;
-        }
-
-        this.$emit('data-changed', this.sourceMapped);
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    async onUpdatePage(index) {
-      this.pagingOptions.index = +index;
-
-      await this.load();
-
-      this.$emit('page-changed', index);
-    },
-
-    async onSortClick(e) {
-      if (
-        this.sortingOptions.mode === 'single' &&
-        !this.getSortHeader.includes(e.header)
-      ) {
-        // Reinitialize sortOrder because there is only one sortable header
-        this.headersMapped.forEach((header) => {
-          header.sortOrder = null;
-        });
-      }
-
-      switch (e.header.sortOrder) {
-        case 'asc':
-          e.header.sortOrder = 'desc';
-          break;
-        case 'desc':
-          e.header.sortOrder = null;
-          break;
-        default:
-          e.header.sortOrder = 'asc';
-          break;
-      }
-
-      await this.load();
-
-      this.$emit('sort-order-changed', e.header);
-    },
-
-    async onPageSizeChanged(value) {
-      this.pagerOptions.value = +value;
-
-      await this.load();
-
-      this.$emit('page-size-changed', value);
-    },
-
-    onRowClick(e) {
-      this.$emit('row-click', e);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import 'settings-tools/all-settings';
-@import 'components/c.datatable';
-@import 'components/c.datatable-tools';
-@import 'components/c.datatable-footer';
-// @import 'components/c.datatable-subtable';
-
-.mc-datatable {
-  &__main {
-    overflow-y: auto;
-  }
-
-  &__row {
-    &-clickable {
-      cursor: pointer;
-    }
-  }
-}
-</style>

package/src/components/datatable/MDataTableHeader.vue

@@ -1,55 +0,0 @@
-<script>
-export default {
-  name: 'MDataTableHeader',
-
-  props: {
-    caption: {
-      type: String,
-      default: null,
-    },
-    dataFieldExpr: {
-      type: String,
-      default: null,
-    },
-    allowSorting: {
-      type: Boolean,
-      default: false,
-    },
-    sortOrder: {
-      type: String,
-      default: null,
-      validator: function (value) {
-        return [null, 'asc', 'desc'].indexOf(value) !== -1;
-      },
-    },
-    sortFieldExpr: {
-      type: String,
-      default: null,
-    },
-    cssClass: {
-      type: [Object, String],
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      options: {
-        ...this.$props,
-      },
-    };
-  },
-
-  created() {
-    this.$parent.headers.push(this.options);
-  },
-
-  destroyed() {
-    const index = this.$parent.headers.indexOf(this.options);
-    this.$parent.headers.splice(index, 1);
-  },
-
-  // Renderless component
-  render: () => null,
-};
-</script>