78 lines
2.5 KiB
Vue
78 lines
2.5 KiB
Vue
<template>
|
|
<div class="form-row" v-if="metadata !== null">
|
|
<div class="form-group col-sm-12">
|
|
<div class="card link-card-mini mb-2 px-0">
|
|
<div class="row no-gutters">
|
|
<div v-if="hasImage" class="col-4 justify-content-center align-items-center">
|
|
<img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
|
|
</div>
|
|
<div :class="descClasses">
|
|
<div class="card-body">
|
|
<h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6>
|
|
<template v-if="suggestions.length > 0">
|
|
<p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
|
|
<ul class="list-inline d-inline">
|
|
<li v-for="tag in suggestions"
|
|
class="list-inline-item badge badge-primary metadata-tag-item"
|
|
@click="addTag(tag)"><span class="oi oi-tag"></span> {{ tag }}</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Vue, Component, Prop} from "vue-property-decorator";
|
|
import {bus} from "../checkin";
|
|
|
|
type Metadata = {
|
|
url: string,
|
|
title: string,
|
|
description: string,
|
|
image: string,
|
|
expires_at: string | null,
|
|
tags: {
|
|
name: string
|
|
}[],
|
|
};
|
|
|
|
@Component
|
|
export default class MetadataPreview extends Vue {
|
|
@Prop() readonly metadata!: Metadata | null;
|
|
|
|
addTag(tag: string) {
|
|
bus.$emit("add-tag", tag);
|
|
}
|
|
|
|
get suggestions() {
|
|
if (this.metadata === null) {
|
|
return [];
|
|
}
|
|
|
|
return this.metadata.tags.map(t => t.name);
|
|
}
|
|
|
|
get hasImage() {
|
|
return this.metadata !== null && this.metadata.image !== ''
|
|
}
|
|
|
|
get descClasses() {
|
|
return {
|
|
"col-8": this.hasImage,
|
|
"col-12": !this.hasImage,
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.metadata-tag-item {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
</style>
|