Added loader to xosTable
diff --git a/views/ngXosLib/xosHelpers/src/styles/loader.scss b/views/ngXosLib/xosHelpers/src/styles/loader.scss
new file mode 100644
index 0000000..66297df
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/styles/loader.scss
@@ -0,0 +1,51 @@
+.loader {
+ font-size: 10px;
+ margin: 0 auto;
+ text-indent: -9999em;
+ width: 11em;
+ height: 11em;
+ border-radius: 50%;
+ background: #ffffff;
+ background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ position: relative;
+ animation: loaderSpinner 1.4s infinite linear;
+ transform: translateZ(0);
+}
+.loader:before {
+ width: 50%;
+ height: 50%;
+ background: $brand-primary;
+ border-radius: 100% 0 0 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: '';
+}
+.loader:after {
+ background: #fff;
+ width: 75%;
+ height: 75%;
+ border-radius: 50%;
+ content: '';
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
+@keyframes loaderSpinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
index cc02e6f..a879de2 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -1,5 +1,6 @@
@import './animations.scss';
@import '../../../../../views/style/sass/bootstrap/bootstrap/_variables.scss';
+@import './loader.scss';
@import '../ui_components/dumbComponents/table/table.scss';
@import '../ui_components/dumbComponents/alert/alert.scss';
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index 04671ba..54f58e9 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -338,7 +338,7 @@
config: '='
},
template: `
- <div ng-show="vm.data.length > 0">
+ <div ng-show="vm.data.length > 0 && vm.loader == false">
<div class="row" ng-if="vm.config.filter == 'fulltext'">
<div class="col-xs-12">
<input
@@ -437,15 +437,27 @@
change="vm.goToPage">
</xos-pagination>
</div>
- <div ng-show="vm.data.length == 0 || !vm.data">
+ <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
<xos-alert config="{type: 'info'}">
No data to show.
</xos-alert>
</div>
+ <div ng-show="vm.loader == true">
+ <div class="loader"></div>
+ </div>
+ <pre>{{vm.loader | json}}</pre>
`,
bindToController: true,
controllerAs: 'vm',
- controller: function(_){
+ controller: function(_, $scope){
+
+ this.loader = true;
+
+ $scope.$watch(() => this.data, data => {
+ if(angular.isDefined(data)){
+ this.loader = false;
+ }
+ });
if(!this.config){
throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index 27b1ef6..5334716 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -54,7 +54,7 @@
return [204];
});
- $httpBackend.whenGET('/test').respond(200, datas)
+ $httpBackend.whenGET('/test').respond(200, [])
$httpBackend.whenPOST('/test').respond((method, url, data) => {
data = angular.fromJson(data);
data.id = ++count;
@@ -218,6 +218,7 @@
.then((res) => {
if(!res[0]){
+ this.data = res;
return;
}