Skip to content
Snippets Groups Projects
Commit a8dc718b authored by Matthieu Benoist's avatar Matthieu Benoist
Browse files

Changes the API compoenent to integrate the copy link button

parent cc192d42
Branches
Tags
1 merge request!104Dos0061612
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+ 9
− 33
View file @ a8dc718b
......@@ -12,19 +12,8 @@
</span>
</div>
<div class="root-url-input">
<div class="link-with-copy">
<span class="parameters-url">
<a [href]="resource.metadataLink.url" target="_blank">{{ resource.metadataLink.url }}</a>
</span>
<button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)" class="button is-medium"
[attr.data-tooltip]="messageClipboardRoot">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" />
</svg>
</button>
</div>
<app-link-copy-icon [linkUrl]="resource.metadataLink.url" [isRoot]="true"></app-link-copy-icon>
</div>
</div>
......@@ -192,27 +181,14 @@
URL personnalisée
</span>
</div>
<div class="link-with-copy">
<span class="parameters-url column is-12-mobile is-narrow-tablet">
<a [href]="queryableUrl" target="_blank" [ngClass]="{'is-disabled': isAllFeaturesChecked}"
[innerHtml]="queryableUrlToDisplay">
</a>
</span>
<button type="button" (click)="copyToClipboard(queryableUrl)"
class="column button is-narrow-tablet is-5-mobile is-medium" [attr.data-tooltip]="messageClipboard">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" />
</svg>
</button>
<div class="resource-download-icon">
<app-download-button [url]="downloadUrl" [fileName]="getFileName()">
</app-download-button>
</div>
</div>
<app-link-copy-icon [linkUrl]="queryableUrl" [linkToDisplay]="queryableUrlToDisplay" >
<div class="resource-download-icon">
<app-download-button [url]="downloadUrl" [fileName]="getFileName()">
</app-download-button>
</div>
</app-link-copy-icon>
</div>
</ng-container>
</div>
\ No newline at end of file
</div>
src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+ 1
− 87
View file @ a8dc718b
......@@ -23,95 +23,9 @@
}
}
.link-with-copy {
display: flex;
a,
/* stylelint-disable-next-line */
a span {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.parameters-url-icon {
color: $brand-color;
&:hover {
cursor: pointer;
}
}
.parameters-url {
background-color: $grey-background-color;
border: 1px solid $grey-super-light-color;
transition: all 0.5s ease;
word-break: break-all;
flex-shrink: 1;
padding: 0.7rem 0.5rem;
min-height: 2.5rem;
// ng-deep needed because of the innerHtml breaks the styling
/* stylelint-disable-next-line */
::ng-deep .is-active-parameter {
font-weight: bold;
color: $link-color;
}
/* stylelint-disable-next-line */
a.is-disabled ::ng-deep .is-active-parameter {
font-weight: bold;
color: $grey-dark-color;
}
a.is-disabled,
a.is-disabled span {
pointer-events: none;
color: $grey-dark-color;
}
}
.button {
font-size: 0.875rem;
margin-left: 0.5rem;
position: relative;
margin-right: 0.5rem;
height: 2.75rem;
width: 2.75rem;
border-color: $grey-super-light-color;
svg {
position: absolute;
width: 1.25rem;
left: calc(50% - (1.25rem / 2));
top: calc(50% - (1.25rem / 2));
}
svg path {
fill: $grey-dark-color;
}
}
.button:hover {
svg {
opacity: 0.7;
}
}
}
.root-url {
border-bottom: 2px solid $grey-background-color;
padding-bottom: 1.5rem;
a {
pointer-events: none;
cursor: default;
text-decoration: none;
color: $grey-dark-color;
}
}
.root-url-label {
......@@ -305,7 +219,7 @@ h3 {
}
// Mobile: dropdown displays at 100%.
// Mobile: dropdown displays at 100%.
.dropdown,
.dropdown-trigger,
.dropdown-trigger button,
......
src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
+ 2
− 38
View file @ a8dc718b
......@@ -21,8 +21,6 @@ export class ResourceQueryableComponent implements OnInit {
downloadMessage = geosource.downloads.download;
messageClipboard: string;
messageClipboardRoot: string;
queryableUrl: string;
queryableUrlToDisplay: SafeHtml;
......@@ -146,9 +144,6 @@ export class ResourceQueryableComponent implements OnInit {
}
ngOnInit() {
this.messageClipboard = geosource.mapMessages.share;
this.messageClipboardRoot = geosource.mapMessages.share;
this.initSettings();
}
......@@ -195,6 +190,7 @@ export class ResourceQueryableComponent implements OnInit {
// Init the url query parameters that will not be changed by the user
this.queryableParameters.baseUrl = this.resource.metadataLink.url;
if (this.resource.type === linkFormats.ws) {
// Exception for this service, we modify the root URL
// this.resource.metadataLink.url += '/all.json';
......@@ -240,9 +236,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableParameters.insee +
this.queryableParameters.bbox
;
console.log('before');
console.log(this.queryableParameters);
console.log(this.queryableUrl);
if (this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&startIndex=${this.fromFeature}`;
......@@ -253,8 +246,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableUrl += `&maxfeatures=${this.numberFeatures}&start=${this.fromFeature}`;
}
}
console.log('debug...');
console.log(this.queryableUrl);
if (!this.isAllFeaturesChecked && this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&count=${this.numberFeatures}`;
......@@ -447,7 +438,7 @@ export class ResourceQueryableComponent implements OnInit {
checkAllFeatures() {
this.numberFeatures = this.isAllFeaturesChecked ?
this._datasetDetailService.dataset.totalData : this.inputCountFeatures;
-1 : this.inputCountFeatures;
this.updateQueryableUrl();
this.updateQueryableurlToDisplay();
}
......@@ -490,33 +481,6 @@ export class ResourceQueryableComponent implements OnInit {
return projection ? `${projection.commonName} (${projection.name})` : name;
}
copyToClipboard(text, isRoot) {
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.height = '0';
selBox.value = text;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
if (isRoot) {
this.messageClipboardRoot = geosource.mapMessages.copied;
setTimeout(() => {
this.messageClipboardRoot = geosource.mapMessages.share;
// tslint:disable-next-line: align
}, 2000);
} else {
this.messageClipboard = geosource.mapMessages.copied;
setTimeout(() => {
this.messageClipboard = geosource.mapMessages.share;
// tslint:disable-next-line: align
}, 2000);
}
}
get downloadUrl() {
return this.queryableUrl.replace(
'https://download.data.grandlyon.com',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment