LibraryBrowserBlock: Produktion

Vue.component("filelibrarycomponent", {
  props: [
    "fetchFilesUrl",
    "json",
    "sortNameText",
    "sortDateText",
    "docReaderText",
    "pdfIcon",
    "docIcon",
    "pptIcon",
    "xlsIcon",
    "fileIco"
  ],
  data() {
    return {
      directories: [],
      files: [],
      sortByName: false,
      sortByDate: false,
      lastUsedMediaFolderReferenceId: [],
      currentFolderId: "",
      folderIndex: 0,
      pdf: this.pdfIcon,
      doc: this.docIcon,
      ppt: this.pptIcon,
      xls: this.xlsIcon,
      file: this.fileIco,
      loading: false,
      title: "",
      sortDateAsc: false,
      hasClickedSort: false
    };
  },
  mounted() {
    if (this.fetchFilesUrl && this.json) {
      let req = JSON.parse(this.json);
      this.fetchData(this.fetchFilesUrl, req);
      if(this.json) {
        let obj = JSON.parse(this.json)
        if(obj.Settings && obj.Settings.ListHeading) {
          this.title = obj.Settings.ListHeading
        }
      }
    }
  },
  methods: {
    async fetchData(url, req, lastreqid) {
      if (lastreqid) {
        if (!this.lastUsedMediaFolderReferenceId.includes(lastreqid)) {
          this.lastUsedMediaFolderReferenceId.push(lastreqid);
        }
      }
      try {
        this.loading = true;
        await fetch(url, {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: "RequestPackageType=" + encodeURIComponent(JSON.stringify(req))
        })
          .then(res => res.json())
          .then(response => {
            if (response.Files && response.Files.length > 0) {
              response.Files.map(file => {
                file.Created = moment(file.Created).format("YYYY-MM-DD");
              });
              this.files = response.Files;
            } else if (response.Files && response.Files.length < 1) {
              this.files = response.Files;
              
            }
            if (response.Directories && response.Directories.length > 0) {
              this.directories = response.Directories;
            } else if (
              response.Directories &&
              response.Directories.length < 1
            ) {
              this.directories = response.directories;
            }
            this.currentFolderId = req.Settings.MediaFolderReferenceId;
            console.log(response);
            this.loading = false;
          })
          .catch(error => {
            console.log(error);
          });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    clickedFile(val) {
      console.log({ "Clicked file": val });
    },
    goBack() {
      this.folderIndex--;
      let req = JSON.parse(this.json);
      let goToIndex = this.lastUsedMediaFolderReferenceId.pop();
      req.Settings.MediaFolderReferenceId = goToIndex;
      req.Settings.CurrentMediaFolderReferenceId = goToIndex;
      this.fetchData(this.fetchFilesUrl, req);
    },
    async clickedFolder(val) {
      this.folderIndex++;
      let req = JSON.parse(this.json);
      req.Settings.MediaFolderReferenceId = val;
      req.Settings.CurrentMediaFolderReferenceId = val;

      console.log({ "Clicked folder": val });
      this.fetchData(this.fetchFilesUrl, req, this.currentFolderId);
    },
    sortByNameFunc() {
      this.hasClickedSort = false;
      this.sortByName = !this.sortByName;
      if (this.sortByName) {
        this.sortByDate = false;
      }
    },
    sortByDateFunc() {
      this.sortByDate = !this.sortByDate;
      if (this.sortByDate) {
        this.sortByName = false;
        this.hasClickedSort = true;
      }
    },
  },
  computed: {
    sortedDirectories() {
      if (this.sortByName && this.directories && this.directories.length > 0) {
        let tempDir = this.directories.slice(0);
        return _.orderBy(tempDir, "Name", ["desc"]);
      } else {
        if(this.directories) {
          return this.directories;
        }
      }
    },
    sortedFiles() {
      if (this.sortByName && this.files && this.files.length > 0) {
        let tempFiles = this.files.slice(0);
        return _.orderBy(tempFiles, "Name", ["desc"]);
      } else if (this.sortByDate && this.files && this.files.length > 0) {
        let tempFiles = this.files.slice(0);
        return _.orderBy(tempFiles, "Created", ["desc"]);
      } else if (!this.sortByDate && this.files && this.files.length > 0) {
        let tempFiles = this.files.slice(0);
        return _.orderBy(tempFiles, "Created", ["asc"]);
      } else {
        if(this.files) {
          return this.files;
        }
      }
    },
    mixedFolderAndFilesArray() {
      let files = this.files;
      let directories = this.directories;
      let filesAndFolders;

      if(files && directories) {
        filesAndFolders = [...files, ...directories];
      } else if (!files && directories) {
        filesAndFolders= [...directories]
      } else if(!directories && files) {
        filesAndFolders = [...files]
      } else if(!directories && !files) {
        return null
      }

        if(this.sortByName && filesAndFolders.length > 0) {
          console.log({"mixed by name": filesAndFolders})
          return _.orderBy(filesAndFolders, ["Name"], ["desc"]);;
        } else if(this.sortByDate && files.length > 0 ) {
          let tempDir = _.orderBy(filesAndFolders, ["Created"], ["desc"]);
          console.log({"mixed by date": tempDir})
          return tempDir;
        } else if(this.hasClickedSort && !this.sortByName && files.length > 0 ) {
          let tempDir = _.orderBy(filesAndFolders, ["Created"], ["asc"]);
          console.log({"mixed by date ASC": tempDir})
          return tempDir;
        }
        return _.orderBy(filesAndFolders, ["Name"], ["asc"]);
      }
  },
  template: `
<div class="row librarybrowserblock vld-parent">
  <div class="col-12" v-if="title">
    <h2 class="heading-level-2 title-container">{{title}}</h2>
  </div>

  <vloading :height="35" :width="35" :color="'#404040'" :is-full-page="false"
  :active.sync="loading"></vloading>

  <div class="col-12">
    <div class="d-flex flex-row justify-content-between align-items-center action--items">

    
    <a href="javascript:void(0)" class="sort--items" @click="sortByNameFunc" key="1" >
      <span v-if="this.sortNameText">
        {{this.sortNameText}}
      </span>
      <transition name="fade" mode="out-in">
        <i key="1" v-if="sortByName" class="material-icons">keyboard_arrow_up</i>
        <i key="2" v-else class="material-icons">keyboard_arrow_down</i>
      </transition>
    </a>
    <transition name="fade" mode="out-in">
      <a href="javascript:void(0)" class="sort--items" @click="sortByDateFunc" key="1"  :class="{'cant-sort-by-date': files.length < 1}">
        <span v-if="this.sortDateText">
          {{this.sortDateText}}
        </span>
        <transition name="fade" mode="out-in">
          <i key="1" v-if="sortByDate" class="material-icons">keyboard_arrow_up</i>
          <i key="2" v-else class="material-icons">keyboard_arrow_down</i>
        </transition>
      </a>
    </transition>
    </div>
  </div>

    <div class="col-12" v-if="folderIndex > 0 && !loading">
      <a href="javascript:void(0)" class="go--back"  @click="goBack">
        <i class="material-icons">folder_open</i>
        <span>
          ...
        </span>
      </a>
    </div>

  <div class="col-12">
      <div class="row">
        <div class="col-12">
            <ul class="list-unstyled d-flex flex-column file--items" >
                    <li-file
                    v-for="(item, index) in mixedFolderAndFilesArray"

                    :key="index"
                      :item="item"
                    :pdf="pdf" :doc="doc" :ppt="ppt" :xls="xls" :file="file"
                    :name="item.Name" :url="item.IconUrl" :fullUrl="item.FullUrl" :date="item.Created" :referenceId="item.MediaFolderReferenceId" :extension="item.Extension"

                    @clickedFile="clickedFile" 
                    @clickedFolder="clickedFolder"
                    >
                    </li-file>
 
            </ul>
        </div>
      </div>
  </div>
</div>
  `
});

Vue.component("li-file", {
  props: [
    "name",
    "url",
    "referenceId",
    "date",
    "extension",
    "pdf",
    "doc",
    "ppt",
    "xls",
    "file",
    "fullUrl",
    "item",
  ],
  methods: {
    clickedFile() {
      this.$emit("clickedFile", this.referenceId);
    },
    clickedFolder() {
      this.$emit("clickedFolder", this.referenceId);
    }
  },
  template: `
<li>
  <template v-if="this.item.MediaFolderReferenceId">
  <a class="doc--item w-100 d-flex flex-row align-items-center" href="javascript:void(0)" :id="this.referenceId" @click="clickedFolder">
    <i class="material-icons doc--icon">folder</i>
    <span>
      {{this.name}}
    </span>
    <i class="material-icons volume--btn" @click="screenReaderLink(this.url)" v-if="this.url">volume_up</i>
  </a>
  </template>
  <template v-else>
    <div class="w-100 d-flex file--row flex-row flex-wrap align-items-center file" href="javascript:void(0)" :id="this.referenceId" @click="clickedFile">
      <span class="file--icon" v-if="this.extension === 'pdf'">
          <img :src="this.pdf" />
      </span>
      <span class="file--icon" v-if="this.extension === 'doc'">
          <img alt="doc-icon" :src="this.doc" />
      </span>
      <span class="file--icon" v-if="this.extension === 'ppt'">
          <img alt="ppt-icon" :src="this.ppt" />
      </span>
      <span class="file--icon" v-if="this.extension === 'xls'">
          <img alt="xls-icon" :src="this.xls" />
      </span>
      <span class="file--icon" v-if="this.extension === 'file'">
          <img alt="file-icon" :src="this.file" />
      </span>

      <div class="d-flex flex-row align-items-center file--speaker">
        <a :href="this.fullUrl" class="inner-a">
          <span>
            {{this.name}}
          </span>
        </a>
        <a v-if="this.fullUrl" :href="'http://docreader.readspeaker.com/docreader/?cid=bqepo&lang=sv_se&url=' + this.fullUrl" class="inner-a d-flex flex-row aling-items-center">
          <i class="material-icons volume--btn" >volume_up</i>
        </a>
      </div>
      <time class="is--date ml-auto">
        {{this.date}}
      </time>
    </div>
  </template>
</li>
  `
})

Vue.component("file", {
  props: [
    "name",
    "url",
    "referenceId",
    "date",
    "extension",
    "pdf",
    "doc",
    "ppt",
    "xls",
    "file",
    "fullUrl"
  ],
  methods: {
    clickedFile() {
      this.$emit("clickedFile", this.referenceId);
    }
  },
  template: `
  <div class="w-100 d-flex file--row flex-row flex-wrap align-items-center file" href="javascript:void(0)" :id="this.referenceId" @click="clickedFile">
    <span class="file--icon" v-if="this.extension === 'pdf'">
        <img :src="this.pdf" />
    </span>
    <span class="file--icon" v-if="this.extension === 'doc'">
        <img alt="doc-icon" :src="this.doc" />
    </span>
    <span class="file--icon" v-if="this.extension === 'ppt'">
        <img alt="ppt-icon" :src="this.ppt" />
    </span>
    <span class="file--icon" v-if="this.extension === 'xls'">
        <img alt="xls-icon" :src="this.xls" />
    </span>
    <span class="file--icon" v-if="this.extension === 'file'">
        <img alt="file-icon" :src="this.file" />
    </span>
  
    <div class="d-flex flex-row align-items-center file--speaker">
      <a :href="this.fullUrl" class="inner-a">
        <span>
          {{this.name}}
        </span>
      </a>
      <a v-if="this.fullUrl" :href="'http://docreader.readspeaker.com/docreader/?cid=bqepo&lang=sv_se&url=' + this.fullUrl" class="inner-a d-flex flex-row aling-items-center">
        <i class="material-icons volume--btn" >volume_up</i>
      </a>
    </div>
    <time class="is--date ml-auto">
      {{this.date}}
    </time>
  </div>
  `
});
Vue.component("folder", {
  props: ["name", "url", "referenceId"],
  methods: {
    clickedFolder() {
      this.$emit("clickedFolder", this.referenceId);
    },
    screenReaderLink(url) {
      window.location.href = `http://docreader.readspeaker.com/docreader/?cid=bqepo&lang=sv_se&url=${url}`;
    }
  },
  template: `
    <a class="doc--item w-100 d-flex flex-row align-items-center" href="javascript:void(0)" :id="this.referenceId" @click="clickedFolder">
      <i class="material-icons doc--icon">folder</i>
      <span>
        {{this.name}}
      </span>
      <i class="material-icons volume--btn" @click="screenReaderLink(this.url)" v-if="this.url">volume_up</i>
    </a>
  `
});


// <file :key="index" v-for="(file, index) in sortedFiles" v-if="sortedFiles.length > 0" :pdf="pdf" :doc="doc" :ppt="ppt" :xls="xls" :file="file" :extension="file.Extension" @clickedFile="clickedFile" :name="file.Name" :url="file.IconUrl" :fullUrl="file.FullUrl" :date="file.Created"
// :referenceId="file.MediaFolderReferenceId"></file>
// <folder :key="folder.MediaFolderReferenceId" v-for="(folder, index) in sortedDirectories" v-if="sortedDirectories.length > 0" 
// @clickedFolder="clickedFolder" :name="folder.Name" :url="folder.IconUrl"
//   :referenceId="folder.MediaFolderReferenceId"></folder>