adding faulty rebase

angular.json

@@ -9,6 +9,7 @@
     "kharchay-e2e": "apps/kharchay-e2e",
     "mobile-create-data-access": "libs/mobile/create/data-access",
     "mobile-create-feature": "libs/mobile/create/feature",
-    "mobile-create-ui": "libs/mobile/create/ui"
+    "mobile-create-ui": "libs/mobile/create/ui",
+    "mobile-shared-ui-new": "libs/mobile/shared/ui/new"
   }
 }

apps/admin/src/app/home/dashboard/dashboard.component.html

@@ -1,44 +1,45 @@
-<mat-drawer-container class="container" autosize>
-  <mat-drawer #drawer class="sidenav">
-    <button color="primary" mat-button routerLink="/home" >Home</button>
-    <button color="primary" mat-button routerLink="/home/recurring" >Recurring</button>
-    <button color="primary" mat-button routerLink="/home/events" >Events</button>
-    <button color="primary" mat-button routerLink="/home/reports" >Reports</button>
-    <button color="primary" mat-button (click)="logout()">Logout</button>
-
-  </mat-drawer>
-
-  <div class="sidenav-content">
-
-    <mat-toolbar color="primary">
-
-      <mat-toolbar-row>
-        <button mat-icon-button (click)="drawer.toggle()">
-          <mat-icon>menu</mat-icon>
-        </button>
-
-        <span *ngIf="title$ | async as title">{{ title }}</span>
-
-        <span class="spacer"></span>
-
-      </mat-toolbar-row>
-
-    </mat-toolbar>
-
-    <div *ngIf="querying$ | async as loading">
-      <mat-progress-bar  mode="indeterminate"></mat-progress-bar>
-    </div>
-
-
-    <ul class="breadcrumbs">
-      <li class="breadcrumb" *ngFor="let crumb of crumbs">
-        <a [routerLink]="crumb.path">{{ crumb.label }}</a>
-      </li>
-    </ul>
-
-
-    <router-outlet></router-outlet>
-
+<div class="admin-container">
+  <mat-toolbar color="primary">
+    <mat-toolbar-row>
+      <!-- <button mat-icon-button (click)="toggleNav()"> -->
+      <button mat-icon-button (click)="snav.toggle()">
+        <mat-icon>menu</mat-icon>
+      </button>
+
+      <span *ngIf="title$ | async as title">{{ title }}</span>
+
+      <span class="spacer"></span>
+    </mat-toolbar-row>
+  </mat-toolbar>
+  <div *ngIf="querying$ | async as loading">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </div>
 
-</mat-drawer-container>
+  <mat-sidenav-container
+    class="example-sidenav-container"
+    *ngIf="media$ | async as media"
+  >
+    <mat-sidenav #snav opened [mode]="media.matches ? 'over' : 'side'">
+      <mat-nav-list>
+        <a color="primary" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mat-list-item routerLink="/home">Home</a>
+        <a color="primary" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"  mat-list-item routerLink="/home/recurring">
+          Recurring
+        </a>
+        <a color="primary" routerLinkActive="active" mat-list-item routerLink="/home/events">Events</a>
+        <a color="primary" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" mat-list-item routerLink="/home/reports">
+          Reports
+        </a>
+        <a color="primary" mat-list-item (click)="logout()">Logout</a>
+      </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-sidenav-content>
+      <ul class="breadcrumbs">
+        <li class="breadcrumb" *ngFor="let crumb of crumbs">
+          <a [routerLink]="crumb.path">{{ crumb.label }}</a>
+        </li>
+      </ul>
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>

apps/admin/src/app/home/dashboard/dashboard.component.scss

@@ -1,18 +1,22 @@
-.container{
+.admin-container{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
+  display: flex;
+  position:absolute;
+  flex-direction: column;
+}
 
-  .mat-drawer{
-    min-width: 200px;
+.active {
+  background-color: rgba(0, 0, 0, 0.04)
+}
 
-    .mat-button{
-      width: 100%;
-      text-align: left;
-    }
-  }
+.example-sidenav-container {
+  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
+     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
+  flex: 1;
 }
 
 .breadcrumbs {
@@ -37,4 +41,4 @@
       }
     }
   }
