Got the package search/filter/etc.. all working

This commit is contained in:
Shannon
2016-06-13 13:10:26 +02:00
parent 5a32e1a294
commit 441ea0cfaf
3 changed files with 184 additions and 290 deletions

View File

@@ -12,32 +12,48 @@ function ourPackageRepositoryResource($q, $http, umbDataFormatter, umbRequestHel
getDetails: function (packageId) {
return umbRequestHelper.resourcePromise(
$http.get(baseurl + "/getdetails/" + packageId),
$http.get(baseurl + "/" + packageId),
'Failed to get package details');
},
getCategories: function () {
return umbRequestHelper.resourcePromise(
$http.get(baseurl + "/getcategories"),
$http.get(baseurl),
'Failed to query packages');
},
getPopular: function (maxResults) {
getPopular: function (maxResults, category) {
if (maxResults === undefined) {
maxResults = 10;
}
if (category === undefined) {
category = "";
}
return umbRequestHelper.resourcePromise(
$http.get(baseurl + "/GetPopular?maxResults=" + maxResults),
$http.get(baseurl + "?pageIndex=0&pageSize=" + maxResults + "&category=" + category + "&order=Popular"),
'Failed to query packages');
},
search: function (pageIndex, pageSize, category, query, canceler) {
getLatest: function (pageIndex, pageSize, category) {
var httpConfig = {};
if (canceler) {
httpConfig["timeout"] = canceler;
}
if (category === undefined) {
category = "";
}
if (query === undefined) {
query = "";
}
return umbRequestHelper.resourcePromise(
$http.get(baseurl + "/GetLatest?pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&category=" + category),
$http.get(baseurl + "?pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&category=" + category + "&query=" + query),
httpConfig,
'Failed to query packages');
}

View File

@@ -6,12 +6,14 @@
var vm = this;
vm.packageViewState = "packageList";
vm.categories = [];
vm.loading = false;
vm.pagination = {
pageNumber: 1,
totalPages: 10,
pageSize: 12
pageSize: 2
};
vm.searchQuery = "";
vm.selectCategory = selectCategory;
vm.showPackageDetails = showPackageDetails;
@@ -20,212 +22,20 @@
vm.prevPage = prevPage;
vm.goToPage = goToPage;
//vm.categories = [
// {
// "id": 1,
// "icon": "icon-male-and-female",
// "name": "All",
// "active": true
// },
// {
// "icon": "icon-male-and-female",
// "name": "Collaboration"
// },
// {
// "id": 2,
// "icon": "icon-molecular-network",
// "name": "Backoffice extensions"
// },
// {
// "id": 3,
// "icon": "icon-brackets",
// "name": "Developer tools"
// },
// {
// "id": 4,
// "icon": "icon-wand",
// "name": "Starter kits"
// },
// {
// "id": 5,
// "icon": "icon-medal",
// "name": "Umbraco Pro"
// },
// {
// "id": 6,
// "icon": "icon-wrench",
// "name": "Website utilities"
// }
//];
//vm.packages = [
// {
// "id": 1,
// "name": "uSightly",
// "description": "An HTML5 audio player based on jPlayer",
// "karma": "1",
// "downloads": "1672",
// "icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 2,
// "name": "Kill IE6",
// "description": "A simple port of the IE6 warning script (http://code.google.com/p/ie6-upgrade-warning/) to use in your Umbraco websites.",
// "karma": "11",
// "downloads": "688",
// "icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 3,
// "name": "Examine Media Indexer",
// "description": "CogUmbracoExamineMediaIndexer",
// "karma": "3",
// "downloads": "1329",
// "icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 4,
// "name": "SVG Icon Picker",
// "description": "A picker, for picking icons from an SVG spritesheet.",
// "karma": "5",
// "downloads": "8",
// "icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 5,
// "name": "Pipeline CRM",
// "description": "Pipeline is a social CRM that lives in Umbraco back-office. It tracks opportunities and helps teams collaborate with timelines and tasks. It stores information about your customers and your interactions with them. It integrates with your website, capturing opportunities from forms and powering personal portals.",
// "karma": "3",
// "downloads": "105",
// "icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 6,
// "name": "uSightly",
// "description": "An HTML5 audio player based on jPlayer",
// "karma": "1",
// "downloads": "1672",
// "icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 7,
// "name": "Kill IE6",
// "description": "A simple port of the IE6 warning script (http://code.google.com/p/ie6-upgrade-warning/) to use in your Umbraco websites.",
// "karma": "11",
// "downloads": "688",
// "icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 8,
// "name": "Examine Media Indexer",
// "description": "CogUmbracoExamineMediaIndexer",
// "karma": "3",
// "downloads": "1329",
// "icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 9,
// "name": "SVG Icon Picker",
// "description": "A picker, for picking icons from an SVG spritesheet.",
// "karma": "5",
// "downloads": "8",
// "icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png"
// },
// {
// "id": 10,
// "name": "Pipeline CRM",
// "description": "Pipeline is a social CRM that lives in Umbraco back-office. It tracks opportunities and helps teams collaborate with timelines and tasks. It stores information about your customers and your interactions with them. It integrates with your website, capturing opportunities from forms and powering personal portals.",
// "karma": "3",
// "downloads": "105",
// "icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png"
// }
//];
//vm.package = {
// "name": "Merchello",
// "description": "<p>Merchello is a high performance, designer friendly, open source Umbraco ecommerce package built for the store owner.</p> <p><strong>What Merchello does for you</strong></p> <p>In version 1, Merchello supports a large variety of products with options that can be attached to a single warehouse, processes orders, manages taxes and shipping, and sends out email notifications to your customers. The beauty of Merchello is that while it oversees all of your products, orders, and store settings, it allows Umbraco to maintain your content. This seamless integration gives you the flexibility to build your store in any way imagineable on a robust platform capable of handling a wide variety of store sizes.</p> <p><strong>Find out more on our website</strong></p> <p><strong><a href="https://merchello.com">https://merchello.com</a></strong></p> <p><strong>Contribute</strong></p> <p>We would love and need your help. If you want to contribute to Merchello's core, the easiest way to get started is to fork the project on https://github.com/merchello/Merchello and open src/Merchello.sln in Visual Studio. We're excited to see what you do!</p> <p><strong>Starter Kit</strong></p> <p>We have built a simple starter kit for Merchello called Bazaar, and you can download it below in the package files tab.</p>",
// "compatibility": [
// {
// "version": "7.4.x",
// "percentage": "100"
// },
// {
// "version": "7.3.x",
// "percentage": "86"
// },
// {
// "version": "7.2.x",
// "percentage": "93"
// },
// {
// "version": "7.1.x",
// "percentage": "100"
// }
// ],
// "information": {
// "owner": "Rusty Swayne",
// "ownerAvatar": "https://our.umbraco.org/media/upload/d476d257-a494-46d9-9a00-56c2f94a55c8/our-profile.jpg?width=200&height=200&mode=crop",
// "ownerKarma": "2673",
// "contributors": [
// {
// "name": "Lee"
// },
// {
// "name": "Jason Prothero"
// }
// ],
// "created": "18/12/2013",
// "currentVersion": "2.0.0",
// "netVersion": "4.5",
// "license": "MIT",
// "downloads": "4198",
// "karma": "53"
// },
// "externalSources": [
// {
// "name": "Source code",
// "url": "https://github.com/merchello/Merchello"
// },
// {
// "name": "Issue tracker",
// "url": "http://issues.merchello.com/youtrack/oauth?state=%2Fyoutrack%2FrootGo"
// }
// ],
// "images": [
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// },
// {
// "thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
// "source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
// }
// ]
//};
//used to cancel any request in progress if another one needs to take it's place
var canceler = null;
function getActiveCategory() {
if (vm.searchQuery !== "") {
return "";
}
for (var i = 0; i < vm.categories.length; i++) {
if (vm.categories[i].active === true) {
return vm.categories[i].name;
}
}
return "";
}
function init() {
@@ -236,11 +46,11 @@
.then(function(cats) {
vm.categories = cats;
}),
ourPackageRepositoryResource.getPopular(10)
ourPackageRepositoryResource.getPopular(8)
.then(function(pack) {
vm.popular = pack;
vm.popular = pack.packages;
}),
ourPackageRepositoryResource.getLatest(vm.pagination.pageNumber - 1, vm.pagination.pageSize, "")
ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1, vm.pagination.pageSize)
.then(function(pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
@@ -250,6 +60,44 @@
vm.loading = false;
});
$scope.$watch(function() {
return vm.searchQuery;
}, _.debounce(function (newVal, oldVal) {
$scope.$apply(function () {
if (vm.searchQuery) {
if (newVal !== null && newVal !== undefined && newVal !== oldVal) {
vm.loading = true;
//a canceler exists, so perform the cancelation operation and reset
if (canceler) {
canceler.resolve();
canceler = $q.defer();
}
else {
canceler = $q.defer();
}
ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1,
vm.pagination.pageSize,
"",
vm.searchQuery,
canceler)
.then(function(pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
vm.pagination.pageNumber = 1;
vm.loading = false;
//set back to null so it can be re-created
canceler = null;
});
}
}
else {
vm.loading = false;
}
});
}, 200));
}
function selectCategory(selectedCategory, categories) {
@@ -257,7 +105,26 @@
var category = categories[i];
category.active = false;
}
selectedCategory.active = true;
vm.loading = true;
vm.searchQuery = "";
$q.all([
ourPackageRepositoryResource.getPopular(8, selectedCategory.name)
.then(function(pack) {
vm.popular = pack.packages;
}),
ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1, vm.pagination.pageSize, selectedCategory.name, vm.searchQuery)
.then(function(pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
vm.pagination.pageNumber = 1;
})
])
.then(function() {
vm.loading = false;
selectedCategory.active = true;
});
}
function showPackageDetails(selectedPackage) {
@@ -276,15 +143,27 @@
}
function nextPage(pageNumber) {
console.log(pageNumber);
ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, getActiveCategory(), vm.searchQuery)
.then(function (pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
});
}
function prevPage(pageNumber) {
console.log(pageNumber);
ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, getActiveCategory(), vm.searchQuery)
.then(function (pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
});
}
function goToPage(pageNumber) {
console.log(pageNumber);
ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, getActiveCategory(), vm.searchQuery)
.then(function (pack) {
vm.packages = pack.packages;
vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
});
}
init();

