diff --git a/package.json b/package.json
index 6bfca0e..1a46ea4 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
+ "angular": "1.6.1",
"whatwg-fetch": "2.0.1"
}
}
diff --git a/task7/index.html b/task7/index.html
new file mode 100644
index 0000000..332fb17
--- /dev/null
+++ b/task7/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Components
+
+
+
+
+
+
+
+
+
+
diff --git a/task7/index.js b/task7/index.js
new file mode 100644
index 0000000..7b9e06d
--- /dev/null
+++ b/task7/index.js
@@ -0,0 +1,104 @@
+angular.module('components', [])
+
+ .service('topicResource', function() {
+ let topicList = [
+ {
+ title: '1 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '2 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '3 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '4 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '5 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '6 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ },
+ {
+ title: '7 title',
+ description: 'asds asd sad dasd as dsa ds ad as das das'
+ }
+ ];
+
+ this.getTopics = getTopics;
+ this.getTopicCount = getTopicCount;
+
+ function getTopics(offset, limit) {
+ return topicList.slice(offset, limit);
+ }
+
+ function getTopicCount() {
+ return topicList.length;
+ }
+ })
+
+ .component('loading', {
+ template: 'Loading...
'
+ })
+
+ .component('topic', {
+ templateUrl: 'templates/topic.html',
+ controllerAs: 'topicCtrl',
+ bindings: {
+ topic: '<'
+ }
+ })
+
+ .component('topicList', {
+ templateUrl: 'templates/topicList.html',
+ controller: topicListController,
+ controllerAs: 'topicListCtrl'
+ })
+
+ .component('paginator', {
+ templateUrl: 'templates/paginator.html',
+ controller: paginatorController,
+ controllerAs: 'paginatorCtrl',
+ bindings: {
+ page: '<',
+ totalCount: '<',
+ perPage: '<',
+ onPageChange: '&'
+ }
+ })
+
+function topicListController(topicResource) {
+ const vm = this;
+ const LIMIT = 5;
+
+ vm.topicCount = topicResource.getTopicCount();
+ vm.topicPerPage = LIMIT;
+ vm.onPageChange = onPageChange;
+ vm.topicCount = 5;
+ vm.topicCount = 6;
+ onPageChange(1);
+
+ function onPageChange(page) {
+ vm.currentPage = page;
+ let offset = (page - 1) * LIMIT;
+ vm.topicList = topicResource.getTopics(offset, offset + LIMIT);
+ }
+}
+
+function paginatorController() {
+ const vm = this;
+
+ vm.$onChanges = function(changedObj) {
+ if ('totalCount' in changedObj) {
+ let pageCount = Math.ceil(changedObj.totalCount.currentValue / changedObj.perPage.currentValue);
+ vm.pages = [...Array(pageCount).keys()].map((v) => v + 1);
+ }
+ }
+}
diff --git a/task7/templates/paginator.html b/task7/templates/paginator.html
new file mode 100644
index 0000000..d8515e5
--- /dev/null
+++ b/task7/templates/paginator.html
@@ -0,0 +1,8 @@
+
+
+ {{page}}
+
+
+ {{page}}
+
+
diff --git a/task7/templates/topic.html b/task7/templates/topic.html
new file mode 100644
index 0000000..fee9fb6
--- /dev/null
+++ b/task7/templates/topic.html
@@ -0,0 +1,4 @@
+
+ {{topicCtrl.topic.title}}
+ {{topicCtrl.topic.description}}
+
diff --git a/task7/templates/topicList.html b/task7/templates/topicList.html
new file mode 100644
index 0000000..707c497
--- /dev/null
+++ b/task7/templates/topicList.html
@@ -0,0 +1,5 @@
+Topic list
+
+
+
+