mirror of
				https://github.com/scinote-eln/scinote-web.git
				synced 2025-11-01 00:56:05 +08:00 
			
		
		
		
	* Update Office icons and labels to match to the latest branding kit [SCI-11430] (#8125) * Fix office icons allignment [SCI-11449] * Bump version to 1.38.0.2 --------- Co-authored-by: Anton <anton@scinote.net> Co-authored-by: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
		
			
				
	
	
		
			84 lines
		
	
	
	
		
			2.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			84 lines
		
	
	
	
		
			2.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="group w-full h-full">
 | |
|     <template v-if="docx.error">
 | |
|       <span class="flex items-center gap-1 text-sn-delete-red">
 | |
|         <i class="fas fa-exclamation-triangle"></i>
 | |
|         {{ i18n.t('projects.reports.index.error') }}
 | |
|         <span v-if="docx.preview_url" class="text-sn-black">|</span>
 | |
|         <a v-if="docx.preview_url" href="#"
 | |
|            class="file-preview-link flex items-center gap-1
 | |
|                   docx hover:no-underline whitespace-nowrap"
 | |
|            :data-preview-url="docx.preview_url">
 | |
|           {{ i18n.t('projects.reports.index.previous_docx') }}
 | |
|         </a>
 | |
|       </span>
 | |
|     </template>
 | |
|     <span v-else-if="docx.processing" class="processing docx">
 | |
|       {{ i18n.t('projects.reports.index.generating') }}
 | |
|     </span>
 | |
|     <template v-else-if="docx.preview_url">
 | |
|       <a v-if="docx.preview_url" href="#"
 | |
|           class="file-preview-link flex items-center gap-1
 | |
|                 docx hover:no-underline whitespace-nowrap"
 | |
|           :data-preview-url="docx.preview_url">
 | |
|         <i class="sn-icon sn-icon-file-word flex items-center"></i>
 | |
|         {{ i18n.t('projects.reports.index.docx') }}
 | |
|       </a>
 | |
|     </template>
 | |
|     <a v-else class="opacity-0 group-hover:opacity-100" href="#" @click.prevent="generate">
 | |
|       {{ i18n.t('projects.reports.index.generate') }}
 | |
|     </a>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import axios from '../../../packs/custom_axios.js';
 | |
| 
 | |
| export default {
 | |
|   name: 'DocxRenderer',
 | |
|   props: {
 | |
|     params: {
 | |
|       required: true
 | |
|     }
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       docx: this.params.data.docx_file
 | |
|     };
 | |
|   },
 | |
|   mounted() {
 | |
|     if (this.docx.processing) {
 | |
|       setTimeout(this.checkStatus, 3000);
 | |
|     }
 | |
|   },
 | |
|   watch: {
 | |
|     'params.data.docx_file': {
 | |
|       handler: function (val) {
 | |
|         this.docx = val;
 | |
|         if (val?.processing) {
 | |
|           setTimeout(this.checkStatus, 3000);
 | |
|         }
 | |
|       },
 | |
|       deep: true
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     generate() {
 | |
|       axios.post(this.params.data.urls.generate_docx)
 | |
|         .then(() => {
 | |
|           this.docx.processing = true;
 | |
|           this.checkStatus();
 | |
|         });
 | |
|     },
 | |
|     checkStatus() {
 | |
|       axios.get(this.params.data.urls.status)
 | |
|         .then((response) => {
 | |
|           this.docx = response.data.data.attributes.docx_file;
 | |
|           if (this.docx.processing) {
 | |
|             setTimeout(this.checkStatus, 3000);
 | |
|           }
 | |
|         });
 | |
|     }
 | |
|   }
 | |
| };
 | |
| </script>
 |