-}
+}

apps/admin/src/app/home/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { AfterContentInit, Component, OnInit, ViewChild } from '@angular/core';
 import { Auth } from "@angular/fire/auth";
-import { MatDrawer } from '@angular/material/sidenav';
+import { MatSidenav } from '@angular/material/sidenav';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -15,32 +16,40 @@ import { GeneralService } from '../../shared/general.service';
 })
 export class DashboardComponent implements OnInit, AfterContentInit{
 
-  @ViewChild(MatDrawer, {static: true}) drawer!: MatDrawer;
+  @ViewChild(MatSidenav, {static: false}) snav!: MatSidenav;
 
   querying$ = this.gs.querying;
 
-  title$!: Observable<string>;
+  protected title$!: Observable<string>;
   crumbs: any;
+  media$ = this.breakpointObserver.observe([
+    Breakpoints.XSmall
+  ])
+
+  #test = false
 
   constructor(
     private firebase: Auth,
     private router: Router,
     route: ActivatedRoute,
     private breadcrumbsService: BreadcrumbsService,
-    public gs: GeneralService) {
+    public gs: GeneralService,
+    private breakpointObserver: BreakpointObserver) {
 
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd),
       map(() => route)
-    ).subscribe((resp:ActivatedRoute) => {
-      this.drawer.close()
-    })
+    )
+   // .subscribe((resp:ActivatedRoute) => {
+    //   this.snav.close()
+    // })
 
   }
   ngAfterContentInit(): void {
     this.title$ = this.gs.title;
+    console.log(this)
   }
-  
+
   ngOnInit() {
     this.breadcrumbsService.breadcrumbs$.subscribe(x => {
       this.crumbs = x;

apps/admin/src/app/home/home.module.ts

@@ -9,6 +9,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatButtonModule } from "@angular/material/button";
 import {MatProgressBarModule} from '@angular/material/progress-bar';
+import { MatListModule } from '@angular/material/list'
 
 
 
@@ -21,7 +22,8 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
     MatIconModule,
     MatSidenavModule,
     MatButtonModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    MatListModule
   ]
 })
 export class HomeModule { }

apps/admin/src/app/recurring/edit-dialog/edit-dialog.component.html

@@ -32,7 +32,12 @@ <h1 mat-dialog-title>New Task Form</h1>
     </mat-form-field> -->
 
     <div>
-      <mat-checkbox formControlName="fixed">Fixed </mat-checkbox>
+
+      <mat-slide-toggle formControlName="fixed">Fixed</mat-slide-toggle>
+    </div>
+
+    <div>
+      <mat-slide-toggle formControlName="active">Active</mat-slide-toggle>
     </div>
   </form>
 
@@ -43,4 +48,4 @@ <h1 mat-dialog-title>New Task Form</h1>
   <button mat-raised-button color="primary" (click)="add()" [disabled]="form.invalid">
     {{ data.note ? 'Update' : 'Add' }}
   </button>
-</div>
+</div>

apps/admin/src/app/recurring/edit-dialog/edit-dialog.component.ts

@@ -10,6 +10,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 export class EditDialogComponent implements OnInit {
 
   loading = false
+  protected test = true
 
   form!: UntypedFormGroup;
 
@@ -28,7 +29,9 @@ export class EditDialogComponent implements OnInit {
         category: [category],
         subCategory: [category && category.subCategory || ''],
       }),
-      fixed: [fixed || false]
+      fixed: [fixed || false],
+      active: [false],
+      disabled: []
     })
   }
 

apps/admin/src/app/recurring/recurring-list/recurring-list.component.html

@@ -14,7 +14,18 @@
 
     <ng-container matColumnDef="fixed">
       <th mat-header-cell *matHeaderCellDef>Fixed</th>
