veasy-angular-components

v1.4.9

Published

6 months ago

* Veasy Moment Format * Veasy Calendar * Veasy Datepicker (pending) * Veasy Table * Veasy Modal (pending) * Veasy Input Search (pending)

Downloads

577

0High
0Medium
0Low

nandomb

thiagocostacoelho

uniaodk

Veasy Angular Components

Veasy Moment Format
Veasy Calendar
Veasy Datepicker (pending)
Veasy Table
Veasy Modal (pending)
Veasy Input Search (pending)

angular-veasy-table

AngularJS directive to create quickly data tables without giving up the beauty and functionality.

Dependencies

angular (^1.5.8)
angular-sanitize (^1.5.8)
bootstrap (^3.3.7)
font-awesome (^4.6.3)

Images

v2.1.x v2.1.x (modal)

Demonstration

Instalation

$ bower install angular-veasy-table --save

In your angular app

angular.module('yourModule', ['veasy.table'])

  .controller('yourController', function() {
    $scope.config = {
      // This 'id' is not necessary. Use it only if you want to set a specific id for this component.
      // If you not set a specific id, it will be randomly generated.
      id: 'my-specific-id',

      // Columns configuration
      columns: [
        {
          // That's the label of your column.
          header: 'Id',

          // That's the field of your column, and it's used to get value
          // from your result array.
          value: 'id',

          // This property is used to add to this column a dropdown filter.
          dropdown: true,

          // This property is used to define the default value to the column when necessary.
          // The default value will be applied when the column value is: undefined, null, false or '' (empty string).
          default: 'Not Informed',

          // It's used only if you want to hide this column in a specific screen size.
          // The screen sizes are separated by spaces.
          // Ex: hideOn: 'lg md sm xs'.
          hideOn: 'xs',

          // It's used only if you want to apply an angular filter to this column.
          filter: {
            type: 'number',
            fractionSize: 0
          },

          // It's used to define percentual size to the column.
          size: 5
        },
        { header: 'First Name', value: 'first_name' },
        { header: 'Last Name', value: 'last_name', hideOn: 'xs' },
        { header: 'Email', value: 'email', hideOn: 'sm xs' },
        { header: 'Gender', value: 'gender', hideOn: 'sm xs' },
        { header: 'Money', value: 'money', hideOn: 'xs', filter: { type: 'currency', symbol: 'R$', fractionSize: 2 } },
        { header: 'Date', value: 'date', hideOn: 'lg md sm xs', filter: { type: 'date', format: 'dd/MM/yyyy HH:mm:ss' } }
      ]
    };
  });

In your HTML

<head>
  <link rel="stylesheet" href="bower_components/angular-veasy-table/dist/css/veasy-table.min.css" media="screen" charset="utf-8"/>
</head>
<body>
  ...
  <veasy-table list="items" config="config"></veasy-table>
  ...

  <script src="bower_components/angular-veasy-table/dist/js/veasy-table-tpls.min.js" charset="utf-8"></script>
  <script src="bower_components/angular-veasy-table/dist/js/veasy-table.min.js" charset="utf-8"></script>
</body>

Documentation

All of these configurations, you need put inside your config object, like '$scope.config'.

Enable toggle columns

toggleColumns: {
  enable: true,         // Enable this feature. (Default is false).
  position: 'begin',    // Use it if you want to put the 'toggle' icon at the begin of the table. Default is undefined.
  icons: {              // Use it if you want to replace the default icons.
    opened: 'fa fa-chevron-down',
    closed: 'fa fa-chevron-right'
  }
}

Enable context menu

contextMenu: {
  enable: true,                 // Enable this feature. (Default is false).
  icon: 'fa fa-ellipsis-v',     // Use it to set an icon to your menu.
  options: [
    {
      icon: 'fa fa-trash-o',    // Use it to set an icon to your menu item.
      label: 'Delete',          // Use it to set a text to your menu item.
      action: function(row) {   // Use it to set a action to your menu item. The first parameter aways will be the selected row.
        ...
        alert('Your row has been deleted!');
      }
    }
  ]
}

