Commit eb0118c5 authored by Siedschlag, Lennart's avatar Siedschlag, Lennart
Browse files

Ist fertig muss aber noch besprochen werden

parent 638c5b12
Pipeline #3967 passed with stage
in 3 minutes and 52 seconds
......@@ -7,6 +7,7 @@
list-style-type: none;
padding: 0;
width: 15em;
z-index: 1;
}
.appointments li {
cursor: pointer;
......@@ -45,6 +46,10 @@
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
#search {
z-index: 2;
}
button {
font-family: Arial;
background-color: #eee;
......
......@@ -6,14 +6,16 @@ import 'package:angular_router/angular_router.dart';
import 'package:demo/src/model/appointment.dart';
import 'package:demo/src/view/routes/route_paths.dart';
import 'package:demo/src/view/services/appointment_service.dart';
import 'appointment_component.dart';
import 'appointment_search_component.dart';
@Component(
selector: 'appointments',
templateUrl: 'appointment_list_component.html',
styleUrls: ['appointment_list_component.css'],
directives: [coreDirectives, routerDirectives, AppointmentComponent],
directives: [coreDirectives, routerDirectives, AppointmentComponent, AppointmentSearchComponent],
pipes: [commonPipes],
)
......
<h2>Appointments</h2>
<appointment-search id="search"></appointment-search>
<ul class="appointments">
<li *ngFor="let appointment of appointments"
[class.selected]="appointment === selected"
......
.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;
}
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/appointment.dart';
import 'package:demo/src/view/routes/route_paths.dart';
import 'package:demo/src/view/services/appointment_search_service.dart';
@Component(
selector: 'appointment-search',
templateUrl: 'appointment_search_component.html',
styleUrls: ['appointment_search_component.css'],
directives: [coreDirectives],
providers: [ClassProvider(AppointmentSearchService)],
pipes: [commonPipes],
)
class AppointmentSearchComponent implements OnInit {
AppointmentSearchComponent(this._appointmentSearchService, this._router) {}
AppointmentSearchService _appointmentSearchService;
Router _router;
Stream<List<Appointment>> appointments;
final StreamController<String> _searchTerms = StreamController<String>.broadcast();
void search(String term) => _searchTerms.add(term);
@override
void ngOnInit() async {
appointments = _searchTerms.stream
.transform(debounce(Duration(milliseconds: 300)))
.distinct()
.transform(switchMap((term) => term.isEmpty
? Stream<List<Appointment>>.fromIterable([<Appointment>[]])
: _appointmentSearchService.search(term).asStream()))
.handleError(print);
}
String _appointmentUrl(int id) =>
RoutePaths.appointment.toUrl(parameters: {idParam: '$id'});
Future<NavigationResult> gotoDetail(Appointment appointment) =>
_router.navigate(_appointmentUrl(appointment.id));
}
<div id="search-component">
<input #searchBox id="search-box"
(change)="search(searchBox.value)"
(keyup)="search(searchBox.value)" />
<div>
<div *ngFor="let appointment of appointments | async"
(click)="gotoDetail(appointment)" class="search-result" >
{{appointment.name}}
</div>
</div>
</div>
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart';
import 'package:demo/src/model/appointment.dart';
import '../components/mock_appointments.dart';
class AppointmentSearchService {
AppointmentSearchService(this._http);
final Client _http;
Future<List<Appointment>> search(String term) async {
final List<Appointment> appointments = List<Appointment>();
for (var appointment in mockAppointments) {
if (appointment.name.contains(term)) {
appointments.add(appointment);
}
}
return appointments;
/**
try {
final response = await _http.get('app/appointments/?name=$term');
return (_extractData(response) as List)
.map((json) => Appointment.fromJson(json))
.toList();
} catch (e) {
throw _handleError(e);
}
**/
}
dynamic _extractData(Response resp) => json.decode(resp.body)['data'];
Exception _handleError(dynamic e) {
print(e); // for demo purposes only
return Exception('Server error; cause: $e');
}
}
\ No newline at end of file
Supports Markdown
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