ProjectDescriptionCard.vue

<template>
  <div class="col q-gutter-md">
    <q-list dense>
      <q-item>
        <q-item-section side>
          <q-item-label caption>Uploaded by</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar>
          <div class="text-center">
            <router-link :to="`/users/${project.userId}`">
              <q-avatar size="128px">
                <q-img basic :src="project.userAvatar" />
              </q-avatar>
            </router-link>
            <br />
            <div class="text-caption">{{project.username}}</div>
          </div>
        </q-item-section>
      </q-item>
    </q-list>

    <q-list>
      <q-item clickable @click="showDocumentation">
        <q-item-section side>
          <q-icon name="book" color="teal-3" />
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-teal-6 text-weight-bold">Documentation</q-item-label>
        </q-item-section>
      </q-item>
      <q-item clickable @click="showDownloads">
        <q-item-section side>
          <q-icon name="save" color="teal-3" />
        </q-item-section>
        <q-item-section class="text-teal-6 text-weight-bold">Download files</q-item-section>
      </q-item>
    </q-list>

    <q-list>
      <q-item>
        <q-item-section side>
          <q-item-label caption>Category</q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ category_label }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section side>
          <q-item-label caption>Created</q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>{{formatted_date}}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section side>
          <q-item-label caption>Tags</q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section>
          <div class="row">
            <q-chip dense v-for="tag,idx in project.tags" v-bind:key="tag" :label="tag" />
          </div>
        </q-item-section>
      </q-item>
    </q-list>

    <div class="flex row q-gutter-md">
      <q-card flat class="text-center">
        <q-icon size="64px" name="star" color="grey-3" />
        <div class="text-center text-caption">Stars</div>
        <div class="text-center text-h6 text-grey text-weight-bold">0</div>
      </q-card>
      <q-card flat class="text-center">
        <q-icon size="64px" name="save" color="grey-3" />
        <div class="text-center text-caption">Downloads</div>
        <div class="text-center text-h6 text-grey text-weight-bold">{{project.downloadsCount || 0}}</div>
      </q-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  // name: 'ComponentName',
  props: ["project"],
  data() {
    return {};
  },
  methods: {
    showDocumentation() {},
    showDownloads() {}
  },
  computed: {
    category_label() {
      if (!this.project) return "";
      console.log(this.project.category);
      const cat = this.getCategory(this.project.category);
      return cat ? cat.label : "No category";
    },
    formatted_date() {
      if (!this.project) return "";
      if (this.project.created) {
        try {
          const created_date = this.project.created.toDate();
          console.log(created_date);
          return this.$niceTime(created_date);
        } catch {
          return "";
        }
      }
      return "";
    },

    ...mapGetters({ getCategory: "categories/categoryByName" })
  }
};
</script>