Skip to content

Commit

Permalink
Admin / Source / Improve dirty state (#8222)
Browse files Browse the repository at this point in the history 
* Admin / Source / Improve dirty state

Due to wrong `form` tag placement, dirty state was only set when changing portal id and filter - not UI config, service or logo.

Reorganize the form to improve this, so that save action is enabled when changing the form. Also keep the logo form upload not nested (because it would not work)

* Update SourcesController.js

* Admin / Source / Hide logo if not available.
  • Loading branch information
@fxprunayre
fxprunayre committed Sep 2, 2024
1 parent dc0f78a commit 6f4e79a
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 111 deletions.
2 changes: 1 addition & 1 deletion web-ui/src/main/resources/catalog/js/admin/SourcesController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@

$scope.deleteSourceLogo = function () {
$scope.source.logo = null;
// $scope.updateSource();
$scope.gnSourceForm.$setDirty();
};

// upload directive options
Expand Down
221 changes: 111 additions & 110 deletions web-ui/src/main/resources/catalog/templates/admin/settings/sources.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
{{::s.name}}
<img
class="gn-source-logo"
onerror="this.style.display='none'"
data-ng-src="{{'../../images/' + (s.type === 'subportal' ? 'harvesting/' + s.logo : 'logos/' + s.uuid + '.png')}}"
/>
</a>
Expand Down Expand Up @@ -169,6 +170,20 @@
</p>
</div>

<table class="table table-striped">
<tr data-ng-repeat="(key, value) in source.label">
<td>{{key | translate}}</td>
<td>
<input
type="text"
class="form-control"
value="{{value}}"
data-ng-model="source.label[key]"
/>
</td>
</tr>
</table>

<label data-translate="">sourceFilter</label>
<input type="text" class="form-control" data-ng-model="source.filter" />
<p class="help-block" data-translate="">sourceFilter-help</p>
Expand All @@ -177,130 +192,116 @@
<span data-translate="">displayInHeaderSwitcher</span>
</label>
<p class="help-block" data-translate="">displayInHeaderSwitcher-help</p>
</form>

<div>
<label data-translate="">sourceLogo</label>
<label data-translate="">sourceUiConfig</label>
<select
id="uiConfigurationList"
class="form-control"
data-ng-options="c.id as c.id for (key, c) in uiConfigurations | orderBy: 'id'"
data-ng-model="source.uiConfig"
></select>
<p class="help-block" data-translate="">sourceUiConfig-help</p>

<div class="row" data-ng-show="source.logo">
<div class="col-md-6 gn-nopadding-left">
<img
data-ng-show="source.logo"
src="../../images/harvesting/{{ source.logo }}"
class="img-thumbnail form-group"
data-ng-attr-title="{{ source.logo }}"
/>
</div>
<div class="col-md-6 gn-nopadding-left">
<a href="" data-ng-click="deleteSourceLogo()" class="text-danger">
<i data-ng-show="source.logo" class="fa fa-times delete"></i>
</a>
</div>
<div>
<label for="serviceList"
>{{'system/csw/capabilityRecordUuid' | translate}}</label
>

<div
data-gn-suggest="serviceRecordSearchObj"
data-gn-suggest-model="source.serviceRecord"
data-gn-suggest-property="_id"
data-gn-suggest-display-title="span"
></div>

<p class="help-block">
{{'system/csw/capabilityRecordUuid-help' | translate}}
</p>
</div>

<!--Display logo picker from harvester logos-->
<div class="row" data-ng-show="queue.length == 0">
<div class="col-md-12 gn-nopadding-left gn-margin-bottom" translate>
selectExistingLogo
</div>
<div class="col-md-12 gn-nopadding-left gn-margin-bottom">
<div class="form-group" gn-logo-picker="source.logo"></div>
</div>
<div data-ng-show="groups.length">
<label class="control-label" data-translate="">subPortalGroupOwner</label>
<div
data-groups-combo=""
data-owner-group="source.groupOwner"
data-set-default-value="false"
data-optional="{{::$parent.user.isAdministrator()}}"
lang="lang"
groups="groups"
data-exclude-special-groups="true"
></div>

<p class="help-block" data-translate="">subPortalGroupOwnerHelp</p>
</div>

<!--Display logo upload input-->
<form
id="gn-group-edit"
name="gnGroupEdit"
method="POST"
data-file-upload="logoUploadOptions"
role="form"
>
<input type="hidden" name="_csrf" value="{{csrf}}" />
<div class="row" data-ng-show="!source.logo" id="group-logo-upload">
<div class="col-md-12 gn-nopadding-left gn-margin-bottom" translate>
addNewLogo
<div>
<label data-translate="">sourceLogo</label>

<div class="row" data-ng-show="source.logo">
<div class="col-md-6 gn-nopadding-left">
<img
data-ng-show="source.logo"
src="../../images/harvesting/{{ source.logo }}"
class="img-thumbnail form-group"
data-ng-attr-title="{{ source.logo }}"
/>
</div>
<div class="col-md-12 gn-nopadding-left gn-nopadding-right">
<div class="panel panel-default">
<div class="panel-heading" data-translate="">upload</div>
<div class="panel-body">
<span class="btn btn-success btn-block fileinput-button">
<i class="fa fa-plus fa-white"></i>
<span data-translate="">chooseLogos</span>
<input type="file" id="source-logo" name="file" />
</span>
<ul style="list-style: none">
<li data-ng-repeat="file in queue">
<div class="preview" data-file-upload-preview="file"></div>
{{file.name}} ({{file.type}} / {{file.size | formatFileSize}})
<i class="fa fa-trash-o" data-ng-click="clear(file)"></i>
</li>
</ul>
</div>
</div>
<div class="col-md-6 gn-nopadding-left">
<a href="" data-ng-click="deleteSourceLogo()" class="text-danger">
<i data-ng-show="source.logo" class="fa fa-times delete"></i>
</a>
</div>
</div>
</form>

<p class="help-block" data-translate="">sourceLogo-help</p>
</div>

<label data-translate="">sourceUiConfig</label>
<select
id="uiConfigurationList"
class="form-control"
data-ng-options="c.id as c.id for (key, c) in uiConfigurations | orderBy: 'id'"
data-ng-model="source.uiConfig"
></select>
<p class="help-block" data-translate="">sourceUiConfig-help</p>

<div>
<label for="serviceList"
>{{'system/csw/capabilityRecordUuid' | translate}}</label
>

<div
data-gn-suggest="serviceRecordSearchObj"
data-gn-suggest-model="source.serviceRecord"
data-gn-suggest-property="_id"
data-gn-suggest-display-title="span"
></div>
</div>
</form>

<p class="help-block">
{{'system/csw/capabilityRecordUuid-help' | translate}}
</p>
<!--Display logo picker from harvester logos-->
<div class="row" data-ng-show="queue.length == 0">
<div class="col-md-12 gn-nopadding-left gn-margin-bottom" translate>
selectExistingLogo
</div>
<div class="col-md-12 gn-nopadding-left gn-margin-bottom">
<div class="form-group" gn-logo-picker="source.logo"></div>
</div>
</div>

<div data-ng-show="groups.length">
<label class="control-label" data-translate="">subPortalGroupOwner</label>
<div
data-groups-combo=""
data-owner-group="source.groupOwner"
data-set-default-value="false"
data-optional="{{::$parent.user.isAdministrator()}}"
lang="lang"
groups="groups"
data-exclude-special-groups="true"
></div>
<!--Display logo upload input-->
<form
id="gn-group-edit"
name="gnGroupEdit"
method="POST"
data-file-upload="logoUploadOptions"
role="form"
>
<input type="hidden" name="_csrf" value="{{csrf}}" />
<div class="row" data-ng-show="!source.logo" id="group-logo-upload">
<div class="col-md-12 gn-nopadding-left gn-margin-bottom" translate>
addNewLogo
</div>
<div class="col-md-12 gn-nopadding-left gn-nopadding-right">
<div class="panel panel-default">
<div class="panel-heading" data-translate="">upload</div>
<div class="panel-body">
<span class="btn btn-success btn-block fileinput-button">
<i class="fa fa-plus fa-white"></i>
<span data-translate="">chooseLogos</span>
<input type="file" id="source-logo" name="file" />
</span>
<ul style="list-style: none">
<li data-ng-repeat="file in queue">
<div class="preview" data-file-upload-preview="file"></div>
{{file.name}} ({{file.type}} / {{file.size | formatFileSize}})
<i class="fa fa-trash-o" data-ng-click="clear(file)"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>

<p class="help-block" data-translate="">subPortalGroupOwnerHelp</p>
</div>
<p class="help-block" data-translate="">sourceLogo-help</p>
</div>

<table class="table table-striped">
<tr data-ng-repeat="(key, value) in source.label">
<td>{{key | translate}}</td>
<td>
<input
type="text"
class="form-control"
value="{{value}}"
data-ng-model="source.label[key]"
/>
</td>
</tr>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit 6f4e79a

Please sign in to comment.