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

OZG-5981 OZG-6008 Add header component

parent 4f644d78
Branches
Tags
No related merge requests found
...@@ -28,6 +28,7 @@ import { NgModule } from '@angular/core'; ...@@ -28,6 +28,7 @@ import { NgModule } from '@angular/core';
import { DownloadButtonComponent } from '@ods/component'; import { DownloadButtonComponent } from '@ods/component';
import { import {
AttachmentComponent, AttachmentComponent,
AttachmentHeaderComponent,
AttachmentWrapperComponent, AttachmentWrapperComponent,
CloseIconComponent, CloseIconComponent,
SpinnerIconComponent, SpinnerIconComponent,
...@@ -50,6 +51,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver ...@@ -50,6 +51,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver
UiModule, UiModule,
TechSharedModule, TechSharedModule,
AttachmentComponent, AttachmentComponent,
AttachmentHeaderComponent,
AttachmentWrapperComponent, AttachmentWrapperComponent,
SpinnerIconComponent, SpinnerIconComponent,
CloseIconComponent, CloseIconComponent,
......
...@@ -23,14 +23,19 @@ ...@@ -23,14 +23,19 @@
unter der Lizenz sind dem Lizenztext zu entnehmen. unter der Lizenz sind dem Lizenztext zu entnehmen.
--> -->
<ozgcloud-spinner [stateResource]="binaryFileListStateResource"> <ozgcloud-spinner
*ngIf="binaryFileListStateResource.resource"
[stateResource]="binaryFileListStateResource"
>
<ods-attachment-wrapper [title]="title" data-test-id="file-list"> <ods-attachment-wrapper [title]="title" data-test-id="file-list">
<ods-attachment-header [title]="title">
<alfa-download-archive-file-button-container <alfa-download-archive-file-button-container
*ngIf="archiveDownloadUri" *ngIf="archiveDownloadUri"
data-test-class="download-archive-file-button" data-test-class="download-archive-file-button"
[downloadUri]="archiveDownloadUri" [downloadUri]="archiveDownloadUri"
action-buttons action-buttons
></alfa-download-archive-file-button-container> ></alfa-download-archive-file-button-container
></ods-attachment-header>
<ng-container <ng-container
*ngFor=" *ngFor="
let binaryFileResource of binaryFileListStateResource.resource let binaryFileResource of binaryFileListStateResource.resource
......
export * from './lib/attachment-header/attachment-header.component';
export * from './lib/attachment-wrapper/attachment-wrapper.component'; export * from './lib/attachment-wrapper/attachment-wrapper.component';
export * from './lib/attachment/attachment.component'; export * from './lib/attachment/attachment.component';
export * from './lib/bescheid-status-text/bescheid-status-text.component'; export * from './lib/bescheid-status-text/bescheid-status-text.component';
......
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AttachmentHeaderComponent } from './attachment-header.component';
describe('AttachmentHeaderComponent', () => {
let component: AttachmentHeaderComponent;
let fixture: ComponentFixture<AttachmentHeaderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AttachmentHeaderComponent],
}).compileComponents();
fixture = TestBed.createComponent(AttachmentHeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
@Component({
selector: 'ods-attachment-header',
standalone: true,
imports: [CommonModule],
template: `<div class="flex items-center justify-between px-3 py-2">
<h4 class="text-sm font-medium text-text">{{ title }}</h4>
<ng-content select="[action-buttons]"></ng-content>
</div>`,
})
export class AttachmentHeaderComponent {
@Input() title: string = '';
}
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { DownloadButtonComponent } from '../../../../design-component/src/lib/download-button/download-button.component';
import { AttachmentComponent } from '../attachment/attachment.component';
import { AttachmentHeaderComponent } from './attachment-header.component';
const meta: Meta<AttachmentHeaderComponent> = {
title: 'Attachment header',
component: AttachmentHeaderComponent,
parameters: {
docs: {
description: {
component: 'Header may contain title and/or buttons',
},
},
},
decorators: [
moduleMetadata({
imports: [AttachmentHeaderComponent, AttachmentComponent, DownloadButtonComponent],
}),
],
excludeStories: /.*Data$/,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<AttachmentHeaderComponent>;
export const Default: Story = {
args: {
title: 'Anhänge',
},
argTypes: {
title: {
description: 'Title for group of files',
},
},
render: (args) => ({
props: args,
template: `<ods-attachment-header ${argsToTemplate(args)}>
<ods-download-button action-buttons />
</ods-attachment-header>`,
}),
};
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ods-attachment-wrapper', selector: 'ods-attachment-wrapper',
...@@ -8,12 +8,6 @@ import { Component, Input } from '@angular/core'; ...@@ -8,12 +8,6 @@ import { Component, Input } from '@angular/core';
styles: [ styles: [
':host {@apply flex flex-col overflow-hidden rounded-md shadow shadow-grayborder border border-grayborder empty:hidden}', ':host {@apply flex flex-col overflow-hidden rounded-md shadow shadow-grayborder border border-grayborder empty:hidden}',
], ],
template: `<div class="flex items-center justify-between px-3 py-2"> template: `<ng-content></ng-content>`,
<h4 *ngIf="title" class="text-sm font-medium text-text">{{ title }}</h4>
<ng-content select="[action-buttons]"></ng-content>
</div>
<ng-content></ng-content>`,
}) })
export class AttachmentWrapperComponent { export class AttachmentWrapperComponent {}
@Input() title: string = '';
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment