refactor: move form to seperate component as it will be used 2 times
This commit is contained in:
parent
5ff00d7510
commit
0bcc7d4684
GPG key ID:
50620ADD22CD330B
7 changed files with 207 additions and 170 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -1,49 +1 @@
|
|||
<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>
|
||||
<app-mitarbeiter-form></app-mitarbeiter-form>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mitarbeiter-bearbeiten-view',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [MitarbeiterFormComponent],
|
||||
templateUrl: './mitarbeiter-bearbeiten-view.component.html',
|
||||
styleUrl: './mitarbeiter-bearbeiten-view.component.css'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue