user crud functionality added

2025-05-21 10:19:35 +08:00 · 2025-05-21 10:19:35 +08:00 · b09ac700aa
parent eebdeb9074
commit b09ac700aa
9 changed files with 159 additions and 79 deletions
--- a/app/Livewire/Buttons/CreateUser.php
+++ b/app/Livewire/Buttons/CreateUser.php
@ -48,6 +48,7 @@ class CreateUser extends Component
    {

        $token = Session::get('user')['access_token'] ?? null;
+        

        if (!$token) {
            $this->addError('users', 'No access token found.');
@ -64,6 +65,9 @@ class CreateUser extends Component
            'password'   => $this->default_password,
        ]);

+        // dd($response->json());
+
+
        //handle backend response
        if ($response->status() === 422) {
            $errors = $response->json('data');
--- a/app/Livewire/Components/Table.php
+++ b/app/Livewire/Components/Table.php
@ -45,6 +45,23 @@ class Table extends Component
    public $showModal = false;
    public $modalMode = 'view';
    public $modalData = [];
+    public $confirmingDeleteId = null;
+
+    public function confirmDelete($id)
+{
+    $this->confirmingDeleteId = $id;
+}
+
+public function deleteConfirmed()
+{
+    if (!$this->confirmingDeleteId) return;
+
+    $this->deleteRow($this->confirmingDeleteId);
+
+    // Reset the confirmation state
+    $this->confirmingDeleteId = null;
+}
+

    public function mount($columns, $rows, $addRoute = null, $rowKey = 'id')
    {
@ -74,30 +91,53 @@ class Table extends Component
        $this->showModal = true;
    }

-public function saveRow()
-{
-    $token = Session::get('user')['access_token'] ?? null;
+    public function saveRow()
+    {
+        $token = Session::get('user')['access_token'] ?? null;

-    $url = rtrim(config('services.backend_api.url'), '/') . '/' . $this->updateEndpoint . '/' . $this->modalData[$this->rowKey];
+        $url = rtrim(config('services.backend_api.url'), '/') . '/' . $this->updateEndpoint . '/' . $this->modalData[$this->rowKey];

-    try {
-        $response = Http::withToken($token)->put($url, $this->modalData);
+        try {
+            $response = Http::withToken($token)->put($url, $this->modalData);

-        if ($response->successful()) {
-            $this->closeModal();
-            $this->fetchData();
-        } else {
-            $errors = $response->json('errors') ?? [];
+            if ($response->successful()) {
+                $this->closeModal();
+                $this->fetchData();
+            } else {
+                $errors = $response->json('errors') ?? [];

-            foreach ($errors as $field => $messages) {
-                $this->addError("modalData.$field", is_array($messages) ? $messages[0] : $messages);
+                foreach ($errors as $field => $messages) {
+                    $this->addError("modalData.$field", is_array($messages) ? $messages[0] : $messages);
+                }
            }
+        } catch (\Exception $e) {
+            logger()->error('SaveRow error: ' . $e->getMessage());
+            $this->addError('modalData', 'Something went wrong. Please try again.');
+        }
+    }
+
+    public function deleteRow($id)
+    {
+        $token = Session::get('user')['access_token'] ?? null;
+
+        $url = rtrim(config('services.backend_api.url'), '/') . '/' . $this->deleteEndpoint . '/' . $id;
+
+        try {
+            $response = Http::withToken($token)->delete($url);
+
+            if ($response->successful()) {
+                $this->fetchData();
+            } else {
+                $errors = $response->json('errors') ?? [];
+                foreach ($errors as $field => $messages) {
+                    $this->addError("modalData.$field", is_array($messages) ? $messages[0] : $messages);
+                }
+            }
+        } catch (\Exception $e) {
+            logger()->error('DeleteRow error: ' . $e->getMessage());
+            $this->addError('modalData', 'Something went wrong. Please try again.');
        }
-    } catch (\Exception $e) {
-        logger()->error('SaveRow error: ' . $e->getMessage());
-        $this->addError('modalData', 'Something went wrong. Please try again.');
    }
-}



--- a/app/Livewire/UserManagement.php
+++ b/app/Livewire/UserManagement.php
@ -12,36 +12,37 @@ class UserManagement extends Component

    public function mount()
    {
-        $this->loadUsers(); 
+        $this->loadUsers();
    }

    public function loadUsers()
    {
        try {
            $token = Session::get('user')['access_token'] ?? null;
-    
+
            if (!$token) {
                $this->addError('users', 'No access token found.');
                return;
            }
-    
+
            $response = Http::withToken($token)
                ->get(config('services.backend_api.url') . '/api/cms/admin');
-    
-                // dd($response->json());
+
+            // dd($response->json());
            if ($response->successful()) {
                // Properly use collect to handle the response data
-                $this->users = collect($response->json()['data'])->map(function ($user) {
-                    return [
-                        'admin_uuid' => $user['admin_uuid'],
-                        'username' => $user['username'],
-                        'firstname' => $user['firstname'],
-                        'lastname' => $user['lastname'],
-                        'email' => $user['email'],
-                        'role' => $user['role'],
-                        'status' => $user['status'],
-                    ];
-                });
+            $this->users = collect($response->json()['data'])->map(function ($user) {
+                return [
+                    'admin_uuid' => $user['admin_uuid'],
+                    'username' => $user['username'],
+                    'firstname' => $user['firstname'],
+                    'lastname' => $user['lastname'],
+                    'email' => $user['email'],
+                    'role' => $user['role'],
+                    'status' => $user['status'],
+                ];
+            });
+
            } else {
                $this->addError('users', 'Failed to load users.');
            }
@ -57,4 +58,3 @@ class UserManagement extends Component
        ]);
    }
 }
-
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -20,7 +20,7 @@ services:
      timeout: 10s
      retries: 10
    networks:
-      - app_network
+      - unioil-network


  db_mysql:
@ -40,14 +40,14 @@ services:
      timeout: 10s
      retries: 5
    networks:
-      - app_network
+      - unioil-network

  nginx:
    image: nginx:alpine
    container_name: unioil-nginx
    restart: unless-stopped
    ports:
-      - "8000:80"
+      - "8000:81"
    volumes:
      - .:/var/www/html
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
@ -55,7 +55,7 @@ services:
      app:
        condition: service_healthy
    networks:
-      - app_network
+      - unioil-network

 volumes:
  mysql-data:
@ -63,5 +63,5 @@ volumes:
    driver: local

 networks:
-  app_network:
+  unioil-network:
    driver: bridge
--- a/docker/nginx/default.conf
+++ b/docker/nginx/default.conf
@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen 81;
    server_name localhost;

    root /var/www/html/public;
--- a/package-lock.json
+++ b/package-lock.json
@ -1,5 +1,5 @@
 {
-    "name": "unioil-cms-fe",
+    "name": "html",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@ -31,19 +31,19 @@

            @endif

-        @if ($hasAddButton ?? true)
+            @if ($hasAddButton ?? true)
            <!-- Add button -->
-            <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
+            <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
                + Add
            </a>
-        @elseif ($hasExportButton ?? false)
+            @elseif ($hasExportButton ?? false)
            <!-- Export button -->
            <button wire:click="export" class="bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2">
                Export
            </button>
-        @else
+            @else

-        @endif
+            @endif
        </div>

        <!-- Table Header -->
@ -87,9 +87,9 @@
                    <!-- Checkbox for row selection (if enabled) -->
                    @if ($hasCheckbox)
                    <td class="px-4 py-2">
-                        <input type="checkbox" 
-                            wire:click="selectRow('{{ $row[$rowKey] ?? $index }}')" 
-                            @if(in_array($row[$rowKey] ?? $index, $selected)) checked @endif 
+                        <input type="checkbox"
+                            wire:click="selectRow('{{ $row[$rowKey] ?? $index }}')"
+                            @if(in_array($row[$rowKey] ?? $index, $selected)) checked @endif
                            class="cursor-pointer">
                    </td>
                    @endif
@ -115,7 +115,7 @@
                        <button wire:click="viewRow('{{ $row[$rowKey] ?? $index }}')" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-eye"></i>
                        </button>
-                        <button wire:click="deleteRow('{{ $row[$rowKey] ?? $index }}')" class="text-red-500 hover:text-red-700">
+                        <button wire:click="confirmDelete('{{ $row[$rowKey] ?? $index }}')" class="text-red-500 hover:text-red-700">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                        @endif
@ -196,9 +196,18 @@
                        <label class="block text-sm font-medium text-gray-700">
                            {{ $column['label'] }}
                        </label>
+
                        @if ($modalMode === 'edit')
-                        <input type="text" wire:model.defer="modalData.{{ $column['field'] }}"
+                        @if ($column['type'] === 'select')
+                        <select wire:model.defer="modalData.{{ $column['field'] }}" class="mt-1 p-2 border border-gray-300 rounded w-full">
+                            @foreach ($column['options'] as $key => $label)
+                            <option value="{{ $key }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                        @else
+                        <input type="{{ $column['type'] }}" wire:model.defer="modalData.{{ $column['field'] }}"
                            class="mt-1 p-2 border border-gray-300 rounded w-full">
+                        @endif
                        @else
                        <div class="mt-1 p-2 bg-gray-100 rounded">
                            {{ $modalData[$column['field']] ?? '' }}
@ -211,7 +220,7 @@
                <!-- Modal Footer with Save Button (if in edit mode) -->
                @if ($modalMode === 'edit')
                <div class="mt-6 flex justify-end">
-                    <button wire:click="saveRow" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+                    <button wire:click="saveRow" class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700">
                        Save
                    </button>
                </div>
@ -219,5 +228,26 @@
            </div>
        </div>
        @endif
+
+        <!-- Confirmation Modal for Deletion -->
+        @if ($confirmingDeleteId)
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+            <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+                <h2 class="text-lg font-bold mb-4">Confirm Delete</h2>
+                <p class="mb-6">Are you sure you want to delete this item? This action cannot be undone.</p>
+
+                <div class="flex justify-end space-x-2">
+                    <button wire:click="$set('confirmingDeleteId', null)" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400">
+                        Cancel
+                    </button>
+                    <button wire:click="deleteConfirmed" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 cursor-pointer">
+                        Yes, Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+        @endif
+
+
    </div>
 </div>
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@ -1,36 +1,42 @@
 <div>
    @include('livewire.user-management.top-nav.user-management')

-@if (session()->has('success'))
-    <div 
-        x-data="{ show: true }" 
-        x-init="setTimeout(() => show = false, 3000)" 
+    @if (session()->has('success'))
+    <div
+        x-data="{ show: true }"
+        x-init="setTimeout(() => show = false, 3000)"
        x-show="show"
        x-transition
-        class="text-2xl text-green-700 px-4 py-2 rounded mb-4"
-    >
+        class="text-2xl text-green-700 px-4 py-2 rounded mb-4">
        ✅ {{ session('success') }}
    </div>
-@endif
+    @endif



-    <livewire:components.table 
+    <livewire:components.table
        :columns="[
-            ['label' => 'Username', 'field' => 'username'],
-            ['label' => 'First Name', 'field' => 'firstname'],
-            ['label' => 'Last Name', 'field' => 'lastname'],
-            ['label' => 'Email', 'field' => 'email'],
-            ['label' => 'Role', 'field' => 'role'],
-            ['label' => 'Status', 'field' => 'status'],
-        ]"
-        :rows="$users" 
-        :addRoute="route('user-create')" 
+            ['label' => 'Username', 'field' => 'username', 'type' => 'text'],
+            ['label' => 'First Name', 'field' => 'firstname', 'type' => 'text'],
+            ['label' => 'Last Name', 'field' => 'lastname', 'type' => 'text'],
+            ['label' => 'Email', 'field' => 'email', 'type' => 'text'],
+            ['label' => 'Role', 'field' => 'role', 'type' => 'select', 'options' => [
+                                                                1 => 'Admin',
+                                                                0 => 'Marketing Personnel'
+                                                            ]],
+            ['label' => 'Status', 'field' => 'status', 'type' => 'select', 'options' =>[
+                                                                'active' => 'Active',
+                                                                'inactive' => 'Inactive'
+                                                            ]],
+            ]"
+        :rows="$users"
+        :addRoute="route('user-create')"
        :hasAddButton="true"
        :hasCheckbox="true"
        :hasActions="true"
        :isViewPage="false"
        :rowKey="'admin_uuid'"
-        :updateEndpoint="'api/cms/admin'"
-    />
-</div>
+        :updateEndpoint="'api/cms/admin'" 
+        :deleteEndpoint="'api/cms/admin'"
+        />
+</div>
--- a/routes/web.php
+++ b/routes/web.php
@ -24,13 +24,13 @@ use Illuminate\Support\Facades\Route;


 //laravel page
-// Route::get('/', function () {
-//     return redirect()->route('login'); 
-// });
-// Route::get('/login', function () {
-//     return view('auth.log-in');
-// })->name('login');
-Route::get('/login', LoginForm::class)->name('login');
+Route::get('/', function () {
+    return redirect()->route('login'); 
+});
+Route::get('/login', function () {
+    return view('auth.log-in');
+})->name('login');
+// Route::get('/login', LoginForm::class)->name('login');

 // // Route::get('/login', LoginForm::class)->name('layouts.app');