21 |
3 |
4 |
| Name | 8 |City | 9 |Order Total | 10 |11 | | |
|---|---|---|---|---|
| {{ cust.name | capitalize }} | 15 |{{ cust.city }} | 16 |{{ cust.orderTotal | currency:currencyCode:'symbol' }} | 17 |Orders | 18 |Edit | 19 |
| 22 | | 23 | {{ customersOrderTotal | currency:currencyCode:'symbol' }} 24 | | 25 |26 | | ||
| No customers found | 29 |||||
-------------------------------------------------------------------------------- /labs/begin/src/app/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { SorterService } from '../../core/sorter.service'; 4 | import { Customer } from '../../core/model/customer'; 5 | 6 | @Component({ 7 | selector: 'app-customers-list', 8 | templateUrl: './customers-list.component.html' 9 | }) 10 | export class CustomersListComponent implements OnInit { 11 | private _customers: Customer[] = []; 12 | @Input() get customers(): Customer[] { 13 | return this._customers; 14 | } 15 | set customers(value: Customer[]) { 16 | if (value) { 17 | this.filteredCustomers = this._customers = value; 18 | this.calculateOrders(); 19 | } 20 | } 21 | filteredCustomers: Customer[] = []; 22 | customersOrderTotal: number; 23 | currencyCode = 'USD'; 24 | 25 | constructor(private sorterService: SorterService) { } 26 | 27 | ngOnInit() { 28 | 29 | } 30 | 31 | calculateOrders() { 32 | this.customersOrderTotal = 0; 33 | this.filteredCustomers.forEach((cust: Customer) => { 34 | this.customersOrderTotal += cust.orderTotal; 35 | }); 36 | } 37 | 38 | filter(data: string) { 39 | if (data) { 40 | this.filteredCustomers = this.customers.filter((cust: Customer) => { 41 | return cust.name.toLowerCase().indexOf(data.toLowerCase()) > -1 || 42 | cust.city.toLowerCase().indexOf(data.toLowerCase()) > -1 || 43 | cust.orderTotal.toString().indexOf(data) > -1; 44 | }); 45 | } else { 46 | this.filteredCustomers = this.customers; 47 | } 48 | this.calculateOrders(); 49 | } 50 | 51 | sort(prop: string) { 52 | this.sorterService.sort(this.filteredCustomers, prop); 53 | } 54 | 55 | customerTrackBy(index: number, customer: Customer) { 56 | return customer.id; 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /labs/begin/src/app/customers/customers-list/filter-textbox.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-filter-textbox', 5 | template: ` 6 | Filter: 7 | ` 8 | }) 9 | export class FilterTextboxComponent implements OnInit { 10 | 11 | private _filter = ''; 12 | 13 | @Input() get filter() { 14 | return this._filter; 15 | } 16 | 17 | set filter(val: string) { 18 | this._filter = val; 19 | this.changed.emit(this.filter); // Raise changed event 20 | } 21 | 22 | @Output() changed: EventEmitter
{{ title }}
2 |3 |
4 |
--------------------------------------------------------------------------------
/labs/begin/src/app/customers/customers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { Customer } from '../core/model/customer';
4 | import { Observable, of, merge } from 'rxjs';
5 | import { map } from 'rxjs/operators';
6 | import { CustomersService } from './customers.service';
7 |
8 | @Component({
9 | selector: 'app-customers',
10 | templateUrl: './customers.component.html'
11 | })
12 | export class CustomersComponent implements OnInit {
13 | title = 'Customers';
14 | customers$: Observable
2 |
6 |
11 |
12 | Orders
3 | 4 || {{ orderItem.productName }} | 8 |{{ orderItem.itemCost | currency:'USD':'symbol' }} | 9 |
13 | View All Customers 14 | 15 | -------------------------------------------------------------------------------- /labs/begin/src/app/orders/orders.component.scss: -------------------------------------------------------------------------------- 1 | .orders-table { 2 | margin-top: 20px; 3 | } -------------------------------------------------------------------------------- /labs/begin/src/app/orders/orders.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | import { Order } from '../core/model/order'; 4 | import { Observable } from 'rxjs'; 5 | import { OrdersService } from './orders.service'; 6 | 7 | @Component({ 8 | selector: 'app-orders', 9 | templateUrl: './orders.component.html', 10 | styleUrls: [ './orders.component.scss' ] 11 | }) 12 | export class OrdersComponent implements OnInit { 13 | 14 | orders$: Observable
User Settings
2 |
3 |
4 |
8 |
9 |
5 |
6 |
7 |
10 |
11 |
15 |
16 |
12 |
13 |
14 |
17 |
18 |
22 |
23 |
--------------------------------------------------------------------------------
/labs/begin/src/app/user-settings/user-settings.component.scss:
--------------------------------------------------------------------------------
1 | .form-group > label {
2 | font-weight: 500;
3 | }
--------------------------------------------------------------------------------
/labs/begin/src/app/user-settings/user-settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { Theme } from '../shared/enums';
3 | import { UserSettingsService } from '../core/user-settings.service';
4 | import { UserSettings } from '../shared/interfaces';
5 | import { SubSink } from 'subsink';
6 |
7 | @Component({
8 | selector: 'app-user-settings',
9 | templateUrl: './user-settings.component.html',
10 | styleUrls: ['./user-settings.component.scss']
11 | })
12 | export class UserSettingsComponent implements OnInit, OnDestroy {
13 |
14 | themes: any[];
15 | selectedTheme: Theme;
16 | userSettings: UserSettings = { id: 1, preferredName: null, email: null, theme: null };
17 | subsink = new SubSink();
18 |
19 | constructor(private userSettingsService: UserSettingsService) { }
20 |
21 | ngOnInit() {
22 | this.themes = [{label: 'Light', value: 0}, {label: 'Dark', value: 1}];
23 | this.subsink.sink = this.userSettingsService.getUserSettings().subscribe(settings => {
24 | this.userSettings = settings;
25 | if (settings) {
26 | this.selectedTheme = settings.theme;
27 | }
28 | });
29 | }
30 |
31 | updateUserSettings() {
32 | this.userSettingsService.updateUserSettings(this.userSettings)
33 | .subscribe(userSettings => this.userSettings = userSettings);
34 | }
35 |
36 | ngOnDestroy() {
37 | this.subsink.unsubscribe();
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/labs/begin/src/assets/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: scroll;
3 | overflow-x: hidden;
4 | }
5 |
6 | main {
7 | position: relative;
8 | padding-top: 70px;
9 | }
10 |
11 | /* Ensure display:flex and others don't override a [hidden] */
12 | [hidden] { display: none !important; }
13 |
14 | footer {
15 | margin-top: 15px;
16 | }
17 |
18 | th {
19 | cursor: pointer;
20 | }
21 |
22 | td {
23 | width:33%;
24 | }
25 |
26 | .app-title {
27 | line-height:50px;
28 | font-size:20px;
29 | color: white;
30 | }
31 |
32 | .light-theme body {
33 | background-color: #fff;
34 | color: #000;
35 | }
36 |
37 | .light-theme thead {
38 | background-color: #efefef;
39 | }
40 |
41 | .dark-theme body {
42 | background-color: #3f3f3f;
43 | color: #fff;
44 | }
45 |
46 | .dark-theme thead {
47 | background-color: #000;
48 | }
49 |
50 |
51 | .white {
52 | color: white;
53 | }
--------------------------------------------------------------------------------
/labs/begin/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | apiUrlBase: '/api'
4 | };
5 |
--------------------------------------------------------------------------------
/labs/begin/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false,
8 | apiUrlBase: '/api'
9 | };
10 |
--------------------------------------------------------------------------------
/labs/begin/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/labs/begin/src/favicon.ico
--------------------------------------------------------------------------------
/labs/begin/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
21 | 21 |
Customers
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |10 |
11 | {{ customers | json }}
12 |
13 | 14 |
15 |
16 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | imports: [
12 | BrowserModule,
13 | RouterModule.forRoot([])
14 | ],
15 | providers: [],
16 | bootstrap: [AppComponent]
17 | })
18 | export class AppModule { }
19 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/core/store/customer.ts:
--------------------------------------------------------------------------------
1 | export class Customer {
2 | id: number = 0;
3 | name = '';
4 | address: Address = {
5 | street:'',
6 | city: '',
7 | state: '',
8 | zip: '',
9 | };
10 | }
11 |
12 | export class Address {
13 | street = '';
14 | city = '';
15 | state = '';
16 | zip = '';
17 | }
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/core/utilities/property-resolver.ts:
--------------------------------------------------------------------------------
1 | export class PropertyResolver {
2 | static resolve(path: string, obj: any) {
3 | return path.split('.').reduce((prev, curr) => {
4 | return (prev ? prev[curr] : undefined);
5 | }, obj || self);
6 | }
7 | }
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/core/utilities/sorter.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | import { PropertyResolver } from './property-resolver';
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class SorterService {
9 |
10 | private property: string = '';
11 | private direction = 1;
12 |
13 | sort(collection: any[], prop: any) {
14 | this.property = prop;
15 | this.direction = (this.property === prop) ? this.direction * -1 : 1;
16 |
17 | return collection.sort((a: any, b: any) => {
18 | let aVal: any;
19 | let bVal: any;
20 |
21 | // Handle resolving complex properties such as 'state.name' for prop value
22 | if (prop && prop.indexOf('.') > -1) {
23 | aVal = PropertyResolver.resolve(prop, a);
24 | bVal = PropertyResolver.resolve(prop, b);
25 | }
26 | else {
27 | aVal = a[prop];
28 | bVal = b[prop];
29 | }
30 |
31 | // Fix issues that spaces before/after string value can cause such as ' San Francisco'
32 | if (this.isString(aVal)) {
33 | aVal = aVal.trim().toUpperCase();
34 | }
35 |
36 | if (this.isString(bVal)) {
37 | bVal = bVal.trim().toUpperCase();
38 | }
39 |
40 | if (aVal === bVal) {
41 | return 0;
42 | }
43 | else if (aVal > bVal) {
44 | return this.direction * -1;
45 | }
46 | else {
47 | return this.direction * 1;
48 | }
49 | });
50 | }
51 |
52 | private isString(val: any): boolean {
53 | return (val && (typeof val === 'string' || val instanceof String));
54 | }
55 |
56 | }
57 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/shared/auto-unsubscribe.decorator.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/NetanelBasal/ngx-auto-unsubscribe/blob/master/src/auto-unsubscribe.ts
2 | const isFunction = (fn) => typeof fn === 'function';
3 |
4 | const doUnsubscribe = (subscription) => {
5 | subscription && isFunction(subscription.unsubscribe) && subscription.unsubscribe();
6 | }
7 |
8 | const doUnsubscribeIfArray = (subscriptionsArray) => {
9 | Array.isArray(subscriptionsArray) && subscriptionsArray.forEach(doUnsubscribe);
10 | }
11 |
12 | export function AutoUnsubscribe({ blackList = [], includeArrays = false, arrayName = '', event = 'ngOnDestroy'} = {}) {
13 |
14 | return function (constructor: Function) {
15 | const original = constructor.prototype[event];
16 |
17 | if (!isFunction(original) && !disableAutoUnsubscribeAot()) {
18 | console.warn(`${constructor.name} is using @AutoUnsubscribe but does not implement OnDestroy`);
19 | }
20 |
21 | constructor.prototype[event] = function () {
22 | if (arrayName) {
23 | return doUnsubscribeIfArray(this[arrayName]);
24 | }
25 |
26 | for (let propName in this) {
27 | if (blackList.includes(propName)) continue;
28 |
29 | const property = this[propName];
30 | doUnsubscribe(property);
31 | doUnsubscribeIfArray(property);
32 | }
33 |
34 | isFunction(original) && original.apply(this, arguments);
35 | };
36 | }
37 |
38 |
39 | function disableAutoUnsubscribeAot() {
40 | return window && window['disableAutoUnsubscribeAot'] || window['disableAuthUnsubscribeAot'];
41 | }
42 | }
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | @NgModule({
5 | imports: [
6 | CommonModule
7 | ],
8 | declarations: []
9 | })
10 | export class SharedModule { }
11 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/samples/angular-simple-store/src/assets/.gitkeep
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, for easier debugging, you can ignore zone related error
11 | * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the
12 | * below file. Don't forget to comment it out in production mode
13 | * because it will have a performance impact when errors are thrown
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/samples/angular-simple-store/src/favicon.ico
--------------------------------------------------------------------------------
/samples/angular-simple-store/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | State History
17 |
18 | {{ stateHistory | json }}
19 |
20 | Customers
2 | 3 |-
4 |
- 5 | {{ customer.firstName }} {{ customer.lastName }} 6 | 7 |
10 | 11 |
14 |
State with Property Changes
15 | This shows the store state as well as which properties changed. 16 |
17 | {{ (storeStateWithPropertyChanges$ | async) | json }}
18 |
19 |
--------------------------------------------------------------------------------
/samples/angular-stateChanged/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | }));
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.debugElement.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'my-angular-app'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.debugElement.componentInstance;
26 | expect(app.title).toEqual('my-angular-app');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.debugElement.nativeElement;
33 | expect(compiled.querySelector('.content span').textContent).toContain('my-angular-app app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/samples/angular-stateChanged/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Observable} from 'rxjs';
3 | import { Customer, CustomersService, StoreState } from './core/customers.service';
4 | import { StateWithPropertyChanges } from '@codewithdan/observable-store';
5 |
6 | @Component({
7 | selector: 'app-root',
8 | templateUrl: './app.component.html',
9 | styleUrls: ['./app.component.css']
10 | })
11 | export class AppComponent implements OnInit {
12 |
13 | storeState$: ObservableCustomers (in Child Component)
2 |-
3 |
- 4 | {{ customer.firstName }} {{ customer.lastName }} 5 | 6 |
19 |
21 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | .title {
2 | margin-right: 1em;
3 | }
4 |
5 | .preferred-name {
6 | color: #fff;
7 | place-self: center;
8 | margin-right: 30px;
9 | font-size: 15pt;
10 | }
11 |
12 | .circle {
13 | place-self: center;
14 | height:25px;
15 | width:25px;
16 | border-radius: 50px;
17 | background: red;
18 | color: white;
19 | margin-right: 10px;
20 | font-size: 13pt;
21 | text-align: center;
22 | cursor: pointer;
23 | }
24 |
25 | .settings {
26 | color: #fff;
27 | font-size: 15pt;
28 | margin-left: 15px;
29 | }
30 |
31 | header {
32 | background-color: #007bff;
33 | }
34 |
35 | :host-context(.light-theme) header{
36 | background-color: #007bff;
37 | }
38 |
39 | :host-context(.dark-theme) header{
40 | background-color: #000;
41 | }
42 |
43 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
2 | import { DOCUMENT } from '@angular/common';
3 |
4 | import { CustomersService } from './customers/customers.service';
5 | import { UserSettingsService } from './core/user-settings.service';
6 | import { Theme } from './shared/enums';
7 | import { UserSettings } from './shared/interfaces';
8 | import { Observable, merge } from 'rxjs';
9 | import { map, tap } from 'rxjs/operators';
10 |
11 | @Component({
12 | selector: 'app-root',
13 | templateUrl: './app.component.html',
14 | styleUrls: ['./app.component.scss']
15 | })
16 | export class AppComponent implements OnInit {
17 | customersLength$: Observable3 |
4 |
| Name | 8 |City | 9 |Order Total | 10 |11 | | |
|---|---|---|---|---|
| {{ cust.name | capitalize }} | 15 |{{ cust.city }} | 16 |{{ cust.orderTotal | currency:currencyCode:'symbol' }} | 17 |Orders | 18 |Edit | 19 |
| 22 | | 23 | {{ customersOrderTotal | currency:currencyCode:'symbol' }} 24 | | 25 |26 | | ||
| No customers found | 29 |||||
-------------------------------------------------------------------------------- /samples/angular-store-edits/src/app/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { SorterService } from '../../core/sorter.service'; 4 | import { Customer } from '../../core/model/customer'; 5 | 6 | @Component({ 7 | selector: 'app-customers-list', 8 | templateUrl: './customers-list.component.html' 9 | }) 10 | export class CustomersListComponent implements OnInit { 11 | private _customers: Customer[] = []; 12 | @Input() get customers(): Customer[] { 13 | return this._customers; 14 | } 15 | set customers(value: Customer[]) { 16 | if (value) { 17 | this.filteredCustomers = this._customers = value; 18 | this.calculateOrders(); 19 | } 20 | } 21 | filteredCustomers: Customer[] = []; 22 | customersOrderTotal = 0; 23 | currencyCode = 'USD'; 24 | 25 | constructor(private sorterService: SorterService) { } 26 | 27 | ngOnInit() { 28 | 29 | } 30 | 31 | calculateOrders() { 32 | this.customersOrderTotal = 0; 33 | this.filteredCustomers.forEach((cust: Customer) => { 34 | this.customersOrderTotal += cust.orderTotal; 35 | }); 36 | } 37 | 38 | filter(data: string) { 39 | if (data) { 40 | this.filteredCustomers = this.customers.filter((cust: Customer) => { 41 | return cust.name.toLowerCase().indexOf(data.toLowerCase()) > -1 || 42 | cust.city.toLowerCase().indexOf(data.toLowerCase()) > -1 || 43 | cust.orderTotal.toString().indexOf(data) > -1; 44 | }); 45 | } else { 46 | this.filteredCustomers = this.customers; 47 | } 48 | this.calculateOrders(); 49 | } 50 | 51 | sort(prop: string) { 52 | this.sorterService.sort(this.filteredCustomers, prop); 53 | } 54 | 55 | customerTrackBy(index: number, customer: Customer) { 56 | return customer.id; 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /samples/angular-store-edits/src/app/customers/customers-list/filter-textbox.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-filter-textbox', 5 | template: ` 6 | Filter: 7 | ` 8 | }) 9 | export class FilterTextboxComponent implements OnInit { 10 | 11 | private _filter = ''; 12 | 13 | @Input() get filter() { 14 | return this._filter; 15 | } 16 | 17 | set filter(val: string) { 18 | this._filter = val; 19 | this.changed.emit(this.filter); // Raise changed event 20 | } 21 | 22 | getInputValue(event: Event) { 23 | return (event.target as HTMLInputElement).value; 24 | } 25 | 26 | @Output() changed: EventEmitter
{{ title }}
2 |3 |
4 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/app/customers/customers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { Customer } from '../core/model/customer';
4 | import { Observable, of, merge } from 'rxjs';
5 | import { map } from 'rxjs/operators';
6 | import { CustomersService } from './customers.service';
7 |
8 | @Component({
9 | selector: 'app-customers',
10 | templateUrl: './customers.component.html'
11 | })
12 | export class CustomersComponent implements OnInit {
13 | title = 'Customers';
14 | customers$: Observable
2 |
6 |
11 |
12 | Orders
3 | 4 || {{ orderItem.productName }} | 8 |{{ orderItem.itemCost | currency:'USD':'symbol' }} | 9 |
13 | View All Customers 14 | 15 | -------------------------------------------------------------------------------- /samples/angular-store-edits/src/app/orders/orders.component.scss: -------------------------------------------------------------------------------- 1 | .orders-table { 2 | margin-top: 20px; 3 | } -------------------------------------------------------------------------------- /samples/angular-store-edits/src/app/orders/orders.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | import { Order } from '../core/model/order'; 4 | import { Observable } from 'rxjs'; 5 | import { OrdersService } from './orders.service'; 6 | 7 | @Component({ 8 | selector: 'app-orders', 9 | templateUrl: './orders.component.html', 10 | styleUrls: [ './orders.component.scss' ] 11 | }) 12 | export class OrdersComponent implements OnInit { 13 | 14 | orders$: Observable
User Settings
2 |
3 |
4 |
8 |
9 |
5 |
6 |
7 |
10 |
11 |
15 |
16 |
12 |
13 |
14 |
17 |
18 |
22 |
23 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/app/user-settings/user-settings.component.scss:
--------------------------------------------------------------------------------
1 | .form-group > label {
2 | font-weight: 500;
3 | }
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/app/user-settings/user-settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { Theme } from '../shared/enums';
3 | import { UserSettingsService } from '../core/user-settings.service';
4 | import { UserSettings } from '../shared/interfaces';
5 | import { SubSink } from 'subsink';
6 |
7 | @Component({
8 | selector: 'app-user-settings',
9 | templateUrl: './user-settings.component.html',
10 | styleUrls: ['./user-settings.component.scss']
11 | })
12 | export class UserSettingsComponent implements OnInit, OnDestroy {
13 |
14 | themes = [{label: 'Light', value: 0}, {label: 'Dark', value: 1}];
15 | selectedTheme = Theme.Light;
16 | userSettings: UserSettings = { id: 1, preferredName: '', email: '', theme: this.selectedTheme };
17 | subsink = new SubSink();
18 |
19 | constructor(private userSettingsService: UserSettingsService) { }
20 |
21 | ngOnInit() {
22 | this.subsink.sink = this.userSettingsService.getUserSettings().subscribe(settings => {
23 | this.userSettings = settings;
24 | if (settings) {
25 | this.selectedTheme = settings.theme;
26 | }
27 | });
28 | }
29 |
30 | updateUserSettings() {
31 | this.userSettingsService.updateUserSettings(this.userSettings)
32 | .subscribe((userSettings: any) => this.userSettings = userSettings);
33 | }
34 |
35 | ngOnDestroy() {
36 | this.subsink.unsubscribe();
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/assets/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: scroll;
3 | overflow-x: hidden;
4 | }
5 |
6 | main {
7 | position: relative;
8 | padding-top: 70px;
9 | }
10 |
11 | /* Ensure display:flex and others don't override a [hidden] */
12 | [hidden] { display: none !important; }
13 |
14 | footer {
15 | margin-top: 15px;
16 | }
17 |
18 | th {
19 | cursor: pointer;
20 | }
21 |
22 | td {
23 | width:33%;
24 | }
25 |
26 | .app-title {
27 | line-height:50px;
28 | font-size:20px;
29 | color: white;
30 | }
31 |
32 | .light-theme body {
33 | background-color: #fff;
34 | color: #000;
35 | }
36 |
37 | .light-theme thead {
38 | background-color: #efefef;
39 | }
40 |
41 | .dark-theme body {
42 | background-color: #3f3f3f;
43 | color: #fff;
44 | }
45 |
46 | .dark-theme thead {
47 | background-color: #000;
48 | }
49 |
50 |
51 | .white {
52 | color: white;
53 | }
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | apiUrlBase: '/api'
4 | };
5 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false,
8 | apiUrlBase: '/api'
9 | };
10 |
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/samples/angular-store-edits/src/favicon.ico
--------------------------------------------------------------------------------
/samples/angular-store-edits/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
21 | 21 |
3 |
4 |
| Name | 8 |City | 9 |Order Total | 10 ||
|---|---|---|---|
| 14 | 15 | {{ cust.name | capitalize }} 16 | 17 | | 18 |{{ cust.city }} | 19 |{{ cust.orderTotal | currency:currencyCode:'symbol' }} 20 | | |
| 23 | | 24 | {{ customersOrderTotal | currency:currencyCode:'symbol' }} 25 | | 26 |||
| No customers found | 29 ||||
-------------------------------------------------------------------------------- /samples/angular-store/src/app/customers/customers-list/customers-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { Customer } from '../../shared/interfaces'; 4 | import { SorterService } from '../../core/sorter.service'; 5 | 6 | @Component({ 7 | selector: 'app-customers-list', 8 | templateUrl: './customers-list.component.html' 9 | }) 10 | export class CustomersListComponent implements OnInit { 11 | private _customers: Customer[] = []; 12 | @Input() get customers(): Customer[] { 13 | return this._customers; 14 | } 15 | set customers(value: Customer[]) { 16 | if (value) { 17 | this.filteredCustomers = this._customers = value; 18 | this.calculateOrders(); 19 | } 20 | } 21 | filteredCustomers: Customer[] = []; 22 | customersOrderTotal = 0; 23 | currencyCode = 'USD'; 24 | 25 | constructor(private sorterService: SorterService) { } 26 | 27 | ngOnInit() { 28 | 29 | } 30 | 31 | calculateOrders() { 32 | this.customersOrderTotal = 0; 33 | this.filteredCustomers.forEach((cust: Customer) => { 34 | if (cust && cust.orderTotal) { 35 | this.customersOrderTotal += cust.orderTotal; 36 | } 37 | }); 38 | } 39 | 40 | filter(data: string) { 41 | if (data) { 42 | this.filteredCustomers = this.customers.filter((cust: Customer) => { 43 | const orderTotal = cust.orderTotal || ''; 44 | return cust.name.toLowerCase().indexOf(data.toLowerCase()) > -1 || 45 | cust.city.toLowerCase().indexOf(data.toLowerCase()) > -1 || 46 | orderTotal.toString().indexOf(data) > -1; 47 | }); 48 | } else { 49 | this.filteredCustomers = this.customers; 50 | } 51 | this.calculateOrders(); 52 | } 53 | 54 | sort(prop: string) { 55 | this.sorterService.sort(this.filteredCustomers, prop); 56 | } 57 | 58 | customerTrackBy(index: number, customer: Customer) { 59 | return customer.id; 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /samples/angular-store/src/app/customers/customers-list/filter-textbox.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-filter-textbox', 5 | template: ` 6 | Filter: 7 | ` 8 | }) 9 | export class FilterTextboxComponent implements OnInit { 10 | 11 | private _filter = ''; 12 | @Input() get filter() { 13 | return this._filter; 14 | } 15 | 16 | set filter(val: string) { 17 | this._filter = val; 18 | this.changed.emit(this.filter); // Raise changed event 19 | } 20 | 21 | @Output() changed: EventEmitter
{{ title }}
2 |3 |
2 |
14 | Orders for {{ customer.name | capitalize }}
3 | 4 |
5 |
6 |
11 |
12 |
13 | | {{ orderItem.productName }} | 8 |{{ orderItem.itemCost | currency:'USD':'symbol' }} | 9 |
12 |
18 |
19 | View All Customers 20 | 21 | -------------------------------------------------------------------------------- /samples/angular-store/src/app/orders/orders.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { ActivatedRoute } from '@angular/router'; 3 | 4 | import { Customer, Order } from '../shared/interfaces'; 5 | import { CustomersService } from '../core/services/customers.service'; 6 | import { OrdersService } from '../core/services/orders.service'; 7 | import { Observable } from 'rxjs'; 8 | 9 | @Component({ 10 | selector: 'app-orders', 11 | templateUrl: './orders.component.html', 12 | styleUrls: [ './orders.component.css' ] 13 | }) 14 | export class OrdersComponent implements OnInit, OnDestroy { 15 | 16 | customer$: Observable
30 |
42 |
14 |
21 |
45 |
47 |
49 | );
50 | }
51 | }
52 |
53 | export default CustomersContainer;
54 |
--------------------------------------------------------------------------------
/samples/react-store/src/index.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-y: scroll;
3 | overflow-x: hidden;
4 | }
5 |
6 | main {
7 | position: relative;
8 | padding-top: 70px;
9 | }
10 |
11 | /* Ensure display:flex and others don't override a [hidden] */
12 | [hidden] { display: none !important; }
13 |
14 | footer {
15 | margin-top: 15px;
16 | }
17 |
18 | th {
19 | cursor: pointer;
20 | }
21 |
22 | td {
23 | width:33%;
24 | }
25 |
26 | .app-title {
27 | line-height:50px;
28 | font-size:20px;
29 | color: white;
30 | }
31 |
32 | thead {
33 | background-color: #efefef;
34 | }
--------------------------------------------------------------------------------
/samples/react-store/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import Routes, { history } from './Routes';
5 | import * as serviceWorker from './serviceWorker';
6 | import { ObservableStore } from '@codewithdan/observable-store';
7 | import { ReduxDevToolsExtension } from '@codewithdan/observable-store-extensions';
8 |
9 | const production = process.env.NODE_ENV === 'production';
10 |
11 | ObservableStore.globalSettings = { isProduction: production };
12 | if (!production) {
13 | ObservableStore.addExtension(new ReduxDevToolsExtension({ reactRouterHistory: history }));
14 | }
15 |
16 | ReactDOM.render(Customers
46 |47 |
14 | {this.props.orders.map(order => {
15 | return
32 | );
33 | }
34 |
35 | }
36 |
37 | export default OrdersList;
38 |
--------------------------------------------------------------------------------
/samples/react-store/src/stores/OrdersStore.js:
--------------------------------------------------------------------------------
1 | import { ObservableStore } from '@codewithdan/observable-store';
2 |
3 | class OrdersStore extends ObservableStore {
4 |
5 | constructor() {
6 | super({ trackStateHistory: true, logStateChanges: true });
7 | }
8 |
9 | fetchOrders() {
10 | return fetch('/orders.json')
11 | .then(response => response.json())
12 | .then(orders => {
13 | this.setState({ orders }, 'SET_ORDERS');
14 | return orders;
15 | });
16 | }
17 |
18 | getOrders(id) {
19 | let state = this.getState();
20 | // pull from store cache
21 | if (state && state.orders) {
22 | return this.createPromise(null, this.filterOrders(id, state.orders));
23 | }
24 | // doesn't exist in store so fetch from server
25 | else {
26 | return this.fetchOrders()
27 | .then(orders => {
28 | return this.filterOrders(id, orders);
29 | });
30 | }
31 | }
32 |
33 | filterOrders(id, orders) {
34 | return orders.filter(order => order.customerId === id);
35 | }
36 |
37 | createPromise(err, result) {
38 | return new Promise((resolve, reject) => {
39 | return err ? reject(err) : resolve(result);
40 | });
41 | }
42 | }
43 |
44 | export default new OrdersStore();
--------------------------------------------------------------------------------
/samples/react-store/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
2 |
--------------------------------------------------------------------------------
/samples/vue-store/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 |
--------------------------------------------------------------------------------
/samples/vue-store/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | 'extends': [
7 | 'plugin:vue/essential',
8 | '@vue/standard'
9 | ],
10 | rules: {
11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 | },
14 | parserOptions: {
15 | parser: 'babel-eslint'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/samples/vue-store/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/samples/vue-store/README.md:
--------------------------------------------------------------------------------
1 | # vue-multiple-stores
2 |
3 | ## Project setup
4 | ```
5 | npm install
6 | ```
7 |
8 | ### Compiles and hot-reloads for development
9 | ```
10 | npm run serve
11 | ```
12 |
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 |
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 |
--------------------------------------------------------------------------------
/samples/vue-store/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/samples/vue-store/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-multiple-stores",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "@codewithdan/observable-store": "^2.2.13",
12 | "vue": "^2.6.10",
13 | "vue-router": "^3.1.3"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^5.0.8",
17 | "@vue/cli-plugin-eslint": "^5.0.8",
18 | "@vue/cli-service": "^5.0.8",
19 | "@vue/eslint-config-standard": "^4.0.0",
20 | "vue-template-compiler": "^2.6.10"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/samples/vue-store/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/samples/vue-store/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/samples/vue-store/public/favicon.ico
--------------------------------------------------------------------------------
/samples/vue-store/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
16 |
17 |
18 | {order.orderItems.map((orderItem) => {
19 | return
28 |
29 |
30 | })}
31 | | {orderItem.productName} | 21 |
22 | |
24 |
29 |
3 |
7 |
9 |
10 |
11 |
32 |
--------------------------------------------------------------------------------
/samples/vue-store/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanWahlin/Observable-Store/b1448e1c7359c048d5df1205d387e3a007618f92/samples/vue-store/src/assets/logo.png
--------------------------------------------------------------------------------
/samples/vue-store/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
31 |
32 |
33 |
41 |
42 |
43 |
59 |
--------------------------------------------------------------------------------
/samples/vue-store/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 |
5 | Vue.config.productionTip = false
6 |
7 | new Vue({
8 | router,
9 | render: h => h(App)
10 | }).$mount('#app')
11 |
--------------------------------------------------------------------------------
/samples/vue-store/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Home from './views/Home.vue'
4 |
5 | Vue.use(Router)
6 |
7 | export default new Router({
8 | mode: 'history',
9 | base: process.env.BASE_URL,
10 | routes: [
11 | {
12 | path: '/',
13 | name: 'home',
14 | component: Home
15 | },
16 | {
17 | path: '/about',
18 | name: 'about',
19 | // route level code-splitting
20 | // this generates a separate chunk (about.[hash].js) for this route
21 | // which is lazy-loaded when the route is visited.
22 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
23 | }
24 | ]
25 | })
26 |
--------------------------------------------------------------------------------
/samples/vue-store/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
5 | For guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
Installed CLI Plugins
10 | 14 |Essential Links
15 |-
16 |
- Core Docs 17 |
- Forum 18 |
- Community Chat 19 |
- News 21 |
Ecosystem
23 |-
24 |
- vue-router 25 |
- vuex 26 |
- vue-devtools 27 |
- vue-loader 28 |
- awesome-vue 29 |
3 |
5 |
6 |
--------------------------------------------------------------------------------
/samples/vue-store/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | This is an about page
4 |
3 | 
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
4 |