CakesTwix/Toloka2WebV2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved the title card element to a separate component

Browse source
This commit is contained in:
CakesTwix 2024-09-24 18:32:57 +03:00
parent 3da76d1e92
commit 660426cd53
Signed by: CakesTwix
GPG key ID: 7B11051D5CE19825
2 changed files with 62 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/components/TitleCard.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<article class="no-padding">
<div class="grid">
<div class="s12 m6 l3">
<img class="responsive" :src="title.image">
</div>
<div class="s9">
<div class="padding">
<h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
<hr class="medium">
<div>
<a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
<a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
<a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
<a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
</div>
<hr class="large">
<div>
<a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
<i>link</i>
<span>Посилання</span>
</a>
<a class="chip green-border no-margin" @click="updateTitle">
<i>update</i>
<span>Оновити</span>
</a>
<a class="chip amber-border no-margin" @click="editTitle">
<i>edit</i>
<span>Редагувати</span>
</a>
<a class="chip red-border no-margin" @click="deleteTitle">
<i>delete</i>
<span>Видалити</span>
</a>
</div>
</div>
</div>
</div>
</article>
</template>
<script>
export default {
props: ['title'],
methods: {
updateTitle() {
this.$emit('update-title', this.title.codename);
},
deleteTitle() {
this.$emit('delete-title', this.title.codename);
}
}
}
</script>

50
frontend/src/pages/index.vue
View file

@ -29,48 +29,8 @@
</button> </button>
</nav> </nav>
<article class="no-padding" v-for="title in titles"> <TitleCard v-for="title in titles" :key="title.codename" :title="title" @update-title="updateByCodename" @delete-title="deleteByCodename" />
<div class="grid">
<div class="s12 m6 l3">
<img class="responsive " :src=title.image>
</div>
<div class="s9">
<div class="padding">
<h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
<hr class="medium">
<div>
<a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
<a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
<a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
<a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
</div>
<hr class="large">
<div>
<a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
<i>link</i>
<span>Посилання</span>
</a>
<a class="chip green-border no-margin" @click="updateByCodename(title.codename)">
<i>update</i>
<span>Оновити</span>
</a>
<a class="chip amber-border no-margin" @click="editByCodename(title.codename)">
<i>edit</i>
<span>Редагувати</span>
</a>
<a class="chip red-border no-margin" @click="deleteByCodename(title.codename)">
<i>delete</i>
<span>Видалити</span>
</a>
</div>
</div>
</div>
</div>
</article>
</main> </main>
<main class="responsive middle-align center-align" v-else> <main class="responsive middle-align center-align" v-else>
<progress class="circle extra"></progress> <progress class="circle extra"></progress>
@ -90,7 +50,13 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import TitleCard from '../components/TitleCard.vue';
export default { export default {
components: {
TitleCard,
},
data() { data() {
return { return {
titles: [], // Titles list titles: [], // Titles list