npx prettier 'src/**/*.{js,ts,mjs,cjs,json,scss,html}' --write

rbuj-UOC · Jan 28, 2025 · 8f6f566 · 8f6f566
1 parent 32e8de5
commit 8f6f566
Show file tree

Hide file tree

Showing 12 changed files with 205 additions and 100 deletions.
diff --git a/PAC7_Ex_Prac/ecommerce/.prettierrc.json b/PAC7_Ex_Prac/ecommerce/.prettierrc.json
@@ -10,5 +10,6 @@
         "parser": "angular"
       }
     }
-  ]
+  ],
+  "plugins": ["@awmottaz/prettier-plugin-void-html"]
 }
diff --git a/PAC7_Ex_Prac/ecommerce/package-lock.json b/PAC7_Ex_Prac/ecommerce/package-lock.json
diff --git a/PAC7_Ex_Prac/ecommerce/package.json b/PAC7_Ex_Prac/ecommerce/package.json
@@ -31,6 +31,7 @@
     "@angular-devkit/build-angular": "^19.1.4",
     "@angular/cli": "^19.1.4",
     "@angular/compiler-cli": "^19.1.0",
+    "@awmottaz/prettier-plugin-void-html": "^1.7.0",
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",

diff --git a/PAC7_Ex_Prac/ecommerce/src/app/app.component.html b/PAC7_Ex_Prac/ecommerce/src/app/app.component.html
@@ -1,9 +1,37 @@
 <nav>
   <ul>
-    <li><a routerLink="/auth/login" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Login</a></li>
-    <li><a routerLink="/auth/register" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Register</a></li>
-    <li><a routerLink="/article/list" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Articles List</a></li>
-    <li><a routerLink="/article/create" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Create Article</a></li>
+    <li>
+      <a
+        routerLink="/auth/login"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        >Login</a
+      >
+    </li>
+    <li>
+      <a
+        routerLink="/auth/register"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        >Register</a
+      >
+    </li>
+    <li>
+      <a
+        routerLink="/article/list"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        >Articles List</a
+      >
+    </li>
+    <li>
+      <a
+        routerLink="/article/create"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        >Create Article</a
+      >
+    </li>
   </ul>
 </nav>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/article/article-detail/article-detail.component.css b/PAC7_Ex_Prac/ecommerce/src/app/article/article-detail/article-detail.component.css
@@ -11,9 +11,9 @@
 }
 
 .article-item.sale {
-  background-color: #C3C3E5;
+  background-color: #c3c3e5;
 }
 
 .article-item img {
   width: 400px;
-}
+}
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/article/article-detail/article-detail.component.html b/PAC7_Ex_Prac/ecommerce/src/app/article/article-detail/article-detail.component.html
@@ -1,10 +1,12 @@
 <div class="article-item" [class.sale]="article.isOnSale">
-  <div class="image"><img [src]="article.imageUrl | emptyimage" [alt]="article.name"></div>
+  <div class="image">
+    <img [src]="article.imageUrl | emptyimage" [alt]="article.name" />
+  </div>
   <div class="details">
-    <div class="name">{{article.name}}</div>
-    <div class="price">$ {{article.price}}</div>
+    <div class="name">{{ article.name }}</div>
+    <div class="price">$ {{ article.price }}</div>
     <div>
