update input type file and fix some problem

2026-09-22 13:38:44 +00:00 · 2023-04-28 02:05:22 +07:00
parent e3f5fb79ec
commit 7862d84168
23 changed files with 973 additions and 795 deletions
@@ -133,7 +133,7 @@
                </div>
                <div class="col-md-7 p-0 card-right">
                    <div class="card tab2-card">
-                        <div style="padding: 34px;" class="card-body">
+                        <div style="padding: 29px;" class="card-body">
                            <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
                                <li [ngbNavItem]="1">
                                    <h3 style="color: lightcoral" ngbNavLink>Đăng nhập</h3>
@@ -26,7 +26,7 @@
                                                style="width: 20px">
                                        </td>
                                        <td>{{ product.name }}</td>
-                                        <td>{{ product.cost - product.cost * product.discountPercent / 100 }}</td>
+                                        <td>{{ product.cost - product.cost * product.discountPercent / 100 | currency : "VND" }}</td>
                                        <td>
                                            <a [routerLink]="['/products','product-detail', product.id]"><i
                                                    class="fa fa-eye"></i></a>
@@ -0,0 +1,3 @@
+th, td {
+    text-align: center;
+}
@@ -60,7 +60,7 @@
 <ng-template #productCategoryTemplate>
    <form [formGroup]="categoryForm">
        <div class="modal-header">
-            <h5 class="modal-title f-w-600" id="exampleModalLabel">Edit Product Category</h5>
+            <h5 class="modal-title f-w-600" id="exampleModalLabel">Chỉnh sửa thể loại sản phẩm</h5>
            <button type="button" class="close" aria-label="Close" (click)="decline()">
                <span aria-hidden="true">&times;</span>
            </button>
@@ -340,18 +340,24 @@
 <ng-template #addImg>
    <div class="modal-body text-center">
        <h5 class="text-dark font-weight-bold mb-4">Thêm ảnh</h5>
-        <input class="input-image mb-4" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <button type="button" class="btn btn-primary" (click)="uploadNewImage(imageSuccess)">Tiếp tục
-        </button>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-primary" (click)="uploadNewImage(imageSuccess)">Tiếp tục
+            </button>
+        </div>
    </div>
 </ng-template>

 <ng-template #updateImg>
    <div class="modal-body text-center">
        <h5 class="text-dark font-weight-bold mb-4">Chỉnh sửa ảnh</h5>
-        <input class="input-image mb-4" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <button type="button" class="btn btn-primary" (click)="updateImage(imageSuccess)">Tiếp tục
-        </button>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-primary" (click)="updateImage(imageSuccess)">Tiếp tục
+            </button>
+        </div>
    </div>
 </ng-template>

@@ -1,3 +1,23 @@
 .shadow-box {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
-}
+}
+
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }
@@ -141,14 +141,14 @@
    <h5 class="modal-confirm-text">Cập nhật đơn hàng</h5>

    <div class="modal-select-option" *ngIf="!isHaveShipper">
-      <select [(ngModel)]="shipper">
+      <select class="width-select" [(ngModel)]="shipper">
        <option [selected]="true" [ngValue]="undefined">Chọn shipper</option>
        <option *ngFor="let shipper of shippers" [ngValue]="shipper">{{ shipper.user.fullName }}</option>
      </select>
    </div>

    <div class="modal-select-option">
-      <select [(ngModel)]="selectedStatus">
+      <select class="width-select" [(ngModel)]="selectedStatus">
        <option value="AWAITING">Chờ xác nhận</option>
        <option value="CONFIRMED">Đã xác nhận</option>
        <option value="SHIPPING">Đang giao hàng</option>
@@ -18,6 +18,8 @@ th, td {

        select {
            padding: 12px 20px;
+            width: 176px;
+            border-radius: 5px;
        }
    }

@@ -401,7 +401,8 @@
 <ng-template #chooseUserImage>
    <div class="modal-body text-center">
        <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-        <input type="file" name="avatar" accept="image/*" (change)="onFileChange($event)" />
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileChange($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
    </div>
 </ng-template>

@@ -47,4 +47,24 @@
    .icon-holder-eye {
      color: #999a9b;
    }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
  }
@@ -207,7 +207,8 @@

 <ng-template #chooseUserImage>
  <div class="modal-body text-center">
-    <h4 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h4>
-    <input class="" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+      <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
  </div>
 </ng-template>
@@ -52,4 +52,24 @@
    .icon-holder-eye {
      color: #999a9b;
    }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
  }
