FileBrowserBlock: Produktion

Vue.component("filelistcomponent", {
  props: [
    "fetchFilesUrl",
    "json",
    "docReaderText",
    "pdfIcon",
    "docIcon",
    "pptIcon",
    "xlsIcon",
    "fileIcon"
  ],
  data() {
    return {
      loading: false,
      settings: {},
      files: [],
      pdf: this.pdfIcon,
      doc: this.docIcon,
      ppt: this.pptIcon,
      xls: this.xlsIcon,
      file: this.fileIcon,
      docRead: this.docReaderText
    };
  },
  async created() {
    await this.init(this.fetchFilesUrl, JSON.parse(this.json));
  },
  methods: {
    async init(url, settings) {
      // try {
      //   this.loading = true;
      //   const response = await axios.post(url, settings);
      //   const {Settings, Files} = response.data;
      //   if(Settings) {
      //     this.settings = Settings;
      //   }
      //   if(Files) {
      //     this.files = Files;
      //   }
      //   this.loading = false;
      //   console.log({response: response.data});
      // } catch (error) {
      //   this.loading = false;
      //   console.log(error)
      // }
      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(settings))
        })
          .then(res => res.json())
          .then(response => {
            console.log("Success:", response);
            const { Settings, Files } = response;
            
            if (Settings) {
              this.settings = Settings;
            }
            if (Files) {
              this.files = Files;
            }
            this.loading = false;
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    }
  },
  template: `
  <div class="filebrowserblock vld-parent">
  <vloading :height="32" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
  <div class="filebrowserblock--container" v-if="files.length > 0">
      <h2 v-if="settings && settings.ListHeading" class="heading-level-2" v-html="settings.ListHeading"></h2>
      <ul class="files">
          <li v-for="(item, index) in files" :key="index">
              <div class="d-flex flex-row">
                  <div class="files--icon">
                      <img v-if="item.Extension == 'pdf'" :src="pdf"></img>
                      <img v-else-if="item.Extension == 'doc'" :src="doc"></img>
                      <img v-else-if="item.Extension == 'ppt'" :src="ppt"></img>
                      <img v-else-if="item.Extension == 'xls'" :src="xls"></img>
                      <img v-else :src="file"></img>
                  </div>
                  <a :href="item.NavigateUrl" target="_blank" download class="files--info">
                      <p class="files--title">
                          {{item.Name}} {{item.Created}}
                      </p>
                      <p class="files--extension">
                          {{item.Extension}}
                      </p>
                  </a>
                  <a :href="'http://docreader.readspeaker.com/docreader/?cid=bqepo&lang=sv_se&url=' + item.FullUrl"
                      v-if="item.FullUrl" class="files--speaker d-flex align-items-start" :title="docRead">
                      <span class="material-icons ml-2">volume_up</span>
                  </a>
              </div>
          </li>
      </ul>
  </div>
</div>
  `
});