cms_thermo_active/Step/wwwroot/src/modules/base-components/modal-load-program.vue

<template>
  <modal type="modal-load-program" :title="'modal_load_program_lbl_title_window' | localize('Selezione programma')">
    <button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
            <div class="modal-load-program-header">
                <!-- <div class="title">
                        <i class="fa fa-chevron-left"></i>
                    Selezione programma da aggiungere in coda
                </div> -->
                <div class="box-search">
                    <div class="path">
                        
                        <div class="child" v-for="(bread,key) in this.breadcrumbs" :key="key">
                            <div v-if="bread.name"><i class="fa fa-chevron-right"></i></div>
                            <a href="#" @click="bread.name == nameNewPath ? null : backPath(bread.path)">{{bread.name}}</a>
                        </div>
                        <!-- <div class="root">PC</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
                        <div class="child">Cliente A</div>
                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
                        <div class="child">Part Program 01</div> -->
                    </div>
                    <div class="search">
                        <input type="text" />
                        <button class="btn" @click="reload()"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
            <div class="modal-load-program-body">
                <div class="first-column">
                    <card-folder-path name="CN" @click="selectElementSecond()" :iconType="'DATABASE'"></card-folder-path>
                    <hr />
                    <card-folder-path v-for="(val, key) in this.driveList" :key="key" :name="val.Name" :iconType="val.Type" :selected="val.Path == selectPathDrive"  @click="val.Name == nameDrive ? null : changePath(val.Path, true, val.Type)" ></card-folder-path>
                </div>
                <div class="second-column" v-if="enableSecondColumn">
                    <div class="content scrollable">
                        <card-folder-path v-for="(val,key) in this.arrayViewList[0]" 
                            :key="key" 
                            :name="val.Name"
                            :disabled="val.Name == nameNewPath || (selectedFile ? val.Name == selectedFile.Name : '')"  
                            :withArrow="val.IsDirectory"
                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
                            @click="val.IsDirectory && val.Name != nameNewPath ? changePath(val.AbsolutePath): val.IsDirectory ? null : fileInfo(val.AbsolutePath)"></card-folder-path>
                    </div>
                </div>
                <div class="third-column" v-if="enableThirdColumn">
                    <div class="label-folder-empty" v-if="this.arrayViewList[1].length < 1">
                        <label>Cartella vuota</label>
                    </div>
                    <div class="content scrollable" v-if="!this.arrayViewList[1].length < 1">
                        <card-folder-path v-for="val in this.arrayViewList[1]" 
                            :key="val.Name" 
                            :name="val.Name"  
                            :withArrow="val.IsDirectory"
                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
                            @click="val.IsDirectory? changePath(val.AbsolutePath):fileInfo(val.AbsolutePath) "></card-folder-path>
                        <!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
                    </div>
                </div>
                <div class="selected-item" v-if="enableSelectedItem && selectedFile">
                    <div class="selected-item-header">
                        <label class="selected-item-title">{{selectedFile.Name}}</label>
                        <div class="group-button">
                            <button class="btn"><i class="fa fa-clone"></i></button>
                            <button class="btn"><i class="fa fa-pencil-square-o"></i></button>
                        </div>
                    </div>
                    <div class="selected-item-body scrollable">
                        <div class="selected-item-body-image">
                            <img :src="selectedFile.PreviewBase64">
                        </div>
                        <div class="selected-item-body-description">
                            <label class="title">Data di creazione</label>
                            <label class="text">{{getDate(selectedFile.CreationDate)}}</label><br />&nbsp;
                        
                            <label class="title">Data ultima modifica</label>
                            <label class="text">{{getDate(selectedFile.LastModDate)}}</label><br />&nbsp;
                        
                            <label class="title">Anteprima Contenuto (Prime 10 righe)</label>
                            <label class="text" v-for="(item,index) in selectedFile.Content" :key="'line' + index">{{item}}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-load-program-footer">
                <button class="btn btn-success">{{'modal_load_program_btn_load_program' | localize('Carica programma')}}</button>
            </div>
  </modal>
</template>
<script>
import Modal from "src/modules/base-components/modal.vue";
import { ModalHelper } from "src/modules/base-components/ModalHelper.ts";
import { Factory, MessageService } from '../../_base';
// import { MaintenanceService } from "../services/maintenanceService";
// import { store } from "src/store";
// import { maintenanceActions } from "../store/maintenance.store";
import moment from "moment";
import cardFolderPath from "./cards/card-folder-path.vue";
import cardElementQueue from "./cards/card-element-queue.vue";
export default {
    components:{
        modal: Modal,cardFolderPath, cardElementQueue
    },
    data: function (){
        return {
            enableSecondColumn: false,
            selectedFolder: null,
            enableThirdColumn: false,
            enableSelectedItem: false,
            selectedFile: null,
            driveList: {},
            fileList: {},
            arrayList: [],
            arrayViewList: [],
            childPath: [],
            parentPath: [],
            breadcrumbs:[{name:"",path:""}],
            boolPath: false,
            number: 0,
            nameNewPath: "",
            nameDrive: "",
            selectPathDrive: "",
            forced: false,
            dirPath: "C:\\"

        }
    },
    mounted: function (){
        debugger
        if (typeof cmsClient != "undefined"){
            this.driveList = JSON.parse(cmsClient.getOSdriveList())
            console.log(this.driveList);
            this.fileList = JSON.parse(cmsClient.getFileList(this.dirPath))
            this.arrayList.push(this.fileList);
            this.arrayViewList = this.arrayList.slice(-2);
            // console.log(this.fileList);
        }
    },
    watch:{
       dirPath: function(){
           debugger
            if (typeof cmsClient != "undefined"){
                if(this.arrayList.length >= 1){
                    this.selectElementThird();
                }
                else if(this.arrayList.length == 0){
                    debugger
                    this.unselectElementThird();
                }
                this.fileList = JSON.parse(cmsClient.getFileList(this.dirPath));
                this.arrayList.push(this.fileList);
                this.arrayViewList = this.arrayList.slice(-2);
                // console.log(this.fileList);
                // console.log(this.arrayList);
            }
       } 
    },
    methods:{
        changePath(str, first = false, type){
            this.selectedFile = "";
            this.selectElementSecond();
            this.enableSelectedItem = false;
            this.parentPath = this.dirPath.split('\\').filter(i => i.length);
            this.childPath = str.split('\\').filter(i => i.length);
            if(this.childPath.length == 1){
                this.selectPathDrive = str;
                this.nameDrive = this.childPath.slice(-1);
            }
            else if(this.childPath.length > 1 && first){
                this.selectPathDrive = str;
                this.nameDrive = this.childPath.slice(-1);
            }
            else{
                this.nameNewPath =  this.childPath.slice(-1);
            }
            if(first){
                if(type == "SPFO"){
                    this.arrayList = [];
                }
                this.breadcrumbs = [];
                this.nameNewPath = "";
                for(var n = 0; n < this.childPath.length; n++){
                    var idx = n+1;
                    var newBread = {
                        name: this.childPath[n],
                        path: this.childPath.slice(0,idx).join("\\") + "\\"
                    }
                    this.breadcrumbs.push(newBread);
                }
            }
            if(this.childPath.length == 1 && this.childPath == this.nameDrive[0]){
                if(this.parentPath[0] != this.childPath[0] && this.parentPath.length == this.childPath.length){
                    this.breadcrumbs.splice(-1, 1);
                    this.arrayList.splice(-1, 1);
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
                else if(this.parentPath[0] == this.childPath[0] && this.parentPath.length != this.childPath.length){
                    this.breadcrumbs = [];
                    this.arrayList = [];
                    this.nameNewPath = "";
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
                else if(this.parentPath[0] != this.childPath[0] && this.parentPath.length != this.childPath.length){
                    this.breadcrumbs = [];
                    this.arrayList = [];
                    this.nameNewPath = "";
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
                else if(this.childPath.length > 1 && this.parentPath[0] == this.childPath[0] && this.parentPath.length == this.childPath.length){
                    this.breadcrumbs = [];
                    this.arrayList = [];
                    this.nameNewPath = "";
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
                else if(this.childPath.length == 1 && this.parentPath[0] == this.childPath[0] && this.parentPath.length == this.childPath.length){
                    this.breadcrumbs = [];
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
                else{
                    this.breadcrumbs.push({name: this.nameDrive[0], path: str});
                }
            }
            // else if(this.parentPath.length > 1 && this.childPath == this.nameDrive[0]){
            //     this.breadcrumbs = [];
            //     this.arrayList = [];
            // }
            else if(this.childPath.length > 1 && this.parentPath.length == this.childPath.length){
                if(this.childPath[this.childPath.length - 1] != this.parentPath[this.parentPath.length - 1]){
                    this.breadcrumbs.splice(-1, 1);
                    this.arrayList.splice(-1, 1);
                    this.breadcrumbs.push({name: this.nameNewPath[0], path: str});
                }
                else if(this.childPath[this.childPath.length - 1] == this.parentPath[this.parentPath.length - 1]){
                    this.breadcrumbs.splice(-1, 1);
                    this.arrayList.splice(-1, 1);
                    this.breadcrumbs.push({name: this.nameNewPath[0], path: str});
                }
                else{
                    this.breadcrumbs.splice(-1, 1);
                    this.arrayList.splice(-1, 1);
                    this.breadcrumbs.push({name: this.nameNewPath[0], path: str});
                }

            }
            else{
                this.breadcrumbs.push({name: this.nameNewPath[0], path: str});
            }
            console.log(this.arrayList);
            this.dirPath = str;
            // console.log(this.parentPath);
            // console.log(this.childPath);
        },
        backPath(str){
            this.selectedFile = "";
            // this.breadcrumbs = [];
            this.childPath = str.split('\\').filter(i => i.length);
            this.parentPath = this.dirPath.split('\\').filter(i => i.length);
            this.nameNewPath =  this.childPath.slice(-1);
           
            if(str == "C:\\"){
                this.breadcrumbs = [];
                this.arrayList = [];
                this.breadcrumbs.push({name: "C", path: str});
            }
            else{
                var index =  this.breadcrumbs.map(function(e) { return e.path; }).indexOf(str);
                this.breadcrumbs.splice((index+1));
            }
            if(this.arrayList.length > this.childPath.length){
                var index =  this.breadcrumbs.map(function(e) { return e.path; }).indexOf(str);
                this.arrayList.splice((index));
                // this.arrayList = [];
            }
            else if(this.arrayList.length <= 1 && this.breadcrumbs.length > 1){
                 var index =  this.breadcrumbs.map(function(e) { return e.path; }).indexOf(str);
                this.breadcrumbs.splice((index+1));
                this.arrayList = [];
            }
            else{
                this.arrayList = [];
            }
            this.dirPath = str;
            // console.log(this.arrayList);
            // console.log(this.parentPath);
            // console.log(this.childPath);
            // if(this.arrayList.length){

            // }
            // this.selectElementSecond();
            // this.enableSelectedItem = false;
            // this.parentPath = this.dirPath.split('\\').filter(i => i.length);
            // this.childPath = str.split('\\').filter(i => i.length);
            // this.nameNewPath =  this.childPath.slice(-1);
            // if(str == "C:\\"){
            //     this.breadcrumbs.push({name: "C", path: str});
            // }
            // else{
            //     this.breadcrumbs.push({name: this.nameNewPath[0], path: str});
            // }
            // this.dirPath = str;
            // console.log(this.parentPath);
            // console.log(this.childPath);
        },
        fileInfo(str){
            this.enableSelectedItem = true;
            if (typeof cmsClient != "undefined")
                this.selectedFile = JSON.parse(cmsClient.getProgramInfo(str));
                console.log(this.selectedFile);
                console.log(this.selectedFile.PreviewBase64);
        },
        close() {
            Factory.Get(MessageService).deleteChannel("esc_pressed");
            ModalHelper.HideModal();
        },
        reload() {
            this.driveList = JSON.parse(cmsClient.getOSdriveList())
        },
        selectElementSecond(){
            this.enableSecondColumn = true;
            this.selectedFolder = {};
        },
        selectElementThird(){
            this.enableThirdColumn = true;
            this.selectedFolder = {};
        },
        unselectElementThird(){
            this.enableThirdColumn = false;
        },
        selectItem(){
            this.enableSelectedItem = true;
            this.selectedFolder = {};
        },
        getDate(date){            
            return moment(date).format('L');
        }
    }
};
</script>
<!--<script src="./create-maintenance.ts" lang="ts"></script>-->