Creating list of items from rest response

psysak

Guys, I know this is completely due to my own ineptitude using Angular but could you please point me in the right direction for how to create a list on a dashboard based on the response from the REST API? For example, if I want to query the file store and then create a list of items from that.

Thank you thank you thank you

MattFox

Jared's already got the maFileStore service. I take it you want to do it with the $http service to call the restful file API instead?
No point in reinventing the wheel that's all.
EDIT:
Can you give more info on which restful call you're making here so I've got apples and apples?

psysak

There are certain limitations to the maFileStore such as you can't prevent a user from moving around in the filestore and that kind of thing. I was curious how I could access say /rest/v2/filestore/filstorename and just simply list the items there. If it's a pain in the butt it's fine but if it's a real simple thing I'm inclined to try it. ng-repeat already exists, if I knew how to make that http call and bind it to ng-repeat I'd be on my way. All examples on the interwebs for angular stuff assume you need to write your own controller and everything, which just confuses me even further :)

MattFox

ok cool, that's easy enough, So you're going to restrict them to a given filestore directory?
If so, let's get this ball rollin!

MattFox

Alright! As promised, how to use what you need to get data from a specific filestore.
I've utilised/hacked some of Jared's code (Sorry Jared!) to make a quicker turnaround.

the /opt/mango/overrides/modules/mangoUI/web/dev/controllers/userFileStore.js component

/*
File:userFileStore.js
Date:16/5/2019
Author: Matt 'Fox' Fox
Desc: quick file list generator of anchor links in angular js for @psysak
*/
define(['angular', 'require'], function(angular, require) {

function UserFilesController($http,maFileStore)
{
	var ctrl = this;
	ctrl.fileStoreName = 'default';
	
	const fileStoreUrl = '/rest/v2/file-stores';
	const fileStoreUrlSplit = fileStoreUrl.split('/');
	
	this.$onChanges = function(e)
	{
		if(e.fileStoreName && e.fileStoreName.currentValue!==undefined)
		{
			ctrl.fileStoreName = e.fileStoreName.currentValue.split('/');
			getFileList();
		}
	}
	
	var toUrl = function(isDirectory) {
    	const parts = ctrl.fileStoreName.map(function(part) {
    		return encodeURIComponent(part);
    	});
    	let url = fileStoreUrl + '/' + parts.join('/');
    	if (isDirectory) {
    		url += '/';
    	}
    	return url;
    };
	
	var getFileList = function(){
		
		if (ctrl.fileStoreName.length < 1) {
			throw new Error('Must specify the file store name');
		}
		const folderUrl = toUrl(true);
		return $http({
			method: 'GET',
			url: folderUrl
		}).then(function(response) {
			ctrl.fileStoreList=response.data.map(function(file) {
				// return new FileStoreFile(ctrl.fileStoreName[0], file);
				return new maFileStore.newFileStoreFile(ctrl.fileStoreName[0], file);
			});
		});
	};	
				
}
		UserFilesController.$inject = ['$http','maFileStore'];
	return	{
        bindings: {
	   fileStoreName:'<'
        },
        scope: {},
        templateUrl: "/modules/mangoUI/web/dev/views/userFileStore.html",
        // you can inject services into the controller
        controller:('UserFilesController',UserFilesController)
	};
	
	
});//define

/opt/mango/overrides/modules/mangoUI/web/dev/views/userFileStore.html

<a ng-repeat="file in $ctrl.fileStoreList" class="md-icon-button md-button md-mangoLight-theme md-ink-ripple"  style="display:inline-block;min-width:300px;"  ng-if="!file.directory" download="" ng-href="file.url" ng-click="$ctrl.cancelClick($event)" aria-label="" href="{{file.url}}">
{{file.filename}}
		        		<md-icon class="md-mangoLight-theme material-icons" style="display:inline-block" role="img" aria-label="file_download">file_download</md-icon>
		        		
<div class="md-ripple-container"></div></a>

/opt/mango/overrides/modules/mangoUI/web/dev/userModule.js

define(['angular', 'require','./controllers/userFileStore.js'], function(angular, require,userFileStore)
{
var userModule = angular.module('userModule', ['maUiApp']);
try {
userModule.component('userFileStore', userFileStore);
}catch(e){console.log(e);}
});//define

EDIT:
Oops, forgot the component tag:

<user-file-store file-store-name="'default'"></user-file-store>

Let me know if you need further help.

Fox

MattFox

Sorry just realised the URl ain't working. Fixing it now..
EDIT:
done, sorry spent some time trying to make it look at least a little bit pretty!

psysak

WOW!! That's something! Thank you @MattFox , I'll give this a go.

MattFox

Yep, please let me know how you get on, the feedback is always welcome.