feat: inital commit

pixelinfinito · Mar 28, 2023 · c70a0fc · c70a0fc
commit c70a0fc
Show file tree

Hide file tree

Showing 16 changed files with 4,948 additions and 0 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,32 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - name: Make the production plugin bundle
+        run: |
+          release_version=$(cat package.json | jq -r '.version')
+          echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
+          yarn
+          yarn build
+      - name: Perform Github Release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: v${{ env.RELEASE_VERSION }}
+          tag_name: v${{ env.RELEASE_VERSION }}
+          generate_release_notes: true
+          files: |
+            dist/*.tar.gz
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.idea/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+.github
+rollup.config.js
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# Datatables
+This is a readme for your new Budibase plugin.
+
+# Description
+DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
+
+Find out more about [Budibase](https://github.com/Budibase/budibase).
+
+## Instructions
+
+To build your new  plugin run the following in your Budibase CLI:
+```
+budi plugins --build
+```
+
+You can also re-build everytime you make a change to your plugin with the command:
+```
+budi plugins --watch
+```
+
diff --git a/components/Table.svelte b/components/Table.svelte
@@ -0,0 +1,155 @@
+<script>
+    import { Engine, functionCreateDatatable, Pagination, RowsPerPage, Search, Sort } from 'svelte-datatables-net';
+    import {onMount} from "svelte"
+    export let search   
+    export let resultPage
+    export let pagination
+    export let dataProvider
+    export let parRowsPerPage
+    export let parSortOrder
+    export let columns
+    export let parSortBy
+    let objectDatatable //= functionCreateDatatable({})
+    let tableEvent 
+
+    let th = []
+    let displayNames = []
+    //let data = {}
+
+    /* onMount(()=>{
+        console.log('onMount-------------------------------------------------')
+        console.log(dataProvider.rows, 'data')
+        if(dataProvider.rows){
+            console.log('provider')
+            columns.forEach(element=>{
+                th.push(element.name)
+                displayNames.push(element.displayName)
+            })
+
+            console.log("carregou", dataProvider.rows ?? [])
+            objectDatatable =  functionCreateDatatable({
+                parData: dataProvider.rows ?? [],
+                parSearchableColumns: ['title', 'description', 'date'],
+                parRowsPerPage: '5',
+                parSearchString: '',
+                parSortBy: 'title',
+                parSortOrder: 'ascending'
+            });
+        }
+    }) */
+    /* $: if(data){
+        console.log(data, 'data de valores')
+        objectDatatable =  functionCreateDatatable(data);
+    } */
+    
+   /*  $:{
+        th = []
+        displayNames = []
+        /* if(dataProvider.rows[0]){
+            columns.forEach(element=>{
+                th.push(element.name)
+                displayNames.push(element.displayName)
+            })
+        } 
+        if(dataProvider.rows){
+            columns.forEach(element=>{
+                th.push(element.name)
+                displayNames.push(element.displayName)
+            })
+            console.log("carregou", dataProvider.rows ?? [])
+            objectDatatable =  functionCreateDatatable({
+                parData: dataProvider.rows ?? [],
+                parSearchableColumns: ['title', 'description', 'date'],
+                parRowsPerPage: '5',
+                parSearchString: '',
+                parSortBy: 'title',
+                parSortOrder: 'ascending'
+            });
+        }
+    } */
+
+    onMount(()=>{
+        if(dataProvider.rows){
+            columns.forEach(element=>{
+                th.push(element.name)
+                displayNames.push(element.displayName)
+            })
+            objectDatatable =  functionCreateDatatable({
+                parData: dataProvider.rows ?? [],
+                parSearchableColumns: ['title', 'description', 'date'],
+                parRowsPerPage: '5',
+                parSearchString: '',
+                parSortBy: 'title',
+                parSortOrder: 'ascending'
+            });
+        }
+    })
+
+    function handleClick(content){
+        console.log(content, 'handle clickkkkkkkkkkk')
+        tableEvent(JSON.parse(JSON.stringify(content)))
+    }
+    
+</script>
+
+<svelte:head>
+	<link
+		href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+		rel="stylesheet"
+		integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+		crossorigin="anonymous"
+	/>
+</svelte:head>
+
+{#if objectDatatable}
+<Engine bind:propDatatable={objectDatatable} />
+
+<div class="card">
+    <p>
+        {#if search}
+            <Search bind:propDatatable={objectDatatable}   propPlaceholder="Type here.. j." />
+        {/if}
+    </p>
+    {#if resultPage}
+        <p>
+            <RowsPerPage bind:propDatatable={objectDatatable}>
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="20">20</option>
+                <option value="30">30</option>
+                <option value="all">ALL</option>
+            </RowsPerPage>
+            <span>RESULTS PER PAGE</span>
+        </p>
+    {/if}
+
+        <table class="table table-striped"  >
+            <thead>
+                <tr  >
+                    {#each displayNames as item}
+                        <th>{item}</th>
+                    {/each}
+                </tr>
+            </thead>
+            <tbody>
+                {#each objectDatatable.arrayData as row}              
+                    <tr on:onclick={handleClick}>
+                        {#each  th as thItem}
+                            <td>
+                                {row[thItem]}
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+
+    {#if pagination}
+        <p>
+            <Pagination bind:propDatatable={objectDatatable} propSize="small" />
+        </p>
+    {/if}
+</div>
+
+
+{/if}
diff --git a/components/example.svelte b/components/example.svelte
@@ -0,0 +1,73 @@
+<script>
+    import { Engine, functionCreateDatatable, Pagination, RowsPerPage, Search, Sort } from 'svelte-datatables-net';
+
+    const arrayUsers = [
+        { id: 9, name: 'Denzel', age: 24, city: 'Newcastle' },
+        { id: 12, name: 'Olga', age: 35, city: 'Las Cruces' },
+        { id: 13, name: 'Barry', age: 27, city: 'Newport' },
+        { id: 10, name: 'Anthony', age: 47, city: 'Los Banos' },
+        { id: 2, name: 'Mary', age: 45, city: 'Los Angeles' },
+        { id: 1, name: 'John', age: 21, city: 'New York' },
+        { id: 3, name: 'Mark', age: 23, city: 'Boston' },
+        { id: 5, name: 'Brian', age: 22, city: 'New Orleans' },
+        { id: 14, name: 'Larry', age: 41, city: 'Los Altos' },
+        { id: 4, name: 'Cris', age: 32, city: 'Las Vegas' },
+        { id: 6, name: 'Stuart', age: 46, city: 'Los Gatos' },
+        { id: 7, name: 'Owen', age: 24, city: 'Boston' },
+        { id: 8, name: 'Paul', age: 33, city: 'Las Vegas' },
+        { id: 11, name: 'Fred', age: 25, city: 'Boston' },
+        { id: 15, name: 'Richard', age: 29, city: 'Boston' },
+        { id: 16, name: 'Bruna', age: 31, city: 'Las Vegas' }
+    ];
+
+    let objectDatatable = functionCreateDatatable({
+        parData: arrayUsers,
+        parSearchableColumns: ['name', 'city'],
+        parRowsPerPage: '5',
+        parSearchString: '',
+        parSortBy: 'city',
+        parSortOrder: 'ascending'
+    });
+</script>
+
+<Engine bind:propDatatable={objectDatatable} />
+
+<p>
+    <span>Search:</span>
+    <Search bind:propDatatable={objectDatatable} propPlaceholder="Type here..." />
+</p>
+<p>
+    <RowsPerPage bind:propDatatable={objectDatatable}>
+        <option value="5">5</option>
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="30">30</option>
+        <option value="all">ALL</option>
+    </RowsPerPage>
+    <span>RESULTS PER PAGE</span>
+</p>
+<p>
+    <Pagination bind:propDatatable={objectDatatable} propSize="small" />
+</p>
+
+<table>
+    <thead>
+        <tr>
+            <th><Sort bind:propDatatable={objectDatatable} propColumn={'id'}>ID (click here)</Sort></th>
+            <th><Sort bind:propDatatable={objectDatatable} propColumn={'name'}>NAME (click here)</Sort>
+            </th>
+            <th>AGE</th>
+            <th>CITY</th>
+        </tr>
+    </thead>
+    <tbody>
+        {#each objectDatatable.arrayData as row}
+            <tr>
+                <td>{row.id}</td>
+                <td>{row.name}</td>
+                <td>{row.age}</td>
+                <td>{row.city}</td>
+            </tr>
+        {/each}
+    </tbody>
+</table>