diff --git a/angular.json b/angular.json index 6d6663a..a3c63ad 100644 --- a/angular.json +++ b/angular.json @@ -62,7 +62,6 @@ "development": { "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true diff --git a/package-lock.json b/package-lock.json index dc7e48c..1eb35d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@angular/router": "19.2.13", "rxjs": "7.8.2", "tslib": "2.8.1", + "uuid": "10.0.0", "zone.js": "0.15.1" }, "devDependencies": { @@ -36,6 +37,7 @@ "@babel/preset-typescript": "7.27.1", "@types/jest": "29.5.14", "@types/node": "22.15.21", + "@types/uuid": "10.0.0", "@typescript-eslint/eslint-plugin": "8.32.1", "@typescript-eslint/parser": "8.32.1", "babel-jest": "29.7.0", @@ -6165,6 +6167,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/ws": { "version": "8.18.1", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", @@ -16178,6 +16187,15 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/socks": { "version": "2.8.4", "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.4.tgz", @@ -17365,10 +17383,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "license": "MIT", "bin": { "uuid": "dist/bin/uuid" diff --git a/package.json b/package.json index f1a8b60..150821f 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@angular/platform-browser-dynamic": "19.2.13", "@angular/router": "19.2.13", "rxjs": "7.8.2", + "uuid": "10.0.0", "tslib": "2.8.1", "zone.js": "0.15.1" }, @@ -38,6 +39,7 @@ "@angular-eslint/eslint-plugin-template": "19.4.0", "@angular-eslint/schematics": "19.4.0", "@angular-eslint/template-parser": "19.4.0", + "@types/uuid": "10.0.0", "@babel/core": "7.27.1", "@babel/preset-env": "7.27.2", "@babel/preset-typescript": "7.27.1", diff --git a/src/app/app.component.scss b/src/app/app.component.scss index bd117c3..804f423 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -34,6 +34,8 @@ header { a { color: inherit; text-decoration: none; + display: block; + width: 100%; } } } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 9ede28a..e136612 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -3,6 +3,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatToolbarModule } from '@angular/material/toolbar'; import { BrowserModule } from '@angular/platform-browser'; +import { MatIconModule } from '@angular/material/icon'; import { provideAnimations } from '@angular/platform-browser/animations'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; @@ -11,10 +12,13 @@ import { VERSION as MAT_VERSION, MatNativeDateModule, } from '@angular/material/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { MatCardModule } from '@angular/material/card'; console.info('Angular CDK version', CDK_VERSION.full); console.info('Angular Material version', MAT_VERSION.full); @@ -25,13 +29,19 @@ export const appConfig: ApplicationConfig = { provideRouter(routes), importProvidersFrom( BrowserModule, + DragDropModule, + FormsModule, + ReactiveFormsModule, + MatCardModule, MatSidenavModule, MatToolbarModule, MatButtonModule, + MatDialogModule, MatNativeDateModule, - FormsModule, MatFormFieldModule, MatSelectModule, + MatInputModule, + MatIconModule, MatInputModule ), provideAnimations(), diff --git a/src/app/components/kanban/components/todo-list/todo-list.component.html b/src/app/components/kanban/components/todo-list/todo-list.component.html new file mode 100644 index 0000000..ea9e8e3 --- /dev/null +++ b/src/app/components/kanban/components/todo-list/todo-list.component.html @@ -0,0 +1,6 @@ +

{{ title }}

+ + diff --git a/src/app/components/kanban/components/todo-list/todo-list.component.scss b/src/app/components/kanban/components/todo-list/todo-list.component.scss new file mode 100644 index 0000000..ab58264 --- /dev/null +++ b/src/app/components/kanban/components/todo-list/todo-list.component.scss @@ -0,0 +1,4 @@ +:host { + height: 100%; + flex: 1; +} diff --git a/src/app/components/kanban/components/todo-list/todo-list.component.spec.ts b/src/app/components/kanban/components/todo-list/todo-list.component.spec.ts new file mode 100644 index 0000000..906be65 --- /dev/null +++ b/src/app/components/kanban/components/todo-list/todo-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoListComponent } from './todo-list.component'; + +describe('TodoListComponent', () => { + let component: TodoListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/kanban/components/todo-list/todo-list.component.ts b/src/app/components/kanban/components/todo-list/todo-list.component.ts new file mode 100644 index 0000000..095e05e --- /dev/null +++ b/src/app/components/kanban/components/todo-list/todo-list.component.ts @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { TodostWrapperComponent } from '../todos-wrapper/todos-wrapper.component'; +import { Todo } from '../../model/todo'; + +@Component({ + selector: 'app-todo-list', + standalone: true, + imports: [TodostWrapperComponent], + templateUrl: './todo-list.component.html', + styleUrl: './todo-list.component.scss', +}) +export class TodoListComponent { + @Input() title!: string; + @Input() identifier!: string; + @Input() todos!: Todo[]; + + @Output() updatedList = new EventEmitter(); + + updateList(event: Todo[]): void { + this.updatedList.emit(event); + } +} diff --git a/src/app/components/kanban/components/todo/todo.component.html b/src/app/components/kanban/components/todo/todo.component.html new file mode 100644 index 0000000..1e3d269 --- /dev/null +++ b/src/app/components/kanban/components/todo/todo.component.html @@ -0,0 +1,9 @@ + + + + {{ todo.title }} + {{ todo.createAt | date: 'long' }} + + + >{{ todo.description }} + diff --git a/src/app/components/kanban/components/todo/todo.component.scss b/src/app/components/kanban/components/todo/todo.component.scss new file mode 100644 index 0000000..27b17fd --- /dev/null +++ b/src/app/components/kanban/components/todo/todo.component.scss @@ -0,0 +1,26 @@ +.todo { + width: 100%; + height: 150px; + border: solid 1px #ccc; + color: rgba(0, 0, 0, 0.87); + cursor: move; + display: flex; + // justify-content: center; + // align-items: center; + // text-align: center; + background: #fff; + border-radius: 4px; + position: relative; + z-index: 1; + transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); + &:active { + box-shadow: + 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + } +} diff --git a/src/app/components/kanban/components/todo/todo.component.spec.ts b/src/app/components/kanban/components/todo/todo.component.spec.ts new file mode 100644 index 0000000..03ab9d7 --- /dev/null +++ b/src/app/components/kanban/components/todo/todo.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoComponent } from './todo.component'; + +describe('TodoComponent', () => { + let component: TodoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TodoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it.skip('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/kanban/components/todo/todo.component.ts b/src/app/components/kanban/components/todo/todo.component.ts new file mode 100644 index 0000000..93bc69d --- /dev/null +++ b/src/app/components/kanban/components/todo/todo.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from '@angular/core'; +import { Todo } from '../../model/todo'; +import { MatCardModule } from '@angular/material/card'; +import { DatePipe } from '@angular/common'; +import { CdkDrag } from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'app-todo', + standalone: true, + imports: [CdkDrag, DatePipe, MatCardModule], + templateUrl: './todo.component.html', + styleUrl: './todo.component.scss', +}) +export class TodoComponent { + @Input() todo!: Todo; +} diff --git a/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.html b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.html new file mode 100644 index 0000000..90fb910 --- /dev/null +++ b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.html @@ -0,0 +1,9 @@ +
+ @for (todo of todos; track todo) { + + } +
diff --git a/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.scss b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.scss new file mode 100644 index 0000000..f449239 --- /dev/null +++ b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.scss @@ -0,0 +1,12 @@ +:host { + display: block; + height: 90%; + background-color: beige; + border-radius: 1em; + .todo-container { + height: 100%; + display: flex; + flex-direction: column; + gap: 1em; + } +} diff --git a/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.spec.ts b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.spec.ts new file mode 100644 index 0000000..5508edf --- /dev/null +++ b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodostWrapperComponent } from './todos-wrapper.component'; + +describe('TodoListWrapperComponent', () => { + let component: TodostWrapperComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodostWrapperComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TodostWrapperComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.ts b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.ts new file mode 100644 index 0000000..2039560 --- /dev/null +++ b/src/app/components/kanban/components/todos-wrapper/todos-wrapper.component.ts @@ -0,0 +1,27 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { TodoComponent } from '../todo/todo.component'; +import { Todo } from '../../model/todo'; +import { + CdkDragDrop, + CdkDropList, + moveItemInArray, +} from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'app-todos-wrapper', + standalone: true, + imports: [CdkDropList, TodoComponent], + templateUrl: './todos-wrapper.component.html', + styleUrl: './todos-wrapper.component.scss', +}) +export class TodostWrapperComponent { + @Input() identifier!: string; + @Input() todos!: Todo[]; + + @Output() updatedList = new EventEmitter(); + + drop(event: CdkDragDrop) { + moveItemInArray(this.todos, event.previousIndex, event.currentIndex); + this.updatedList.emit(this.todos); + } +} diff --git a/src/app/components/kanban/form/todo-form.component.html b/src/app/components/kanban/form/todo-form.component.html new file mode 100644 index 0000000..fc8e3d5 --- /dev/null +++ b/src/app/components/kanban/form/todo-form.component.html @@ -0,0 +1,27 @@ +

Crear una tarefa

+ +
+ + Título + + + + + Descrición da tarefa + + +
+ + + + + diff --git a/src/app/components/kanban/form/todo-form.component.scss b/src/app/components/kanban/form/todo-form.component.scss new file mode 100644 index 0000000..b3c00ee --- /dev/null +++ b/src/app/components/kanban/form/todo-form.component.scss @@ -0,0 +1,14 @@ +.task-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.title, +.description { + width: 100%; +} + +mat-dialog-actions { + justify-content: end; +} diff --git a/src/app/components/kanban/form/todo-form.component.spec.ts b/src/app/components/kanban/form/todo-form.component.spec.ts new file mode 100644 index 0000000..d06f742 --- /dev/null +++ b/src/app/components/kanban/form/todo-form.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoFormComponent } from './todo-form.component'; + +describe('TodoFormComponent', () => { + let component: TodoFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoFormComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TodoFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it.skip('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/kanban/form/todo-form.component.ts b/src/app/components/kanban/form/todo-form.component.ts new file mode 100644 index 0000000..e734c6f --- /dev/null +++ b/src/app/components/kanban/form/todo-form.component.ts @@ -0,0 +1,46 @@ +import { Component, inject } from '@angular/core'; +import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { + MatDialogActions, + MatDialogClose, + MatDialogContent, + MatDialogRef, + MatDialogTitle, +} from '@angular/material/dialog'; +import { MatInputModule } from '@angular/material/input'; + +// interface DialogData { +// title?: string | null | undefined; +// description?: string | null | undefined; +// } + +@Component({ + selector: 'app-todo-form', + standalone: true, + imports: [ + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatDialogClose, + MatButtonModule, + MatInputModule, + ReactiveFormsModule, + ], + templateUrl: './todo-form.component.html', + styleUrl: './todo-form.component.scss', +}) +export class TodoFormComponent { + fb: FormBuilder = inject(FormBuilder); + + form = this.fb.group({ + title: ['', { validators: [Validators.required] }], + description: ['', { validators: [Validators.required] }], + }); + + constructor(public dialogRef: MatDialogRef) {} + + saveData(): void { + this.dialogRef.close(this.form.value); + } +} diff --git a/src/app/components/kanban/kanban.component.html b/src/app/components/kanban/kanban.component.html index bac2c12..92a09fd 100644 --- a/src/app/components/kanban/kanban.component.html +++ b/src/app/components/kanban/kanban.component.html @@ -1 +1,29 @@ -

kanban works!

+

Tasks list

+ +
+ + + + + +
+ + diff --git a/src/app/components/kanban/kanban.component.scss b/src/app/components/kanban/kanban.component.scss index e69de29..8a698a7 100644 --- a/src/app/components/kanban/kanban.component.scss +++ b/src/app/components/kanban/kanban.component.scss @@ -0,0 +1,21 @@ +:host { + display: block; + height: 100%; +} +.container { + width: 90%; + margin: 0 auto; + height: 90%; + + display: flex; + gap: 2em; + + app-todo-list { + flex: 1 1 calc(100% / 3); + } +} +.add { + position: absolute; + top: 1em; + right: 1em; +} diff --git a/src/app/components/kanban/kanban.component.ts b/src/app/components/kanban/kanban.component.ts index 171e5a0..02a2197 100644 --- a/src/app/components/kanban/kanban.component.ts +++ b/src/app/components/kanban/kanban.component.ts @@ -1,12 +1,52 @@ -import { Component } from '@angular/core'; +import { + CdkDrag, + CdkDragPlaceholder, + CdkDropList, + CdkDropListGroup, +} from '@angular/cdk/drag-drop'; +import { Component, inject, OnInit } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialog } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { TodoFormComponent } from './form/todo-form.component'; +import { Todo } from './model/todo'; +import { TodosService } from './services/todos.service'; +import { TodoListComponent } from './components/todo-list/todo-list.component'; @Component({ selector: 'app-kanban', standalone: true, - imports: [], + imports: [ + CdkDrag, + CdkDropListGroup, + CdkDropList, + CdkDragPlaceholder, + MatButtonModule, + MatIconModule, + TodoListComponent, + ], templateUrl: './kanban.component.html', - styleUrl: './kanban.component.scss' + styleUrl: './kanban.component.scss', }) -export class KanbanComponent { +export class KanbanComponent implements OnInit { + pedingtodos: Todo[] = []; + activetodos: Todo[] = []; + donetodos: Todo[] = []; + private readonly dialog = inject(MatDialog); + private readonly todoService = inject(TodosService); + ngOnInit(): void { + this.pedingtodos = this.todoService.pedingtodos; + } + + addTodo() { + const dialogRef = this.dialog.open(TodoFormComponent); + dialogRef.afterClosed().subscribe((todo: Todo) => { + if (todo) this.todoService.saveTodo(todo); + }); + } + + updateList(event: Todo[]) { + this.todoService.saveTodosList(event); + } } diff --git a/src/app/components/kanban/model/dummy-board.data.ts b/src/app/components/kanban/model/dummy-board.data.ts deleted file mode 100644 index 8ced704..0000000 --- a/src/app/components/kanban/model/dummy-board.data.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { KanbanBoard } from './kanban-board.data'; - -const toDoColumn = { - id: 1, - title: 'Pendente', - tasks: [ - { id: 4, description: 'Configurar os Drags e DropLists.' }, - { id: 5, description: 'Engadir métodos para procesar as accións.' }, - { id: 6, description: 'Amosar estilos e animacións.' }, - { id: 7, description: 'Converter accións en comandos.' }, - ], -}; - -const inProgressColumn = { - id: 2, - title: 'En Proceso', - tasks: [ - { id: 2, description: 'Engadir material cdk.' }, - { id: 3, description: 'Explicar elementos básicos do Drag & Drop.' }, - ], -}; - -const completedColumn = { - id: 3, - title: 'Completadas', - tasks: [{ id: 1, description: 'Crear a estrutura básica da aplicación.' }], -}; - -export const dummyBoard: KanbanBoard = { - lists: [toDoColumn, inProgressColumn, completedColumn], -}; diff --git a/src/app/components/kanban/model/kanban-board.data.ts b/src/app/components/kanban/model/kanban-board.data.ts deleted file mode 100644 index 0967934..0000000 --- a/src/app/components/kanban/model/kanban-board.data.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { KanbanList } from './kanban-list.insterface'; - -export interface KanbanBoard { - lists: KanbanList[]; -} diff --git a/src/app/components/kanban/model/kanban-board.interface.ts b/src/app/components/kanban/model/kanban-board.interface.ts deleted file mode 100644 index 1dd0af6..0000000 --- a/src/app/components/kanban/model/kanban-board.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { KanbanList } from "./kanban-list.insterface"; - -export interface KanbanBoard { - lists: KanbanList[]; -} diff --git a/src/app/components/kanban/model/kanban-list.insterface.ts b/src/app/components/kanban/model/kanban-list.insterface.ts deleted file mode 100644 index 6afa243..0000000 --- a/src/app/components/kanban/model/kanban-list.insterface.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { KanbanTask } from './kanban-task.interface'; - -export interface KanbanList { - id: number; - title: string; - tasks: KanbanTask[]; -} diff --git a/src/app/components/kanban/model/kanban-task.interface.ts b/src/app/components/kanban/model/kanban-task.interface.ts deleted file mode 100644 index da3b33a..0000000 --- a/src/app/components/kanban/model/kanban-task.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface KanbanTask { - id: number; - description: string; -} diff --git a/src/app/components/kanban/model/todo.ts b/src/app/components/kanban/model/todo.ts new file mode 100644 index 0000000..9462b12 --- /dev/null +++ b/src/app/components/kanban/model/todo.ts @@ -0,0 +1,13 @@ +export interface Todo { + uid: string; + title: string; + description: string; + createAt: number; + status: TodoStatusEnum; +} + +export enum TodoStatusEnum { + PENDING = 'pending', + ACTIVE = 'active', + DONE = 'done', +} diff --git a/src/app/components/kanban/services/kanban-state.service.ts b/src/app/components/kanban/services/kanban-state.service.ts deleted file mode 100644 index c75263e..0000000 --- a/src/app/components/kanban/services/kanban-state.service.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Injectable } from '@angular/core'; -import { dummyBoard } from '../model/dummy-board.data'; -import { KanbanBoard } from '../model/kanban-board.data'; - -@Injectable() -export class KanbanStateService { - public board: KanbanBoard = dummyBoard; - - constructor() {} - /* - updateListTitle(list: KanbanList, newTitle: string): void { - list.title = newTitle; - } - - moveList(fromIndex: number, toIndex: number): void { - moveItemInArray(this.board.lists, fromIndex, toIndex); - } - - removeList(listToRemove: KanbanList): void { - this.board.lists = this.board.lists.filter((list) => list !== listToRemove); - } - - addTaskToList(list: KanbanList): void { - list.tasks.push(KanbanTaskFactory.createDefault()); - } - - removeTaskFromList(list: KanbanList, taskIndex: number): void { - list.tasks.splice(taskIndex, 1); - } - - updateTask(task: KanbanTask, newDescription: string): void { - task.description = newDescription; - } - - reorderTask(list: KanbanList, fromIndex: number, toIndex: number): void { - moveItemInArray(list.tasks, fromIndex, toIndex); - } - - transferTask({ - fromList, - toList, - fromIndex, - toIndex, - }: TransferTaskData): void { - transferArrayItem(fromList.tasks, toList.tasks, fromIndex, toIndex); - } - */ -} diff --git a/src/app/components/kanban/services/todos.service.ts b/src/app/components/kanban/services/todos.service.ts new file mode 100644 index 0000000..e32ad1a --- /dev/null +++ b/src/app/components/kanban/services/todos.service.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { Todo, TodoStatusEnum } from '../model/todo'; +import * as uuid from 'uuid'; +@Injectable({ + providedIn: 'root', +}) +export class TodosService { + TODOS_KEY = 'TODOS'; + _todos: Todo[] = []; + + constructor() { + this._todos = JSON.parse( + window.localStorage.getItem(this.TODOS_KEY) || '[]' + ); + } + + get pedingtodos() { + return this._todos.filter(todo => todo.status === TodoStatusEnum.PENDING); + } + + saveTodo(data: { title: string; description: string }) { + const todo: Todo = { + ...data, + uid: uuid.v4(), + createAt: new Date().getTime(), + status: TodoStatusEnum.PENDING, + }; + this._todos.push(todo); + window.localStorage.setItem(this.TODOS_KEY, JSON.stringify(this._todos)); + } + + saveTodosList(todos: Todo[]): void { + console.log(this._todos, todos); + this._todos = this._todos.filter(todo => !todos.includes(todo)); + this._todos.push(...todos); + window.localStorage.setItem(this.TODOS_KEY, JSON.stringify(this._todos)); + } +} diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index 7dd8b47..c0ec1db 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -1 +1,31 @@ -

table works!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{ element.position }}Name{{ element.name }}Weight{{ element.weight }}Symbol{{ element.symbol }}
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts index d18fdfb..813b7e2 100644 --- a/src/app/components/table/table.component.ts +++ b/src/app/components/table/table.component.ts @@ -1,11 +1,34 @@ import { Component } from '@angular/core'; +import { MatTableModule } from '@angular/material/table'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, + { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, + { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, + { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, + { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, + { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, + { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, + { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, + { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, + { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, +]; @Component({ - selector: 'app-table', - templateUrl: './table.component.html', - styleUrls: ['./table.component.scss'], - standalone: true + selector: 'app-table', + templateUrl: './table.component.html', + styleUrls: ['./table.component.scss'], + standalone: true, + imports: [MatTableModule], }) export class TableComponent { - + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; }