From 660426cd5367d0dbd539644ba11446f2b7b6aafb Mon Sep 17 00:00:00 2001
From: CakesTwix <oleg.kiryazov@gmail.com>
Date: Tue, 24 Sep 2024 18:32:57 +0300
Subject: [PATCH] Moved the title card element to a separate component

---
 frontend/src/components/TitleCard.vue | 54 +++++++++++++++++++++++++++
 frontend/src/pages/index.vue          | 50 ++++---------------------
 2 files changed, 62 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/TitleCard.vue

diff --git a/frontend/src/components/TitleCard.vue b/frontend/src/components/TitleCard.vue
new file mode 100644
index 0000000..afc6c06
--- /dev/null
+++ b/frontend/src/components/TitleCard.vue
@@ -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>
\ No newline at end of file
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index a413515..336700d 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -29,48 +29,8 @@
             </button>
         </nav>
 
-        <article class="no-padding" v-for="title in titles">
-            <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>
+        <TitleCard v-for="title in titles" :key="title.codename" :title="title" @update-title="updateByCodename" @delete-title="deleteByCodename" />
+    
     </main>
     <main class="responsive middle-align center-align" v-else>
         <progress class="circle extra"></progress>
@@ -90,7 +50,13 @@
 
 <script>
 import axios from 'axios';
+
+import TitleCard from '../components/TitleCard.vue';
+
 export default {
+    components: {
+        TitleCard,
+    },
     data() {
         return {
             titles: [], // Titles list