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.

1. 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

2. /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>

3. /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.