69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<script setup>
|
|
import '@/assets/modal.css';
|
|
import { ref } from 'vue';
|
|
import axios from 'axios';
|
|
const props = defineProps({
|
|
show: Boolean
|
|
})
|
|
const submitted = ref(false)
|
|
const url = ref('')
|
|
const title = ref('')
|
|
const output = ref('')
|
|
|
|
async function save() {
|
|
output.value = ''
|
|
submitted.value = true;
|
|
console.log('saved ' + url.value)
|
|
try {
|
|
const response = await axios.post("/api/v1/article/add", {
|
|
url: url.value,
|
|
title: title.value,
|
|
user_id: parseInt(localStorage.getItem("user-id"))
|
|
},
|
|
{
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'user-token': localStorage.getItem("user-token")
|
|
}
|
|
}
|
|
)
|
|
|
|
console.log(response)
|
|
output.value = 'saved successfully'
|
|
} catch (error) {
|
|
console.error(error.message)
|
|
output.value = error.message
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="modal">
|
|
<div v-if="show" class="modal-mask">
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<slot name="header">Add RSS Feed</slot>
|
|
</div>
|
|
<form @submit.prevent="save">
|
|
<label for="name">URL:</label>
|
|
<input v-model="url" id="url" type="text" required />
|
|
<label for="name">Title:</label>
|
|
<input v-model="title" id="title" type="text" required />
|
|
|
|
<div v-if="submitted">
|
|
<p>{{ output }}</p>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<slot name="footer">
|
|
<button type="submit">Save</button>
|
|
<button class="modal-default-button" @click="$emit('close')">Close</button>
|
|
</slot>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|