Commit 038f62e5 authored by Siedschlag, Lennart's avatar Siedschlag, Lennart
Browse files

Contact List View überarbeitung

parent 98b638b1
Pipeline #6325 passed with stage
in 5 minutes and 6 seconds
......@@ -59,7 +59,7 @@
<div class="form-group">
<label for="location">Ort</label>
<input type="text" class="form-control" id="location" required placeholder="Ort"
<input type="text" class="form-control" id="location" placeholder="Ort"
[(ngModel)]="appointment.location" ngControl="location">
</div>
......
<div id="search-component">
<input #searchBox id="search-box"
placeholder="Search"
(change)="search(searchBox.value)"
(keyup)="search(searchBox.value)" />
<div>
......
......@@ -54,6 +54,10 @@ th{
text-align: center;
}
div .appointmentNotifier{
color: red;
}
/*
colors to use if possible (descending) :
#FF7B89
......
......@@ -32,18 +32,16 @@ class ContactComponent implements OnActivate {
/// Folgender Code wird immer bei der Aktivierung der Klasse aufgerufen
@override
void onActivate(_, RouterState current) async {
/*if (!LoginComponent.loggedIn) {
if (!LoginComponent.loggedIn) {
await _router.navigate('/login');
} else {
*/
final con = getNumber(current.parameters);
if (getNumber != null) {
// ignore: unnecessary_parenthesis
contact = await (_contactService.get(con));
note = contact.note;
}
//}
}
}
/// Methode zum speichern, der änderungen die man im Kontakt vorgenommen hat
......
......@@ -21,7 +21,7 @@
[(ngModel)]="contact.note" name="note" rows="4"></textarea>
</div>
<button (click)="save()" class="btn back" type="submit">Save</button>
<button (click)="save()" class=" btn-success" type="submit">Save</button>
<button type="button" class="btn back" (click)="goBack()">GoBack</button>
......
.selected {
background-color: #CFD8DC !important;
color:#00302f;
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
button {
background-color: #eee;
......@@ -21,18 +17,43 @@ h3{
text-align: center;
}
li{
border-bottom: solid;
cursor: pointer;
margin-top: 2%;
margin-left: 2%;
}
ol{
ul{
list-style-type: none;
overflow-y:scroll;
height: 70%;
border: 1px #484848 solid;
background: #758EB7;
margin-left: 2%;
margin-right: 2%;
}
div>button{
float: left;
}
ol{
margin-left: 2%;
margin-right: 2%;
}
\ No newline at end of file
.form-control {
margin:5px;
width: 97%;
float: left;
}
table{
overflow-y:scroll;
}
table tr{
cursor: pointer;
}
#header{
cursor: default;
}
#con {
color: red;
}
......@@ -9,11 +9,14 @@ import 'package:demo/src/view/components/login_component.dart';
import 'package:demo/src/view/routes/route_paths.dart';
import 'package:demo/src/view/services/contact_service.dart';
import 'contact_component.dart';
import 'contact_search_component.dart';
@Component(
selector: 'contacts',
templateUrl: 'contact_list_component.html',
styleUrls: ['contact_list_component.css'],
directives: [coreDirectives, routerDirectives, formDirectives],
directives: [coreDirectives, routerDirectives, formDirectives, ContactComponent, ContactSearchComponent],
)
///Klasse zum anzeigen aller contacte
......@@ -23,11 +26,10 @@ class ContactListComponent implements OnInit, OnActivate {
final ContactService _contactService;
final Router _router;
List<Contact> contacts;
Contact selected;
String contactCode ="";
///Methode zum auswählen eines contacts
void onSelect(Contact contact) => selected = contact;
bool valid = true;
bool exists = false;
bool deleteControl = false;
///Methode die eine Liste aller appointments zurückgibt
Future<void> _getContacts() async {
......@@ -53,11 +55,25 @@ class ContactListComponent implements OnInit, OnActivate {
///Methode die den ausgewählten contact aufruft
Future<NavigationResult> gotoDetail() =>_router.navigate(_contactUrl(selected.contactCode));
Future<NavigationResult> gotoDetail(Contact contact) =>_router.navigate(_contactUrl(contact.contactCode));
Future<void> addContact() async {
await _contactService.create(await _contactService.find(contactCode));
await _router.navigate(_contactUrl(contactCode));
if (contacts.any((h) => h.contactCode == contactCode)) {
exists = true;
valid = true;
} else {
final Contact contact = await _contactService.find(contactCode);
if (contact == null) {
valid = false;
exists = false;
} else {
print(contacts);
await _contactService.create(contact);
await _getContacts();
valid = true;
exists = false;
}
}
}
@override
......@@ -67,4 +83,14 @@ class ContactListComponent implements OnInit, OnActivate {
}
}
Future<void> delete(Contact contact) async {
if (deleteControl==true) {
await _contactService.delete(contact.contactCode);
await _getContacts();
deleteControl = false;
} else {
deleteControl = true;
}
}
}
<h3>Contacts</h3>
<ol class="contacts">
<li *ngFor="let contact of contacts"
[class.selected]="contact === selected"
(click)="onSelect(contact)">
<span>{{contact.name}} </span>
<span>{{contact.email}} </span>
</li>
</ol>
<div *ngIf="selected != null">
<button (click)="gotoDetail()">View Details</button>
<contact-search id="search"></contact-search>
<table class="table">
<tr id="header">
<td><b>Nickname: </b></td>
<td><b>Surname: </b></td>
<td><b>Name: </b></td>
<td><b>E-Mail: </b></td>
<td><b>Delete</b></td>
</tr>
<tr *ngFor="let contact of contacts" id="contact">
<tr (click)="gotoDetail(contact)">{{contact.nickname}}</tr>
<td (click)="gotoDetail(contact)">{{contact.surname}}</td>
<td (click)="gotoDetail(contact)">{{contact.name}}</td>
<td (click)="gotoDetail(contact)">{{contact.email}}</td>
<td (click)="delete(contact)">X</td>
</tr>
<tr></tr>
</table>
<div [hidden]="!deleteControl" id="delete">
If you really want to delete this Contact click "Delete" again.
</div>
<form action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" id="contactCode" placeholder="ContactCode"
[(ngModel)]="contactCode" name="contactCode">
<button (click)="addContact()" type="submit">Add Contact</button>
<div id="con">
<div [hidden]="valid">
The given ContactCode does not exist
</div>
<div [hidden]="!exists">
The Contact with this ContactCode does already exists
</div>
</div>
</div>
</form>
.search-result {
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
width:195px;
height: 20px;
padding: 5px;
background-color: white;
cursor: pointer;
}
#search-box {
width: 200px;
height: 20px;
}
\ No newline at end of file
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';
import 'package:stream_transform/stream_transform.dart';
import 'package:demo/src/model/person.dart';
import 'package:demo/src/view/routes/route_paths.dart';
import 'package:demo/src/view/services/contact_service.dart';
@Component(
selector: 'contact-search',
templateUrl: 'contact_search_component.html',
styleUrls: ['contact_search_component.css'],
directives: [coreDirectives],
providers: [ClassProvider(ContactService)],
pipes: [commonPipes],
)
class ContactSearchComponent implements OnInit {
ContactSearchComponent(this._contactService, this._router);
ContactService _contactService;
Router _router;
Stream<List<Contact>> contacts;
final StreamController<String> _searchTerms = StreamController<String>.broadcast();
void search(String term) => _searchTerms.add(term);
@override
void ngOnInit() async {
contacts = _searchTerms.stream
.transform(debounce(Duration(milliseconds: 300)))
.distinct()
.transform(switchMap((term) => term.isEmpty
? Stream<List<Contact>>.fromIterable([<Contact>[]])
: _contactService.search(term).asStream()))
.handleError(print);
}
String _contactUrl(String number) =>
RoutePaths.contact.toUrl(parameters: {idParam: '$number'});
Future<NavigationResult> gotoDetail(Contact contact) =>
_router.navigate(_contactUrl(contact.contactCode));
}
<div id="search-component">
<input #searchBox id="search-box"
placeholder="Search"
(change)="search(searchBox.value)"
(keyup)="search(searchBox.value)" />
<div>
<div *ngFor="let contact of contacts | async"
(click)="contact.delete()" class="search-result" >
{{contact.nickname}}
</div>
</div>
</div>
......@@ -28,15 +28,12 @@
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
.appointments .badge {
display: inline-block;
font-size: small;
......
......@@ -17,9 +17,10 @@ class DayviewComponent implements OnActivate {
final Router _router;
List appointments = List();
Day day;
final Location _location;
// service Klasse für ORM
DayviewComponent(this._appointmentService, this._router);
DayviewComponent(this._appointmentService, this._location, this._router);
final AppointmentService _appointmentService;
......@@ -47,4 +48,8 @@ class DayviewComponent implements OnActivate {
///Methode die den ausgewählten Termin aufruft
Future<NavigationResult> gotoDetail(Appointment appointment) =>
_router.navigate(_appointmentUrl(appointment.id));
void goBack() => _location.back();
void newAppointment() => _router.navigate('appointmentNew');
}
......@@ -7,4 +7,8 @@
<span>{{appointment.name}}</span>
</li>
</ul>
<button (click)="newAppointment()" class="btn btn-success" type="submit">New Appointment</button>
<button type="button" class="btn back" (click)="goBack()">GoBack</button>
</div>
\ No newline at end of file
......@@ -57,7 +57,6 @@ class ContactService {
}
}
Future<void> delete(String contactCode) async {
try {
final url = '$_contactUrl/$contactCode';
......@@ -69,8 +68,27 @@ class ContactService {
///Erstellt einen Kontakt und gibt ihn zurück
Future<Contact> find(String contactCode) async {
Contact contact;
final Response response = await _http.get('$_userUrl/$contactCode');
if (response.statusCode.toString() == "404") {
return contact;
}
final User user = User.fromJson(_extractData(response) as Map<String, dynamic>);
return Contact(user.id, user.nickname, user.surname,user.name, user.email, user.contactCode, "");
return Contact(user.id, user.nickname, user.surname, user.name, user.email, user.contactCode, "");
}
Future<List<Contact>> search(String term) async {
try {
final response = await _http.get('$_contactUrl');
final List<Contact> contacts =
(_extractData(response) as List)
.map((json) => Contact.fromJson(json as Map<String, dynamic>))
.toList();
contacts.retainWhere(
(h) => h.nickname.toLowerCase().contains(term.toLowerCase()));
return contacts;
} catch (e) {
throw _handleError(e);
}
}
}
......@@ -37,32 +37,6 @@ class UserController extends ResourceController {
return Response.ok(user);
}
@Operation.get('password', 'nickname')
Future<Response> getUserLoginNickname(@Bind.path('password') String password,
@Bind.path('nickname') String nickname) async {
final userQuery = Query<User>(context)
..where((user) => user.password).equalTo(password)
..where((user) => user.nickname).equalTo(nickname);
final user = await userQuery.fetchOne();
if (user == null) {
return Response.notFound();
}
return Response.ok(user);
}
@Operation.get('password', 'email')
Future<Response> getUserLoginEmail(@Bind.path('password') String password,
@Bind.path('email') String email) async {
final userQuery = Query<User>(context)
..where((user) => user.password).equalTo(password)
..where((user) => user.email).equalTo(email);
final user = await userQuery.fetchOne();
if (user == null) {
return Response.notFound();
}
return Response.ok(user);
}
@Operation.post()
Future<Response> newUser() async {
final Map<String, dynamic> body = await request.body.decode();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment