yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1753 from umbraco/temp-U4-9293

Browse Source 
Fixes: U4-9293 Search the entire media section in Media Picker when inserting an image into content
This commit is contained in:
Emil Wangaa
2017-02-21 12:00:26 +01:00
committed by GitHub
parent 7adae4d345 bc5e3b4d66
commit 552909fde2
10 changed files with 568 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/Umbraco.Web.UI.Client/src/common/resources/entity.resource.js
View File

@@ -346,8 +346,8 @@ function entityResource($q, $http, umbRequestHelper) {
* @param {Int} parentid id of content item to return children of
* @param {string} type Object type name
* @param {Object} options optional options object
* @param {Int} options.pageSize if paging data, number of nodes per page, default = 0
* @param {Int} options.pageNumber if paging data, current page index, default = 0
* @param {Int} options.pageSize if paging data, number of nodes per page, default = 1
* @param {Int} options.pageNumber if paging data, current page index, default = 100
* @param {String} options.filter if provided, query will only return those with names matching the filter
* @param {String} options.orderDirection can be `Ascending` or `Descending` - Default: `Ascending`
* @param {String} options.orderBy property to order items by, default: `SortOrder`
@@ -357,8 +357,8 @@ function entityResource($q, $http, umbRequestHelper) {
getPagedChildren: function (parentId, type, options) {
var defaults = {
pageSize: 0,
pageNumber: 0,
pageSize: 1,
pageNumber: 100,
filter: '',
orderDirection: "Ascending",
orderBy: "SortOrder"
@@ -390,7 +390,77 @@ function entityResource($q, $http, umbRequestHelper) {
pageSize: options.pageSize,
orderBy: options.orderBy,
orderDirection: options.orderDirection,
filter: options.filter
filter: encodeURIComponent(options.filter)
}
)),
'Failed to retrieve child data for id ' + parentId);
},
/**
* @ngdoc method
* @name umbraco.resources.entityResource#getPagedDescendants
* @methodOf umbraco.resources.entityResource
*
* @description
* Gets paged descendants of a content item with a given id
*
* ##usage
* <pre>
* entityResource.getPagedDescendants(1234, "Content", {pageSize: 10, pageNumber: 2})
* .then(function(contentArray) {
* var children = contentArray;
* alert('they are here!');
* });
* </pre>
*
* @param {Int} parentid id of content item to return descendants of
* @param {string} type Object type name
* @param {Object} options optional options object
* @param {Int} options.pageSize if paging data, number of nodes per page, default = 1
* @param {Int} options.pageNumber if paging data, current page index, default = 100
* @param {String} options.filter if provided, query will only return those with names matching the filter
* @param {String} options.orderDirection can be `Ascending` or `Descending` - Default: `Ascending`
* @param {String} options.orderBy property to order items by, default: `SortOrder`
* @returns {Promise} resourcePromise object containing an array of content items.
*
*/
getPagedDescendants: function (parentId, type, options) {
var defaults = {
pageSize: 1,
pageNumber: 100,
filter: '',
orderDirection: "Ascending",
orderBy: "SortOrder"
};
if (options === undefined) {
options = {};
}
//overwrite the defaults if there are any specified
angular.extend(defaults, options);
//now copy back to the options we will use
options = defaults;
//change asc/desct
if (options.orderDirection === "asc") {
options.orderDirection = "Ascending";
}
else if (options.orderDirection === "desc") {
options.orderDirection = "Descending";
}
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"entityApiBaseUrl",
"GetPagedDescendants",
{
id: parentId,
type: type,
pageNumber: options.pageNumber,
pageSize: options.pageSize,
orderBy: options.orderBy,
orderDirection: options.orderDirection,
filter: encodeURIComponent(options.filter)
}
)),
'Failed to retrieve child data for id ' + parentId);

42
src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js
View File

