Vuejs Add POPup MOdel for view File

<template>
  <b-row>
    <b-col cols="12" xl="12">
      <transition name="slide">
      <b-card header-tag="header" footer-tag="footer">
        <div slot="header">
          <strong>Materials</strong>
          <router-link to="/addmaterial" v-if="is_sfe_trainer || is_course_trainer">
            <button type="button" class="btn btn-primary" style="float:right" data-toggle="tooltip"
              data-placement="left" title="Add a Material">
                <i class="icon-plus"></i>
            </button>
          </router-link>
        </div>
        <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
        <div class="alert alert-warning" role="alert" v-if="table_data==false">
          <div v-if="is_course_trainer|| is_sfe_trainer">
            <center><h6>Upload Material !!</h6></center>
          </div>
          <div v-if="is_superuser || is_trainee" >
            <center><h6>No material found</h6></center>
          </div>
        </div>
        <div v-else>
          <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
            <template slot="username" slot-scope="data">
              <strong>{{}}</strong>
            </template>
            <template slot="status" slot-scope="data">
              <c-switch class="mx-1" color="success" checked />
            </template>
            <template slot="Actions" slot-scope="data" >

            <div>
              <b-button v-on:click.prevent="getMaterial(data.item.id)" v-b-modal.modal-xl variant="primary" type="submit" size="sm">
                <i class="fa fa-eye fa-lg" title="view"></i>
              </b-button>
            </div>

              <!-- <b-button v-on:click.prevent="getMaterial(data.item.id)" type="submit" size="sm" variant="primary">
                <i class="fa fa-eye fa-lg" title="view"></i>
              </b-button> -->

              <router-link v-bind:to="'/editmaterial/' + data.item.id" v-if="is_superuser && (data.item.file_status == 'PENDING' || data.item.file_status == 'pending')">
                <b-button size="sm" variant="twitter icon" class="mr-1 btn-brand btn-xing">
                  <li class="fa fa-edit fa-lg" title="update"></li>
                </b-button>
              </router-link>
              <b-button size="sm" variant="youtube icon" v-on:click="deleteMaterial(data.item.id)" class="mr-1 btn-brand" v-if="is_course_trainer || is_sfe_trainer">
                <i class="fa fa-trash-o fa-lg" title="delete"></i>
              </b-button>
            </template>
          </b-table>

          <nav>
            <b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage"
            v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
          </nav>

        </div>

<!-- <div class="modal fade" id="modal-scrollable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div style="text-align: center;">
<iframe src="http://docs.google.com/gview?url=http://www.pdf995.com/samples/pdf.pdf&embedded=true"
style="width:500px; height:500px;" frameborder="0"></iframe>

 <object type='application/pdf' :data="currentMaterial.file" width="100%" height="500" style="height: 85vh;"></object> 

 </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div> -->

<b-modal id="modal-xl" size="xl" title="Material">
      <div style="text-align: center;">

        <!-- {{iframeSrc.split('.').pop()}} -->
      <div v-if=" iframeSrc.split('.').pop() === 'jpg'">
        <!-- {{this.currentMaterial.file}} -->
          <img :src="currentMaterial.file" >
      </div>
      <div v-else>
        <!-- {{this.final_url}} -->
        <iframe :src="this.final_url" style="width:850px; height:500px;" frameborder="0">
      </iframe>
      </div>
      </div>
</b-modal>
</b-card>

</transition>
</b-col>

  </b-row>

</template>
<script>
import axios from 'axios'
import { MATERIAL } from  '../../endpoints';
import { Switch as cSwitch } from '@coreui/vue'
import Swal from 'sweetalert2'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';


export default {
  name: 'Material',
  props: {
    hover: {
      type: Boolean,
      default: true
    },
    striped: {
      type: Boolean,
      default: true
    },
    bordered: {
      type: Boolean,
      default: false
    },
    small: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    }
  },

  data: () => {
    return {
      profileUpdateModal: false,
      isLoading:false,
      fullPage:true,
      currentMaterial:[],
      iframeSrc:'',
      items: [],
      next_url:'',
      final_url:'',
      previous_url:'',
      is_sfe_trainer: false,
      is_course_trainer: false,
      fields: [
        {key: 'trainer'},
        {key: 'batch'},
        {key: 'modules'},
        {key: 'file'},
        {key: 'comment'},
        {key: 'file_status'},
        {key: 'Actions'}
      ],
      currentPage: 1,
      perPage: 10,
      totalRows: 0,
      table_data:true
    }
  },

  components: {
 
  },

  computed: {
  },

  methods: {

    getMaterial(id) {
      this.isLoading = true;
      axios.get(`${MATERIAL}${id}`).then((response) => {
        this.currentMaterial = response.data;
        this.isLoading = false;
        this.iframeSrc= this.currentMaterial.file;
        // console.log("iframeSrc",  this.iframeSrc.split('.').pop())

        this.final_url='http://docs.google.com/gview?url=' + this.iframeSrc + '&embedded=true'
        // console.log("iframeSrc",  this.final_url.split('.').pop())

        // window.open(this.currentMaterial.file);
      }).catch((err) => {
        this.isLoading = false;
      });
    },

   

    getBadge (status) {
      return status === 'Active' ? 'success'
        : status === 'Inactive' ? 'secondary'
          : status === 'Pending' ? 'warning'
            : status === 'Banned' ? 'danger' : 'primary'
    },

    getRowCount (items) {
      return items.length
    },

   

    rowClicked (item) {
      const userLink = this.userLink(item.id)
      this.$router.push({path: userLink})
    }
  },

  mounted() {
    this.getMaterials();
  },

  beforeMount() {
   
  
  }
}
</script>



Comments

Post a Comment

Popular posts from this blog

ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line

I execute the influxdb query like this in CMD SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()-15m and time<=now()-15m  and node=" getting error: ERR: error parsing query: found influx, expected SELECT, DELETE, SHOW, CREATE, DROP, EXPLAIN, GRANT, REVOKE, ALTER, SET, KILL at line 277 Resolved? SELECT LAST(node) as node, last(node_name) as node_name, last(location) as location," \ " last(shuntVoltage) as shutVoltage, last(loadVoltage) as loadVoltage, " \ "last(current) as current, last(busVoltage) as busVoltage from powers where time>=now()- '15m' and time<=now()-'15m' and node="
Read more

How To Convert Html File/URL/String Into Image Using Python

   I worked on converting HTML formate to PNG Image using python, its take 1 week to complete, First, I tried with  Imgkit  Package then I tried with  Html2image  Package, Later I tried with  Pypperteer  Package, When I used Imgkit package, I faced on one issue what it means, in HTML file we have any embedded code or more loading javascript code, its take more than 5 sec so when I used imgkit it is not taking those things on the image. when I used Html2image Package, I faced the same issue Finally, I solved that loading issue using Pypperteer Package ( https://github.com/pyppeteer/pyppeteer ), In Pypperteer Package we have one option, by using that option we can stop converting into the image until load the complete HTML file, And here we have one more great option to pass HTML string to get Document Elements like OffsetHight, etc. import asyncio from pyppeteer import launch def converting_html_image(input_url) -&gt; str:     file_na...
Read more

How to get Full URL or get absolute url In Django

this is use full to get full url for images or files. getting: [     {          "id" :  1 ,          "photo_url" :  "/media/media/11_sUhP0CC.png"     } ] Need: (after apply below process we get full url) [     {          "id" :  1 ,          "photo_url" :  "http://localhost:8000/media/media/11_sUhP0CC.png"     } ] Existing code: models.py class Car ( models . Model ): name = models . CharField ( max_length = 255 ) price = models . DecimalField ( max_digits = 5 , decimal_places = 2 ) photo = models . ImageField ( upload_to = 'cars' ) serializers.py class CarSerializer ( serializers . ModelSerializer ): class Meta : model = Car fields = ( 'id' ...
Read more