_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

url shortener, quotas, small improvements

Browse Source
This commit is contained in:
_Bastler
2021-06-05 19:49:20 +02:00
parent aef130dff4
commit 651352e4a1
23 changed files with 616 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/urlshortener/urlshortener.component.html
+133
View File
@@ -0,0 +1,133 @@
<h3>{{'urlshortener' | i18n}}</h3>
<div *ngIf="shortenedUrls">
<table mat-table matSort [dataSource]="shortenedUrls.content" (matSortChange)="updateSort($event)">
<ng-container matColumnDef="share">
<th mat-header-cell *matHeaderCellDef> {{'urlshortener.share' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl">
<button mat-icon-button (click)="share(shortenedUrl)">
<mat-icon>share</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="link">
<th mat-header-cell *matHeaderCellDef mat-sort-header="link"> {{'urlshortener.link' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl">
<a mat-button color="accent" href="{{ shortenedUrl.link }}" target="_blank">
<mat-icon *ngIf="shortenedUrl.password">vpn_key</mat-icon> {{ shortenedUrl.link }}
<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
</td>
</ng-container>
<ng-container matColumnDef="note">
<th mat-header-cell *matHeaderCellDef> {{'urlshortener.note' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl">
{{shortenedUrl.note}}
</td>
</ng-container>
<ng-container matColumnDef="url">
<th mat-header-cell *matHeaderCellDef mat-sort-header="url"> {{'urlshortener.url' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl">
<a mat-button color="accent" href="{{ shortenedUrl.url }}" target="_blank">
{{ shortenedUrl.url }}
<mat-icon style="font-size: 1em;">open_in_new
</mat-icon>
</a>
</td>
</ng-container>
<ng-container matColumnDef="expires">
<th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'urlshortener.expires' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl"> {{ shortenedUrl.expires | date:datetimeformat}} </td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef class="align-right"> {{'urlshortener.delete' | i18n}} </th>
<td mat-cell *matCellDef="let shortenedUrl" class="text-right">
<a mat-icon-button>
<mat-icon (click)="confirmDelete(shortenedUrl)">delete</mat-icon>
</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="shortenedUrlColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: shortenedUrlColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="shortenedUrls.totalElements"
[pageSize]="shortenedUrls.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
</div>
<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
<mat-card>
<mat-card-content>
<p>{{'urlshortener.info' | i18n}}</p>
<p *ngIf="!shortenedUrlQuota">{{'urlshortener.noQuota' | i18n}}</p>
<div *ngIf="shortenedUrlQuota">
<p>{{'urlshortener.left' | i18n:shortenedUrlQuota}}</p>
<mat-form-field>
<input matInput placeholder="{{'urlshortener.url' | i18n}}" formControlName="url"
[(ngModel)]="shortenedUrl.url" type="url">
<mat-error>
{{'urlshortener.error.url' | i18n}}
</mat-error>
</mat-form-field>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{'urlshortener.advanced' | i18n}}
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
[(ngModel)]="shortenedUrl.password">
<mat-error>
<div *ngFor="let error of form.get('password').errors | keyvalue">
{{'password.error.' + error.key | i18n}}<br>
</div>
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
[(ngModel)]="shortenedUrl.password2">
<mat-error>
{{'password.not-match' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="expiresPicker" [(ngModel)]="shortenedUrl.expires"
formControlName="expires" placeholder="{{'urlshortener.expires' | i18n}}">
<mat-datepicker-toggle matSuffix [for]="expiresPicker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #expiresPicker></ngx-mat-datetime-picker>
<mat-error>
{{'urlshortener.error.expires' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{'urlshortener.code' | i18n}}" formControlName="code"
[(ngModel)]="shortenedUrl.code" pattern="[a-zA-Z0-9]+">
<mat-error>
{{'urlshortener.error.code' | i18n}}
</mat-error>
</mat-form-field>
</mat-expansion-panel>
</div>
</mat-card-content>
<mat-card-actions>
<button *ngIf="shortenedUrlQuota && !working" mat-raised-button color="primary" [disabled]="form.invalid">
{{'urlshortener.create' | i18n}}
</button>
</mat-card-actions>
</mat-card>
</form>