@@ -482,7 +482,49 @@ function mediaResource($q, $http, umbDataFormatter, umbRequestHelper) {
"mediaApiBaseUrl",
"EmptyRecycleBin")),
'Failed to empty the recycle bin');
},
/**
* @ngdoc method
* @name umbraco.resources.mediaResource#search
* @methodOf umbraco.resources.mediaResource
*
* @description
* Empties the media recycle bin
*
* ##usage
* <pre>
* mediaResource.search("my search", 1, 100, -1)
* .then(function(searchResult) {
* alert('it's here!');
* });
* </pre>
*
* @param {string} query The search query
* @param {int} pageNumber The page number
* @param {int} pageSize The number of media items on a page
* @param {int} searchFrom Id to search from
* @returns {Promise} resourcePromise object.
*
*/
search: function (query, pageNumber, pageSize, searchFrom) {
var args = [
{ "query": query },
{ "pageNumber": pageNumber },
{ "pageSize": pageSize },
{ "searchFrom": searchFrom }
];
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"mediaApiBaseUrl",
"Search",
args)),
'Failed to retrieve media items for search: ' + query);
}
};
}

138
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
View File

@@ -33,6 +33,14 @@ angular.module("umbraco")
$scope.acceptedMediatypes = types;
});
$scope.searchOptions = {
pageNumber: 1,
pageSize: 100,
totalItems: 0,
totalPages: 0,
filter: '',
};
//preload selected item
$scope.target = undefined;
if (dialogOptions.currentTarget) {
@@ -106,35 +114,9 @@ angular.module("umbraco")
$scope.path = [];
}
//mediaResource.rootMedia()
mediaResource.getChildren(folder.id)
.then(function(data) {
$scope.searchTerm = "";
$scope.images = data.items ? data.items : [];
// set already selected images to selected
for (var folderImageIndex = 0; folderImageIndex < $scope.images.length; folderImageIndex++) {
var folderImage = $scope.images[folderImageIndex];
var imageIsSelected = false;
for (var selectedImageIndex = 0;
selectedImageIndex < $scope.model.selectedImages.length;
selectedImageIndex++) {
var selectedImage = $scope.model.selectedImages[selectedImageIndex];
if (folderImage.key === selectedImage.key) {
imageIsSelected = true;
}
}
if (imageIsSelected) {
folderImage.selected = true;
}
}
});
getChildren(folder.id);
$scope.currentFolder = folder;
localStorageService.set("umbLastOpenedMediaNodeId", folder.id);
};
$scope.clickHandler = function(image, event, index) {
@@ -238,4 +220,106 @@ angular.module("umbraco")
$scope.mediaPickerDetailsOverlay = null;
};
};
$scope.changeSearch = function() {
$scope.loading = true;
debounceSearchMedia();
};
$scope.changePagination = function(pageNumber) {
$scope.loading = true;
$scope.searchOptions.pageNumber = pageNumber;
searchMedia();
};
var debounceSearchMedia = _.debounce(function () {
$scope.$apply(function () {
if ($scope.searchOptions.filter) {
searchMedia();
} else {
// reset pagination
$scope.searchOptions = {
pageNumber: 1,
pageSize: 100,
totalItems: 0,
totalPages: 0,
filter: ''
};
getChildren($scope.currentFolder.id);
}
});
}, 500);
function searchMedia() {
$scope.loading = true;
entityResource.getPagedDescendants($scope.startNodeId, "Media", $scope.searchOptions)
.then(function (data) {
// update image data to work with image grid
angular.forEach(data.items, function(mediaItem){
// set thumbnail and src
mediaItem.thumbnail = mediaHelper.resolveFileFromEntity(mediaItem, true);
mediaItem.image = mediaHelper.resolveFileFromEntity(mediaItem, false);
// set properties to match a media object
if (mediaItem.metaData &&
mediaItem.metaData.umbracoWidth &&
mediaItem.metaData.umbracoHeight) {
mediaItem.properties = [
{
alias: "umbracoWidth",
value: mediaItem.metaData.umbracoWidth.Value
},
{
alias: "umbracoHeight",
value: mediaItem.metaData.umbracoHeight.Value
}
];
}
});
// update images
$scope.images = data.items ? data.items : [];
// update pagination
if (data.pageNumber > 0)
$scope.searchOptions.pageNumber = data.pageNumber;
if (data.pageSize > 0)
$scope.searchOptions.pageSize = data.pageSize;
$scope.searchOptions.totalItems = data.totalItems;
$scope.searchOptions.totalPages = data.totalPages;
// set already selected images to selected
preSelectImages();
$scope.loading = false;
});
}
function getChildren(id) {
$scope.loading = true;
mediaResource.getChildren(id)
.then(function(data) {
$scope.searchOptions.filter = "";
$scope.images = data.items ? data.items : [];
// set already selected images to selected
preSelectImages();
$scope.loading = false;
});
}
function preSelectImages() {
for (var folderImageIndex = 0; folderImageIndex < $scope.images.length; folderImageIndex++) {
var folderImage = $scope.images[folderImageIndex];
var imageIsSelected = false;
for (var selectedImageIndex = 0;
selectedImageIndex < $scope.model.selectedImages.length;
selectedImageIndex++) {
var selectedImage = $scope.model.selectedImages[selectedImageIndex];
if (folderImage.key === selectedImage.key) {
imageIsSelected = true;
}
}
if (imageIsSelected) {
folderImage.selected = true;
}
}
}
});

34
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
View File

@@ -10,13 +10,18 @@
<div class="umb-control-group umb-mediapicker-upload">
<umb-load-indicator
ng-if="loading">
</umb-load-indicator>
<div class="form-search">
<i class="icon-search"></i>
<input
class="umb-search-field search-query"
ng-model="searchTerm"
class="umb-search-field search-query -full-width-input"
ng-model="searchOptions.filter"
localize="placeholder"
placeholder="@placeholders_filter"
placeholder="@placeholders_search"
ng-change="changeSearch()"
type="text">
</div>
@@ -32,7 +37,7 @@
</div>
<div class="row umb-control-group">
<div class="row umb-control-group" ng-if="!searchOptions.filter">
<ul class="umb-breadcrumbs">
<li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
<a href ng-click="gotoFolder()" prevent-default>Media</a>
@@ -63,20 +68,20 @@
</div>
<umb-file-dropzone
ng-if="acceptedMediatypes.length > 0"
ng-if="acceptedMediatypes.length > 0 && !loading"
accepted-mediatypes="acceptedMediatypes"
parent-id="{{currentFolder.id}}"
files-uploaded="onUploadComplete"
files-queued="onFilesQueue"
accept="{{acceptedFileTypes}}"
max-file-size="{{maxFileSize}}"
hide-dropzone="{{!activeDrag && images.length > 0 }}"
hide-dropzone="{{!activeDrag && images.length > 0 || searchOptions.filter }}"
compact="{{ images.length > 0 }}">
</umb-file-dropzone>
<umb-media-grid
ng-if="!loading"
items="images"
filter-by="searchTerm"
on-click="clickHandler"
on-click-name="clickItemName"
item-max-width="150"
@@ -86,6 +91,21 @@
only-images={{onlyImages}}>
</umb-media-grid>
<div class="flex justify-center">
<umb-pagination
ng-if="searchOptions.totalPages > 0 && !loading"
page-number="searchOptions.pageNumber"
total-pages="searchOptions.totalPages"
on-change="changePagination(pageNumber)">
</umb-pagination>
</div>
<umb-empty-state
ng-if="searchOptions.filter && images.length === 0 && !loading"
position="center">
<localize key="general_searchNoResult"></localize>
</umb-empty-state>
</div>
<umb-overlay

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
View File

@@ -483,7 +483,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, $cookie
//we need to do a double sync here: first refresh the node where the content was moved,
// then refresh the node where the content was moved from
navigationService.syncTree({
tree: target.nodeType,
tree: target.nodeType ? target.nodeType : (target.metaData.treeAlias),
path: newPath,
forceReload: true,
activate: false