Skip to content

Commit ff78129

Browse files
eksrhaeksrha
committed
add syncing modules
1 parent 38caca0 commit ff78129

34 files changed

Lines changed: 1390 additions & 6 deletions

‎docs/02-ng-mat-components‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/02-ng-mat-components/01-overview.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Overview
3+
---
4+
5+
import ReadmePartial from '../../README.md';
6+
7+
Angular Material Components from FS DevOps
8+
9+
- **lib type**: Angular
10+
- **docs**: ./ng-mat-components
11+
- **repo**: https://github.com/fullstack-devops/ng-mat-components
12+
- **demo**: https://fullstack-devops.github.io/ng-mat-components
13+
14+
---
15+
16+
<ReadmePartial name="Readme" />

‎docs/02-ng-mat-components/02-fs-nav-frame-module/API.mdx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
4+
```typescript
5+
import { FsUiFrameModule } from "@fullstack-devops/ng-mat-components";
6+
```
7+
8+
## References
9+
10+
- demo: https://fullstack-devops.github.io/ng-mat-components/ui-frame
11+
- code example:
12+
[app.component.html](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.html)
13+
[app.component.ts](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.ts)
14+
15+
---
16+
17+
## Directives
18+
19+
```bash
20+
.
21+
├── fs-ui-frame
22+
│ └── settings.json
23+
└── fs-calendar-table
24+
└── Dockerfile
25+
```
26+
27+
## Directives
28+
29+
### fs-ui-frame
30+
31+
Selector: `fs-ui-frame`
32+
33+
#### fs-ui-frame-toolbar
34+
35+
Parent Selector: `fs-ui-frame`
36+
37+
Selector: `fs-ui-frame-toolbar`
38+
39+
##### fs-ui-frame-toolbar-title
40+
41+
Parent Selector: `fs-ui-frame-toolbar`
42+
43+
Selector: `fs-ui-frame-toolbar-title`
44+
45+
##### fs-ui-frame-toolbar-center
46+
47+
Parent Selector: `fs-ui-frame-toolbar`
48+
49+
Selector: `fs-ui-frame-toolbar-center`
50+
51+
##### fs-ui-frame-toolbar-side
52+
53+
Parent Selector: `fs-ui-frame-toolbar`
54+
55+
Selector: `fs-ui-frame-toolbar-side`
56+
57+
#### fs-ui-frame-content
58+
59+
Parent Selector: `fs-ui-frame`
60+
61+
Selector: `fs-ui-frame-content`
62+
63+
---
64+
65+
## Examples
66+
67+
### ui-frame in form
68+
69+
<Tabs groupId="ui-frame-01">
70+
<TabItem value="html" label="HTML">
71+
72+
```html
73+
<fs-ui-frame
74+
[frameConfig]="frameConfig"
75+
[navUser]="navUser"
76+
[appRoutes]="appRoutes"
77+
(event)="onEvent($event)">
78+
<fs-ui-frame-toolbar>
79+
<fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
80+
81+
<fs-ui-frame-toolbar-center>
82+
<button mat-icon-button>
83+
<mat-icon>help</mat-icon>
84+
</button>
85+
<button mat-icon-button matBadge="3">
86+
<mat-icon>article</mat-icon>
87+
</button>
88+
<button mat-icon-button>
89+
<mat-icon>call</mat-icon>
90+
</button>
91+
</fs-ui-frame-toolbar-center>
92+
93+
<fs-ui-frame-toolbar-side>
94+
<mat-form-field appearance="outline">
95+
<input matInput placeholder="Search" type="search" />
96+
</mat-form-field>
97+
</fs-ui-frame-toolbar-side>
98+
</fs-ui-frame-toolbar>
99+
100+
<fs-ui-frame-content>
101+
<router-outlet></router-outlet>
102+
</fs-ui-frame-content>
103+
</fs-ui-frame>
104+
```
105+
106+
</TabItem>
107+
108+
<TabItem value="ts" label="TS">
109+
110+
```typescript
111+
import { Component, OnInit } from "@angular/core";
112+
import { FormBuilder, FormControl, Validators } from "@angular/forms";
113+
import {
114+
FrameConfig,
115+
FrameEvent,
116+
FrameEvents,
117+
NavUser,
118+
} from "@ite/ng-daimlertruck";
119+
import { routes } from "./app-routing.module";
120+
121+
@Component({
122+
selector: "example",
123+
templateUrl: "example.html",
124+
styleUrls: ["example.css"],
125+
})
126+
export class ExampleComponent implements OnInit {
127+
title = "FS DevOps`s ng mat components";
128+
appRoutes = routes;
129+
130+
frameConfig: FrameConfig = {
131+
appName: "Dummy App",
132+
// appNameShort: stringOfLength('DUMMY', 0, 6),
133+
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png",
134+
};
135+
navUser: NavUser = {
136+
profilePicture:
137+
"https://material.angular.io/assets/img/examples/shiba1.jpg",
138+
name: "Some User",
139+
role: "Engineer",
140+
};
141+
142+
ngOnInit() {}
143+
144+
onEvent(frameEvent: FrameEvent) {
145+
switch (frameEvent.type) {
146+
case FrameEvents.MANAGE_ACCOUNT:
147+
console.log("Manage Account called, do something...");
148+
break;
149+
case FrameEvents.LOGOUT:
150+
console.log("Logout called, do something...");
151+
break;
152+
default:
153+
console.error(`unknown event fetched: ${JSON.stringify(event)}`);
154+
break;
155+
}
156+
}
157+
}
158+
```
159+
160+
</TabItem>
161+
<TabItem value="scss" label="SCSS">
162+
163+
```css
164+
165+
```
166+
167+
</TabItem>
168+
</Tabs>

‎docs/02-ng-mat-components/02-fs-nav-frame-module/_category_.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
label: 'fs nav frame Module'
2+
collapsible: true
3+
collapsed: true
4+
link:
5+
type: generated-index

‎docs/02-ng-mat-components/03-fs-calendar-module/API-panels.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
```typescript
2+
import { FsCalendarModule } from "@fullstack-devops/ng-mat-components";
3+
```
4+
5+
## References
6+
7+
- demo: https://fullstack-devops.github.io/ng-mat-components/calendar-panels
8+
- code example:
9+
[app.component.html](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.html)
10+
[app.component.ts](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.ts)
11+
12+
---
13+
14+
## Directives
15+
16+
```bash
17+
.
18+
└── fs-calendar-panels
19+
```
20+
21+
---
22+
23+
## Examples
24+
25+
### minimal
26+
27+
=== "HTML"
28+
29+
```html
30+
<div style="height: 80%">
31+
<fs-calendar-panels
32+
[placeholderDay]="placeholder"
33+
[dataSource]="dataSource"
34+
[year]="todayYear"
35+
[month]="todayMonth"
36+
[monthsBefore]="monthsBefore"
37+
[monthsAfter]="monthsAfter"
38+
(selection)="testMethod($event)"
39+
>
40+
</fs-calendar-panels>
41+
</div>
42+
```
43+
44+
=== "TS"
45+
46+
``` typescript
47+
// ...
48+
import {
49+
CalendarEvent,
50+
CalendarPanels,
51+
} from "@fullstack-devops/ng-mat-components";
52+
53+
@Component({
54+
selector: "example",
55+
templateUrl: "example.html",
56+
styleUrls: ["example.css"],
57+
})
58+
export class ExampleComponent implements OnInit {
59+
// this cannot be empty
60+
dataSource: CalendarPanels = {
61+
config: {
62+
renderMode: "monthly", // 'annual' | 'monthly'
63+
selectMode: "range", // 'click' | 'range'
64+
displayYear: true,
65+
firstDayOfWeekMonday: true,
66+
calendarWeek: true,
67+
switches: true,
68+
panelWidth: "300px",
69+
bluredDays: false, // default: false
70+
markWeekend: true, // default: true
71+
},
72+
data: [],
73+
};
74+
75+
constructor() {}
76+
77+
ngOnInit() {}
78+
79+
testMethod(event: CalendarEvent) {
80+
switch (event.type) {
81+
case "range":
82+
this.range = event;
83+
break;
84+
case "click":
85+
this.range = event;
86+
break;
87+
}
88+
console.log(event);
89+
}
90+
}
91+
```
92+
93+
=== "CSS"
94+
95+
``` css
96+
97+
```

‎docs/02-ng-mat-components/03-fs-calendar-module/API-table.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
```typescript
2+
import { FsCalendarModule } from "@fullstack-devops/ng-mat-components";
3+
```
4+
5+
## References
6+
7+
- demo: https://fullstack-devops.github.io/ng-mat-components/calendar-table
8+
- code example: https://github.com/fullstack-devops/ng-mat-components/tree/main/projects/lib-workspace/src/app/content/calendar-table
9+
10+
---
11+
12+
## Directives
13+
14+
```bash
15+
.
16+
└── fs-calendar-table
17+
└── fs-calendar-table-name
18+
```
19+
20+
---
21+
22+
## Examples
23+
24+
### ui-frame in form
25+
26+
=== "HTML"
27+
28+
```html
29+
<section class="mat-elevation-z4">
30+
<fs-calendar-table [dataSource]="calTableData">
31+
<fs-calendar-table-name> Persons </fs-calendar-table-name>
32+
</fs-calendar-table>
33+
</section>
34+
```
35+
36+
=== "TS"
37+
38+
``` typescript
39+
// ...
40+
import { CalendarTableEntry } from "@fullstack-devops/ng-mat-components";
41+
42+
@Component({
43+
selector: "example",
44+
templateUrl: "example.html",
45+
styleUrls: ["example.css"],
46+
})
47+
export class ExampleComponent implements OnInit {
48+
// this can also be empty
49+
calTableData: CalendarTableEntry[] = [
50+
{
51+
name: "Test User",
52+
data: [
53+
{
54+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 20),
55+
toolTip: "Some longer text",
56+
char: "",
57+
colors: {
58+
backgroundColor: "#FFFFFF",
59+
color: "#000",
60+
},
61+
},
62+
],
63+
},
64+
];
65+
66+
constructor() {}
67+
68+
ngOnInit() {}
69+
}
70+
```
71+
72+
=== "CSS"
73+
74+
``` css
75+
76+
```

‎docs/02-ng-mat-components/03-fs-calendar-module/_category_.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
label: 'fs calendar Module'
2+
collapsible: true
3+
collapsed: true
4+
link:
5+
type: generated-index

‎docs/02-ng-mat-components/_category_.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
label: "Library NG Mat Components"
2+
collapsible: true
3+
collapsed: true
4+
# className: red
5+
link:
6+
type: generated-index
7+
title: Library NG Mat Components

‎docs/03-awesome-ci‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)