Setup Component Store

Author: MikeRyanDev

.nvmrc

@@ -0,0 +1 @@
+v18.14.0

README.md

@@ -2,15 +2,13 @@
 
 ## Setup
 
-To get started, ensure that you have _at least_ Node v12 installed. You can verify what version you have installed by running
+To get started, ensure that you have the right version of Node installed and selected:
 
 ```sh
-node --version
+nvm install
 ```
 
-from your terminal. Then, fork this repository to your personal Github account. As you make changes to the codebase during this workshop you will be pushing your changes to your personal fork. You can [learn more about forks here](https://help.github.com/en/github/getting-started-with-github/fork-a-repo).
-
-Once you have forked this repository, clone your fork to your development machine. Then run the following command using your terminal from the root of the repository to install dependencies.
+Then run the following command using your terminal from the root of the repository to install dependencies:
 
 ```sh
 npm install

apps/earnings/src/styles.scss

@@ -13,10 +13,6 @@ mat-toolbar-row {
   justify-content: space-between;
 }
 
-p {
-  margin: 16px;
-}
-
 [mat-raised-button] {
   width: 100%;
 }
@@ -47,40 +43,11 @@ mat-sidenav a {
   position: relative;
 }
 
-.icon-20 {
-  font-size: 20px;
-}
-
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-table {
-  border-collapse: collapse;
-  border-radius: 2px;
-  border-spacing: 0;
-  margin: 0 0 32px;
-  width: 100%;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
-}
-
-th {
-  font-size: 16px;
-  font-weight: 400;
-  padding: 13px 32px;
-  text-align: left;
-  color: rgba(0, 0, 0, 0.54);
-  background: rgba(0, 0, 0, 0.03);
-}
-
-td {
-  color: rgba(0, 0, 0, 0.54);
-  border: 1px solid rgba(0, 0, 0, 0.03);
-  font-weight: 400;
-  padding: 8px 30px;
-}
-
 .container {
   display: flex;
   margin: 10px;
@@ -92,15 +59,6 @@ td {
   flex: 1;
 }
 
-mat-card-header .mat-card-header-text {
-  margin-left: 0;
-  border-bottom: 1px solid #ffd740;
-}
-
-mat-card-title h1 {
-  display: inline;
-}
-
 mat-card {
   margin-bottom: 20px !important;
 }

libs/books-page/src/lib/book-actions/book-actions.component.html

@@ -0,0 +1,18 @@
+<ng-container *ngIf="!isOnSmallDevice; else showCompactActions">
+  <button mat-icon-button (click)="selectBook.emit()">
+    <mat-icon>edit</mat-icon>
+  </button>
+  <button mat-icon-button (click)="deleteBook.emit()">
+    <mat-icon>delete</mat-icon>
+  </button>
+</ng-container>
+
+<ng-template #showCompactActions>
+  <button mat-icon-button [matMenuTriggerFor]="menu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="selectBook.emit()">Edit</button>
+    <button mat-menu-item (click)="deleteBook.emit()">Delete</button>
+  </mat-menu>
+</ng-template>

libs/books-page/src/lib/book-actions/book-actions.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  position: relative;
+}

libs/books-page/src/lib/book-actions/book-actions.component.ts

@@ -0,0 +1,12 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'bco-book-actions',
+  templateUrl: './book-actions.component.html',
+  styleUrls: ['./book-actions.component.scss'],
+})
+export class BookActionsComponent {
+  @Input() isOnSmallDevice: boolean | null = false;
+  @Output() deleteBook = new EventEmitter();
+  @Output() selectBook = new EventEmitter();
+}

libs/books-page/src/lib/books-list/books-list.component.html

@@ -3,29 +3,37 @@
     <mat-card-title>
       <h1>Books</h1>
     </mat-card-title>
+    <mat-button-toggle-group aria-label="Sort By">
+      <mat-button-toggle value="name">
+        <mat-icon>sort_by_alpha</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="earnings">
+        <mat-icon>attach_money</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+    <mat-button-toggle-group aria-label="Sort Order">
+      <mat-button-toggle value="asc">
+        <mat-icon>arrow_upward</mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="dsc">
+        <mat-icon>arrow_downward</mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
   </mat-card-header>
   <mat-card-content>
-    <mat-list>
-      <mat-list-item
-        *ngFor="let book of books"
-        (click)="select.emit(book)"
-        class="record"
-      >
-        <h3 mat-line>{{ book.name }}</h3>
-        <p mat-line>
-          {{ book.description }}
-        </p>
-        <p>
-          {{ book.earnings | currency }}
-        </p>
-        <button
+    <div *ngFor="let book of books" class="book">
+      <div class="bookHeader">
+        <h3>{{ book.name }}</h3>
+        <bco-book-actions
           *ngIf="!readonly"
-          mat-icon-button
-          (click)="delete.emit(book); $event.stopImmediatePropagation()"
-        >
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-list-item>
-    </mat-list>
+          [isOnSmallDevice]="true"
+          (selectBook)="select.emit(book)"
+          (deleteBook)="delete.emit(book)"
+        ></bco-book-actions>
+      </div>
+      <p>
+        {{ book.earnings | currency }}
+      </p>
+    </div>
   </mat-card-content>
 </mat-card>

libs/books-page/src/lib/books-list/books-list.component.scss

@@ -1,7 +1,44 @@
-mat-list-item:not(:first-of-type) {
+.book:not(:first-of-type) {
   border-top: 1px solid #efefef;
 }
 
 .symbol {
   color: #777;
 }
+
+.bookHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 72px;
+}
+
+h3 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+}
+
+bco-book-actions {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+mat-card-header {
+  position: relative;
+}
+
+mat-button-toggle-group {
+  transform: scale(0.7);
+  position: absolute;
+  top: 8px;
+}
+
+mat-button-toggle-group:first-of-type {
+  right: 100px;
+}
+
+mat-button-toggle-group:last-of-type {
+  right: -10px;
+}

libs/books-page/src/lib/books-page.module.ts

@@ -6,14 +6,17 @@ import { EffectsModule } from '@ngrx/effects';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { SharedStateBooksModule } from '@book-co/shared-state-books';
+import { BookActionsComponent } from './book-actions/book-actions.component';
 import { BookDetailComponent } from './book-detail/book-detail.component';
 import { BooksListComponent } from './books-list/books-list.component';
 import { BooksPageComponent } from './books-page/books-page.component';
 import { BooksTotalComponent } from './books-total/books-total.component';
 import { BooksApiEffects } from './book-api.effects';
-import { SharedStateBooksModule } from '@book-co/shared-state-books';
 
 @NgModule({
   imports: [
@@ -26,11 +29,14 @@ import { SharedStateBooksModule } from '@book-co/shared-state-books';
     MatCardModule,
     MatInputModule,
     MatButtonModule,
+    MatButtonToggleModule,
     MatIconModule,
     MatListModule,
+    MatMenuModule,
     SharedStateBooksModule,
   ],
   declarations: [
+    BookActionsComponent,
     BookDetailComponent,
     BooksListComponent,
     BooksPageComponent,