jank/employeeService
1
1
Fork 0
Code Issues 2 Pull requests 4 Projects 1 Releases Packages Wiki Activity Actions

Add edit employee form #63

Merged
jank merged 7 commits from forms-pages into main 2025-01-15 11:29:57 +00:00
Conversation 0 Commits 7 Files changed 13 +207 -170
7 changed files with 207 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 0bcc7d4684 - Show all commits

120
src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.css
View file

@ -1,120 +0,0 @@
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1, h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.back-button {
background-color: #ccc;
color: #333;
border: none;
padding: 8px 12px;
border-radius: 3px;
margin-bottom: 15px;
}
.user-info {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="text"]::placeholder {
color: #999;
}
.save-button {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
width: 100%;
}
.skills-container {
border: 1px solid #ccc;
padding: 20px;
border-radius: 3px;
}
.skill-controls select {
padding: 10px 10px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.skill-list {
list-style: none;
padding: 0;
}
.skill-list li {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.skill-icon {
margin-right: 5px;
}
.delete-skill-button {
color: #fff;
padding: 5px 8px;
border: none;
cursor: pointer;
margin-left: 10px;
border-radius: 3px;
}
.delete-skill-button img {
width: 15px;
height: 15px;
}
.add-skill-button{
background-color: #06a63b;
color: #fff;
padding: 8px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-left: 10px;
}

50
src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
View file

@ -1,49 +1 @@
<div class="container"> <app-mitarbeiter-form></app-mitarbeiter-form>
<button class="back-button">Back</button>
<div class="user-info">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" id="street" placeholder="Street">
</div>
<div class="form-group">
<label for="postcode">Postcode</label>
<input type="text" id="postcode" placeholder="Postcode">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" placeholder="City">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" placeholder="Phone Number">
</div>
</div>
<div class="skills-container">
<h2>Skills</h2>
<ul class="skill-list">
<li>
<span class="skill-name">Skill 1</span>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
</li>
</ul>
<div class="skill-controls">
<select>
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
<button class="add-skill-button">Add qualification</button>
</div>
</div>
<button class="save-button">Save</button>
</div>

3
src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts
View file

@ -1,9 +1,10 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component';
@Component({ @Component({
selector: 'app-mitarbeiter-bearbeiten-view', selector: 'app-mitarbeiter-bearbeiten-view',
standalone: true, standalone: true,
imports: [], imports: [MitarbeiterFormComponent],
templateUrl: './mitarbeiter-bearbeiten-view.component.html', templateUrl: './mitarbeiter-bearbeiten-view.component.html',
styleUrl: './mitarbeiter-bearbeiten-view.component.css' styleUrl: './mitarbeiter-bearbeiten-view.component.css'
}) })

120
src/app/components/mitarbeiter-form/mitarbeiter-form.component.css Normal file
View file

@ -0,0 +1,120 @@
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1, h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.back-button {
background-color: #ccc;
color: #333;
border: none;
padding: 8px 12px;
border-radius: 3px;
margin-bottom: 15px;
}
.user-info {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="text"]::placeholder {
color: #999;
}
.save-button {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
width: 100%;
}
.skills-container {
border: 1px solid #ccc;
padding: 20px;
border-radius: 3px;
}
.skill-controls select {
padding: 10px 10px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.skill-list {
list-style: none;
padding: 0;
}
.skill-list li {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.skill-icon {
margin-right: 5px;
}
.delete-skill-button {
color: #fff;
padding: 5px 8px;
border: none;
cursor: pointer;
margin-left: 10px;
border-radius: 3px;
}
.delete-skill-button img {
width: 15px;
height: 15px;
}
.add-skill-button{
background-color: #06a63b;
color: #fff;
padding: 8px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-left: 10px;
}

49
src/app/components/mitarbeiter-form/mitarbeiter-form.component.html Normal file
View file

@ -0,0 +1,49 @@
<div class="container">
<button class="back-button">Back</button>
<div class="user-info">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="street">Street</label>
<input type="text" id="street" placeholder="Street">
</div>
<div class="form-group">
<label for="postcode">Postcode</label>
<input type="text" id="postcode" placeholder="Postcode">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" placeholder="City">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" placeholder="Phone Number">
</div>
</div>
<div class="skills-container">
<h2>Skills</h2>
<ul class="skill-list">
<li>
<span class="skill-name">Skill 1</span>
<button class="delete-skill-button">
<img src="Delete-button.svg" alt="Delete">
</button>
</li>
</ul>
<div class="skill-controls">
<select>
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
<button class="add-skill-button">Add qualification</button>
</div>
</div>
<button class="save-button">Save</button>
</div>

23
src/app/components/mitarbeiter-form/mitarbeiter-form.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MitarbeiterFormComponent } from './mitarbeiter-form.component';
describe('MitarbeiterFormComponent', () => {
let component: MitarbeiterFormComponent;
let fixture: ComponentFixture<MitarbeiterFormComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MitarbeiterFormComponent]
})
.compileComponents();
fixture = TestBed.createComponent(MitarbeiterFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts Normal file
View file

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-mitarbeiter-form',
standalone: true,
imports: [MitarbeiterFormComponent],
templateUrl: './mitarbeiter-form.component.html',
styleUrl: './mitarbeiter-form.component.css'
})
export class MitarbeiterFormComponent {
}