raven-client/ayanova/src/components/dash-base.vue

<template>
  <v-sheet color="white" elevation="4" height="300px" style="overflow: hidden;">
    <slot name="dash-title">
      <v-toolbar 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 overlap>
                <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 overlap 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> {{ translatedTitle }} </v-toolbar-title>

        <v-spacer></v-spacer>

        <!-- <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn> -->

        <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="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="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 {
  data() {
    return {
      timer: ""
    };
  },
  props: {
    id: {
      type: String,
      required: true
    },
    title: { type: String, default: null },
    showMoreButton: { 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" }
  },
  created() {
    this.refresh();
    if (this.updateFrequency > 0) {
      this.timer = setInterval(() => {
        this.refresh();
      }, this.updateFrequency);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  computed: {
    hasAddUrl: function() {
      return this.addUrl && this.addUrl != "";
    },
    translatedTitle() {
      return this.$ay.t(this.title);
    }
  },
  methods: {
    refresh: function() {
      this.$emit("dash-refresh");
    }
  }
};
</script>