All files / src/components NavBar.vue

60% Statements 12/20
100% Branches 2/2
40% Functions 2/5
60% Lines 12/20
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  2x 2x             4x       5x     3x                     1x                                                             1x 1x     2x 2x 2x         2x                                                                                  
<script>
import UploadModal from './subcomponents/_uploadModal';
import applyLoader from '../mixins/applyLoader';
 
export default {
  name: 'NavBar',
  components: {UploadModal},
  mixins: [applyLoader],
  data()  {
    return {};
  },
  computed: {
    fileInTransit() {
      return this.$store.state.transitType != null;
    },
    transitType() {
        return this.$store.state.transitType == 'copy' ? 'Copy' : 'Move';
    }
  },
  methods: {
    onModalUploadFinished() {
        this.loadingState = true;
        this.$store.dispatch('getFileList').finally(
        ()=>{this.loadingState = false;}
      );
    },
    openUploadModal() {
      this.$modal.show(
        UploadModal,
        {},
        {
            width: '75%',
            height: '75%',
            scrollable: true,
            resizable: false
        },
        {
            'before-close': this.onModalUploadFinished
        }
      );
    },
    downloadFiles() {
      this.loadingState = true;
      this.$store.dispatch('downloadFiles').catch( (e) => {
        this.$log.error(e);
        window.LS.notifyFader(
                    `${this.translate("An error has occured and the selected files ycould not be downloaded.")}
Error: 
${error.data.message}`,
                    'well-lg bg-danger text-center'
        );
      }).finally(
        () => {
          this.loadingState = false;
        }
      )
    },
    cancelTransit() {
      this.$store.commit('cancelTransit');
      this.$emit('forceRedraw');
    },
    runTransit() {
      this.loadingState = true;
      let transitType = this.$store.state.transitType+'';
      this.$store.dispatch('applyTransition').then(
        (result) => {},
        (error) => {
          this.$log.error(error);
        }
      ).finally(() => { this.loadingState = false; });
    }
  }
}
</script>
 
<template>
  <div class="navbar navbar-default scoped-navbar-fixes">
    <div class="container-fluid">
      <div class="navbar-header">
        <span class="navbar-brand">{{$store.state.currentFolder}}</span>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li id="FileManager--button-fileInTransit--cancel" v-if="fileInTransit"><a href="#" @click.prevent="cancelTransit">{{'Cancel '+transitType | translate}}</a></li>
        <li id="FileManager--button-fileInTransit--submit" v-if="fileInTransit"><a href="#" @click.prevent="runTransit">{{ transitType | translate }}</a></li>
        <li id="FileManager--button-download"><a href="#" @click.prevent="downloadFiles">{{ 'Download' | translate }}</a></li>
        <li><a id="FileManager--button-upload" href="#" @click.prevent="openUploadModal">{{'Upload'|translate}}</a></li>
      </ul>
    </div>
  </div>
</template>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .scoped-navbar-fixes {
        .navbar-nav > li > a {
            border: none;
            background: linear-gradient(to right, transparent 50.03%,  #989898 50%);
            background: linear-gradient(to right, transparent 50.03%,  var(--LS-admintheme-hovercolor) 50%);
            background-size: 200%;
            background-position: 0;    
            transition: all 0.3s;
            &:hover,
            &:active,
            &:focus {
                background-position: -99.9%;
                color: white
            }
        }
  }
</style>