sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement ClientRow and ItemRowData components with associated styles and stories

Browse Source
This commit is contained in:
Lorenz Hilpert
2025-03-06 17:23:51 +01:00
parent e89d1999a6
commit cebb644da9
9 changed files with 165 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/isa-app/stories/ui/input-controls/text-field.stories.ts
View File

@@ -1,4 +1,4 @@
import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { type Meta, type StoryObj } from '@storybook/angular';
import { TextFieldComponent } from '@isa/ui/input-controls';
const meta: Meta<TextFieldComponent> = {

67
apps/isa-app/stories/ui/item-rows/client-row.stories.ts Normal file
View File

@@ -0,0 +1,67 @@
import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
import { ClientRowComponent, ClientRowImports, ItemRowDataImports } from '@isa/ui/item-rows';
const meta: Meta<ClientRowComponent> = {
component: ClientRowComponent,
title: 'ui/item-rows/ClientRow',
decorators: [
moduleMetadata({
imports: [ClientRowImports, ItemRowDataImports],
}),
],
argTypes: {},
render: (args) => ({
props: args,
template: `
<ui-client-row>
<ui-client-row-content>
<h3 class="isa-text-subtitle-1-regular">Client Row</h3>
</ui-client-row-content>
<ui-item-row-data>
<ui-item-row-data-row>
<ui-item-row-data-label>Belegdatum</ui-item-row-data-label>
<ui-item-row-data-value>
<span class="isa-text-body-2-bold">
01.11.2024
</span>
</ui-item-row-data-value>
</ui-item-row-data-row>
<ui-item-row-data-row>
<ui-item-row-data-label>Rechnugsnr.</ui-item-row-data-label>
<ui-item-row-data-value>
<span class="isa-text-body-2-bold">
1234567890
</span>
</ui-item-row-data-value>
</ui-item-row-data-row>
<ui-item-row-data-row>
<ui-item-row-data-label >Vorgangs-ID</ui-item-row-data-label>
<ui-item-row-data-value >
<span class="isa-text-body-2-bold">
640175214390060/0
</span>
</ui-item-row-data-value>
</ui-item-row-data-row>
</ui-item-row-data>
<ui-item-row-data>
<ui-item-row-data-row>
<ui-item-row-data-label>Email</ui-item-row-data-label>
<ui-item-row-data-value>namenachname&#64;gmail.com</ui-item-row-data-value>
</ui-item-row-data-row>
<ui-item-row-data-row>
<ui-item-row-data-label>Anschrift</ui-item-row-data-label>
<ui-item-row-data-value>10243 Berlin</ui-item-row-data-value>
</ui-item-row-data-row>
</ui-item-row-data>
</ui-client-row>
`,
}),
};
export default meta;
type Story = StoryObj<ClientRowComponent>;
export const Default: Story = {
args: {},
};

3
libs/core/config/src/lib/config.ts
View File

@@ -12,6 +12,9 @@ export const CONFIG_DATA = new InjectionToken<JsonValue>('ConfigData');
export class Config {
#config = inject(CONFIG_DATA);
/**
* @deprecated Use `get` with a Zod schema instead
*/
get(path: string | string[]): any;
get<TOut>(path: string | string[], zSchema: z.ZodSchema<TOut>): TOut;
get<TOut>(path: string | string[], zSchema?: z.ZodSchema<TOut>): TOut | any {

3
libs/ui/item-rows/src/index.ts
View File

@@ -1 +1,2 @@
export * from './lib/ui-item-rows/ui-item-rows.component';
export * from './lib/client-row/client-row.component';
export * from './lib/item-row-data/item-row-data.component';

1
libs/ui/item-rows/src/lib/client-row/client-row.component.html Normal file
View File

@@ -0,0 +1 @@
<ng-content></ng-content>

15
libs/ui/item-rows/src/lib/client-row/client-row.component.scss Normal file
View File

@@ -0,0 +1,15 @@
.ui-client-row {
@apply grid grid-cols-2 isa-desktop:grid-cols-3 gap-4;
padding: 1rem 1.5rem;
border-radius: 1rem;
@apply bg-isa-white;
}
.ui-client-row-content {
@apply col-span-2 isa-desktop:col-span-1;
}
.ui-item-row-data-label {
width: 6.5rem;
}

23
libs/ui/item-rows/src/lib/client-row/client-row.component.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ui-client-row',
templateUrl: './client-row.component.html',
styleUrls: ['./client-row.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [],
host: {
'[class]': '["ui-client-row"]',
},
})
export class ClientRowComponent {}
@Directive({
selector: '[uiClientRowContent], ui-client-row-content',
host: { '[class]': '["ui-client-row-content"]' },
})
export class ClientRowContentDirective {}
export const ClientRowImports = [ClientRowComponent, ClientRowContentDirective];

17
libs/ui/item-rows/src/lib/item-row-data/item-row-data.component.scss Normal file
View File

@@ -0,0 +1,17 @@
.ui-item-row-data {
@apply flex flex-col gap-3;
}
.ui-item-row-data-row {
@apply flex flex-row gap-6;
}
.ui-item-row-data-label {
@apply text-isa-neutral-600 isa-text-body-2-regular;
font-size: 0.875rem;
}
.ui-item-row-data-value {
@apply text-isa-secondary-900 isa-text-body-2-regular;
font-size: 0.875rem;
}

36
libs/ui/item-rows/src/lib/item-row-data/item-row-data.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ui-item-row-data',
template: '<ng-content></ng-content>',
styleUrls: ['./item-row-data.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: { '[class]': '["ui-item-row-data"]' },
})
export class ItemRowDataComponent {}
@Directive({
selector: '[uiItemRowDataLabel], ui-item-row-data-label',
host: { '[class]': '["ui-item-row-data-label"]' },
})
export class ItemRowDataLabelDirective {}
@Directive({
selector: '[uiItemRowDataValue], ui-item-row-data-value',
host: { '[class]': '["ui-item-row-data-value"]' },
})
export class ItemRowDataValueDirective {}
@Directive({
selector: '[uiItemRowDataRow], ui-item-row-data-row',
host: { '[class]': '["ui-item-row-data-row"]' },
})
export class ItemRowDataRowDirective {}
export const ItemRowDataImports = [
ItemRowDataComponent,
ItemRowDataLabelDirective,
ItemRowDataValueDirective,
ItemRowDataRowDirective,
];