MAth-Cloud-3.0.0/cro.ipsocloud.com/webapp_webpack/src/pages/data-auditlog.f7.html

<template>
  <div class="page">
    <div class="page no-navbar">

      <div class="page-content">

        <div class="block-title">Audit Log</div>
        <div class="block block-strong">

          <form class="list inline-labels no-hairlines-md" id="settings-form-auditlog" style="margin:0;" autocomplete="off">
            <ul>
              <li class="item-content item-input item-input-with-info">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Start date</div>
                  <div class="item-input-wrap">
                    <input type="date" name="start" placeholder="yyyy-MM-dd" value="" required validate @change="updateButtons">
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">Required</div>
                  </div>
                </div>
              </li>
              <li class="item-content item-input item-input-with-info">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">End date</div>
                  <div class="item-input-wrap">
                    <input type="date" name="end" placeholder="yyyy-MM-dd" value="" required validate @change="updateButtons">
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">Required</div>
                  </div>
                </div>
              </li>
            </ul>
          </form>
          <div class="row" style="justify-content: center; margin-top:16px;">
            <div>
              <button id="dlButton" class="button button-fill disabled" @click="download">Download data (CSV)</button>
            </div>
          </div>

        </div>

      </div>

  </div>
</template>
<script>
  export default {
    methods: {
      download: function() {
        let start = $$('#settings-form-auditlog input[name="start"]').val();
        let end = $$('#settings-form-auditlog input[name="end"]').val();
        let postData = {
          apiKey: '',
          start: start,
          end: end
        };

        app.preloader.show();
        app.request.post(app.data.config.apiBaseURL + '/ct_admin/auditlog/?apiKey=', postData, function (data) {
          // Refresh token if needed
          app.methods.refreshToken(data);
          // Process response
          console.log("admin/auditlog/", data);
          app.preloader.hide();
          if (data.result == 'ERROR') {
            switch (data.reason) {
              case 'denied':
                app.methods.signout('Access revoked. Pleas signin again.');
                break;
              case 'internal_error':
                app.dialog.alert("Internal error.");
                break;
              default: 
                app.dialog.alert("It's not working. Please check the logs.");
                break;
            }
          }
          else {
            // convert data
            const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
              const byteCharacters = atob(b64Data);
              const byteArrays = [];

              for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                const slice = byteCharacters.slice(offset, offset + sliceSize);

                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                  byteNumbers[i] = slice.charCodeAt(i);
                }

                const byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
              }

              const blob = new Blob(byteArrays, {type: 'text/plain'});
              return blob;
            }

            const blob = b64toBlob(data.data, 'text/plain');
            const blobUrl = window.URL.createObjectURL(blob);

            // Create an invisible A element
            const a = document.createElement("a");
            a.style.display = "none";
            document.body.appendChild(a);

            // Set the HREF to a Blob representation of the data to be downloaded
            a.href = blobUrl;/*window.URL.createObjectURL(
              new Blob([data], { type })
            );*/

            // Use download attribute to set set desired file name
            a.setAttribute("download", "auditlog_"+start+"_"+end+".csv");
            a.setAttribute("class", "link external");
            a.setAttribute("target", "_blank");

            // Trigger the download by simulating click
            a.click();

            // Cleanup
            window.URL.revokeObjectURL(a.href);
            document.body.removeChild(a);            
          }
        }, function (data) {
          console.log('error', data);
          app.preloader.hide();
          app.dialog.alert("Server unavailable.");
        }, 'json');          
      },
      updateButtons: function() {
        let start = $$('#settings-form-auditlog input[name="start"]').val();
        let end = $$('#settings-form-auditlog input[name="end"]').val();
        $$('#dlButton').addClass('disabled');
        if(start!='' && end!='') {
          $$('#dlButton').removeClass('disabled');
        }
      }
    }
  }
</script>