225 lines
7.3 KiB
Vue
225 lines
7.3 KiB
Vue
<template>
|
|
<!-- <v-sheet color="white" height="420px" style="overflow: auto;" elevation="4"> -->
|
|
<v-sheet style="overflow: auto;" elevation="4">
|
|
<slot name="dash-title">
|
|
<v-toolbar color="grey lighten-5" flat dense>
|
|
<template v-if="showMoreButton">
|
|
<v-btn
|
|
text
|
|
icon
|
|
color="primary"
|
|
@click="$emit('dash-more-click', id)"
|
|
>
|
|
<template v-if="count > 0">
|
|
<v-badge inline>
|
|
<template v-slot:badge>
|
|
{{ count }}
|
|
</template>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</v-badge>
|
|
</template>
|
|
<template v-else>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</template>
|
|
</v-btn>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="count > 0">
|
|
<v-badge inline class="mr-4">
|
|
<template v-slot:badge>
|
|
{{ count }}
|
|
</template>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</v-badge>
|
|
</template>
|
|
<template v-else>
|
|
<v-icon class="mr-4">{{ icon }}</v-icon>
|
|
</template>
|
|
</template>
|
|
<v-toolbar-title> {{ displayTitle }} </v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-menu bottom left>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn icon v-bind="attrs" v-on="on">
|
|
<v-icon>$ayiEllipsisV</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item
|
|
v-if="showMoreButton"
|
|
@click="$emit('dash-more-click', id)"
|
|
>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("More") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item
|
|
v-if="showContextButton"
|
|
@click="$emit('dash-context', id)"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiCog</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Settings") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item v-if="hasAddUrl" :to="addUrl">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiPlus</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-refresh')">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiSync</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Refresh") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-start', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiStepBackward</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("First") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-back', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiBackward</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Backward") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-forward', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiForward</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Forward") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-end', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiStepForward</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Last") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-remove', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiTrashAlt</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Remove") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar>
|
|
</slot>
|
|
<slot name="settings">
|
|
<div></div>
|
|
</slot>
|
|
<div v-if="hasError" class=" d-flex align-center">
|
|
<v-alert
|
|
data-cy="dash-error"
|
|
color="error"
|
|
icon="$ayiExclamationTriangle"
|
|
class="multi-line"
|
|
outlined
|
|
>{{ errorMessage }}</v-alert
|
|
>
|
|
</div>
|
|
<slot v-if="!hasError" name="main"
|
|
><div class="ml-4 mt-1 d-flex align-center">
|
|
<div>
|
|
<span class="grey--text"
|
|
>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
|
|
CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
|
|
CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
|
|
CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
|
|
CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT</span
|
|
>
|
|
</div>
|
|
</div></slot
|
|
>
|
|
</v-sheet>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
title: { type: String, default: null },
|
|
showMoreButton: { type: Boolean, default: false },
|
|
showContextButton: { type: Boolean, default: false },
|
|
addUrl: { type: String, default: null },
|
|
count: { type: Number, default: 0 },
|
|
updateFrequency: { type: Number, default: 60000 },
|
|
maxListItems: { type: Number, default: 10 },
|
|
icon: { type: String, default: "$ayiTachometer" },
|
|
errorMessage: { type: String, default: null },
|
|
settings: { type: Object, default: null }
|
|
},
|
|
data() {
|
|
return {
|
|
timer: ""
|
|
};
|
|
},
|
|
computed: {
|
|
hasAddUrl: function() {
|
|
return this.addUrl && this.addUrl != "";
|
|
},
|
|
displayTitle() {
|
|
if (this.settings && this.settings.customTitle) {
|
|
return this.settings.customTitle;
|
|
} else {
|
|
return this.$ay.t(this.title);
|
|
}
|
|
},
|
|
hasError() {
|
|
return this.errorMessage != null && this.errorMessage.length > 0;
|
|
}
|
|
},
|
|
created() {
|
|
if (this.updateFrequency > 0) {
|
|
this.timer = setInterval(() => {
|
|
this.refresh();
|
|
}, this.updateFrequency + window.$gz.util.getRandomInt(60000)); //add up to 60 seconds so they don't all fire at once
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
methods: {
|
|
refresh: function() {
|
|
this.$emit("dash-refresh");
|
|
},
|
|
showContext: function() {
|
|
this.$emit("dash-context");
|
|
}
|
|
}
|
|
};
|
|
</script>
|