-      {{article.description}}
+      {{ article.description }}
     </div>
   </div>
 </div>
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/article/article-item/article-item.component.css b/PAC7_Ex_Prac/ecommerce/src/app/article/article-item/article-item.component.css
@@ -1,37 +1,37 @@
 .article-item {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s;
-    max-width: 200px;
-    margin: 10px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  max-width: 200px;
+  margin: 10px;
 }
 
 .article-item:hover {
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
 .article-item img {
-    width: 100%;
+  width: 100%;
 }
 
 .article-item .container {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 10px;
-    text-align: center;
-    padding: 10px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  text-align: center;
+  padding: 10px;
 }
 
 .article-item .quantity {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 10px;
-    justify-content: center;
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-gap: 10px;
+  justify-content: center;
 }
 
 .article-item.sale {
-    background-color: #C3C3E5;
+  background-color: #c3c3e5;
 }
 
 .prize.not-on-sale {
-    color: gray;
-}
+  color: gray;
+}
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/article/article-item/article-item.component.html b/PAC7_Ex_Prac/ecommerce/src/app/article/article-item/article-item.component.html
@@ -1,12 +1,23 @@
-<div class="article-item"  [class]="article.isOnSale ? 'article-item sale' : ''">
-    <a routerLink="/article/detail/{{article.id}}"><img [src]="article.imageUrl | emptyimage" alt="{{article.name}}"></a>
-    <div class="container">
-        <div class="name">{{article.name}}</div>
-        <div class="prize" [class]="!article.isOnSale ? 'prize not-on-sale' : ''">{{article.price | currency : 'EUR' : 'symbol' : '1.2-2'}}</div>
-        <div class="quantity" *ngIf="article.isOnSale">
-            <div><button [disabled]="article.quantityInCart === 0" (click)="decrementInCart()">-</button></div>
-            <div>{{article.quantityInCart}}</div>
-            <div><button (click)="incrementInCart()">+</button></div>
-        </div>
+<div class="article-item" [class]="article.isOnSale ? 'article-item sale' : ''">
+  <a routerLink="/article/detail/{{ article.id }}"
+    ><img [src]="article.imageUrl | emptyimage" alt="{{ article.name }}"
+  /></a>
+  <div class="container">
+    <div class="name">{{ article.name }}</div>
+    <div class="prize" [class]="!article.isOnSale ? 'prize not-on-sale' : ''">
+      {{ article.price | currency: 'EUR' : 'symbol' : '1.2-2' }}
     </div>
+    <div class="quantity" *ngIf="article.isOnSale">
+      <div>
+        <button
+          [disabled]="article.quantityInCart === 0"
+          (click)="decrementInCart()"
+        >
+          -
+        </button>
+      </div>
+      <div>{{ article.quantityInCart }}</div>
+      <div><button (click)="incrementInCart()">+</button></div>
+    </div>
+  </div>
 </div>
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/article/article-new/article-new.component.html b/PAC7_Ex_Prac/ecommerce/src/app/article/article-new/article-new.component.html
@@ -1,45 +1,72 @@
-<h3>
-    Crear un article
-</h3>
+<h3>Crear un article</h3>
 
 <div class="form-group">
-    <h4 class="error-header">{{message}}</h4>
-    <form [formGroup]="articleForm" (ngSubmit)="createArticle()">
-        <div>
-            <div class="field padding-botton">
-                <label class="padding-botton" for="name">Nom del l'article</label>
-                <input type="text" name="name" id="name" formControlName="name" placeholder="Nom del l'article"
-                    size="45" required />
-            </div>
-            <div class="error padding-botton" *ngIf="(name.dirty || message) && name.invalid">
-                Cal introduir un nom d'article vàlid
-            </div>
-            <div class="field padding-botton">
-                <label class="padding-botton" for="price">Preu del l'article</label>
-                <input type="number" name="price" id="price" formControlName="price" placeholder="Preu de l'article"
-                    required>
-            </div>
-            <div class="error padding-botton" *ngIf="(price.dirty || message) && price.invalid">
-                Cal introduir un preu per a l'article major a 0.1
-            </div>
-            <div class="field padding-botton">
-                <label class="padding-botton" for="imageUrl">URL de la imatge</label>
-                <input type="text" name="imageUrl" id="imageUrl" formControlName="imageUrl"
-                    placeholder="URL de la imatge" size="65" required>
-            </div>
-            <div class="error padding-botton" *ngIf="(imageUrl.dirty || message) && imageUrl.invalid">
-                <div *ngIf="imageUrl.errors.required">
-                    Cal introduir la URL de la imatge
-                </div>
-                <div *ngIf="imageUrl.errors.pattern">
-                    La URL de la imatge no és vàlida
-                </div>
-            </div>
-            <div class="field padding-botton">
-                <input type="checkbox" name="isOnSale" formControlName="isOnSale">
-                Està a la venda
-            </div>
+  <h4 class="error-header">{{ message }}</h4>
+  <form [formGroup]="articleForm" (ngSubmit)="createArticle()">
+    <div>
+      <div class="field padding-botton">
+        <label class="padding-botton" for="name">Nom del l'article</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          formControlName="name"
+          placeholder="Nom del l'article"
+          size="45"
+          required
+        />
+      </div>
+      <div
+        class="error padding-botton"
+        *ngIf="(name.dirty || message) && name.invalid"
+      >
+        Cal introduir un nom d'article vàlid
+      </div>
+      <div class="field padding-botton">
+        <label class="padding-botton" for="price">Preu del l'article</label>
+        <input
+          type="number"
+          name="price"
+          id="price"
+          formControlName="price"
+          placeholder="Preu de l'article"
+          required
+        />
+      </div>
+      <div
+        class="error padding-botton"
+        *ngIf="(price.dirty || message) && price.invalid"
+      >
+        Cal introduir un preu per a l'article major a 0.1
+      </div>
+      <div class="field padding-botton">
+        <label class="padding-botton" for="imageUrl">URL de la imatge</label>
+        <input
+          type="text"
+          name="imageUrl"
+          id="imageUrl"
+          formControlName="imageUrl"
+          placeholder="URL de la imatge"
+          size="65"
+          required
+        />
+      </div>
+      <div
+        class="error padding-botton"
+        *ngIf="(imageUrl.dirty || message) && imageUrl.invalid"
+      >
+        <div *ngIf="imageUrl.errors.required">
+          Cal introduir la URL de la imatge
         </div>
