Skip to content
Snippets Groups Projects
Commit 1b78cb42 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-1274 OZG-1343 Briefumschlag anzeigen

parent 20b1b05c
Branches
Tags
No related merge requests found
Showing
with 112 additions and 19 deletions
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
\ No newline at end of file
......@@ -6,5 +6,6 @@ export enum Icons {
no_reply = 'no_reply',
assignment_ind = 'assignment_ind',
az = 'az',
nr = 'nr'
nr = 'nr',
mail = 'mail'
}
export * from './lib/aktenzeichen/aktenzeichen.component';
export * from './lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component';
export * from './lib/vorgang-nummer/vorgang-nummer.component';
export * from './lib/vorgang-postfach-status/vorgang-postfach-status.component';
export * from './lib/vorgang-search-container/vorgang-search-container.component';
export * from './lib/vorgang-shared-ui.module';
export * from './lib/vorgang-status-dot/vorgang-status-dot.component';
......
<mat-icon *ngIf="vorgang.hasPostfachNachricht === true" data-test-class="postfach-status"
svgIcon="mail">
</mat-icon>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIcon } from '@angular/material/icon';
import { MatIconTestingModule } from '@angular/material/icon/testing';
import { getElementFromFixture } from '@goofy-client/test-utils';
import { VorgangResource } from '@goofy-client/vorgang-shared';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createVorgangResource } from 'libs/vorgang-shared/test/vorgang';
import { VorgangPostfachStatusComponent } from './vorgang-postfach-status.component';
describe('VorgangPostfachStatusComponent', () => {
let component: VorgangPostfachStatusComponent;
let fixture: ComponentFixture<VorgangPostfachStatusComponent>;
const vorgang: VorgangResource = createVorgangResource();
const postfachStatus: string = getDataTestIdOf('postfach-status');
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
MatIcon,
VorgangPostfachStatusComponent
],
imports: [
MatIconTestingModule,
],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(VorgangPostfachStatusComponent);
component = fixture.componentInstance;
component.vorgang = vorgang;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('mail icon', () => {
it('should show mail icon', () => {
component.vorgang.hasPostfachNachricht = true;
fixture.detectChanges();
const icon: HTMLElement = getElementFromFixture(fixture, postfachStatus);
expect(icon).toHaveClass('mat-icon');
});
it('should not show mail icon', () => {
component.vorgang.hasPostfachNachricht = false;
fixture.detectChanges();
const icon: HTMLElement = getElementFromFixture(fixture, postfachStatus);
expect(icon).toBeNull();
});
});
});
import { Component, Input } from '@angular/core';
import { Vorgang } from '@goofy-client/vorgang-shared';
@Component({
selector: 'goofy-client-vorgang-postfach-status',
templateUrl: './vorgang-postfach-status.component.html',
styleUrls: ['./vorgang-postfach-status.component.scss'],
})
export class VorgangPostfachStatusComponent {
@Input() vorgang: Vorgang;
}
......@@ -14,6 +14,7 @@ import { VorgangSearchClearButtonComponent } from './vorgang-search-container/vo
import { VorgangSearchComponent } from './vorgang-search-container/vorgang-search/vorgang-search.component';
import { VorgangStatusDotComponent } from './vorgang-status-dot/vorgang-status-dot.component';
import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status-text.component';
import { VorgangPostfachStatusComponent } from './vorgang-postfach-status/vorgang-postfach-status.component';
@NgModule({
imports: [
......@@ -34,6 +35,7 @@ import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status
VorgangSearchClearButtonComponent,
VorgangNummerComponent,
VorgangStatusTextComponent,
VorgangPostfachStatusComponent,
],
exports: [
VorgangSearchContainerComponent,
......@@ -43,6 +45,7 @@ import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status
VorgangSearchAutocompleteOptionsContentComponent,
VorgangNummerComponent,
VorgangStatusTextComponent,
]
VorgangPostfachStatusComponent,
],
})
export class VorgangSharedUiModule {}
......@@ -5,7 +5,7 @@
.dot {
border-radius: 50%;
background-color: mat.get-color-from-palette($primaryPalette);
margin: 0 29px 0 0;
margin: 0 1.75rem 0 0;
flex-shrink: 0;
&.angenommen,
......
import 'jest-preset-angular/setup-jest';
import '@testing-library/jest-dom';
import { getTestBed } from '@angular/core/testing';
import {
......
......@@ -8,7 +8,8 @@ export interface Vorgang {
nummer: string,
createdAt: Date,
name: string,
nextFrist: Date
nextFrist: Date,
hasPostfachNachricht: boolean
}
export interface VorgangWithEingang extends Vorgang {
......
......@@ -10,7 +10,8 @@ export function createVorgang(): Vorgang {
status: faker.helpers.arrayElement([VorgangStatus.NEU, VorgangStatus.ABGESCHLOSSEN, VorgangStatus.BESCHIEDEN, VorgangStatus.VERWORFEN]),
aktenzeichen: faker.lorem.word(),
nummer: faker.lorem.word(),
nextFrist: faker.date.future()
nextFrist: faker.date.future(),
hasPostfachNachricht: faker.datatype.boolean()
}
}
......
......@@ -10,6 +10,8 @@
class="status-text"></goofy-client-vorgang-status-text>
</div>
<goofy-client-vorgang-postfach-status class="postfach-status" [vorgang]="vorgang"></goofy-client-vorgang-postfach-status>
<div class="aktenzeichen">
<mat-icon svgIcon="az"></mat-icon>
<span class="ellipsis" goofy-client-aktenzeichen [vorgang]="vorgang"></span>
......
......@@ -4,11 +4,11 @@
.list-item {
display: grid;
grid-template-columns: 50% 40% 10%;
grid-template-columns: 35% 15% 40% 10%;
grid-template-areas:
"status wiedervorlagen eingang"
"name name name"
"aktenzeichen vorgang-nummer user-icon";
"status postfach-status wiedervorlagen eingang"
"name name name name"
"aktenzeichen aktenzeichen vorgang-nummer user-icon";
row-gap: 8px;
align-items: center;
padding: 16px 24px;
......@@ -18,6 +18,11 @@
display: flex;
align-items: center;
}
.postfach-status {
grid-area: postfach-status;
display: flex;
align-items: center;
}
.wiedervorlagen {
grid-area: wiedervorlagen;
white-space: nowrap;
......@@ -27,6 +32,7 @@
justify-self: end;
display: flex;
align-items: center;
white-space: nowrap;
}
.name {
grid-area: name;
......@@ -48,10 +54,10 @@
}
@include media('>desktop') {
grid-template-columns: 48% 30% 12% 10%;
grid-template-columns: 23% 25% 30% 12% 10%;
grid-template-areas:
"status aktenzeichen eingang user-icon"
"name vorgang-nummer wiedervorlagen user-icon";
"status postfach-status aktenzeichen eingang user-icon"
"name name vorgang-nummer wiedervorlagen user-icon";
padding: 16px 24px;
.eingang {
......@@ -60,9 +66,9 @@
}
@include media('>xxlDesktop') {
grid-template-columns: 25% 16% 16% 20% 10% 10% 3%;
grid-template-columns: 15% 10% 16% 16% 20% 10% 10% 3%;
grid-template-areas:
"status aktenzeichen vorgang-nummer name wiedervorlagen eingang user-icon";
"status postfach-status aktenzeichen vorgang-nummer name wiedervorlagen eingang user-icon";
.name {
margin-right: 24px;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment