All files / src/components/subcomponents _tableRepresentation.vue

22.22% Statements 2/9
0% Branches 0/8
100% Functions 0/0
22.22% Lines 2/9
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>