list.vue 3.86 KB
Newer Older
Anton Koch's avatar
Anton Koch committed
1
2
3
4
<template lang="pug">
  full-screen
    confirm-modal(ref="confirmModal", @confirm="handleConfirmModal")

5
6
    content-block(:position="'first'")
      headline(:content="$t('routes.documents.list.title')")
Anton Koch's avatar
Anton Koch committed
7

8
9
      content-paragraph(:position="'first'")
        data-table(v-if="user", :config="config", :title="'routes.documents.list.title'", ref="listTable")
Anton Koch's avatar
Anton Koch committed
10
11
12
13
14
</template>

<script>
  import { mapGetters } from 'vuex'
  import { openURL } from 'quasar'
15
  import Headline from '../../components/shared/elements/Headline'
16
17
  import ContentBlock from '../../components/shared/elements/ContentBlock'
  import ContentParagraph from '../../components/shared/elements/ContentParagraph'
Anton Koch's avatar
Anton Koch committed
18
19

  export default {
20
    components: {
21
22
23
      Headline,
      ContentBlock,
      ContentParagraph
24
    },
Anton Koch's avatar
Anton Koch committed
25
26
27
28
29
30
31
32
33
34
35
36
37
    data () {
      const _this = this
      return {
        assets: [],
        config: {
          columns: [
            {
              name: 'name',
              label: this.$t('labels.name'),
              field: 'name',
              filter: true,
              sortable: true
            },
Anton's avatar
Anton committed
38
39
40
41
42
            {
              name: 'type',
              label: this.$t('labels.type'),
              field: row => row.metaData && row.metaData['content-type'] ? row.metaData['content-type'] : 'unknown'
            },
Anton Koch's avatar
Anton Koch committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
            {
              name: 'size',
              label: this.$t('labels.size'),
              field: 'size',
              format: val => `${(val / Math.pow(1024, 2)).toFixed(2)} MB`,
              sortable: true
            }
          ],
          actions: [
            {
              type: 'url',
              title: 'buttons.copy_url',
              click: item => _this.copyToClipboard(_this.getAssetURL(item.name))
            },
            {
              type: 'download',
              title: 'buttons.download',
              click: item => openURL(_this.getAssetURL(item.name, true))
            },
            {
              type: 'edit',
              title: 'buttons.edit',
Anton's avatar
Anton committed
65
              click: item => _this.$router.push({ name: 'documents.edit', params: { asset: item.name, bucket: _this.bucketName } })
Anton Koch's avatar
Anton Koch committed
66
67
68
69
70
71
72
73
            },
            {
              type: 'delete',
              title: 'buttons.delete',
              click: item => _this.$refs.confirmModal.show('buttons.delete', item, 'buttons.delete')
            }
          ],
          async request () {
Anton's avatar
Anton committed
74
            return _this.$store.dispatch('files/list', _this.bucketName)
Anton Koch's avatar
Anton Koch committed
75
76
77
78
79
80
          }
        }
      }
    },
    computed: {
      ...mapGetters({
81
82
        user: 'auth/getUserState',
        isMobile: 'globalSettings/getIsMobile'
Anton Koch's avatar
Anton Koch committed
83
84
85
86
87
      }),
      bucketName () {
        return `user-${this.user.uuid}`
      }
    },
88
89
90
    mounted () {
      this.$root.$emit('setBackButton')
    },
Anton Koch's avatar
Anton Koch committed
91
92
    methods: {
      getAssetURL (asset, download = false) {
Anton's avatar
Anton committed
93
        const url = `${process.env.STORAGE_HOST}/files/user-${this.user.uuid}/${asset}`
Anton Koch's avatar
Anton Koch committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
        if (download) return `${url}?dl=1`
        return url
      },
      async copyToClipboard (text) {
        try {
          await navigator.clipboard.writeText(text)
          this.$store.commit('notifications/addMessage', {
            body: 'messages.url_copied',
            type: 'success'
          })
        }
        catch (err) {
          this.$store.commit('notifications/addMessage', {
            body: err.message,
            type: 'error'
          })
        }
      },
      async handleConfirmModal (item) {
        try {
Anton's avatar
Anton committed
114
          await this.$store.dispatch('files/delete', [this.bucketName, item.name])
Anton Koch's avatar
Anton Koch committed
115
          this.$store.commit('notifications/addMessage', {
Anton's avatar
Anton committed
116
            body: 'messages.document_deleted',
Anton Koch's avatar
Anton Koch committed
117
118
119
120
121
122
            type: 'success'
          })
          this.$refs.listTable.request()
        }
        catch (err) {
          this.$store.commit('notifications/addMessage', {
Anton's avatar
Anton committed
123
            body: 'errors.document_delete_failed',
Anton Koch's avatar
Anton Koch committed
124
125
126
127
128
129
130
            type: 'error'
          })
        }
      }
    }
  }
</script>