Enable pagination

pagination: {
  enable: true,         // Enable this feature. (Default is false).
  currentPage: 0,       // Load in current page. (Default is 0)
  itemsPerPage: 10,     // How many items per page you want to see. Minimum is 1 and maximum is 50. (Default is 10)
}

Enable data filter

filter: {
  enable: true,                   // Enable this feature. (Default is false).
  conditional: true,              // Conditional filter 'AND' or 'OR'. (Default is AND)
  isCaseSensitive: false,         // To make the query case sensitive (Default is true)
  ignoreSpecialCharacters: true,  // To ignore special characters and accentuations (Default is false)
  delay: 300                      // Delay in milliseconds. (Default is 300ms)
}

Enable column filter (show and hide columns)

columnFilter: {
  enable: true,         // Enable this feature. (Default is false).
  modalOptions: {
    size: 'md',         // The size of modal: 'sm', 'md' or 'lg'. (Default is 'md')
    autoOpen: false,    // Open automatically column filter modal, if not have visible columns. (Default is false)
    keyboard: true,     // Enable to use keyboard on filter modal. (Default is true)
    backdrop: true      // Enable to use backdrop on filter modal. (Default is true)
  }
}

Enable click row

clickRow: {
  enable: true         // Enable this feature. (Default is false).
}

Enable checkboxes

checkbox: {
  enable: true,        // Enable this feature. (Default is false).
}

Enable column sort

sort: {
  enable: true         // Enable this feature. (Default is false).
}

Enable translate

labels: {
  filter: {
    by: 'Filtrar por...',
    all: 'Todas',
    and: 'E',
    or: 'OU'
  },
  pagination: {
    itemsPerPage: 'Itens por Página',
    totalItems: 'Total de Itens'
  },
  modal: {
    title: 'Quais colunas você deseja exibir?',
    okButton: 'Aplicar',
    cancelButton: 'Cancelar'
  }
}

Enable Events

All of veasy-table events are use $emit, and to listen these events you need to use $on

Click

$scope.$on('veasyTable:onClickRow', function(event, data) {
  console.log('Some row was clicked', data);
});

Selected Items

$scope.$on('veasyTable:selectedItems', function(event, data) {
  console.log('Some items were selected', data);
});

Column filter

$scope.$on('veasyTable:onApplyColumnFilter', function(event, data) {
  console.log('Some columns was applied', data);
});

Pagination

$scope.$on('veasyTable:onStartPagination', function(event) {
  console.log('Pagination event was started');
});

$scope.$on('veasyTable:onEndPagination', function(event) {
  console.log('Pagination event was done');
});

Search

$scope.$on('veasyTable:onStartSearch', function(event) {
  console.log('Search event was started');
});

$scope.$on('veasyTable:onEndSearch', function(event) {
  console.log('Search event was done');
});

Sort

$scope.$on('veasyTable:onStartSort', function(event) {
  console.log('Sort event was started');
});

$scope.$on('veasyTable:onEndSort', function(event) {
  console.log('Sort event was done');
});

Enable angular $filter at columns?

All of these configurations, you need put inside your target column, in your $scope.config object.

Currency

filter: {
  name: 'currency',
  symbol: 'R$',
  fractionSize: 0
}

Date

filter: {
  name: 'date',
  format: 'dd/MM/yyyy HH:mm:ss',
  timezone: ''
}

Json

filter: {
  name: 'json',
  spacing: 2
}

Number

filter: {
  name: 'number',
  fractionSize: 2
}

LimitTo

filter: {
  name: 'limitTo',
  limit: 10,
  begin: 0
}

Lowercase

filter: {
  name: 'lowercase'
}

Uppercase

filter: {
  name: 'uppercase'
}

Url

filter: {
  name: 'url',
  text: '',
  target: '_blank'
}

Migrating from 1.x.x to 2.x.x version

In your HTML:

Just remove the 'selected-items' property

<!-- from -->
<veasy-table config="config" list="resultList" selected-items="selectedItems"></veasy-table>

<!-- to -->
<veasy-table config="config" list="resultList"></veasy-table>

In your Angular app:

On your app dependencies, just replace 'veasyTable' to 'veasy.table'.

// FROM
angular.module('yourModule', [ 'veasyTable' ]);

// TO
angular.module('yourModule', [ 'veasy.table' ]);

On columns config, just remove 'size' and 'show' properties.

// FROM
columns: [
  {
    header: 'Id',
    value: 'id',
    size: 5
    // TODO: REMOVE
    // show: true
  }
]

// TO
columns: [
  {
    header: 'Id',
    value: 'id',
    size: 5,
    // Use something like this, if you want to use responsive columns and/or angular filters
    hideOn: 'lg md sm xs',
    filter: { type: 'number', fractionSize: 0 }
  }
]

On checkbox config, just remove 'size' property.

// FROM
checkbox: {
  enable: true
  // TODO: REMOVE
  // size: 20
}

// TO
checkbox: {
  enable: true
}

On columnFilter config, just:

1 - Move 'autoOpen' property to inside of new property named 'modalOptions'.

2 - Move 'modalSize' property to inside of new property named 'modalOptions' and rename to 'size'.

// FROM
columnFilter: {
  enable: true,
  // TODO: MOVE
  // autoOpen: true,
  // TODO: MOVE and RENAME
  // modalSize: 'md'
}

// TO
columnFilter: {
  enable: true,
  modalOptions: {
    size: 'md',
    autoOpen: false,
    keyboard: true,
    backdrop: true
  }
}

On resizable config, just remove.

// TODO: REMOVE
// resizable: {
//   enable: true,
//   minimumSize: 5
// },

On translation config, just:

1 - Rename 'translate' property to 'labels'.

2 - Add 'all' property inside 'filter' object.

3 - Rename 'itemsByPage' property, inside 'pagination' object, to 'itemsPerPage'.

4 - Rename 'columnFilter' property to 'modal'.

// FROM
translate: {
  filter: {
    by: 'Filtrar por...',
    and: 'E',
    or: 'OU'
  },
  pagination: {
    itemsByPage: 'Itens por Página',
    totalItems: 'Total de Itens'
  },
  columnFilter: {
    title: 'Quais colunas você deseja exibir?',
    okButton: 'Ok',
    cancelButton: 'Cancelar'
  }
}

// TO
labels: {
  filter: {
    by: 'Filtrar por...',
    all: 'Todas',
    and: 'E',
    or: 'OU'
  },
  pagination: {
    itemsPerPage: 'Itens por Página',
    totalItems: 'Total de Itens'
  },
  modal: {
    title: 'Quais colunas você deseja exibir?',
    okButton: 'Aplicar',
    cancelButton: 'Cancelar'
  }
}

On events config, just remove, because now, all events use $emit, and to listen these events you need to use $on.

// FROM
// TODO: REMOVE
// events: {
//   onClickRow: function(row) {
//     alert('Row Clicked: ' + JSON.stringify(row.id) + '. More details in your console.');
//     console.log(JSON.stringify(row, null, 2));
//     console.log('---------------------------------');
//     console.log('');
//   },
//   onApplyColumnFilter: function(columns) {
//     alert('Applied Columns! More details in your console.');
//     console.log(JSON.stringify(columns, null, 2));
//     console.log('---------------------------------');
//     console.log('');
//   },
//   onTableStateChange: function(columns) {
//     alert('State changed! More details in your console.');
//     console.log(JSON.stringify(columns, null, 2));
//     console.log('---------------------------------');
//     console.log('');
//   }
// }

// TO
$scope.$on('veasyTable:onClickRow', function(event, data) {
  console.log('Some row was clicked', data);
});

$scope.$on('veasyTable:onApplyColumnFilter', function(event, data) {
  console.log('Some columns was applied', data);
});