View File

@@ -3,100 +3,99 @@
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
<!-- LIST -->
<div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageList' && vm.loading === false">
<div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageList'">
<hr/>
<div class="umb-packages-section">
<div class="umb-packages-search">
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages" umb-auto-focus>
<input class="-full-width-input" type="text" name="query" placeholder="Search for packages" umb-auto-focus ng-model="vm.searchQuery">
</div>
</div>
<div class="umb-packages-section">
<div class="umb-packages-categories">
<a
href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category, vm.categories)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{ category.name }}</div>
</a>
<div ng-show="vm.loading === false">
<div class="umb-packages-section">
<div class="umb-packages-categories">
<a href=""
class="umb-packages-category"
ng-click="vm.selectCategory(category, vm.categories)"
ng-repeat="category in vm.categories"
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
<div>{{ category.name }}</div>
</a>
</div>
</div>
</div>
<div class="umb-packages-section">
<h4><strong>Popular</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
<h4><strong>Popular</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-package" ng-repeat="package in vm.popular">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package" ng-repeat="package in vm.popular">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-icon">
<img ng-src="{{package.icon}}" alt="" />
</div>
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.ownerInfo.karma }}</strong>
</small>
<div class="umb-package-icon">
<img ng-src="{{package.icon}}" alt="" />
</div>
</div>
</a>
</div> <!-- end package -->
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
</div> <!-- end packages -->
</div>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.ownerInfo.karma }}</strong>
</small>
</div>
<div class="umb-packages-section">
<h4><strong>Latest</strong></h4>
<div class="umb-packages clearfix">
</div>
</a>
</div> <!-- end package -->
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
</div> <!-- end packages -->
</div>
<div class="umb-package-icon">
<img src="{{ package.icon }}" alt="" />
</div>
<div class="umb-packages-section">
<h4><strong>Latest</strong></h4>
<div class="umb-packages clearfix">
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
<div class="umb-package" ng-repeat="package in vm.packages">
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.ownerInfo.karma }}</strong>
</small>
<div class="umb-package-icon">
<img src="{{ package.icon }}" alt="" />
</div>
</div>
</a>
</div> <!-- end package -->
<div class="umb-package-info">
<div class="umb-package-name">{{ package.name }}</div>
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
</div> <!-- end packages -->
</div>
<div class="umb-package-numbers">
<small class="umb-package-downloads">
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
</small>
<small class="umb-package-karma">
<i class="icon-hearts"></i> <strong>{{ package.ownerInfo.karma }}</strong>
</small>
</div>
<div class="umb-packages__pagination">
</div>
</a>
</div> <!-- end package -->
<umb-pagination
page-number="vm.pagination.pageNumber"
total-pages="vm.pagination.totalPages"
on-next="vm.nextPage"
on-prev="vm.prevPage"
on-go-to-page="vm.goToPage">
</umb-pagination>
</div> <!-- end packages -->
</div>
<div class="umb-packages__pagination">
<umb-pagination page-number="vm.pagination.pageNumber"
total-pages="vm.pagination.totalPages"
on-next="vm.nextPage"
on-prev="vm.prevPage"
on-go-to-page="vm.goToPage">
</umb-pagination>
</div>
</div>
</div>