@@ -168,7 +168,7 @@
 <!-- Confirm delete -->
 <ng-template #confirm_Delete>
    <div class=" modal-confirm-delete">
-        <div class="modal-confirm-text">Bạn chắc chắc muốn xoá shipper này chứ ?</div>
+        <h5 class="text-dark font-weight-bold text-center px-2 py-3">Bạn chắc chắc muốn xoá shipper này chứ ?</h5>
        <div class="modal-btn-option">
            <button type="button" class="btn btn-default width-btn"
                (click)="confirmBox(shipperId, success)">Xoá</button>
@@ -180,7 +180,7 @@
 <!--Delete success -->
 <ng-template #success>
    <div class="modal-body text-center">
-        <p class="modal-confirm-text text-dark">Xoá shipper thành công</p>
+        <h5 class="text-dark mb-4 font-weight-bold text-center px-2 py-3" class="modal-confirm-text text-dark">Xoá shipper thành công</h5>
        <button type="button" class="btn btn-primary" (click)="successDelete()">Tiếp tục</button>
    </div>
 </ng-template>
@@ -448,7 +448,8 @@
 <ng-template #chooseUserImage>
  <div class="modal-body text-center">
    <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
  </div>
 </ng-template>

@@ -121,4 +121,24 @@
    .icon-holder-eye {
      color: #999a9b;
    }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
  }
@@ -169,7 +169,7 @@
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
-                                                    <th scope="col">Địa chỉ</th>
+                                                    <th style="text-align: center;" scope="col">Địa chỉ</th>
                                                    <th scope="col">Quận</th>
                                                    <th scope="col">Phường</th>
                                                    <th scope="col"></th>
@@ -178,7 +178,7 @@
                                            <tbody>
                                                <tr *ngFor="let address of user.addresses; let i = index">
                                                    <th scope="row">{{ i + 1 }}</th>
-                                                    <td>{{ address.address }}</td>
+                                                    <td style="text-align: center;">{{ address.address }}</td>
                                                    <td>{{ address.district }}</td>
                                                    <td>{{ address.ward }}</td>
                                                    <td>
@@ -225,14 +225,15 @@

 <ng-template #chooseUserImage>
    <div class="modal-body text-center">
-        <p>Vui lòng chọn 1 ảnh</p>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <h5 class="modal-title f-w-600 mb-4">Vui lòng chọn 1 ảnh</h5>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
    </div>
 </ng-template>

 <ng-template #updateSuccess>
    <div class="modal-body text-center">
-        <p>Cập nhật thông tin thành công</p>
+        <h5 class="modal-title f-w-600  mb-4">Cập nhật thông tin thành công</h5>
        <button type="button" class="btn btn-primary" (click)="continue()">Tiếp tục</button>
    </div>
 </ng-template>
@@ -0,0 +1,19 @@
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }
@@ -37,18 +37,20 @@

 <ng-template #chooseNewImage>
    <div class="modal-body text-center">
-        <p>Vui lòng chọn 1 ảnh</p>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <hr>
-        <button type="button" class="btn btn-secondary" (click)="uploadImage()">Tiếp
-            tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
+        <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-secondary" (click)="uploadImage()">Tiếp
+                tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
+        </div>
    </div>
 </ng-template>

 <ng-template #deleteImage>
    <div class="modal-body text-center">
-        <p>Bạn chắc chắn muốn xoá slider này ?</p>
+        <h5 class="text-dark font-weight-bold mb-4">Bạn chắc chắn muốn xoá slider này ?</h5>
        <button type="button" class="btn btn-secondary" (click)="deleteChooseImage()">Tiếp
            tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
@@ -57,7 +59,7 @@

 <ng-template #uploadSuccess>
    <div class="modal-body text-center">
-        <p>{{ sliderAction }} slider thành công</p>
+        <h5 class="text-dark font-weight-bold mb-4">{{ sliderAction }} slider thành công</h5>
        <button type="button" class="btn btn-primary" (click)=" closeLayer1()">Tiếp
            tục</button>
    </div>
@@ -356,14 +356,16 @@
 <ng-template #chooseUserImage>
  <div class="modal-body text-center">
    <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
  </div>
 </ng-template>

 <ng-template #chooseShopImage>
  <div class="modal-body text-center">
    <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onShopFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onShopFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
  </div>
 </ng-template>

@@ -9,4 +9,24 @@
    .icon-holder-eye {
      color: #999a9b;
    }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
  }
@@ -328,7 +328,8 @@
 <ng-template #chooseUserImage>
    <div class="modal-body text-center">
        <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
    </div>
 </ng-template>

@@ -0,0 +1,19 @@
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }