Merge pull request #1 from jspreadsheet/refactor/update-v11

 Update README and Code Compatibility for Jspreadsheet v11

Author: hodeware

.gitignore

@@ -1 +1,2 @@
-composer.lock
+composer.lock
+/vendor

README.md

@@ -1,20 +1,87 @@
-# Jspreadsheet spreadsheet
-## Database integration
+# Jspreadsheet Spreadsheet
 
-Persisting the spreadsheet data using a database.
+## Database Integration
 
-Step 1 - Download this project to a local machine, with docker installed.
+This guide explains how to persist jspreadsheet data using postgresql.
 
-Step 2 - On the project root folder: % docker-compose up
+### Step 1: Clone the Project
 
-Step 3 - In another terminal go to the root folder: % docker-compose exec php bash
+Download the project to your local machine. Ensure that [Docker](https://www.docker.com/) is installed and running.
 
-Step 4 - On the PHP container terminal: % composer install
+### Step 2: Start Docker Containers
 
-Step 5 - In another terminal go to the root folder: % docker-compose exec postgresql bash
+Navigate to the project’s root folder and run the following command to start the necessary Docker containers:
 
-// Now create your own tables
+```bash
+docker-compose up
+```
 
-Step 6 - Edit your public/index.php to sync with one table.
+### Step 3: Access the PHP Container
 
-Step 7 - http://localhost:8081<br><br>
+Open a new terminal, navigate to the project’s root folder, and access the PHP container by running:
+
+```bash
+docker-compose exec php bash
+```
+
+### Step 4: Install Dependencies
+
+Inside the PHP container terminal, install the required PHP dependencies using [Composer](https://getcomposer.org/):
+
+```bash
+composer install
+```
+
+### Step 5: Access the PostgreSQL Container
+
+In a new terminal, navigate to the root folder and access the PostgreSQL container:
+
+```bash
+docker-compose exec postgresql bash
+```
+
+#### Step 5.1: Create Database and Table
+
+Once inside the PostgreSQL container, follow these steps to create a `users` table:
+
+1. Access PostgreSQL and create the `test` database:
+    ```bash
+    psql -U postgres
+    ```
+
+2. Create a new database:
+    ```sql
+    CREATE DATABASE test;
+    ```
+
+3. Connect to the `test` database:
+    ```sql
+    \c test
+    ```
+
+4. Create the `users` table:
+    ```sql
+    CREATE TABLE users (
+        user_id SERIAL PRIMARY KEY,
+        username VARCHAR(50),
+        email VARCHAR(100)
+    );
+    ```
+
+### Step 6: Update PHP Configuration
+
+Verify that the table name in your `public/index.php` matches the database table you created. In this example, the table is `users`:
+
+```php
+$jss = new \Jspreadsheetdb($database, 'users');
+```
+
+### Step 7: Access the Spreadsheet
+
+Open your browser and navigate to [http://localhost:8009](http://localhost:8009). Any updates made in the spreadsheet will now persist in the database table.
+
+---
+
+### Notes:
+- You can further customize the database structure depending on your needs.
+- Ensure that your Docker containers are running before attempting to access the site.

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3.7"
 services:
   postgresql:
     image: postgres:latest
@@ -18,35 +17,29 @@ services:
     image: dpage/pgadmin4
     restart: always
     environment:
-      PGADMIN_DEFAULT_EMAIL: postgres
+      PGADMIN_DEFAULT_EMAIL: postgres@postgres.com
       PGADMIN_DEFAULT_PASSWORD: postgres
       PGADMIN_LISTEN_PORT: 80
     ports:
       - "8035:80"
     volumes:
       - postgres_data:/var/lib/postgresql/data
-    links:
+    depends_on:
       - postgresql
 
   redis:
     image: redis:alpine
     expose:
       - 6379
 
-  mailhog:
-    image: mailhog/mailhog
-    ports:
-      - 1021:1025
-      - 8021:8025
-
   web:
     build: ./resources/docker/aws
     ports:
       - 8009:80
       - 8010:443
     volumes:
       - .:/var/www/html
-    links:
+    depends_on:
       - php
 
   php:
@@ -55,14 +48,9 @@ services:
       - 9000
     volumes:
       - .:/var/www/html
-    links:
-      - redis
-      - postgresql
-      - mailhog
     depends_on:
       - redis
       - postgresql
-      - mailhog
 
 volumes:
   postgres_data:

public/Jspreadsheetdb.php

@@ -48,10 +48,10 @@ public function save($post)
         // Parse the posted json
         $request = json_decode($post['data'], true);
 
-        // Process the setValue request
-        if (isset($request['setValue']) && $request['setValue']) {
+        // Process the updateData request
+        if (isset($request['updateData']) && $request['updateData']) {
             // Process all records
-            foreach ($request['setValue'] as $v) {
+            foreach ($request['updateData'] as $v) {
                 // Verify if the record exists in the table
                 $result = $this->database->table($this->table)
                     ->argument(1, $this->primaryKey, $v['id'])
@@ -74,11 +74,11 @@ public function save($post)
                 'success' => 1,
                 'message' => 'Updated',
             ];
-        } else if (isset($request['insertRow']) && $request['insertRow']) {
-            // No, create a new record
-            $this->database->column($v['data'], true)
-                ->insert()
-                ->execute();
+        } else {
+            return [
+                'success' => 1,
+                'message' => 'This action is not yet being persisted',
+            ];
         }
     }
 
@@ -89,9 +89,8 @@ public function create($options)
             'columns' => [],
             'data' => [],
             'persistence' => '/',
-            'defaultColWidth' => '100px',
-            'tableOverflow' => true,
-            'tableWidth' => '1200px'
+            'defaultColWidth' => '200px',
+            'minDimensions' => [3, 10]
         ], $options);
 
         // Get all column information
@@ -119,6 +118,7 @@ public function create($options)
                     $column['primaryKey'] = true;
                     $column['readOnly'] = true;
                     $column['type'] = 'number';
+                    $column['width'] = '80px';
                 }
 
                 $config['columns'][] = $column;
@@ -132,11 +132,11 @@ public function create($options)
                 $options['id'] = 'j' . rand(1000,9000);
             }
 
-            // Create the Jexcel configuration
+            // Create the Jspreadsheet configuration
             return "<div id='{$options['id']}'></div><script>jspreadsheet(document.getElementById('{$options['id']}'), { worksheets: [$config] });</script>";
         } else {
             // Table not found
-            return 'Not found';
+            return 'Table not found';
         }
     }
 

public/index.php

@@ -20,24 +20,24 @@
 ]);
 
 // Jspreadsheet license
-$license = 'YjQzMzdlOTRiOGY3ZTQ0ZDQ4ZTI1YWU3MDFjMDI0ZWJmOTNjODA1NWFiZTRiNDJhNmRiYTJlZjkwODQ3N2IwMWRmNWRjYWUwZDViM2VhMmI3NzVjOTcwMzVlN2ZhODI1Y2EyMmE3NDI0ZmE0ZjVmNGQ2MWEzN2M3MTA4MThhMDUsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk16SXdPVEkwTURBc0ltUnZiV0ZwYmlJNld5SnFjMlpwWkdSc1pTNXVaWFFpTENKcVpYaGpaV3d1Ym1WMElpd2lZMjlrWlhOaGJtUmliM2d1YVc4aUxDSnFjMmhsYkd3dWJtVjBJaXdpTVROemQyMHVZM05pTG1Gd2NDSXNJbXh2WTJGc2FHOXpkQ0pkTENKd2JHRnVJam9pTXlKOQ==';
+$license = 'ZTk0NmUwMDYzMTk4NTY0ZDNiMjhhOGM5M2NlNjdhNDNiM2M2MjQ2YTkwZDZiNDMzMjQxYmJhOWY4MDBhODc4OTEzNTQyNGQ0MWUwODAwNWIzMDc2NjU2NzExMWUwYTMxZjMyYmJkODIzMzZiYjE5MjQ4Mjc1OTYzZDVkYjZjMzMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJMU5UZ3pNVE0yTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
 
 // Jspreasdheet Db class - Updates the table users to whatever table name
 $jss = new \Jspreadsheetdb($database, 'users');
 // Define the primary key
 $jss->setPrimaryKey('user_id');
 
 if (Render::isAjax()) {
-    echo $jss->save($_POST);
+    echo json_encode($jss->save($_POST));
 } else {
-    echo '<html>
-        <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
-        <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
-        <script src="https://jsuites.net/v5/jsuites.js"></script>
-        <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
+    echo "<html>
+        <script src='https://jspreadsheet.com/v11/jspreadsheet.js'></script>
+        <link rel='stylesheet' href='https://jspreadsheet.com/v11/jspreadsheet.css' type='text/css' />
+        <script src='https://jsuites.net/v5/jsuites.js'></script>
+        <link rel='stylesheet' href='https://jsuites.net/v5/jsuites.css' type='text/css' />
         <script>
-        jspreadsheet.setLicense("Y2EzNjI4ODU4Y2Q5MTZmMWQwNWMwMWUwM2VlMzVkMzYwYjcyMWFjNTE4YzExYjgzMjlhYTc3MzBlOGM5NDQ1N2NmZTk2N2JjYzYxZGVkNDM2NjQxY2M4YTA2YzhhMDgyMGRlNTA3OTViMmU4ZGRkODY0MDljZmI0ODBjOTQ2NmUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dOekExTURRNE9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5");
-        </script>';
+        jspreadsheet.setLicense(\"$license\");
+        </script>";
 
     echo $jss->create([]);
 }

resources/docker/aws/default.conf

@@ -2,7 +2,7 @@ server {
     listen   80;
     client_max_body_size 100M;
 
-    server_name ~^(.+)$
+    server_name ~^(.+)$;
     access_log /var/log/nginx/access.log;
     error_log /var/log/nginx/error.log;