Upgrade to Phoenix 1.4

[JohnKacz]

Should close #18

Disclaimer: I'm not exactly sure what I'm doing. I just followed the upgrade guide and then hunted down some failing tests.

[JohnKacz]

Oh probably also need to update the README as it mentions Poison and brunch files

[jeremyjh]

Oh probably also need to update the README as it mentions Poison and brunch files

Yeah I'd just use the README it would generate with 1.4's mix phx.new in the example.

[JohnKacz]

Yeah I'd just use the README it would generate with 1.4's mix phx.new in the example.

Ah ok I replaced that for the example README, but I was referring to the project's README. Specifically in the View section.

And looking a little further down the instructions for Client reference brunch-config.js which should be changed.

All that led me to realize that webpack.config.js is currently not setup correctly. It's just the generated default file, no datatables configuration. So the Item's index page doesn't load the table.

I'm still learning webpack so if you have advice I'd be happy to take it. Otherwise I'll keep looking into how to set that up properly and updating the project README.

[JohnKacz]

All that led me to realize that webpack.config.js is currently not setup correctly. It's just the generated default file, no datatables configuration. So the Item's index page doesn't load the table.

I'm still learning webpack so if you have advice I'd be happy to take it. Otherwise I'll keep looking into how to set that up properly and updating the project README.

In case it helps the error I'm getting from calling dt(); here is:

jQuery.Deferred exception: this is undefined DataTable@webpack:///./node_modules/datatables.net/js/jquery.dataTables.js?:112:3
__webpack_exports__.default/<@webpack:///./js/table.js?:10:5
mightThrow@webpack:///./node_modules/jquery/dist/jquery.js?:3534:21
resolve/</process<@webpack:///./node_modules/jquery/dist/jquery.js?:3602:12
 undefined

[jeremyjh]

I think we no longer need to call dt(); in tables.js if we're using webpack. I didn't try it, but I noticed in the examples from this thread people were not doing it. https://datatables.net/forums/discussion/32542/datatables-and-webpack

[JohnKacz]

I think we no longer need to call dt(); in tables.js if we're using webpack.

That worked! I updated the example project's README to the new generated default (some links were updated) and just removed the sections referring to brunch.

I think that does it. What do you think?

[jeremyjh]

Hey, thanks for plugging away at this. I agree it looks like we are really close. One thing I think is missing are the Datatables images. I don't see the little sort arrows above the columns. These images are copied with a brunch plugin 'copycat', per brunch-config.js.

    copycat: {
      'images': [ 'node_modules/datatables.net-dt/images' ],
    },

I Googled a bit and there is an equivalent webpack module in contrib: https://github.com/webpack-contrib/copy-webpack-plugin .

Webpack also supports inclusion of static files via require but to me that would make the most sense if the datatables NPM package were requiring both CSS and images. Since it doesn't, I think the plugin is a good workaround.

[jeremyjh]

I think we need to also include the Datatables CSS. I'm not sure the best way to do that, in some of the examples they do use require for that.

[JohnKacz]

I'm unsure of what to do here.

I tried adding { from: 'node_modules/datatables.net-dt/images', to: 'static/images' }, to the CopyWebpackPlugin, but I don't know if that is working because the CSS isn't loaded.

I tried a few things to load/bundle the the jquery.datatables.css CSS but I clearly don't know what I'm doing 😜

[jeremyjh]

Hey I managed to get this working. We actually don't need to use the CopyWebpackPlugin for this. Instead we'll import the CSS in app.js and url-loader will embed the images in a data-uri.

npm install url-loader --save-dev

//app.js
import _ from "datatables.net-dt/css/jquery.datatables.css"

//webpack.config.js
module: {
  rules: [
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

[JohnKacz]

Awesome. This looks to be working for me as well. Thanks for the help.

[jeremyjh]

Thanks! Sorry it took so long to get back this. I pushed the udpated library to Hex as 0.3.0.