Pitcher File Card

PFileCard is used to present files as cards, based on Pitcher file data.

Simple usage

Simple usage example of PFileCard.

Show Code

<template>
  <VRow justify="center">
    <PFileCard
      :imgUrl="file.s3Url"
      :body="file.body"
      :keywords="file.keywords"
      :date="new Date(file.startDate).toDateString()"
      :isNew="file.isNew"
      :isFavorite="file.isFavorite"
      :imageProps="file.imageProps"
      :showFileOptions="file.showFileOptions"
      :hideFavorite="file.hideFavorite"
      @on-click-download="showSnackbar('on-click-download', 'download')"
      @on-click-share="showSnackbar('on-click-share', 'share')"
      @on-click-image="showSnackbar('on-click-image', 'image')"
      @on-click-favorite="showSnackbar('on-click-favorite', 'favorite')"
    />

    <VSnackbar v-model="snackbarModel" timeout="2000" right>
      <div class="font-weight-bold">{{ firedEvent }}:</div>
      <span>{{ clickedItem }} clicked</span>
    </VSnackbar>
  </VRow>
</template>

<script>
import { PFileCard } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFileCard,
  },
  setup() {
    const file = ref({
      body: 'Knicks Test',
      s3Url: 'https://miro.medium.com/max/1200/1*OZO8MCMgydp8ICAPvTKq3Q.jpeg',
      keywords: 'keyword1:true, systemKeyword: true',
      startDate: 1509460168,
      isNew: false,
      isFavorite: false,
    })

    const snackbarModel = ref(false)
    const firedEvent = ref(undefined)
    const clickedItem = ref(undefined)

    const showSnackbar = (event, text) => {
      snackbarModel.value = true
      firedEvent.value = event
      clickedItem.value = text
    }

    return { file, snackbarModel, firedEvent, clickedItem, showSnackbar }
  },
})
</script>

Multiple File Cards

Example usage of multiple File Cards.

Show Code

<template>
  <VContainer fluid>
    <VRow>
      <PFileCard
        v-for="file in files"
        :key="file.id"
        :imgUrl="file.s3Url"
        :body="file.body"
        :keywords="file.keywords"
        :date="file.startDate.toString()"
        :isNew="file.isNew"
        :isFavorite="file.isFavorite"
        :imageProps="file.imageProps"
        :showFileOptions="file.showFileOptions"
        :hideFavorite="file.hideFavorite"
        @on-click-download="showSnackbar(file, 'on-click-download', 'download')"
        @on-click-share="showSnackbar(file, 'on-click-share', 'share')"
        @on-click-image="showSnackbar(file, 'on-click-image', 'image')"
        @on-click-favorite="showSnackbar(file, 'on-click-favorite', 'favorite')"
      />

      <VSnackbar v-model="snackbarModel" timeout="2000" right>
        <div class="font-weight-bold">{{ firedEvent }}:</div>
        <span>{{ clickedItem }} clicked</span>
      </VSnackbar>
    </VRow>
  </VContainer>
</template>

<script>
import { PFileCard } from '@pitcher/pitcherify'
import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PFileCard,
  },
  setup() {
    const files = ref([
      {
        id: 1,
        body: 'Knicks Test',
        s3Url: 'https://miro.medium.com/max/1200/1*OZO8MCMgydp8ICAPvTKq3Q.jpeg',
        keywords: 'showFileOptions:true, contain:false, hideFavorite:true',
        startDate: 1509460168,
        isNew: false,
        hideFavorite: true,
        showFileOptions: true,
      },
      {
        id: 2,
        body: 'OSFP Test',
        category: 'presentation',
        s3Url: 'https://www.olympiacos.org/wp-content/uploads/2019/06/05/Anakoinosi-flag.jpg',
        keywords: 'Thrilos, Theos, Olympiakos, favorite',
        startDate: 1509460168,
        isNew: false,
        isFavorite: true,
      },
      {
        id: 3,
        body: 'ShareDeck1',
        category: 'presentation',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/249549_1509373331.png',
        keywords: '',
        startDate: 1509460168,
        isNew: true,
        isFavorite: false,
      },
      {
        id: 4,
        body: 'very long name of the file',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/1415267145904_99313680.png',
        keywords: 'Sys:AllowDownload',
        startDate: '',
        isNew: false,
        isFavorite: true,
      },
      {
        id: 5,
        body: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/1450100793180_153693233.png',
        keywords: 'p:Edoxaban, Sys:AllowDownload',
        startDate: 1568126347,
        isNew: true,
        isFavorite: false,
      },
      {
        id: 6,
        body: 'Mauris ut neque sed lectus ornare egestas',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/-Lo-oIt-AnDufzOPYhcD.png',
        keywords: 'c:AP, Sys:PContent',
        startDate: 1568126209,
        isNew: false,
        isFavorite: true,
      },
      {
        id: 7,
        body: 'Phasellus quis lectus',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/232793_1503650029.png',
        keywords: 'Epic Tool, p:Epic',
        startDate: 1505490292,
      },
      {
        id: 8,
        body: 'Nulla non lacus neque. Etiam ornare tristique nunc in pulvinar',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/125229_1460012085.png',
        keywords: 'p:XBan',
        startDate: 1460014396,
      },
      {
        id: 9,
        body: 'Presentation 2',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/742391_1576688589.png',
        keywords: 'Sys:PContent, p:Test',
        startDate: 1584691106,
      },
      {
        id: 10,
        body: 'Annual Report',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/38959_1389180808.png',
        keywords: 'p:test',
        startDate: 1543420909,
      },
      {
        id: 11,
        body: 'Nulla non lacus neque. Etiam ornare tristique nunc in pulvinar',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/125229_1460012085.png',
        keywords: 'p:XBan',
        startDate: 1460014396,
      },
      {
        id: 12,
        body: 'Presentation 2',
        s3Url: 'https://btocpitcher.s3.amazonaws.com/thumbs/742391_1576688589.png',
        keywords: 'Sys:PContent, p:Test',
        startDate: 1584691106,
      },
    ])

    const snackbarModel = ref(false)
    const firedEvent = ref(undefined)
    const clickedItem = ref(undefined)

    const showSnackbar = (file, event, text) => {
      snackbarModel.value = true
      firedEvent.value = `fileID: ${file.id} - ${event}`
      clickedItem.value = text
    }

    return { files, snackbarModel, firedEvent, clickedItem, showSnackbar }
  },
})
</script>

API

src: pitcherify/src/components/PFileCard/PFileCard.vue fa fa-external-link

Pitcher props

Vuetify props

Inherits attributes from vuetify component: VCard

Pass props at: *   (* means root level as Pitcher props on the <VCard />)

Props listed below can be used on <PFileCard />

Events

Slots