All files / src/components NavBar.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
 
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>