fleet/website/assets/js/components/rituals.component.js
Eric db79280f1e
Website: Update rituals table styles (#33242)
Closes: https://github.com/fleetdm/fleet/issues/31942

Changes:
- Updated the styles of ritual tables in the handbook to keep the
formatting of multi-line descriptions.
2025-09-19 16:28:01 -05:00

78 lines
2.2 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 purpose="ritual-description" v-if="!ritual.moreInfoUrl">{{ritual.description}}</td>
<td purpose="ritual-description" 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: {
}
});