Skip to content

GitLab

Commit a8dc718b authored by Matthieu Benoist's avatar Matthieu Benoist
Browse files

Changes the API compoenent to integrate the copy link button

parent cc192d42
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
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
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
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',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment