Skip to content

Commit 976166f

Browse files
misicodemisicode
committed
feat: add create news page component
1 parent c007455 commit 976166f

10 files changed

+113
-12
lines changed

‎src/app/core/guards/is-authenticated.guard.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const isAuthenticatedGuard: CanActivateFn = (route, state) => {
1414
isAuthenticated = authStatus;
1515
}
1616
});
17-
17+
1818
if(isAuthenticated) {
1919
return true;
2020
}

‎src/app/pages/user/create-news-page/create-news-page.component.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<div class="bg-indigo-700 px-16 py-4 text-sms text-white">
2+
<h2>Crear Noticia</h2>
3+
</div>
4+
<div class="bg-white border-b-2 border-indigo-100 border-solid font-medium px-16 py-3 text-slate-700 text-xss">
5+
Inicio / <a routerLink="/user/news">Noticias</a> / <a routerLink="/user/news/create">Nuevo</a>
6+
</div>
7+
<section>
8+
<form enctype="multipart/form-data">
9+
<div class="card gap-x-8 grid grid-cols-[2fr,_1fr]">
10+
<div class="gap-y-8 grid">
11+
<div>
12+
<label for="title">
13+
Título
14+
</label>
15+
<div class="input-item-box">
16+
<input
17+
class="input-item"
18+
id="title"
19+
name="title"
20+
type="text"
21+
/>
22+
</div>
23+
</div>
24+
<div>
25+
<label for="content">
26+
Contenido
27+
</label>
28+
<div class="input-item-box">
29+
<textarea
30+
class="input-item resize-none"
31+
id="content"
32+
name="content"
33+
rows="10"
34+
></textarea>
35+
</div>
36+
<p class="mt-1.5 text-right text-xsvs">
37+
Ingrese como máximo 2500 caracteres
38+
</p>
39+
</div>
40+
</div>
41+
<div class="grid grid-rows-[auto,_1fr]">
42+
<label for="file-upload">
43+
Imagen
44+
</label>
45+
<label class="!border-dashed !border-slate-200 cursor-pointer flex flex-col hover:!border-indigo-700 input-item-box items-center justify-center relative text-smvs" for="file-upload" id="file-drop-area">
46+
<input
47+
accept="image/jpeg, image/png"
48+
(change)="onImageChange($event)"
49+
class="sr-only"
50+
id="file-upload"
51+
name="file-upload"
52+
type="file"
53+
/>
54+
<img class="absolute block max-h-[90%] max-w-[90%]" id="file-img" [src]="imageUrl" alt="" />
55+
<svg class="h-12 mb-2 text-slate-300 w-12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
56+
<path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
57+
</svg>
58+
<span>Sube una imagen o suéltala aquí</span>
59+
<span class="mt-1 text-xss">JPG o PNG hasta 5MB</span>
60+
</label>
61+
</div>
62+
</div>
63+
<div class="mt-6 text-right">
64+
<a routerLink="/user/news">
65+
<button type="button" class="btn-cancel">
66+
Cancelar
67+
</button>
68+
</a>
69+
<button type="submit" class="btn-success">
70+
Guardar
71+
</button>
72+
</div>
73+
</form>
74+
</section>

‎src/app/pages/user/create-news-page/create-news-page.component.scss

Whitespace-only changes.

‎src/app/pages/user/create-news-page/create-news-page.component.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "user-create-news-page",
5+
templateUrl: "./create-news-page.component.html",
6+
styleUrl: "./create-news-page.component.scss",
7+
})
8+
export class CreateNewsPageComponent {
9+
public imageUrl: string = "";
10+
11+
onImageChange(event: Event) {
12+
const inputElement = event.target as HTMLInputElement;
13+
14+
if(inputElement.files && inputElement.files.length > 0) {
15+
const file = inputElement.files[0];
16+
this.imageUrl = URL.createObjectURL(file);
17+
}
18+
}
19+
}

‎src/app/pages/user/news-page/news-page.component.html renamed to ‎src/app/pages/user/list-news-page/list-news-page.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h2>Mis Noticias</h2>
66
</div>
77
<section class="gap-y-10 grid">
88
<div class="mb-8 text-right">
9-
<a>
9+
<a routerLink="/user/news/create">
1010
<button class="btn-success">
1111
Nuevo
1212
</button>

‎src/app/pages/user/news-page/news-page.component.scss renamed to ‎src/app/pages/user/list-news-page/list-news-page.component.scss

File renamed without changes.

‎src/app/pages/user/news-page/news-page.component.ts renamed to ‎src/app/pages/user/list-news-page/list-news-page.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { UserService } from "../../../core/services/user.service";
55
import { News } from "../../../core/interfaces/news.interface";
66

77
@Component({
8-
selector: "user-news-page",
9-
templateUrl: "./news-page.component.html",
10-
styleUrl: "./news-page.component.scss",
8+
selector: "user-list-news-page",
9+
templateUrl: "./list-news-page.component.html",
10+
styleUrl: "./list-news-page.component.scss",
1111
})
12-
export class NewsPageComponent implements OnInit {
12+
export class ListNewsPageComponent implements OnInit {
1313
public listNews: News[] = [];
1414

1515
constructor(

‎src/app/pages/user/user-routing.module.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33

4-
import { NewsPageComponent } from "./news-page/news-page.component";
4+
import { CreateNewsPageComponent } from "./create-news-page/create-news-page.component";
5+
import { ListNewsPageComponent } from "./list-news-page/list-news-page.component";
56
import { ProfilePageComponent } from "./profile-page/profile-page.component";
67

78
import { isAuthenticatedGuard } from "../../core/guards/is-authenticated.guard";
@@ -15,8 +16,13 @@ const routes: Routes = [
1516
{
1617
path: "news",
1718
canActivate: [ isAuthenticatedGuard ],
18-
component: NewsPageComponent
19-
}
19+
component: ListNewsPageComponent
20+
},
21+
{
22+
path: "news/create",
23+
canActivate: [ isAuthenticatedGuard ],
24+
component: CreateNewsPageComponent
25+
},
2026
];
2127

2228
@NgModule({

‎src/app/pages/user/user.module.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { CommonModule } from "@angular/common";
33
import { ReactiveFormsModule } from "@angular/forms";
44
import { NgxSkeletonLoaderModule } from "ngx-skeleton-loader";
55

6-
import { NewsPageComponent } from "./news-page/news-page.component";
6+
import { CreateNewsPageComponent } from "./create-news-page/create-news-page.component";
7+
import { ListNewsPageComponent } from "./list-news-page/list-news-page.component";
78
import { ProfilePageComponent } from "./profile-page/profile-page.component";
89

910
import { UserRoutingModule } from "./user-routing.module";
1011

1112
@NgModule({
1213
declarations: [
13-
NewsPageComponent,
14+
CreateNewsPageComponent,
15+
ListNewsPageComponent,
1416
ProfilePageComponent,
1517
],
1618
imports: [

‎src/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ section {
1212
padding: 3rem 4rem;
1313
}
1414
.btn-cancel {
15-
@apply bg-slate-200;
15+
@apply bg-slate-400;
1616
margin-right: .5rem;
1717
&:hover {
1818
@apply bg-slate-300;

0 commit comments

Comments
 (0)