fleet/website/assets/js/components/rituals.component.js
Eric 3e1936d9c7
Website: add <rituals> component, add ritualsTables (parsed from YAML) to website configuration (#13084)
Changes:
- Updated the `build-static-content` script to parse files named
`rituals.yml` in the handbook folder, and add the contents to the
website's configuration as
`sails.config.builtStaticContent.ritualsTables`, and to throw errors if
a `rituals.yml` file contains a ritual that is missing a required value.
- Created the `<rituals>` component, a component that takes a single
prop (`ritualsTable`) and renders a table containing a row for each
ritual.
- Added a new property to `handbook/company/rituals.yml` - moreInfoUrl.
If this value is present, the description in the rendered HTML table (of
the `<rituals>` component) will link to the URL provided.
- updated view-basic-handbook to send
`sails.config.builtStaticContent.ritualsTables` in `SAILS_LOCALS`

---------

Co-authored-by: Sampfluger88 <[email protected]>
2023-08-03 21:58:02 -05:00

78 lines
2.1 KiB
JavaScript
Vendored

/**
* <rituals>
* -----------------------------------------------------------------------------
*
*
* @type {Component}
*
*
* -----------------------------------------------------------------------------
*/
parasails.registerComponent('rituals', {
// ╔═╗╦═╗╔═╗╔═╗╔═╗
// ╠═╝╠╦╝║ ║╠═╝╚═╗
// ╩ ╩╚═╚═╝╩ ╚═╝
props: [
'rituals',
],
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function (){
return {
//…
};
},
// ╦ ╦╔╦╗╔╦╗╦
// ╠═╣ ║ ║║║║
// ╩ ╩ ╩ ╩ ╩╩═╝
template: `
<div>
<table class="table table-responsive">
<thead>
<tr>
<td>Task name</td>
<td>Started on</td>
<td>Frequency</td>
<td>Description</td>
<td>DRI</td>
</tr>
</thead>
<tbody>
<tr v-for="ritual in rituals">
<td>{{ritual.task}}</td>
<td>{{ritual.startedOn}}</td>
<td>{{ritual.frequency}}</td>
<td v-if="!ritual.moreInfoUrl">{{ritual.description}}</td>
<td v-else><a :href="ritual.moreInfoUrl">{{ritual.description}}</a></td>
<td>{{ritual.dri}}</td>
</tr>
</tbody>
</table>
</div>
`,
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
beforeMount: function() {
//…
},
mounted: async function(){
//…
},
beforeDestroy: function() {
//…
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
}
});