Skip to content

Commit

Permalink
Tidied up app-group list / management
Browse files Browse the repository at this point in the history 
finos#4876
  • Loading branch information
@davidwatkins73
davidwatkins73 committed Jul 1, 2020
1 parent 828cf74 commit 53a6fb7
Show file tree
Hide file tree
Showing 10 changed files with 381 additions and 298 deletions.
112 changes: 112 additions & 0 deletions waltz-ng/client/app-groups/components/app-group-list-section/app-group-list-section.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!--
~ Waltz - Enterprise Architecture
~ Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
~ See README.md for more information
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific
~
-->

<div>
<waltz-section icon='object-group'
name="Application Groups"
id="application-groups-section">


<div ng-if="!$ctrl.showPublicSearch">

<div class="small waltz-paragraph text-muted">
<waltz-icon name="info-circle"></waltz-icon>
Application groups are used to create ad-hoc views over
a specified subset of applications within the organisation.
You can create groups and assign applications to them. These
groups are private by default.
</div>

<br>

<waltz-app-group-list group-subscriptions="$ctrl.groupSubscriptions"
delete-group="$ctrl.deleteGroup"
unsubscribe="$ctrl.unsubscribe">
</waltz-app-group-list>

<div class="text-right"
style="margin-top: 6px;">
<a class="clickable"
ng-click="$ctrl.createNewGroup()">
Create new group
</a>
|
<a class="clickable"
ng-click="$ctrl.onShowPublicSearch()">
Add shared groups
</a>

</div>
</div>

<div ng-if="$ctrl.showPublicSearch">
<div class="small waltz-paragraph text-muted">
<waltz-icon name="info-circle"></waltz-icon>
You can subscribe to existing public groups by searching for them
using the search field below.
</div>

<br>

<input type="text"
ng-model="$ctrl.selectedPublicGroup"
placeholder="Search for public group"
uib-typeahead="group as group.name for group in $ctrl.availableGroups | filter:{name:$viewValue}"
typeahead-template-url="app-group-list-section/app-group-search-result.html"
class="form-control"
typeahead-show-hint="true"
typeahead-min-length="0">

<div ng-if="$ctrl.recentlySubscribed.length > 0">
<br>


Recently subscribed:
<ul class="list">
<li ng-repeat="recent in $ctrl.recentlySubscribed">
<waltz-entity-link entity-ref="recent"></waltz-entity-link>
</li>
</ul>
</div>

<br>

<div class="text-right"
style="margin-top: 6px;">
<a class="clickable"
ng-click="$ctrl.onHidePublicSearch()">
Done
</a>
</div>
</div>


</waltz-section>


<script type="text/ng-template"
id="app-group-list-section/app-group-search-result.html">
<a style="padding-left: 6px">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
<span class="small no-overflow">
-
<span ng-bind="match.model.description | limitTo:100"></span>
</span>
</a>
</script>
</div>
141 changes: 141 additions & 0 deletions waltz-ng/client/app-groups/components/app-group-list-section/app-group-list-section.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/*
* Waltz - Enterprise Architecture
* Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
* See README.md for more information
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific
*
*/

import _ from "lodash";
import template from "./app-group-list-section.html";
import {initialiseData} from "../../../common";
import {CORE_API} from "../../../common/services/core-api-utils";

const bindings = {
groupSubscriptions: "<"
};

const initialData = {
showPublicSearch: false,
availableGroups: [],
recentlySubscribed: []
};


function removeUsedGroups(allGroups, existingSubscriptions) {
const subscribedGroupIds = _.map(existingSubscriptions, "appGroup.id");
return _.reject(allGroups, g => _.includes(subscribedGroupIds, g.id));
}


