pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update model and remove unuse component

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-21 14:33:43 +07:00
parent 5a84d89d5d
commit baa66609ee
12 changed files with 12 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/app/app.module.ts
View file

@ -2,21 +2,13 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { FooterComponent } from './core/layout/footer.component';
import { HeaderComponent } from './core/layout/header.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ErrorInterceptor } from './core/interceptors/error.interceptor';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FooterComponent,
HeaderComponent,
AppRoutingModule,
HttpClientModule,
],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [
{
provide: HTTP_INTERCEPTORS,

4
client/src/app/core/callback/callback.component.ts
View file

@ -22,8 +22,8 @@ export class CallbackComponent implements OnInit {
if (params['email'] && params['name'] && params['picture']) {
this.userService.setAuth({
email: params['email'],
username: params['name'],
image: params['picture'],
name: params['name'],
picture: params['picture'],
});
}

9
client/src/app/core/layout/footer.component.html
View file

@ -1,9 +0,0 @@
<footer class="p-10">
<div class="container">
<a class="logo-font" routerLink="/">conduit</a>
<span class="attribution">
&copy; {{ today | date : "yyyy" }}. An interactive learning project from
<a href="https://thinkster.io">Thinkster</a>. Code licensed under MIT.
</span>
</div>
</footer>

14
client/src/app/core/layout/footer.component.ts
View file

@ -1,14 +0,0 @@
import { DatePipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-layout-footer',
templateUrl: './footer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [DatePipe, RouterLink],
standalone: true,
})
export class FooterComponent {
today: number = Date.now();
}

58
client/src/app/core/layout/header.component.html
View file

@ -1,58 +0,0 @@
<!-- nav bar with logo -->
<nav class="bg-primary">
<div class="flex items-center justify-between flex-wrap p-6">
<div class="flex items-center flex-shrink-0 text-black mr-6">
<img
class="h-20 mr-2"
src="/assets/logo.png"
alt="Tao Bin | Forth Vanding Machine"
/>
</div>
<div class="flex flex-row">
<div class="flex flex-row items-center" *ngIf="user; else login_button">
<div class="flex flex-col items-center px-5">
<span
class="flex items-center text-primary text-xl font-normal font-kanit"
>
{{ date | date : "dd MMM yyyy" }}
</span>
<span
class="flex items-center text-primary text-xl font-normal font-kanit"
>
{{ user.username }}
</span>
</div>
<div class="relative" #dropdownMenu>
<img
class="h-16 rounded-full cursor-pointer"
src="{{ user.image }}"
loading="lazy"
alt="profile picture"
(click)="toggleDropdown()"
/>
<!-- Dropdown Items -->
<div
class="absolute right-0 w-40 mt-2 py-2 bg-white rounded-md shadow-xl z-20"
*ngIf="isMenuOpen"
>
<ul>
<li>
<!-- logout button -->
<button
class="flex items-center w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900"
(click)="logout()"
>
Logout
</button>
</li>
</ul>
</div>
</div>
</div>
<ng-template #login_button>
<app-google-button></app-google-button>
</ng-template>
</div>
</div>
</nav>

60
client/src/app/core/layout/header.component.ts
View file

@ -1,60 +0,0 @@
import { DatePipe, NgIf } from '@angular/common';
import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
OnInit,
ViewChild,
} from '@angular/core';
import { User } from '../models/user.model';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service';
@Component({
selector: 'app-layout-header',
templateUrl: './header.component.html',
imports: [NgIf, GoogleButtonComponent, DatePipe],
standalone: true,
})
export class HeaderComponent implements OnInit {
user: User | null = null;
date: Date = new Date();
isMenuOpen = false;
@ViewChild('dropdownMenu') dropdownMenu: ElementRef | undefined;
constructor(
private userService: UserService,
private changeDetector: ChangeDetectorRef
) {}
ngOnInit(): void {
this.userService.currentUser.subscribe((user) => (this.user = user));
}
@HostListener('document:click', ['$event'])
handleDocumentClick(event: Event) {
if (!this.dropdownMenu) {
return;
}
const targetNode = event.target as Node;
if (this.dropdownMenu.nativeElement.contains(targetNode)) {
// Click occurred inside the dropdown, do nothing
return;
}
// Click occurred outside the dropdown, close it
this.isMenuOpen = false;
}
toggleDropdown() {
this.isMenuOpen = !this.isMenuOpen;
this.changeDetector.detectChanges();
}
logout(): void {
this.userService.logout();
}
}

6
client/src/app/core/layout/layout.component.html
View file

@ -49,7 +49,7 @@
<span
class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
>
{{ user?.username }}
{{ user?.name }}
</span>
</div>
<button
@ -61,7 +61,7 @@
<span class="sr-only">Open user menu</span>
<img
class="sm:h-10 md:h-14 rounded-full cursor-pointer"
src="{{ user?.image }}"
src="{{ user?.picture }}"
loading="lazy"
alt="profile picture"
/>
@ -74,7 +74,7 @@
>
<div class="px-4 py-3" role="none">
<p class="text-sm text-gray-900" role="none">
{{ user?.username }}
{{ user?.name }}
</p>
<p class="text-sm font-medium text-gray-900 truncate" role="none">
{{ user?.email }}

14
client/src/app/core/layout/layout.component.ts
View file

@ -1,8 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';
import { DatePipe, NgFor, NgIf } from '@angular/common';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service';
@ -20,16 +17,7 @@ interface MenuItem {
selector: 'app-layout',
templateUrl: './layout.component.html',
standalone: true,
imports: [
HeaderComponent,
FooterComponent,
SidebarComponent,
RouterModule,
NgFor,
NgIf,
GoogleButtonComponent,
DatePipe,
],
imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
})
export class LayoutComponent implements OnInit {
menuItems: MenuItem[] = [

152
client/src/app/core/layout/sidebar.component.html
View file

@ -1,152 +0,0 @@
<aside class="w-64" aria-label="Sidebar">
<div class="px-3 py-4 overflow-y-auto rounded bg-primary">
<ul class="space-y-2">
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-primary rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
<span class="ml-3">Dashboard</span>
</a>
</li>
<li>
<a
href="#"
target="_blank"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
<span
class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
>Pro</span
>
</a>
</li>
<li>
<a
href="#"
target="_blank"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
></path>
<path
d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
<span
class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
>3</span
>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Users</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Products</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
</a>
</li>
</ul>
</div>
</aside>

8
client/src/app/core/layout/sidebar.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-layout-sidebar',
templateUrl: './sidebar.component.html',
standalone: true,
})
export class SidebarComponent {}

4
client/src/app/core/models/user.model.ts
View file

@ -1,5 +1,5 @@
export interface User {
email: string;
username: string;
image: string;
name: string;
picture: string;
}

3
client/src/app/features/dashboard/dashboard.component.ts
View file

@ -3,6 +3,7 @@ import { UserService } from 'src/app/core/services/user.service';
import { HttpClient } from '@angular/common/http';
import { User } from 'src/app/core/models/user.model';
import { NgIf } from '@angular/common';
import { initFlowbite } from 'flowbite';
@Component({
selector: 'app-dashboard',
@ -16,6 +17,8 @@ export class DashboardComponent implements OnInit {
constructor(private _userService: UserService) {}
ngOnInit(): void {
initFlowbite();
this._userService.currentUser.subscribe((user) => {
this.userInfo = user;
});