[vue] Redesign product list view
</v-toolbar>
</template>
- <template #item.icon="{ item }">
+ <template #item.displayedName="{ item }">
+ <v-list-item
+ class="pa-0"
+ two-line
+ >
+ <v-list-item-avatar>
<v-avatar
:color="strToColor(item.endpoint)"
size="48"
{{ item.endpoint | productIconName }}
</span>
</v-avatar>
- </template>
+ </v-list-item-avatar>
- <template #item.displayedName="{ item }">
+ <v-list-item-content>
+ <v-list-item-title>
<span
v-if="item.databaseStatus !== DBStatus.OK || !item.accessible"
:style="{ 'text-decoration': 'line-through' }"
>
{{ item.displayedName }}
</router-link>
+
+ <span
+ v-if="!item.accessible"
+ color="grey--text"
+ >
+ <v-icon>mdi-alert-outline</v-icon>
+ You do not have access to this product!
+ </span>
+
+ <span
+ v-else-if="item.databaseStatus !== DBStatus.OK"
+ class="error--text"
+ >
+ <v-icon>mdi-alert-outline</v-icon>
+ {{ dbStatusFromCodeToString(item.databaseStatus) }}
+ <span
+ v-if="item.databaseStatus === DBStatus.SCHEMA_MISMATCH_OK ||
+ item.databaseStatus === DBStatus.SCHEMA_MISSING"
+ >
+ Use <kbd>CodeChecker server</kbd> command for schema
+ upgrade/initialization.
+ </span>
+ </span>
+ </v-list-item-title>
+
+ <v-list-item-subtitle>
+ {{ item.description }}
+ </v-list-item-subtitle>
+ </v-list-item-content>
+ </v-list-item>
</template>
<template #item.description="{ item }">
@@ -198,22 +234,11 @@ data() {
DBStatus,
productNameSearch: null,
headers: [
- {
- text: "",
- value: "icon",
- width: "1%",
- sortable: false
- },
{
text: "Name",
value: "displayedName",
sortable: true
},
- {
- text: "Description",
- value: "description",
- sortable: true
- },
{
text: "Admins",
value: "admins",
