Add additional table columns

[bwaltz]

Is it possible to add additional columns to the current courses table for a department and the course catalogue table? We would like to add course number as a column to this table:

course number can be found under crsno in the API.

We'd also like to add course number, and description to the catalogue table here:

https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/academics/course-catalogue/

[gregoryspragginsjr]

@bwaltz Ive gone ahead and added course number to these corresponding tables (https://github.com/ColbyCommunications/colby-college-theme/commit/cd207390b1c2264e18bb16e524423522c5443785), but have withheld on descriptions for the course catalog. I've concerns about spacing across the board on all of these, and would like to see if we cant find a creative solution.

[bwaltz]

@gregoryspragginsjr thanks for the updates! Are you concerned with the spacing on the Current Courses pages, like the one on Art, for example:

https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/academics/departments-and-programs/art/current-courses/

To us, that table looks pretty good. But maybe you've found some icky examples.

[gregoryspragginsjr]

@bwaltz Not concerned about it on Current Course pages (I agree, those look good), moreso the course catalog: https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/academics/course-catalogue/ as that table includes department code. I could, of course, remove that in place of the description so that it (course catalog) matches the current courses 1 to 1.

That would be an appropriate solve. But if we try to squeeze all 4 columns in, I fear it may look cluttered. Let me know your thoughts.

[bwaltz]

@gregoryspragginsjr Why don't we pop the description open in a modal? I talked to Andrew about this and this is the direction we want to go in. We understand the considerations of using that type of element on mobile, but we do think users will be expecting course descriptions on that page. The other columns are also important and intregral.

Speaking of modals, I'll be posting something similar in the discussion about search. Perhaps we can use the same component.

[gregoryspragginsjr]

@bwaltz I've gone ahead and pushed a new commit introducing a modal component to the codebase: https://github.com/ColbyCommunications/colby-college-theme/commit/df8cf0d011fa06ee97960af72d0897504e038e86 , and tailoring it to match the course catalog table; you should see it pop up on your next composer deployment. Let me know how you feel about this feature, and we can close this up. Ill also be applying the modal to your requested Search integration shortly after.

[bwaltz]

@gregoryspragginsjr it appears the latest change broke the build process and thus the site:

https://master-7rqtwti-ouiqvb5juucvu.us-4.platformsh.site/academics/

I'm getting the following error during the build:

ERROR in ./src/twig/components/table/Table.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/twig/components/table/Table.vue?vue&type=script&lang=js) 5:0-57 Module not found: Error: Can't resolve '/src/twig/components/modal/Modal.vue' in '/app/web/wp-content/themes/colby-college-theme/src/twig/components/table' resolve '/src/twig/components/modal/Modal.vue' in '/app/web/wp-content/themes/colby-college-theme/src/twig/components/table' using description file: /app/web/wp-content/themes/colby-college-theme/package.json (relative path: ./src/twig/components/table) Field 'browser' doesn't contain a valid alias configuration root path /app/web/wp-content/themes/colby-college-theme using description file: /app/web/wp-content/themes/colby-college-theme/package.json (relative path: ./src/twig/components/modal/Modal.vue) no extension Field 'browser' doesn't contain a valid alias configuration /app/web/wp-content/themes/colby-college-theme/src/twig/components/modal/Modal.vue doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /app/web/wp-content/themes/colby-college-theme/src/twig/components/modal/Modal.vue.js doesn't exist

[gregoryspragginsjr]

@bwaltz Hey Brandon, it looks like at some point there was a change to gitignore for the components folder (which is crucial for the project). Not sure if you applied that or not. This was preventing you from getting my new changes and new component IE the modal. My latest commit should fix this. Try now, and let me know.

[bwaltz]

@gregoryspragginsjr but doesn't the components folder get generated by the build process? Why does it need to be committed to the repo?

[bwaltz]

it should've only ignored the generated root components directory, not anything under /src/twig/components

[gregoryspragginsjr]

@bwaltz you're confusing the twig/components folder in our src (the primary folder for the project) with the components folder that is built in the root of the wordpress install (adjacent to wp-content) the .gitignore is living in the theme folder, so it was killing the wrong folder. components (static fractal component library) on my end is never tracked in git because it's too far up the tree.

[bwaltz]

@gregoryspragginsjr Ahh I see. To get fractal to build and be hosted in GH pages, I needed change where fractal builds itself. Now it builds itself into a components directory in the theme. Which means that if you ever run it locally, it builds that components folder and we needed to ignore it so that we didn't commit it.

Sorry for the confusion.

Just so I'm clear, what does the components folder that you need do in the theme root? Maybe then I should change the folder name where fractal gets build.

[gregoryspragginsjr]

@bwaltz no worries man. In that case, I would rename the fractal components folder to something more declarative like component-library. That twig/components folder is literally the most important folder of the repo as it holds the src for all your components whereas fractal's components folder basically builds a static site out of everything in twig/components.

To change that name, your going to want to navigate to fractal.config.js in the theme root, and change line 23. It should look something like: fractal.web.set('builder.dest', __dirname + '/components'); That /components would then get swapped to /component-library or any name of your choice.

[bwaltz]

@gregoryspragginsjr sounds good, I'll do that!