debounce to save

This commit is contained in:
Baptiste Lemoine 2018-08-28 11:15:07 +02:00
parent b64b437d17
commit 299d98b3f0
3 changed files with 25 additions and 21 deletions

View File

@ -13,7 +13,8 @@
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div ng-if="config.initialLoadingDone && config.loading"> <div ng-if="config.initialLoadingDone && config.loading">
Chargement ... <i class="fa fa-spin fa-refresh"></i>
Chargement
</div> </div>
<div ng-if="config.initialLoadingDone && !config.loading"> <div ng-if="config.initialLoadingDone && !config.loading">
Modifications sauvegardées Modifications sauvegardées
@ -30,11 +31,11 @@
<p class="padded"> <p class="padded">
Euros disponibles au départ: Euros disponibles au départ:
<input type="number" ng-model="config.disponibility" ng-change="save()"> <input type="number" ng-model="config.disponibility" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
<br> <br>
Gains moyen par mois: Gains moyen par mois:
<input type="number" ng-model="config.averageMonthlyEarnings" ng-disabled="config.isSaving"> <input type="number" ng-model="config.averageMonthlyEarnings" ng-change="save()" ng-disabled="config.isSaving" ng-model-options="{ debounce: config.debounceTime }">
</p> </p>
<p> <p>
<p> <p>
@ -101,20 +102,20 @@
</tbody> </tbody>
<tr ng-repeat="e in expenses "> <tr ng-repeat="e in expenses ">
<td> <td>
<input type="text" ng-model="e.name" ng-change="save()"> <input type="text" ng-model="e.name" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td> </td>
<td ng-if="config.showDelays"> <td ng-if="config.showDelays">
<input type="number" ng-model="e.delay" ng-change="save()"> <input type="number" ng-model="e.delay" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td> </td>
<td ng-if="config.showRepeats"> <td ng-if="config.showRepeats">
<input type="number" ng-model="e.repeat" ng-change="save()"> <input type="number" ng-model="e.repeat" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td> </td>
<td ng-if="config.showRepeats" class="text-right padded"> <td ng-if="config.showRepeats" class="text-right padded">
{{ e.repeat * e.amount }} {{ e.repeat * e.amount }}
</td> </td>
<td> <td>
<input type="number" ng-model="e.amount" ng-change="save()"> <input type="number" ng-model="e.amount" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td> </td>
<td class="text-right padded"> <td class="text-right padded">
<strong> <strong>
@ -124,7 +125,7 @@
</td> </td>
<td class="padded"> <td class="padded">
<input type="checkbox" ng-model="e.enabled" ng-change="save()"> <input type="checkbox" ng-model="e.enabled" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td> </td>
</tr> </tr>
</table> </table>

View File

@ -229,6 +229,7 @@ angular
initialLoadingDone: false, initialLoadingDone: false,
loading: false, loading: false,
lines: 24, lines: 24,
debounceTime: 300, // miliseconds to wait before updating model and saving changes
/** /**
* expenses kind of the user * expenses kind of the user
*/ */
@ -288,6 +289,19 @@ angular
return previsionTable; return previsionTable;
}; };
$scope.updateconf = (rep) => {
$scope.config.loading = false;
$scope.config.initialLoadingDone = true;
$scope.config.disponibility = rep.data.disponibility;
$scope.config.averageMonthlyEarnings = rep.data.averageMonthlyEarnings;
// default data when user has nothing saved
console.log('rep.data.expenses.length', rep.data.expenses.length)
if (!rep.data.expenses.length) {
$scope.expenses = exampleExpenses;
} else {
$scope.expenses = rep.data.expenses;
}
};
// http related calls // http related calls
$scope.fetchExpenses = () => { $scope.fetchExpenses = () => {
console.log('fetch expenses...'); console.log('fetch expenses...');
@ -295,17 +309,7 @@ angular
$http.get('get-my-expenses').then((rep) => { $http.get('get-my-expenses').then((rep) => {
console.log('get-my-expenses', rep.data.expenses); console.log('get-my-expenses', rep.data.expenses);
$scope.config.loading = false; $scope.updateconf(rep)
$scope.config.initialLoadingDone = true;
$scope.config.disponibility = rep.data.disponibility;
$scope.config.averageMonthlyEarnings = rep.data.averageMonthlyEarnings;
// default data when user has nothing saved
console.log('rep.data.expenses.length', rep.data.expenses.length)
if (!rep.data.expenses.length) {
$scope.expenses = exampleExpenses;
} else {
$scope.expenses = rep.data.expenses;
}
}, },
$scope.manageError) $scope.manageError)
}; };
@ -324,7 +328,7 @@ angular
}) })
.then((rep) => { .then((rep) => {
console.log('save-my-expenses', rep); console.log('save-my-expenses', rep);
$scope.config.loading = false; $scope.updateconf(rep)
}, },
$scope.manageError) $scope.manageError)
}; };

@ -1 +0,0 @@
Subproject commit 474d8db5d74ec1283bf9b9e1a0fe03221538d44c