50173a4413
* Separate Vue component styles out from SFCs. * Added 'MCT.prototype.getAssetPath' and using 'openmct.setAssetPath' to get relative path for assets. * Re-implements `openmct.plugins.Snow()`, and `openmct.plugins.Espresso()` (as well as a new theme `openmct.plugins.Maelstron()`)
121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<div class="c-table c-table--sortable c-list-view">
|
|
<table class="c-table__body">
|
|
<thead class="c-table__header">
|
|
<tr>
|
|
<th
|
|
class="is-sortable"
|
|
:class="{
|
|
'is-sorting': sortBy === 'model.name',
|
|
'asc': ascending,
|
|
'desc': !ascending
|
|
}"
|
|
@click="sort('model.name', true)"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
class="is-sortable"
|
|
:class="{
|
|
'is-sorting': sortBy === 'type.name',
|
|
'asc': ascending,
|
|
'desc': !ascending
|
|
}"
|
|
@click="sort('type.name', true)"
|
|
>
|
|
Type
|
|
</th>
|
|
<th
|
|
class="is-sortable"
|
|
:class="{
|
|
'is-sorting': sortBy === 'model.persisted',
|
|
'asc': ascending,
|
|
'desc': !ascending
|
|
}"
|
|
@click="sort('model.persisted', false)"
|
|
>
|
|
Created Date
|
|
</th>
|
|
<th
|
|
class="is-sortable"
|
|
:class="{
|
|
'is-sorting': sortBy === 'model.modified',
|
|
'asc': ascending,
|
|
'desc': !ascending
|
|
}"
|
|
@click="sort('model.modified', false)"
|
|
>
|
|
Updated Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<list-item
|
|
v-for="item in sortedItems"
|
|
:key="item.objectKeyString"
|
|
:item="item"
|
|
:object-path="item.objectPath"
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import compositionLoader from './composition-loader';
|
|
import ListItem from './ListItem.vue';
|
|
|
|
export default {
|
|
components: {ListItem},
|
|
mixins: [compositionLoader],
|
|
inject: ['domainObject', 'openmct'],
|
|
data() {
|
|
let sortBy = 'model.name',
|
|
ascending = true,
|
|
persistedSortOrder = window.localStorage.getItem('openmct-listview-sort-order');
|
|
|
|
if (persistedSortOrder) {
|
|
let parsed = JSON.parse(persistedSortOrder);
|
|
|
|
sortBy = parsed.sortBy;
|
|
ascending = parsed.ascending;
|
|
}
|
|
|
|
return {
|
|
sortBy,
|
|
ascending
|
|
};
|
|
},
|
|
computed: {
|
|
sortedItems() {
|
|
let sortedItems = _.sortBy(this.items, this.sortBy);
|
|
if (!this.ascending) {
|
|
sortedItems = sortedItems.reverse();
|
|
}
|
|
return sortedItems;
|
|
}
|
|
},
|
|
methods: {
|
|
sort(field, defaultDirection) {
|
|
if (this.sortBy === field) {
|
|
this.ascending = !this.ascending;
|
|
} else {
|
|
this.sortBy = field;
|
|
this.ascending = defaultDirection;
|
|
}
|
|
|
|
window.localStorage
|
|
.setItem(
|
|
'openmct-listview-sort-order',
|
|
JSON.stringify(
|
|
{
|
|
sortBy: this.sortBy,
|
|
ascending: this.ascending
|
|
}
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
</script>
|