Move applink, proxy add buttons to appstore view

This commit is contained in:
Johannes Zellner
2022-10-05 17:17:22 +02:00
parent f4a0460ebd
commit 13b659c52f
5 changed files with 183 additions and 174 deletions

View File

@@ -31,68 +31,6 @@
</div>
</div>
<!-- Modal applinks add -->
<div class="modal fade" id="applinksAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'app.addApplinkDialog.title' | tr }}</h4>
</div>
<div class="modal-body">
<form name="applinksAddForm" role="form" ng-submit="applinksAdd.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (applinksAddForm.upstreamUri.$dirty && applinksAddForm.upstreamUri.$invalid) || (!applinksAddForm.upstreamUri.$dirty && applinksAdd.error.upstreamUri) }">
<label class="control-label">{{ 'app.applinks.upstreamUri' | tr }}</label>
<input type="text" class="form-control" ng-model="applinksAdd.upstreamUri" name="upstreamUri" id="inputUpstreamUri" autofocus autocomplete="off" required>
</div>
<div class="form-group">
<label class="control-label">{{ 'app.applinks.label' | tr }}</label>
<input type="text" class="form-control" ng-model="applinksAdd.label" name="label" id="inputLabel" autocomplete="off" placeholder="Leave empty for autodetection">
</div>
<div class="form-group">
<label class="control-label">{{ 'app.display.tags' | tr }}</label>
<tag-input class="form-control" placeholder="{{ 'app.display.tagsPlaceholder' | tr }}" taglist="applinksAdd.tags" name="tags" uib-tooltip="{{ 'app.display.tagsTooltip' | tr }}"></tag-input>
</div>
<label class="control-label">{{ 'app.accessControl.userManagement.dashboardVisibility' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div class="radio">
<label>
<input type="radio" ng-model="applinksAdd.accessRestrictionOption" value="any">
<span>{{ 'app.accessControl.userManagement.visibleForAllUsers' | tr }}</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="applinksAdd.accessRestrictionOption" value="groups">
<span>{{ 'app.accessControl.userManagement.visibleForSelected' | tr }}</span>
<span class="label label-danger" ng-show="applinksAdd.accessRestrictionOption === 'groups' && !applinksAdd.isAccessRestrictionValid()">{{ 'appstore.installDialog.errorUserManagementSelectAtLeastOne' | tr }}</span>
</label>
</div>
<div>
<div style="margin-left: 20px; display: flex;">
<div>
{{ 'appstore.installDialog.users' | tr }}: <multiselect name="accessUsersSelect" class="input-sm stretch" ng-model="applinksAdd.accessRestriction.users" ng-disabled="applinksAdd.accessRestrictionOption !== 'groups'" options="(user.username || user.email) for user in allUsers" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</div>
<div>
{{ 'appstore.installDialog.groups' | tr }}: <multiselect name="accessGroupsSelect" class="input-sm stretch" ng-model="applinksAdd.accessRestriction.groups" ng-disabled="applinksAdd.accessRestrictionOption !== 'groups'" options="group.name for group in allGroups" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</div>
</div>
</div>
<input class="ng-hide" type="submit" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
<button type="button" class="btn btn-success" ng-click="applinksAdd.submit()" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="applinksAdd.busy"></i> {{ 'main.dialog.save' | tr }}</button>
</div>
</div>
</div>
</div>
<!-- Modal applinks edit -->
<div class="modal fade" id="applinksEditModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -201,15 +139,7 @@
<button class="btn btn-default" type="button" ng-class="{ 'active': showFilter, 'btn-warning': showFilter || selectedTags.length || selectedState.state || !selectedGroup._unset || !selectedDomain._alldomains }" ng-click="showFilter = !showFilter"><i class="fas fa-filter"></i></button>
</span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i> Add</button>
<ul class="dropdown-menu">
<li><a href="/#/appstore"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ 'apps.addAppAction' | tr }}</a></li>
<li role="separator" class="divider"></li>
<li><a href="" ng-click="applinksAdd.show()"><i class="fas fa-link fa-fw"></i> {{ 'apps.addApplinkAction' | tr }}</a></li>
<li><a href="/#/appstore/io.cloudron.builtin.appproxy"><i class="fas fa-exchange-alt fa-fw"></i> {{ 'apps.addAppproxyAction' | tr }}</a></li>
</ul>
</div>
</form>
</div>
<div ng-show="showFilter" class="view-header-filter-bar">

