All files / src/components/subcomponents _tableRepresentation.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="container-fluid scoped-table-aloud">
    <div class="ls-flex ls-flex-row row bg-info head-row">
      <div class="ls-flex ls-flex-column cell checkbox">
        &nbsp;
      </div>
      <div class="ls-flex ls-flex-column col-4 cell">{{"File name" | translate }}</div>
      <div class="ls-flex ls-flex-column col-1 cell">{{"Type" | translate }}</div>
      <div class="ls-flex ls-flex-column col-2 cell">{{"Size" | translate }}</div>
      <div class="ls-flex ls-flex-column col-3 cell">{{"Mod time" | translate }}</div>
      <div class="ls-flex ls-flex-row col-2 cell">{{"Action" | translate }}</div>
    </div>
    <div
      v-if="!loading"
      class="ls-flex ls-flex-row row"
      v-for="file in $store.state.fileList"
      :key="file.key"
      :id="'file-row-'+file.hash"
      :class="fileClass(file)"
    >
      <div class="ls-flex ls-flex-column text-center cell checkbox">
        <input type="checkbox" v-model="file.selected" />
      </div>
      <div class="ls-flex ls-flex-column col-4 cell">{{file.shortName}}</div>
      <div class="ls-flex ls-flex-column col-1 cell">
        <i :class="'fa '+file.iconClass+' fa-lg'"></i>
      </div>
      <div class="ls-flex ls-flex-column col-2 cell">{{file.size | bytes}}</div>
      <div class="ls-flex ls-flex-column col-3 cell">{{file.mod_time}}</div>
      <div class="ls-flex ls-flex-row col-2 cell">
        <template v-if="!file.inTransit">
          <button
            class="FileManager--file-action-delete btn btn-default"
            @click="deleteFile(file)"
            :title="translate('Delete file')"
            data-toggle="tooltip"
          >
            <i class="fa fa-trash-o text-danger"></i>
          </button>
          <button
            v-show="$store.state.transitType == 'copy' || $store.state.transitType == null"
            class="FileManager--file-action-startTransit-copy btn btn-default"
            data-toggle="tooltip"
            :title="translate('Copy file')"
            @click="copyFile(file)"
          >
            <i class="fa fa-clone"></i>
          </button>
          <button
            v-show="$store.state.transitType == 'move' || $store.state.transitType == null"
            class="FileManager--file-action-startTransit-move btn btn-default"
            data-toggle="tooltip"
            :title="translate('Move file')"
            @click="moveFile(file)"
          >
            <i class="fa fa-files-o"></i>
          </button>
        </template>
        <template v-if="file.inTransit">
          <button
            class="FileManager--file-action-cancelTransit btn btn-default"
            @click="cancelTransit(file)"
            :title="translate('Cancel transit of file')"
            data-toggle="tooltip"
          >
            <i class="fa fa-times text-warning"></i>
          </button>
        </template>
      </div>
    </div>
    <div class="ls-flex-row ls-space padding top-15" v-if="loading"> 
      <div class="display-relative">
        <loader-widget id="filemanager-loader-widget"/>
      </div>
    </div>
  </div>
</template>
 
<script>
import applyLoader from "../../mixins/applyLoader";
import AbstractRepresentation from "../../helperComponents/abstractRepresentation";
 
export default {
  name: "tablerep",
  extends: AbstractRepresentation,
  mixins: [applyLoader],
  data() {
    return {
      fileInDeletion: false
    };
  },
  filters: {
    bytes(value) {
      if (value < 1024) {
        return value + " B";
      }
      if (value >= 1024 && value < 1048576) {
        return Math.round((value / 1024) * 100) / 100 + " KB";
      }
      if (value >= 1048576) {
        return Math.round((value / (1024 * 1024)) * 100) / 100 + " MB";
      }
    }
  },
};
</script>
 
<style lang="scss" scoped>
.file-in-deletion {
  background-color: var(--LS-admintheme-hintedhovercolor);
  opacity: 0.5;
}
.file-in-transit {
  background-color: var(--LS-admintheme-hintedbasecolor);
  opacity: 0.7;
}
.scoped-table-aloud {
  .row {
    margin: 1px 0;
    border-bottom: 1px solid #798979;
    &.head-row {
      color: #efefef;
    }
  }
  .cell {
    border-left: 1px solid #798979;
    padding: 1rem 0.8rem;
    &:last-of-type {
      border-right: 1px solid #798979;
    }
    &.checkbox {
      width:41px;
      &>input {
        margin: auto;
      }
    }
  }
}
</style>