-      <td mat-cell *matCellDef="let element">{{ element.fixed }}</td>
+      <td mat-cell *matCellDef="let element">
+        <mat-slide-toggle disabled [checked]="element.fixed"></mat-slide-toggle>
+      </td>
+
+    </ng-container>
+
+    <ng-container matColumnDef="active">
+      <th mat-header-cell *matHeaderCellDef>Active</th>
+      <td mat-cell *matCellDef="let element">
+        <mat-slide-toggle disabled [checked]="element.active"></mat-slide-toggle>
+      </td>
+
     </ng-container>
 
     // Edit Column
@@ -33,10 +44,12 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row, columns: displayedColumns"></tr>
   </table>
+
+  <a routerLink="tasks">Go To Tasks</a>
 
   <section class="fixed right-4 bottom-4">
     <button mat-fab color="primary" (click)="presentEditModal({})">
       <mat-icon>add</mat-icon>
     </button>
   </section>
-</div>
+</div>

apps/admin/src/app/recurring/recurring-list/recurring-list.component.ts

@@ -12,6 +12,7 @@ export interface Task {
   fixed: boolean;
   note: string;
   price: number;
+  enabled: boolean;
 }
 
 @Component({
@@ -21,7 +22,7 @@ export interface Task {
 })
 export class RecurringListComponent implements OnInit {
 
-  displayedColumns: string[] = ['note', 'price', 'fixed', 'edit'];
+  displayedColumns: string[] = ['note', 'price', 'fixed', 'active', 'edit'];
   dataSource!: Observable<any>; 
 
   recurringColl = collection(this.afs, 'recurring')
@@ -34,10 +35,7 @@ export class RecurringListComponent implements OnInit {
 
   ngOnInit() {
     this.gs.title.next('Recurring');
-    setTimeout(() => {
-
-      this.dataSource = this.checkRecurring();
-    }, 1000);
+    this.dataSource = this.checkRecurring();
   }
 
   checkRecurring() {
@@ -61,6 +59,8 @@ export class RecurringListComponent implements OnInit {
       data: item
     })
 
+    console.log(dialogRef.componentInstance)
+
     dialogRef.afterClosed().subscribe(async result => {
       console.log(result);
       if(result) {

apps/admin/src/app/recurring/recurring-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { RecurringListComponent } from './recurring-list/recurring-list.component';
+import {TaskListComponent} from './task-list/task-list.component';
 
 
 const routes: Routes = [
@@ -10,6 +11,13 @@ const routes: Routes = [
     data: {
       title: 'Recurring Tasks'
     }
+  },
+  {
+    path: 'tasks',
+    component: TaskListComponent,
+    data: {
+      title: 'Recurring Tasks'
+    }
   }
 ];
 

apps/admin/src/app/recurring/recurring.module.ts

@@ -17,10 +17,12 @@ import { RecurringListComponent } from './recurring-list/recurring-list.componen
 import { FirestoreModule } from '@angular/fire/firestore';
 import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
 import { ComponentsModule } from '../components/components.module';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {TaskListComponent} from './task-list/task-list.component';
 
 
 @NgModule({
-    declarations: [RecurringListComponent, EditDialogComponent],
+    declarations: [RecurringListComponent, EditDialogComponent, TaskListComponent],
     imports: [
         CommonModule,
         ReactiveFormsModule,
@@ -34,7 +36,8 @@ import { ComponentsModule } from '../components/components.module';
         MatCheckboxModule,
         MatSelectModule,
         FirestoreModule,
-        ComponentsModule
+        ComponentsModule,
+        MatSlideToggleModule
     ]
 })
 export class RecurringModule { }

apps/admin/src/app/recurring/task-list/task-list.component.html

@@ -0,0 +1,8 @@
+
+<ol>
+  <li *ngFor="let task of tasks$ | async">
+    <small>Note:{{ task.note }}</small> Active: {{ task.active}}
+    <small>{{ task.date | date }}</small>
+    <button mat-raised-button (click)="delete(task)">Delete</button>
+  </li>
+</ol>