|
@ -14,18 +14,26 @@ |
|
|
> |
|
|
> |
|
|
Post Details |
|
|
Post Details |
|
|
</button> |
|
|
</button> |
|
|
|
|
|
<button |
|
|
|
|
|
type="button" |
|
|
|
|
|
class="btn btn-rounded" |
|
|
|
|
|
:class="tab === 'images' ? 'btn-dark' : 'btn-outline-dark'" |
|
|
|
|
|
@click="tab = 'images'" |
|
|
|
|
|
> |
|
|
|
|
|
Images |
|
|
|
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="card shadow-2-strong card-registration"> |
|
|
|
|
|
<div class="card-body p-4 p-md-5" v-if="tab === 'details'"> |
|
|
|
|
|
|
|
|
<div class="card shadow-2-strong card-registration" v-if="tab === 'details'"> |
|
|
|
|
|
<div class="card-body p-4 p-md-5"> |
|
|
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Update Post</h3> |
|
|
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Update Post</h3> |
|
|
<Form @submit="updatePost" v-slot="{ errors }"> |
|
|
<Form @submit="updatePost" v-slot="{ errors }"> |
|
|
|
|
|
|
|
|
<div class="row"> |
|
|
<div class="row"> |
|
|
<div class="col-md-8 mb-4"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-8 mb-4"> |
|
|
<div class="form-outline"> |
|
|
<div class="form-outline"> |
|
|
<Field |
|
|
<Field |
|
|
v-model="post.title" |
|
|
v-model="post.title" |
|
@ -40,7 +48,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-md-4 mb-4"> |
|
|
|
|
|
|
|
|
<div class="col-md-3 mb-4"> |
|
|
<div class="form-outline"> |
|
|
<div class="form-outline"> |
|
|
<select |
|
|
<select |
|
|
v-model="post.front_page" |
|
|
v-model="post.front_page" |
|
@ -50,9 +58,22 @@ |
|
|
<option :value="true">Yes</option> |
|
|
<option :value="true">Yes</option> |
|
|
<option :value="false">No</option> |
|
|
<option :value="false">No</option> |
|
|
</select> |
|
|
</select> |
|
|
<label v-if="!errors['Front Page']" class="form-label" for="front_page">Front Page</label> |
|
|
|
|
|
|
|
|
<label class="form-label" for="front_page">Front Page</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-1 mb-4" v-if="post.front_page"> |
|
|
|
|
|
<div class="form-outline"> |
|
|
|
|
|
<Field |
|
|
|
|
|
v-model="post.order" |
|
|
|
|
|
type="text" |
|
|
|
|
|
id="order" |
|
|
|
|
|
name="Order" |
|
|
|
|
|
class="form-control form-control-lg"/> |
|
|
|
|
|
<label class="form-label" for="order">Order</label> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="row"> |
|
|
<div class="row"> |
|
@ -117,6 +138,64 @@ |
|
|
</Form> |
|
|
</Form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="card shadow-2-strong card-registration" v-if="tab === 'images'"> |
|
|
|
|
|
<div class="card-body p-4 p-md-5"> |
|
|
|
|
|
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Upload Images</h3> |
|
|
|
|
|
<form @submit.prevent="onUpload"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
|
|
<input |
|
|
|
|
|
id="image-input" |
|
|
|
|
|
class="form-control" |
|
|
|
|
|
type="file" |
|
|
|
|
|
accept="image/*" |
|
|
|
|
|
multiple="multiple" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<br/> |
|
|
|
|
|
<div class="form-group mb-3 right-align"> |
|
|
|
|
|
<button |
|
|
|
|
|
type="button" |
|
|
|
|
|
class="btn btn-sm btn-outline-danger" |
|
|
|
|
|
@click="clearFiles" |
|
|
|
|
|
> |
|
|
|
|
|
Clear |
|
|
|
|
|
</button> |
|
|
|
|
|
<button class="btn btn-sm btn-outline-success">Upload</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="row row-cols-1 row-cols-md-3" v-if="post.images.length"> |
|
|
|
|
|
|
|
|
|
|
|
<div v-for="image in post.images" :key="image.id"> |
|
|
|
|
|
<div class="image-button-overlay"> |
|
|
|
|
|
<div @click="deleteImage(image.id)"> |
|
|
|
|
|
<span |
|
|
|
|
|
class="fa-solid fa-xmark image-delete" |
|
|
|
|
|
></span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="col"> |
|
|
|
|
|
<div class="card"> |
|
|
|
|
|
<img :src="image.filepath" class="card-img-top"> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="text-center" v-if="!post.images.length"> |
|
|
|
|
|
<p class="text-muted">Empty</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</section> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -131,6 +210,8 @@ export default { |
|
|
return { |
|
|
return { |
|
|
tab: 'details', |
|
|
tab: 'details', |
|
|
post: {}, |
|
|
post: {}, |
|
|
|
|
|
images: [], |
|
|
|
|
|
imageLabel: 'Choose File', |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
@ -203,6 +284,58 @@ export default { |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
this.$toast.error('An error occured'); |
|
|
this.$toast.error('An error occured'); |
|
|
} |
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
async onUpload(event) { |
|
|
|
|
|
let fd = new FormData() |
|
|
|
|
|
|
|
|
|
|
|
let photos = event.target[0].files |
|
|
|
|
|
|
|
|
|
|
|
if (photos.length === 0) { |
|
|
|
|
|
alert('No Files') |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < photos.length; i++) { |
|
|
|
|
|
fd.append('files', photos[i]) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let response = await this.axios.post( |
|
|
|
|
|
`/admin/post/${this.$route.params.id}/image`, |
|
|
|
|
|
fd, |
|
|
|
|
|
{ |
|
|
|
|
|
headers: { |
|
|
|
|
|
'Content-Type': 'multipart/form-data', |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) { |
|
|
|
|
|
this.post = response.data |
|
|
|
|
|
this.clearFiles() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
clearFiles () { |
|
|
|
|
|
document.getElementById("image-input").value=null; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
async deleteImage(id) { |
|
|
|
|
|
let response = await this.axios.delete( |
|
|
|
|
|
`/admin/post/${this.$route.params.id}/image/${id}`, |
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) { |
|
|
|
|
|
this.clearFiles() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const indexOfObject = this.post.images.findIndex(object => { |
|
|
|
|
|
return object.id === id; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.post.images.splice(indexOfObject, 1); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|