Skip to content
Permalink
Browse files
feat(document): make changes to text component (DEV-1147) (#791)
* feat(document): change style for text viewer

* feat(document): change style for text viewer

* chore: change typo in comment

* fest(menu): add css classes

* fest(menu): add css classes

* refactor(text icon): Change text icon to text_snippet

* refactor(tests): remove tests for button

* refactor: add needed import of MatMenu to the spec

* refactor(tests): change imports
  • Loading branch information
domsteinbach committed Aug 11, 2022
1 parent 0cabfe3 commit e8adde9e25f0e578eace12cb25115d7830b6b86b
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 28 deletions.
@@ -19,7 +19,7 @@
<div class="toolbar">
<!-- toolbar -->
<div class="action horizontal bottom">
<!-- three dot menu to downlaod and replace file -->
<!-- three dot menu to download and replace file -->
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
@@ -37,4 +37,4 @@
</div>
<div *ngIf="!src || !src.fileValue.fileUrl">
No valid file url found for this resource.
</div>
</div>
@@ -2,15 +2,37 @@
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'text'" *ngIf="failedToLoad"></app-status>

<button class="download" mat-button (click)="downloadText(src.fileValue.fileUrl)" [disabled]="failedToLoad">
<mat-icon>
file_download
</mat-icon>
Click to download
</button>
<button mat-button matTooltip="Replace text file" (click)="openReplaceFileDialog()">
<mat-icon>cloud_upload</mat-icon>
</button>
<div class="file-representation">
<div class="container">
<div class="contents">
<div class="icon">
<mat-icon>
text_snippet
</mat-icon>
</div>
<div class="file">
<p>{{originalFilename}}</p>
</div>
</div>
</div>
<div class="toolbar">
<!-- toolbar -->
<div class="action horizontal bottom">
<!-- three dot menu to download and replace file -->
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="downloadText(src.fileValue.fileUrl)" [disabled]="failedToLoad">
Download file
</button>
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
</div>
</div>
</div>
</div>
<div *ngIf="!src || !src.fileValue.fileUrl">
No valid file url found for this resource.
@@ -0,0 +1,36 @@
@import "../../../../../assets/style/responsive";
@import "../../../../../assets/style/config";

.file-representation {
width: 100%;

.container {
background: #292929;
border-radius: 8px 8px 0px 0px;
display: flex;
justify-content: center;
align-items: center;
padding: 15.5% 0%;

.contents {
color: #FFFFFF;

.icon {
mat-icon {
height: 90px;
width: 90px;
font-size: 90px;
line-height: 90px;
}
}
}
}
}


::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}
@@ -3,7 +3,6 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
@@ -13,6 +12,7 @@ import { TestConfig } from 'test.config';
import { FileRepresentation } from '../file-representation';

import { TextComponent } from './text.component';
import { MatMenuModule } from '@angular/material/menu';

const textFileValue = {
'arkUrl': 'http://0.0.0.0:3336/ark:/72163/1/9876/=wcU1HzYTEKbJCYPybyKmAs/Kp81r_BPTHKa4oSd5iIxXgd',
@@ -63,7 +63,8 @@ describe('TextComponent', () => {
imports: [
HttpClientTestingModule,
MatDialogModule,
MatSnackBarModule
MatSnackBarModule,
MatMenuModule
],
providers: [
AppInitService,
@@ -91,19 +92,4 @@ describe('TextComponent', () => {
it('should have a file url', () => {
expect(testHostComponent.textFileRepresentation.fileValue.fileUrl).toEqual('http://0.0.0.0:1024/9876/Jjic1ixccX7-BUHCAFNlEts.txt/file');
});

it('should show a download button if the file url is provided', async () => {
const downloadButtonElement = await loader.getHarness(MatButtonHarness.with({ selector: '.download' }));

expect(downloadButtonElement).toBeTruthy();
});

it('should NOT show a download button if the file url is NOT provided', async () => {
testHostComponent.textFileRepresentation = undefined;
testHostFixture.detectChanges();

const downloadButtonElement = await loader.getAllHarnesses(MatButtonHarness.with({ selector: '.download' }));

expect(downloadButtonElement.length).toEqual(0);
});
});

0 comments on commit e8adde9

Please sign in to comment.