ghiscoding / aurelia-slickgrid

Aurelia-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
https://ghiscoding.github.io/aurelia-slickgrid
MIT License
129 stars 19 forks source link

aurelia-cli/systemjs excel export fix #364

Closed johntom closed 4 years ago

johntom commented 4 years ago
Software Version(s)
Aurelia.cli 1.3.1
Aurelia-Slickgrid 2.18.2

| Operating System | win10 | NPM/Node/Yarn |nodeL11.10.0 / yarn 1.22.4

Context

A while back (version 2.16.5 of aurleia-slickgrid) I could not get excel export to work with aurleli-cli using systemjs and this is what I did to fix when I took a deeper dive. I recommend using yarn and I started to get odd results with npm.

Solution

1)make sure both depenencies are in package.json

"excel-builder-webpack": "^1.0.3",
 "excel-builder-webpacker": "^1.0.6",
and make sure of the following 
 "engines": {
    "node": ">=10.0.0"
  }

2) modify aurelia.json and add the following (i.e. below "name": "excel-builder-webpack"

{
            "name": "excel-builder-webpacker",
            "path": "../node_modules/excel-builder-webpacker",
            "main": "src/excel-builder",
            "deps": [
              "jszip",
              "lodash"
            ]
          },
and add  "node_modules/aurelia-slickgrid/dist/styles/css/*": "slickgrid-theme-bootstrap"
to copyFiles section of aurelia.json
"copyFiles": {
      "node_modules/bootstrap/dist/fonts/*": "bootstrap/dist/fonts",
      "node_modules/font-awesome/fonts/*": "font-awesome/fonts",
      "node_modules/aurelia-slickgrid/dist/styles/css/*": "slickgrid-theme-bootstrap"

    }

3) yarn install

4) if you want to publish to Google Cloud Platform a) add app.yaml

runtime: nodejs10
handlers:
- url: /
  static_files: index.html
  upload: index.html

- url: /(.*)
  static_files: \1
  upload: (.*)

b) modify index.html by copying the three css files and comenting out the original( I don't know exactly why but after many trial and errors this just works!)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aurelia</title>
       <!-- <link rel="stylesheet" type="text/css" href="../node_modules/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/aurelia-slickgrid/dist/lib/multiple-select/multiple-select.css">
    <link rel="stylesheet" type="text/css" href="../node_modules/aurelia-slickgrid/dist/styles/css/slickgrid-theme-bootstrap.css"> -->
   <link rel="stylesheet" type="text/css" href="./flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="./multiple-select.css">
<link rel="stylesheet" type="text/css" href="./slickgrid-theme-bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js"></script>
    <script>SystemJS.import("aurelia-bootstrapper").catch(function(err) { console.log(err); })</script>
  </body>
</html>

I now deploy my aurelia-slickgrid code to GCP and I'm working on converting missing examples from ts to js and started with example 28 but did have not been able to get scss to work HTH someone using systemjs cli as I'm not a fan of webpack and prefer using javascript. John slickgridex28.zip

ghiscoding commented 4 years ago

Sorry but I don't understand, is that more of an instruction that you want to add as documentation? We can add a Wiki if that is the intent. On my side, I only use WebPack even though I did try them all at some point (long time ago), I don't wish to spend too much time on bundler I don't use but if others can help in making better documentations (Wikis) then that is great

johntom commented 4 years ago

Yes, I was just adding how I got Systemjs client to work with excel export and I do remember and understand how you feel about supporting different budler's and was just hoping to help anyone not wanting to use webpack. Didn't know the best way to communicate what I discovered and appreciate all your contributions to the aurelia community. John

On Sun, Jun 14, 2020 at 8:54 PM Ghislain B. notifications@github.com wrote:

Sorry but I don't understand, is that more of an instruction that you want to add as documentation? We can add a Wiki if that is the intent. On my side, I only use WebPack even though I did try them all at some point (long time ago), I don't wish to spend too much time on bundler I don't use.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ghiscoding/aurelia-slickgrid/issues/364#issuecomment-643849978, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOKLAGFVKM3LCO3N7NWQOLRWVWMRANCNFSM4N5VJKXQ .

ghiscoding commented 4 years ago

I can turn it into Wiki, if you could just provide a name/subject for the Wiki. Thanks

ghiscoding commented 4 years ago

Ok, great I created a Wiki Excel Export - Installation with SystemJS.

Thanks a lot for sharing.

johntom commented 4 years ago

Thank you! And sorry if this was something I could have added to wiki. John

On Tue, Jun 16, 2020 at 10:03 PM Ghislain B. notifications@github.com wrote:

Ok I created a Wiki Excel Export - Installation with SystemJS https://github.com/ghiscoding/aurelia-slickgrid/wiki/Export-to-Excel-with-SystemJS. Thanks for this info.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ghiscoding/aurelia-slickgrid/issues/364#issuecomment-645102510, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOKLACDB6MZFY4Z2KV3O7TRXAP7ZANCNFSM4N5VJKXQ .

ghiscoding commented 4 years ago

I did not open the Wiki to the outside, but feel free to ping me this way if you want to update any other Wikis or create new ones. Thanks again. 👍