catch up on enabling blog APIs in client

This commit is contained in:
Zhigang Wang 2024-06-04 13:43:20 -07:00
parent 05d03451dc
commit ff4af093a8
6 changed files with 59 additions and 66 deletions

View File

@ -1,9 +1,14 @@
<template> <template>
<div v-if="blogs" class="blogs_containter"> <div v-if="blogs" class="blogs_containter">
<div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)"> <div
class="blog_containter"
v-for="(blog, index) in blogs"
:key="index"
@click="view_blog(blog)"
>
<h2>{{ blog.blog_name }}</h2> <h2>{{ blog.blog_name }}</h2>
<img :src="blog.cover_picture"> <img :src="blog.cover_picture" />
<p v-text="retrieve_summary(blog)"> </p> <p v-text="retrieve_summary(blog)"></p>
</div> </div>
</div> </div>
</template> </template>
@ -30,7 +35,7 @@ export default {
this.mnx_navToContentViewer(blog.content_id) this.mnx_navToContentViewer(blog.content_id)
}, },
retrieve_summary(blog) { retrieve_summary(blog) {
return mediaDataHandler.retrieveText(blog.summary_text); return mediaDataHandler.retrieveText(blog.summary_text)
} }
}, },
data() { data() {
@ -38,7 +43,6 @@ export default {
blogs: null blogs: null
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -1,48 +1,49 @@
<template> <template>
<div class="">ContentViewer</div> <div class="">ContentViewer</div>
</template> </template>
<script> <script>
import { pdfjsLib } from '../../plugins/index' import { pdfjsLib } from '../../plugins/index'
import { ContentApi, mediaDataHandler } from '../../utils/index' import { ContentApi, mediaDataHandler } from '../../utils/index'
import { Buffer } from 'buffer'; import { Buffer } from 'buffer'
export default { export default {
name: 'ContentViewer', name: 'ContentViewer',
props: { props: {
content_id: { content_id: {
required: true, required: true,
type: String type: String
}
},
components: {},
computed: {},
mounted() {
this.retrieve_blog_content()
},
methods: {
retrieve_blog_content() {
ContentApi.retrieve_blog_content(this.content_id)
.then((response) => {
this.content_media_data = response.data
var loadingTask = pdfjsLib.getDocument({ data: Buffer.from(this.content_media_data, 'base64') })
loadingTask.promise.then(function(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function(page) {
//rendering
});
});
})
.catch((error) => {
this.mnx_backendErrorHandler(error)
})
},
},
data() {
return {
content_media_data: null
}
} }
},
components: {},
computed: {},
mounted() {
this.retrieve_blog_content()
},
methods: {
retrieve_blog_content() {
ContentApi.retrieve_blog_content(this.content_id)
.then((response) => {
this.content_media_data = response.data
var loadingTask = pdfjsLib.getDocument({
data: Buffer.from(this.content_media_data, 'base64')
})
loadingTask.promise.then(function (pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function (page) {
//rendering
})
})
})
.catch((error) => {
this.mnx_backendErrorHandler(error)
})
}
},
data() {
return {
content_media_data: null
}
}
} }
</script> </script>

View File

@ -291,7 +291,6 @@ export default {
if (this.uploadFile) { if (this.uploadFile) {
DocumentApi.upload(this.uploadFile) DocumentApi.upload(this.uploadFile)
.then((response) => { .then((response) => {
console.log(response.data.document_id)
return RequestHubApi.makeProposalForRequest( return RequestHubApi.makeProposalForRequest(
this.requestId, this.requestId,
this.proposal.content, this.proposal.content,

View File

@ -1,14 +1,7 @@
import { backendAxios } from './axios' import { backendAxios } from './axios'
class ContentApi { class ContentApi {
static retrieve_blogs() { static retrieve_blogs() {
const request = backendAxios.post( const request = backendAxios.post('/api/content/retrieve-blogs', {}, {})
'/api/content/retrieve-blogs',
{
},
{
}
)
return request return request
} }
static retrieve_blog_content(document_id) { static retrieve_blog_content(document_id) {
@ -17,9 +10,7 @@ class ContentApi {
{ {
document_id: document_id document_id: document_id
}, },
{ {}
}
) )
return request return request
} }

View File

@ -1,14 +1,12 @@
class MediaDataHandler { class MediaDataHandler {
retrieveText(mediaData) { retrieveText(mediaData) {
let prefix = "data:text/plain;base64," let prefix = 'data:text/plain;base64,'
let pos = mediaData.search(prefix); let pos = mediaData.search(prefix)
if (pos < 0) return ""; if (pos < 0) return ''
return atob(mediaData.substring(pos + prefix.length)) return atob(mediaData.substring(pos + prefix.length))
} }
} }
const mediaDataHandler = new MediaDataHandler() const mediaDataHandler = new MediaDataHandler()
export { mediaDataHandler } export { mediaDataHandler }