Finish CRUD?

dudushy · Mar 28, 2024 · 4e06671 · 4e06671
1 parent 20e9785
commit 4e06671
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 14 deletions.
diff --git a/src/app/pages/test/test.component.html b/src/app/pages/test/test.component.html
@@ -2,32 +2,44 @@
   <div class="title">
     <h3>List of Users:</h3>
 
-    <button class="action-edit"><i class="bi bi-arrow-clockwise"></i></button>
+    <button class="action-edit" (click)="loadDataArray()">
+      <i class="bi bi-arrow-clockwise"></i>
+    </button>
   </div>
 
   <div class="inputs">
     <div class="input-wrapper">
-      <label for="name">Name:</label>
-      <input type="text" id="name" />
+      <label for="input-name">Name:</label>
+      <input type="text" id="input-name" />
     </div>
 
     <div class="input-wrapper">
-      <label for="lastname">Surname:</label>
-      <input type="text" id="lastname" />
+      <label for="input-lastname">Surname:</label>
+      <input type="text" id="input-lastname" />
     </div>
 
     <div class="input-wrapper">
-      <label for="username">User:</label>
-      <input type="text" id="username" />
+      <label for="input-username">User:</label>
+      <input type="text" id="input-username" />
     </div>
 
     <div class="input-wrapper">
-      <label for="email">Email:</label>
-      <input type="text" id="email" />
+      <label for="input-email">Email:</label>
+      <input type="email" id="input-email" />
     </div>
 
     <div class="input-wrapper">
-      <button><i class="bi bi-plus-circle"></i></button>
+      <button *ngIf="mode == 'add'" (click)="saveItem()">
+        <span>Add</span>
+
+        <i class="bi bi-plus-circle"></i>
+      </button>
+
+      <button *ngIf="mode == 'save'" (click)="saveItem()">
+        <span>Save</span>
+
+        <i class="bi bi-floppy-fill"></i>
+      </button>
     </div>
   </div>
 
@@ -46,7 +58,7 @@ <h3>List of Users:</h3>
       <span>Actions</span>
     </div>
 
-    <div class="list-item" *ngFor="let item of dataArray | keyvalue : app.defaultOrder; let i = index">
+    <div class="list-item" *ngFor="let item of dataArray | keyvalue : app.defaultOrder; let i = index" [class.selected]="item.value['id'] == selectedId">
       <span>
         {{i + 1}}
       </span>
@@ -68,9 +80,13 @@ <h3>List of Users:</h3>
       </span>
 
       <span class="actions">
-        <button class="action-edit"><i class="bi bi-pencil-square"></i></button>
+        <button class="action-edit" (click)="editItem(item.value)">
+          <i class="bi bi-pencil-square"></i>
+        </button>
 
-        <button class="action-delete"><i class="bi bi-trash3-fill"></i></button>
+        <button class="action-delete" (click)="deleteItem(item.value)">
+          <i class="bi bi-trash3-fill"></i>
+        </button>
       </span>
     </div>
   </div>