-        <button type="submit">Crear</button>
-    </form>
-</div>
+        <div *ngIf="imageUrl.errors.pattern">
+          La URL de la imatge no és vàlida
+        </div>
+      </div>
+      <div class="field padding-botton">
+        <input type="checkbox" name="isOnSale" formControlName="isOnSale" />
+        Està a la venda
+      </div>
+    </div>
+    <button type="submit">Crear</button>
+  </form>
+</div>
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/auth/login/login.component.html b/PAC7_Ex_Prac/ecommerce/src/app/auth/login/login.component.html
@@ -1,16 +1,26 @@
-<h3>{{message}}</h3>
+<h3>{{ message }}</h3>
 <div class="form-group">
   <form [formGroup]="loginForm" (ngSubmit)="login()">
     <div class="input-field">
       <label for="username">Username:</label>
-      <input type="text" placeholder="Username" name="username" formControlName="username">
+      <input
+        type="text"
+        placeholder="Username"
+        name="username"
+        formControlName="username"
+      />
       <div class="error" *ngIf="username.invalid">Username is mandatory</div>
     </div>
     <div class="input-field">
       <label for="password">Password:</label>
-      <input type="password" placeholder="Password" name="password" formControlName="password">
+      <input
+        type="password"
+        placeholder="Password"
+        name="password"
+        formControlName="password"
+      />
       <div class="error" *ngIf="password.invalid">Password is mandatory</div>
     </div>
     <button type="submit">Login</button>
   </form>
-</div>
+</div>
diff --git a/PAC7_Ex_Prac/ecommerce/src/app/auth/register/register.component.html b/PAC7_Ex_Prac/ecommerce/src/app/auth/register/register.component.html
@@ -1,16 +1,27 @@
-<h3>{{message}}</h3>
+<h3>{{ message }}</h3>
 <div>
   <form [formGroup]="registerForm" (ngSubmit)="register()">
     <div class="input-field">
       <label for="username">Username:</label>
-      <input type="text" placeholder="Username" name="username" formControlName="username">
+      <input
+        type="text"
+        placeholder="Username"
+        name="username"
+        formControlName="username"
+      />
       <div class="error" *ngIf="username.invalid">Username is mandatory</div>
     </div>
     <div class="input-field">
       <label for="password">Password:</label>
-      <input type="password" placeholder="Password" required name="password" formControlName="password">
+      <input
+        type="password"
+        placeholder="Password"
+        required
+        name="password"
+        formControlName="password"
+      />
       <div class="error" *ngIf="password.invalid">Password is mandatory</div>
     </div>
     <button type="submit">Register</button>
   </form>
-</div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,5 +10,6 @@ @@
             "parser": "angular"
           }
         }
-      ]
+      ],
+      "plugins": ["@awmottaz/prettier-plugin-void-html"]
     }