function controller(serviceBroker, notification, $scope, $state) {

const vm = initialiseData(this, initialData);

function loadPublicGroups() {
serviceBroker.loadViewData(CORE_API.AppGroupStore.findPublicGroups)
.then(r => r.data)
.then(publicGroups => removeUsedGroups(publicGroups, vm.groupSubscriptions))
.then(availableGroups => vm.availableGroups = availableGroups);
}


function subscribeToGroup(group) {
return serviceBroker
.execute(CORE_API.AppGroupStore.subscribe, [group.id])
.then(r => {
vm.recentlySubscribed = _
.chain(vm.recentlySubscribed)
.concat(group)
.uniqBy(g => g.id)
.value();
})
}


function unsubscribeFromGroup(subscription) {
return serviceBroker
.execute(CORE_API.AppGroupStore.unsubscribe, [subscription.appGroup.id])
.then(r => r.data);
}

vm.createNewGroup = () => {
serviceBroker
.execute(CORE_API.AppGroupStore.createNewGroup)
.then(r => {
notification.success("New group created");
$state.go("main.app-group.edit", { id: r.data })
});
};


vm.unsubscribe = (subscription) => {
unsubscribeFromGroup(subscription)
.then(groupSubscriptions => vm.groupSubscriptions = groupSubscriptions)
.then(() => notification.warning(`Unsubscribed from: ${subscription.appGroup.name}`));
};


vm.deleteGroup = (group) => {
if (! confirm("Really delete this group ? \n " + group.appGroup.name)) return;

serviceBroker
.execute(CORE_API.AppGroupStore.deleteGroup, [group.appGroup.id])
.then(r => r.data)
.then(groupSubscriptions => vm.groupSubscriptions = groupSubscriptions)
.then(() => notification.warning(`Deleted group: ${group.appGroup.name}`));

};


vm.onShowPublicSearch = () => {
vm.showPublicSearch = true;
loadPublicGroups();
};


vm.onHidePublicSearch = () => {
vm.showPublicSearch = false;

};

$scope.$watch('$ctrl.selectedPublicGroup', selected => {
if (selected && _.isObject(selected)) {
subscribeToGroup(selected)
.then(groupSubscriptions => vm.groupSubscriptions = groupSubscriptions)
.then(() => notification.success(`Subscribed to: ${selected.name}`))
.then(() => vm.selectedPublicGroup = null);

}
});
}

controller.$inject = [
"ServiceBroker",
"Notification",
"$scope",
"$state"
];


const component = {
template,
controller,
bindings
};


export default {
component,
id: "waltzAppGroupListSection"
}
88 changes: 88 additions & 0 deletions waltz-ng/client/app-groups/components/app-group-list/app-group-list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!--
~ Waltz - Enterprise Architecture
~ Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
~ See README.md for more information
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific
~
-->

<div>

<style>
.glyphicon {top: 0px}
</style>
<waltz-search-control on-query="$ctrl.searchTermsChanged"
placeholder-text="Search group subscriptions"
local-storage-key="waltz-group-subscriptions.search-terms"
min-characters='1'>
</waltz-search-control>

<br>

<waltz-no-data ng-if="$ctrl.filteredSubscriptions.length === 0">
<message>
No group subscriptions found. You may like to create a new group or subscribe to an existing group.
</message>
</waltz-no-data>

<div class="waltz-scroll-region"
style="max-height: 300px"
ng-if="$ctrl.filteredSubscriptions.length > 0">

<table class="table table-condensed table-hover">
<colgroup>
<col width="75%">
<col width="25%">
</colgroup>
<tr ng-repeat="subscription in $ctrl.filteredSubscriptions | orderBy:'appGroup.name' "
class="waltz-visibility-parent">
<td>
<div>
<waltz-entity-link tooltip-placement="none"
entity-ref="subscription.appGroup">
</waltz-entity-link>
</div>
<div>
<small ng-bind="subscription.appGroup.description"></small>
</div>
</td>
<td class="waltz-visibility-child-30">
<small>
<ul class="list-unstyled list-inline">
<li ng-if="subscription.role == 'OWNER'">
<a class="clickable" ng-click="$ctrl.deleteGroup(subscription)">
Delete
<waltz-icon name="trash"></waltz-icon>
</a>
</li>
<li ng-if="subscription.role == 'VIEWER'">
<a class="clickable" ng-click="$ctrl.unsubscribe(subscription)">
Unsubscribe
<waltz-icon name="minus-circle"></waltz-icon>
</a>
</li>
<li ng-if="subscription.role == 'OWNER'">
<a ui-sref="main.app-group.edit ({ id:subscription.appGroup.id })">
Edit
<waltz-icon name="edit"></waltz-icon>
</a>
</li>
</ul>
</small>
</td>
</tr>
</table>
</div>


</div>
Loading

0 comments on commit 53a6fb7

Please sign in to comment.