View File

@@ -3,9 +3,7 @@
/* global angular:false */
/* global $:false */
/* global APP_TYPES */
/* global HSTATES */
/* global ISTATES */
/* global RSTATES */
/* global onAppClick */
angular.module('Application').controller('AppsController', ['$scope', '$translate', '$interval', '$location', 'Client', function ($scope, $translate, $interval, $location, Client) {
var ALL_DOMAINS_DOMAIN = { _alldomains: true, domain: 'All Domains' }; // dummy record for the single select filter
@@ -108,65 +106,6 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
}
};
$scope.applinksAdd = {
error: {},
busy: false,
upstreamUri: '',
label: '',
tags: '',
accessRestrictionOption: 'any',
accessRestriction: { users: [], groups: [] },
isAccessRestrictionValid: function () {
return !!($scope.applinksAdd.accessRestriction.users.length || $scope.applinksAdd.accessRestriction.groups.length);
},
show: function () {
$scope.applinksAdd.error = {};
$scope.applinksAdd.busy = false;
$scope.applinksAdd.upstreamUri = '';
$scope.applinksAdd.label = '';
$scope.applinksAdd.tags = '';
$scope.applinksAddForm.$setUntouched();
$scope.applinksAddForm.$setPristine();
$('#applinksAddModal').modal('show');
return false; // prevent propagation and default
},
submit: function () {
if (!$scope.applinksAdd.upstreamUri) return;
$scope.applinksAdd.busy = true;
var accessRestriction = null;
if ($scope.applinksAdd.accessRestrictionOption === 'groups') {
accessRestriction = { users: [], groups: [] };
accessRestriction.users = $scope.applinksAdd.accessRestriction.users.map(function (u) { return u.id; });
accessRestriction.groups = $scope.applinksAdd.accessRestriction.groups.map(function (g) { return g.id; });
}
var data = {
upstreamUri: $scope.applinksAdd.upstreamUri,
label: $scope.applinksAdd.label,
accessRestriction: accessRestriction,
tags: $scope.applinksAdd.tags.split(' ').map(function (t) { return t.trim(); }).filter(function (t) { return !!t; })
};
Client.addApplink(data, function (error) {
$scope.applinksAdd.busy = false;
if (error) return console.error('Failed to add applink', error);
Client.refreshInstalledApps();
$('#applinksAddModal').modal('hide');
});
}
};
$scope.applinksEdit = {
error: {},
busyEdit: false,

View File

@@ -211,6 +211,68 @@
</div>
</div>
<!-- Modal applinks add -->
<div class="modal fade" id="applinksAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'app.addApplinkDialog.title' | tr }}</h4>
</div>
<div class="modal-body">
<form name="applinksAddForm" role="form" ng-submit="applinksAdd.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (applinksAddForm.upstreamUri.$dirty && applinksAddForm.upstreamUri.$invalid) || (!applinksAddForm.upstreamUri.$dirty && applinksAdd.error.upstreamUri) }">
<label class="control-label">{{ 'app.applinks.upstreamUri' | tr }}</label>
<input type="text" class="form-control" ng-model="applinksAdd.upstreamUri" name="upstreamUri" id="inputUpstreamUri" autofocus autocomplete="off" required>
</div>
<div class="form-group">
<label class="control-label">{{ 'app.applinks.label' | tr }}</label>
<input type="text" class="form-control" ng-model="applinksAdd.label" name="label" id="inputLabel" autocomplete="off" placeholder="Leave empty for autodetection">
</div>
<div class="form-group">
<label class="control-label">{{ 'app.display.tags' | tr }}</label>
<tag-input class="form-control" placeholder="{{ 'app.display.tagsPlaceholder' | tr }}" taglist="applinksAdd.tags" name="tags" uib-tooltip="{{ 'app.display.tagsTooltip' | tr }}"></tag-input>
</div>
<label class="control-label">{{ 'app.accessControl.userManagement.dashboardVisibility' | tr }} <sup><a ng-href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div class="radio">
<label>
<input type="radio" ng-model="applinksAdd.accessRestrictionOption" value="any">
<span>{{ 'app.accessControl.userManagement.visibleForAllUsers' | tr }}</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="applinksAdd.accessRestrictionOption" value="groups">
<span>{{ 'app.accessControl.userManagement.visibleForSelected' | tr }}</span>
<span class="label label-danger" ng-show="applinksAdd.accessRestrictionOption === 'groups' && !applinksAdd.isAccessRestrictionValid()">{{ 'appstore.installDialog.errorUserManagementSelectAtLeastOne' | tr }}</span>
</label>
</div>
<div>
<div style="margin-left: 20px; display: flex;">
<div>
{{ 'appstore.installDialog.users' | tr }}: <multiselect name="accessUsersSelect" class="input-sm stretch" ng-model="applinksAdd.accessRestriction.users" ng-disabled="applinksAdd.accessRestrictionOption !== 'groups'" options="(user.username || user.email) for user in allUsers" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</div>
<div>
{{ 'appstore.installDialog.groups' | tr }}: <multiselect name="accessGroupsSelect" class="input-sm stretch" ng-model="applinksAdd.accessRestriction.groups" ng-disabled="applinksAdd.accessRestrictionOption !== 'groups'" options="group.name for group in allGroups" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
</div>
</div>
</div>
<input class="ng-hide" type="submit" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
<button type="button" class="btn btn-success" ng-click="applinksAdd.submit()" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="applinksAdd.busy"></i> {{ 'main.dialog.save' | tr }}</button>
</div>
</div>
</div>
</div>
<div ng-show="!ready" class="loading-banner">
<h1><i class="fa fa-circle-notch fa-spin"></i></h1>
</div>
@@ -287,36 +349,45 @@
<br/>
</div>
<div ng-show="ready && validSubscription" class="ng-cloak appstore-toolbar">
<div class="appstore-toolbar-content">
<button class="btn" type="button" ng-click="showCategory('');" ng-class="{ 'btn-primary': '' === category }">{{ 'appstore.category.all' | tr }}</button>
<button class="btn" type="button" ng-click="showCategory('new');" ng-class="{ 'btn-primary': 'new' === category }">{{ 'appstore.category.newApps' | tr }}</button>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }">
{{ categoryButtonLabel(category) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="category in categories | orderBy:'label'"><a href="" ng-click="showCategory(category.id);"><i class="{{ category.icon }} fa-fw"></i> {{ category.label }}</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<i class="{{ userManagementFilterOption.icon }} fa-fw"></i>
{{ 'appstore.ssofilter.label' | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="option in userManagementFilterOptions" ng-class="{ 'active': userManagementFilterOption.id && userManagementFilterOption.id === option.id }"><a href="" ng-click="applyUserMangamentFilter(option);"><i class="{{ option.icon }} fa-fw"></i> {{ option.label }}</a></li>
</ul>
</div>
<input type="text" id="appstoreSearch" class="form-control" placeholder="{{ 'appstore.searchPlaceholder' | tr }}" ng-model="searchString" ng-change="search()" autofocus>
</div>
</div>
<div class="appstore-layout">
<div ng-show="ready && validSubscription" class="ng-cloak appstore-grid">
<div class="row">
<div class="col-md-12 text-center" ng-hide="apps.length">
<div ng-show="ready && validSubscription" class="ng-cloak appstore-toolbar">
<div class="appstore-toolbar-content">
<button class="btn" type="button" ng-click="showCategory('');" ng-class="{ 'btn-primary': '' === category }">{{ 'appstore.category.all' | tr }}</button>
<button class="btn" type="button" ng-click="showCategory('new');" ng-class="{ 'btn-primary': 'new' === category }">{{ 'appstore.category.newApps' | tr }}</button>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }">
{{ categoryButtonLabel(category) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="category in categories | orderBy:'label'"><a href="" ng-click="showCategory(category.id);"><i class="{{ category.icon }} fa-fw"></i> {{ category.label }}</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<i class="{{ userManagementFilterOption.icon }} fa-fw"></i>
{{ 'appstore.ssofilter.label' | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="option in userManagementFilterOptions" ng-class="{ 'active': userManagementFilterOption.id && userManagementFilterOption.id === option.id }"><a href="" ng-click="applyUserMangamentFilter(option);"><i class="{{ option.icon }} fa-fw"></i> {{ option.label }}</a></li>
</ul>
</div>
<input type="text" id="appstoreSearch" class="form-control" style="width: auto; flex-grow: 1;" placeholder="{{ 'appstore.searchPlaceholder' | tr }}" ng-model="searchString" ng-change="search()" autofocus>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="openAppProxy()"><i class="fas fa-exchange-alt"></i> {{ 'apps.addAppproxyAction' | tr }}</a></a>
<button type="button" class="btn btn-default" ng-click="applinksAdd.show()"><i class="fas fa-link"></i> {{ 'apps.addApplinkAction' | tr }}</button>
<!-- <ul class="dropdown-menu">
<li><a href="" ng-click="applinksAdd.show()"><i class="fas fa-link fa-fw"></i> {{ 'apps.addApplinkAction' | tr }}</a></li>
<li><a href="/#/appstore/io.cloudron.builtin.appproxy"><i class="fas fa-exchange-alt fa-fw"></i> {{ 'apps.addAppproxyAction' | tr }}</a></li>
</ul> -->
</div>
</div>
</div>
<div ng-show="ready && validSubscription" class="ng-cloak appstore-grid">
<div class="text-center" ng-hide="apps.length">
<br/>
<br/>
<br/>
@@ -324,7 +395,7 @@
<br/>
<a href="https://forum.cloudron.io/category/5/app-requests" target="_blank">{{ 'appstore.appMissing' | tr }}</a>
</div>
<div class="col-md-12" ng-show="category === '' && popularApps.length">
<div class="" ng-show="category === '' && popularApps.length">
<div class="row-no-margin">
<div class="col-sm-12">
<h2>{{ 'appstore.category.popular' | tr }}</h2>
@@ -345,7 +416,7 @@
</div>
</div>
</div>
<div class="col-md-12" ng-show="apps.length">
<div class="" ng-show="apps.length">
<div class="row-no-margin" ng-show="!category && !searchString">
<div class="col-sm-12">
<h2>{{ 'appstore.category.all' | tr }}</h2>
@@ -367,4 +438,5 @@
</div>
</div>
</div>
</div>

View File

@@ -601,6 +601,74 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$tran
$location.path('/appstore/' + app.manifest.id, false).search({ version : app.manifest.version });
};
$scope.openAppProxy = function () {
$location.path('/appstore/io.cloudron.builtin.appproxy', false).search({});
};
$scope.applinksAdd = {
error: {},
busy: false,
upstreamUri: '',
label: '',
tags: '',
accessRestrictionOption: 'any',
accessRestriction: { users: [], groups: [] },
isAccessRestrictionValid: function () {
return !!($scope.applinksAdd.accessRestriction.users.length || $scope.applinksAdd.accessRestriction.groups.length);
},
show: function () {
$scope.applinksAdd.error = {};
$scope.applinksAdd.busy = false;
$scope.applinksAdd.upstreamUri = '';
$scope.applinksAdd.label = '';
$scope.applinksAdd.tags = '';
$scope.applinksAddForm.$setUntouched();
$scope.applinksAddForm.$setPristine();
$('#applinksAddModal').modal('show');
return false; // prevent propagation and default
},
submit: function () {
if (!$scope.applinksAdd.upstreamUri) return;
$scope.applinksAdd.busy = true;
var accessRestriction = null;
if ($scope.applinksAdd.accessRestrictionOption === 'groups') {
accessRestriction = { users: [], groups: [] };
accessRestriction.users = $scope.applinksAdd.accessRestriction.users.map(function (u) { return u.id; });
accessRestriction.groups = $scope.applinksAdd.accessRestriction.groups.map(function (g) { return g.id; });
}
var data = {
upstreamUri: $scope.applinksAdd.upstreamUri,
label: $scope.applinksAdd.label,
accessRestriction: accessRestriction,
tags: $scope.applinksAdd.tags.split(' ').map(function (t) { return t.trim(); }).filter(function (t) { return !!t; })
};
Client.addApplink(data, function (error) {
$scope.applinksAdd.busy = false;
if (error) return console.error('Failed to add applink', error);
// wait for dialog to be fully closed to avoid modal behavior breakage when moving to a different view already
$('#applinksAddModal').on('hidden.bs.modal', function () {
$scope.$apply(function () {
$location.path('/apps').search({ });
});
});
$('#applinksAddModal').modal('hide');
});
}
};
function hashChangeListener() {
// event listener is called from DOM not angular, need to use $apply
$scope.$apply(function () {