diff --git a/src/app/pages/test/test.component.scss b/src/app/pages/test/test.component.scss
@@ -110,7 +110,8 @@ i {
       padding: calc(var(--responsiveUnit) * 0.5);
       cursor: pointer;
       @include allVendors(transition, all 0.3s ease-in-out);
-      @include square(calc(var(--responsiveUnit) * 1.5));
+      width: calc(var(--responsiveUnit) * 4.5);
+      height: calc(var(--responsiveUnit) * 2);
 
       &:hover {
         background: darken($success, 15%);
@@ -120,6 +121,13 @@ i {
         transform: scale(0.95);
       }
 
+      span {
+        font-size: calc(var(--responsiveUnit) * 0.8);
+        font-weight: bolder;
+        color: $light;
+        padding-right: calc(var(--responsiveUnit) * 0.5);
+      }
+
       i {
         color: $light;
         font-size: calc(var(--responsiveUnit) * 1);
@@ -222,6 +230,10 @@ i {
       background: lighten($primary, 10%);
     }
 
+    &.selected {
+      background: $light;
+    }
+
     span {
       font-size: calc(var(--responsiveUnit) * 0.8);
     }

diff --git a/src/app/pages/test/test.component.ts b/src/app/pages/test/test.component.ts
@@ -11,6 +11,8 @@ export class TestComponent implements OnInit {
   TITLE = 'TestComponent';
 
   dataArray: any[] = [];
+  mode = 'add';
+  selectedId = null;
 
   constructor(
     private cdr: ChangeDetectorRef,
@@ -57,4 +59,140 @@ export class TestComponent implements OnInit {
       console.log(`[${this.TITLE}#loadDataArray] this.dataArray`, this.dataArray);
     });
   }
+
+  editItem(itemData: any) {
+    console.log(`[${this.TITLE}#editItem] itemData`, itemData);
+
+    this.mode = 'save';
+    console.log(`[${this.TITLE}#editItem] this.mode`, this.mode);
+
+    this.selectedId = itemData.id;
+    console.log(`[${this.TITLE}#editItem] this.selectedId`, this.selectedId);
+
+    const inputName = document.getElementById('input-name') as HTMLInputElement;
+    console.log(`[${this.TITLE}#editItem] inputName`, inputName);
+
+    const inputLastname = document.getElementById('input-lastname') as HTMLInputElement;
+    console.log(`[${this.TITLE}#editItem] inputLastname`, inputLastname);
+
+    const inputUsername = document.getElementById('input-username') as HTMLInputElement;
+    console.log(`[${this.TITLE}#editItem] inputUsername`, inputUsername);
+
+    const inputEmail = document.getElementById('input-email') as HTMLInputElement;
+    console.log(`[${this.TITLE}#editItem] inputEmail`, inputEmail);
+
+    inputName.value = itemData.name;
+    inputLastname.value = itemData.lastname;
+    inputUsername.value = itemData.username;
+    inputEmail.value = itemData.email;
+
+    // this.updateView();
+  }
+
+  saveItem() {
+    console.log(`[${this.TITLE}#saveItem]`);
+
+    const inputName = document.getElementById('input-name') as HTMLInputElement;
+    console.log(`[${this.TITLE}#saveItem] inputName`, inputName);
+
+    const inputLastname = document.getElementById('input-lastname') as HTMLInputElement;
+    console.log(`[${this.TITLE}#saveItem] inputLastname`, inputLastname);
+
+    const inputUsername = document.getElementById('input-username') as HTMLInputElement;
+    console.log(`[${this.TITLE}#saveItem] inputUsername`, inputUsername);
+
+    const inputEmail = document.getElementById('input-email') as HTMLInputElement;
+    console.log(`[${this.TITLE}#saveItem] inputEmail`, inputEmail);
+
+    const body = {
+      name: inputName.value,
+      lastname: inputLastname.value,
+      username: inputUsername.value,
+      email: inputEmail.value
+    };
+    console.log(`[${this.TITLE}#saveItem] body`, body);
+
+    if (this.mode === 'add') {
+      this.app.http.post(
+        'https://webservice.dudushy.net/api/create',
+        body,
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      ).subscribe((data: any) => {
+        console.log(`[${this.TITLE}#saveItem] data`, data);
+
+        this.loadDataArray();
+
+        inputName.value = '';
+        inputLastname.value = '';
+        inputUsername.value = '';
+        inputEmail.value = '';
+      });
+    }
+
+    if (this.mode === 'save') {
+      this.app.http.put(
+        `https://webservice.dudushy.net/api/update/${this.selectedId}`,
+        body,
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      ).subscribe((data: any) => {
+        console.log(`[${this.TITLE}#saveItem] data`, data);
+
+        this.loadDataArray();
+
+        inputName.value = '';
+        inputLastname.value = '';
+        inputUsername.value = '';
+        inputEmail.value = '';
+      });
+    }
+
+    this.mode = 'add';
+    console.log(`[${this.TITLE}#saveItem] this.mode`, this.mode);
+
+    this.selectedId = null;
+    console.log(`[${this.TITLE}#saveItem] this.selectedId`, this.selectedId);
+
+    // this.updateView();
+  }
+
+  deleteItem(itemData: any) {
+    console.log(`[${this.TITLE}#deleteItem] itemData`, itemData);
+
+    this.selectedId = itemData.id;
+    console.log(`[${this.TITLE}#deleteItem] this.selectedId`, this.selectedId);
+
+    // this.updateView();
+
+    setTimeout(() => {
+      const choice = confirm('Are you sure you want to delete this item?');
+      console.log(`[${this.TITLE}#deleteItem] choice`, choice);
+
+      if (!choice) {
+        this.selectedId = null;
+
+        return;
+      }
+
+      this.app.http.delete(
+        `https://webservice.dudushy.net/api/delete/${itemData.id}`,
+        {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      ).subscribe((data: any) => {
+        console.log(`[${this.TITLE}#deleteItem] data`, data);
+
+        this.loadDataArray();
+      });
+    }, 50);
+  }
 }