Skip to content

Commit

Permalink
Merge pull request #162 from Kasey0727/bugfix
Browse files Browse the repository at this point in the history 
fix: add message prompts to submit button of edit_yap.html
  • Loading branch information
@IRONICBo
IRONICBo authored Feb 21, 2024
2 parents cab071b + 334bcca commit a7d4fd9
Showing 1 changed file with 158 additions and 61 deletions.
219 changes: 158 additions & 61 deletions cmd/gopcomm/yap/edit_yap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

<!-- markdown -->
<link rel="stylesheet" href="/static/GoplusMarkdown/style.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" >
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css">

<!-- Resource Import -->
<!-- <script type="module" crossorigin src="/static/assets/index-s63-Szuh.js"></script>
Expand All @@ -44,7 +44,7 @@
<script data-widgets="code" src="https://goplus.org/widgets/loader.js"></script>
<script src="/static/GoplusMarkdown/GoplusMarkdown.umd.cjs"></script>

<script type="importmap">
<script type="importmap">
{ "imports": {
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
"vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js"
Expand Down Expand Up @@ -73,8 +73,8 @@
<n-divider vertical style="--n-color: #e0e0e6; margin: 0 0.5rem;"></n-divider>

<!-- Title Input -->
<n-input v-model:value="articleForm.title" placeholder="Input the article title"
clearable size="large" maxlength="50" show-count style="width: 60%;
<n-input v-model:value="articleForm.title" placeholder="Input the article title" clearable size="large"
maxlength="50" show-count style="width: 60%;
--n-caret-color: #3182ce; --n-border: 1px solid #ecf5fe;
--n-border-hover: 1px solid #ecf5fe; --n-border-focus: 1px solid #2a82e4;
--n-box-shadow-focus: 0 0 0 2.5px #cee1f5;">
Expand Down Expand Up @@ -143,12 +143,8 @@
<!-- Cover -->
<n-form-item label="Cover" path="cover">
<!-- TODO: @Shi 预览封面 -->
<n-upload :max="1" directory-dnd
accept="image/png, image/jpg, image/jpeg"
@change="changeCover"
:custom-request="customRequest"
:default-file-list="fileList"
>
<n-upload :max="1" directory-dnd accept="image/png, image/jpg, image/jpeg"
@change="changeCover" :custom-request="customRequest" :default-file-list="fileList">
<n-upload-dragger
style="--n-dragger-border-hover: 1.5px dashed #3182ce; border-radius: 7px;">
<div class="mb-1">
Expand Down Expand Up @@ -182,6 +178,70 @@
</div>
</template>
</n-modal>
<transition enter-active-class="ease-out duration-300 transform"
leave-active-class="ease-in duration-300 transform" enter-class="scale-50 opacity-0"
enter-to-class="scale-100 opacity-100" leave-class="scale-100 opacity-100"
leave-to-class="scale-50 opacity-0">
<div v-if="showBothNotice" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-10">
<div class="bg-white shadow-xl rounded-lg p-4 right-0 mr-4 mt-4 border border-gray-300">
<div class="flex items-start justify-between">
<div class="flex items-center">
<div class="text-red-500 mr-1">
<i class="ph-duotone ph-warning" style="font-size: 27px;"></i>
</div>
<div class="ml-3">
<p class="text-lg font-semibold text-red-500">Please fill in the article title
and content!
</p>
<p class="text-sm text-gray-500">Your article information is incomplete.</p>
</div>
</div>
<n-button quaternary size="tiny" class="ml-3" @click="showBothNotice=false">
<i class="ph-bold ph-x" style="font-size: 15px;"></i>
</n-button>
</div>
</div>
</div>
<div v-if="showTitleNotice" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-10">
<div class="bg-white shadow-xl rounded-lg p-4 right-0 mr-4 mt-4 border border-gray-300">
<div class="flex items-start justify-between">
<div class="flex items-center">
<div class="text-red-500 mr-1">
<i class="ph-duotone ph-warning" style="font-size: 27px;"></i>
</div>
<div class="ml-3">
<p class="text-lg font-semibold text-red-500">Please fill in the article title!
</p>
<p class="text-sm text-gray-500">Your article information is incomplete.</p>
</div>
</div>
<n-button quaternary size="tiny" class="ml-3" @click="showTitleNotice=false">
<i class="ph-bold ph-x" style="font-size: 15px;"></i>
</n-button>
</div>
</div>
</div>
<div v-if="showContentNotice" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-10">
<div class="bg-white shadow-xl rounded-lg p-4 right-0 mr-4 mt-4 border border-gray-300">
<div class="flex items-start justify-between">
<div class="flex items-center">
<div class="text-red-500 mr-1">
<i class="ph-duotone ph-warning" style="font-size: 27px;"></i>
</div>
<div class="ml-3">
<p class="text-lg font-semibold text-red-500">Please fill in the article
content!
</p>
<p class="text-sm text-gray-500">Your article information is incomplete.</p>
</div>
</div>
<n-button quaternary size="tiny" class="ml-3" @click="showContentNotice=false">
<i class="ph-bold ph-x" style="font-size: 15px;"></i>
</n-button>
</div>
</div>
</div>
</transition>
</div>

<!-- Content -->
Expand All @@ -192,6 +252,9 @@
const { reactive, toRefs, ref, h } = Vue;

/*======= article info =======*/
const showBothNotice = ref(false);
const showTitleNotice = ref(false);
const showContentNotice = ref(false);
const showModal = ref(false);

// a form to be filled out by user in frontend
Expand Down Expand Up @@ -225,7 +288,7 @@

// step2: organize the formData in frontend
function submitArticle() {
if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === ""){
if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") {
return
}
// convert the tags array into a string, separated by "; "
Expand All @@ -237,23 +300,23 @@
}
console.log('tags:', tags.value);

if(!isAdd.value){
formData.append("id",article.ID)
if (!isAdd.value) {
formData.append("id", article.ID)
}

// organize the formData
formData.append("title", articleForm.value.title);
formData.append("tags", tags.value);
formData.append("abstract", articleForm.value.abstract);
formData.append("cover", coverUrl);
formData.append("content",content || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown())
formData.append("trans_data",content !== "" ? window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown():"")
formData.append("content", content || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown())
formData.append("trans_data", content !== "" ? window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() : "")

// upload the formData to backend
uploadArticle(formData);
}

// step3: upload the formData to backend TODO: @Bai 上传表单的接口方法
// step3: upload the formData to backend
function uploadArticle(formData) {
const options = {
method: 'POST',
Expand All @@ -262,40 +325,40 @@
// 'Content-Type': 'multipart/form-data'
// },
}
fetch("/commit",options)
.then(res => {
return res.json();
})
.then(todos => {
if(todos.code === 200){
// success delete articleList or get articleList
window.location.href = "/p/"+todos.data
}
});
fetch("/commit", options)
.then(res => {
return res.json();
})
.then(todos => {
if (todos.code === 200) {
// success delete articleList or get articleList
window.location.href = "/p/" + todos.data
}
});
}

function translateMd(){
function translateMd() {
const md = window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown()
const transMd = new FormData();
transMd.append("content",md)
fetch("/translate",{
transMd.append("content", md)
fetch("/translate", {
method: 'POST',
body: transMd,
})
.then(res => {
return res.json();
})
.then(todos => {
if(todos.code === 200){
// save origin content
content = md
window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(todos.data)
}
});
.then(res => {
return res.json();
})
.then(todos => {
if (todos.code === 200) {
// save origin content
content = md
window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(todos.data)
}
});
}

function customRequest(option){
console.log("option",option)
function customRequest(option) {
console.log("option", option)
const file = option.file
const coverData = new FormData();
coverData.append('file', file.file);
Expand All @@ -307,40 +370,50 @@
// 'Content-Type': 'multipart/form-data'
// },
}
fetch("/upload",options)
.then(res => {
return res.json();
})
.then(todos => {
console.log("cover",todos)
fetch('/getMediaUrl/'+todos)
.then(resUrl => {
return resUrl.json();
fetch("/upload", options)
.then(res => {
return res.json();
})
.then(todosUrl => {
if(todosUrl.code === 200){
coverUrl = todosUrl.url
}
.then(todos => {
console.log("cover", todos)
fetch('/getMediaUrl/' + todos)
.then(resUrl => {
return resUrl.json();
})
.then(todosUrl => {
if (todosUrl.code === 200) {
coverUrl = todosUrl.url
}
});

});

});
}

function modalVisible(){
if (articleForm.value.title === "" || window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === ""){
function modalVisible() {
if (articleForm.value.title === "" && window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") {
showBothNotice.value = true;
return
} else if (articleForm.value.title === "") {
showTitleNotice.value = true;
return
} else if (window.GoplusMarkdown.MarkdownEditor.methods.getMarkdown() === "") {
showContentNotice.value = true;
return
}
showModal.value = true
showModal.value = true;
}

function goBack(){
function goBack() {
window.location.href = "/"
}

/*======= register vue component =======*/
const app = Vue.createApp({
data() {
return {
showBothNotice,
showTitleNotice,
showContentNotice,
showModal,
articleForm,
isAdd,
Expand All @@ -359,14 +432,38 @@
MarkdownEditor: window.GoplusMarkdown.MarkdownEditor
},
mounted() {
if(!isAdd.value){
if (!isAdd.value) {
articleForm.value.title = article.Title
articleForm.value.tags = article.Tags.split(";")
articleForm.value.abstract = article.Abstract
coverUrl = article.Cover
window.GoplusMarkdown.MarkdownEditor.methods.setMarkdown(article.Content)
}
},
watch: {
// automatically close notification after 3 seconds
showBothNotice(newValue) {
if (newValue) {
setTimeout(() => {
showBothNotice.value = false;
}, 3000);
}
},
showTitleNotice(newValue) {
if (newValue) {
setTimeout(() => {
showTitleNotice.value = false;
}, 3000);
}
},
showContentNotice(newValue) {
if (newValue) {
setTimeout(() => {
showContentNotice.value = false;
}, 3000);
}
},
},
});

app.use(naive)
Expand Down

0 comments on commit a7d4fd9

Please sign in to comment.