mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 22:43:34 -07:00
event table
This commit is contained in:
hay-kot
parent
4b74e991e2
commit
c8c0cc1346
1 changed files with 61 additions and 78 deletions
|
|
@ -62,85 +62,46 @@
|
||||||
</template>
|
</template>
|
||||||
</BaseDialog>
|
</BaseDialog>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
<v-simple-table>
|
<v-data-table
|
||||||
<template v-slot:default>
|
disable-sort
|
||||||
<thead>
|
:headers="headers"
|
||||||
<tr>
|
:items="notifications"
|
||||||
<th class="text-center">
|
class="elevation-1 text-center"
|
||||||
{{ $t("general.type") }}
|
:footer-props="{
|
||||||
</th>
|
'items-per-page-options': [10, 20, 30, 40, -1],
|
||||||
<th class="text-center">
|
}"
|
||||||
{{ $t("general.name") }}
|
:items-per-page="10"
|
||||||
</th>
|
>
|
||||||
<th class="text-center">
|
<template v-for="boolHeader in headers" v-slot:[`item.${boolHeader.value}`]="{ item }">
|
||||||
{{ $t("general.general") }}
|
<div :key="boolHeader.value">
|
||||||
</th>
|
<div v-if="boolHeader.value === 'type'">
|
||||||
<th class="text-center">
|
<v-avatar size="35" class="ma-1" :color="getIcon(item.type).icon ? 'primary' : undefined">
|
||||||
{{ $t("general.recipe") }}
|
<v-icon dark v-if="getIcon(item.type).icon"> {{ getIcon(item.type).icon }}</v-icon>
|
||||||
</th>
|
<v-img v-else :src="getIcon(item.type).image"> </v-img>
|
||||||
<th class="text-center">
|
</v-avatar>
|
||||||
{{ $t("events.database") }}
|
{{ item[boolHeader.value] }}
|
||||||
</th>
|
</div>
|
||||||
<th class="text-center">
|
<v-icon
|
||||||
{{ $t("events.scheduled") }}
|
v-else-if="item[boolHeader.value] === true || item[boolHeader.value] === false"
|
||||||
</th>
|
:color="item[boolHeader.value] ? 'success' : 'gray'"
|
||||||
<th class="text-center">
|
>
|
||||||
{{ $t("settings.migrations") }}
|
{{ item[boolHeader.value] ? "mdi-check" : "mdi-close" }}
|
||||||
</th>
|
</v-icon>
|
||||||
<th class="text-center">
|
<div v-else-if="boolHeader.text === 'Actions'">
|
||||||
{{ $t("group.group") }}
|
<TheButton class="mr-1" delete x-small minor @click="deleteNotification(item.id)" />
|
||||||
</th>
|
<TheButton edit x-small @click="testByID(item.id)">
|
||||||
<th class="text-center">
|
<template v-slot:icon>
|
||||||
{{ $t("user.user") }}
|
mdi-test-tube
|
||||||
</th>
|
</template>
|
||||||
</tr>
|
{{ $t("general.test") }}
|
||||||
</thead>
|
</TheButton>
|
||||||
<tbody>
|
</div>
|
||||||
<tr v-for="(item, index) in notifications" :key="index">
|
<div v-else>
|
||||||
<td>
|
{{ item[boolHeader.value] }}
|
||||||
<v-avatar size="35" class="ma-1" :color="getIcon(item.type).icon ? 'primary' : undefined">
|
</div>
|
||||||
<v-icon dark v-if="getIcon(item.type).icon"> {{ getIcon(item.type).icon }}</v-icon>
|
</div>
|
||||||
<v-img v-else :src="getIcon(item.type).image"> </v-img>
|
|
||||||
</v-avatar>
|
|
||||||
{{ item.type }}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{ item.name }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.general ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.recipe ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.backup ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.scheduled ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.migration ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.group ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
<v-icon color="success"> {{ item.user ? "mdi-check" : "" }} </v-icon>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<TheButton delete small minor @click="deleteNotification(item.id)"> </TheButton>
|
|
||||||
<TheButton edit small @click="testByID(item.id)">
|
|
||||||
<template v-slot:icon>
|
|
||||||
mdi-test-tube
|
|
||||||
</template>
|
|
||||||
{{ $t("general.test") }}
|
|
||||||
</TheButton>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</template>
|
</template>
|
||||||
</v-simple-table>
|
</v-data-table>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -199,6 +160,22 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getAllNotifications();
|
this.getAllNotifications();
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
headers() {
|
||||||
|
return [
|
||||||
|
{ text: this.$t("general.type"), value: "type" },
|
||||||
|
{ text: this.$t("general.name"), value: "name" },
|
||||||
|
{ text: this.$t("general.general"), value: "general", align: "center" },
|
||||||
|
{ text: this.$t("general.recipe"), value: "recipe", align: "center" },
|
||||||
|
{ text: this.$t("events.database"), value: "backup", align: "center" },
|
||||||
|
{ text: this.$t("events.scheduled"), value: "scheduled", align: "center" },
|
||||||
|
{ text: this.$t("settings.migrations"), value: "migration", align: "center" },
|
||||||
|
{ text: this.$t("group.group"), value: "group", align: "center" },
|
||||||
|
{ text: this.$t("user.user"), value: "user", align: "center" },
|
||||||
|
{ text: "Actions", align: "center" },
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getIcon(textValue) {
|
getIcon(textValue) {
|
||||||
return this.notificationTypes.find(x => x.text === textValue);
|
return this.notificationTypes.find(x => x.text === textValue);
|
||||||
|
|
@ -228,3 +205,9 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
th {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue