From 1e5dc8555a9b52f5af3b6d098908449ae494d33a Mon Sep 17 00:00:00 2001
From: Leonardo Zanotti <leonardojosezanotti@gmail.com>
Date: Thu, 8 Aug 2024 13:59:16 -0300
Subject: [PATCH] =?UTF-8?q?ADD=20-=20bot=C3=A3o=20de=20excluir=20selo=20ab?=
 =?UTF-8?q?rindo=20modal,=20update=20default=20placeholder=20image=20e=20r?=
 =?UTF-8?q?emove=20checkbox=20de=20mostrar=20no=20perfil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../panel--seal-relations-tabs/script.js      | 25 ++++++--------
 .../panel--seal-relations-tabs/template.php   | 34 +++++++++++++++----
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/modules/Panel/components/panel--seal-relations-tabs/script.js b/src/modules/Panel/components/panel--seal-relations-tabs/script.js
index b8e3d000f3..412c24ef94 100644
--- a/src/modules/Panel/components/panel--seal-relations-tabs/script.js
+++ b/src/modules/Panel/components/panel--seal-relations-tabs/script.js
@@ -19,7 +19,7 @@ app.component("panel--seal-relations-tabs", {
 		}
 
 		// Filter valid seals where validateDate is greater than or equal to today
-		const validSeals = this.entity.seals.filter((seal) => {
+		let validSeals = this.entity.seals.filter((seal) => {
 			const validateDate = parseDate(
 				seal.sealRelationFullData.validateDate
 			);
@@ -30,7 +30,7 @@ app.component("panel--seal-relations-tabs", {
 		});
 
 		// Filter expired seals where validateDate is less than today
-		const expiredSeals = this.entity.seals.filter((seal) => {
+		let expiredSeals = this.entity.seals.filter((seal) => {
 			const validateDate = parseDate(
 				seal.sealRelationFullData.validateDate
 			);
@@ -40,21 +40,14 @@ app.component("panel--seal-relations-tabs", {
 			);
 		});
 
-		return { validSeals, expiredSeals };
-	},
-
-	computed: {
-		validSealsLabel() {
-			// Use i18n translation here if needed
-			return `Válidos (${this.validSeals.length})`;
-		},
+		let validSealsLabel = `Válidos (${validSeals.length})`;
+		let expiredSealsLabel = `Expirados (${expiredSeals.length})`;
 
-		expiredSealsLabel() {
-			// Use i18n translation here if needed
-			return `Expirados (${this.expiredSeals.length})`;
-		},
+		return { validSeals, expiredSeals, validSealsLabel, expiredSealsLabel };
 	},
 
+	computed: {},
+
 	props: {
 		entity: {
 			type: Entity,
@@ -81,5 +74,9 @@ app.component("panel--seal-relations-tabs", {
 					: "Não expira";
 			return outputMsg;
 		},
+        removeSeal(seal) {
+            // this.entity.removeSealRelation(seal);
+			this.entity.seals = this.entity.seals.filter((el) => seal != el);
+        }
 	},
 });
diff --git a/src/modules/Panel/components/panel--seal-relations-tabs/template.php b/src/modules/Panel/components/panel--seal-relations-tabs/template.php
index b1f6af015d..61da0f8b2b 100644
--- a/src/modules/Panel/components/panel--seal-relations-tabs/template.php
+++ b/src/modules/Panel/components/panel--seal-relations-tabs/template.php
@@ -12,6 +12,7 @@
     mc-container
     mc-tabs
     mc-tab
+    mc-confirm-button
     mc-icon
 ');
 ?>
@@ -31,12 +32,12 @@
                                     <div class="seal-relation-content">
                                         <div class="seals-relations-item-image">
                                             <img v-if="seal?.files?.avatar?.transformations?.avatarSmall?.url" :src="seal.files.avatar.transformations.avatarSmall.url" alt="Seal Image">
-                                            <img v-else src="https://via.placeholder.com/150" alt="Placeholder Image">
+                                            <mc-icon v-else name="seal" alt="Placeholder Image">
                                         </div>
                                         <div class="seal-header">
                                             <h3>{{seal.name}}</h3>
-                                            <input type="checkbox" id="show-on-profile" name="show-on-profile" />
-                                            <label for="show-on-profile">Mostrar no perfil</label>
+                                            <!-- <input type="checkbox" id="show-on-profile" name="show-on-profile" />
+                                            <label for="show-on-profile">Mostrar no perfil</label> -->
                                         </div>
                                         <p><b>Criador do selo: </b>{{seal.sealRelationFullData.seal.owner.name}}</p>
                                         <p><b>Selo atribuido por: </b>{{seal.sealRelationFullData.agent.name}}</p>
@@ -44,7 +45,16 @@
                                         <p><mc-icon name="date"></mc-icon> Data de recebimento do selo: {{ formatReceivedDate(seal) }}</p>
                                         <p><mc-icon name="date"></mc-icon> Validade do selo: {{ formatValidDate(seal) }}</p>
                                         <div class="seal-footer">
-                                            <button class="button"><mc-icon name="trash"></mc-icon>Excluir selo</button>
+                                            <div class="icon">
+                                                <mc-confirm-button @confirm="removeSeal(seal)">
+                                                    <template #button="modal">
+                                                    <button class="button" @click="modal.open()"><mc-icon name="trash"></mc-icon>Excluir selo</button>
+                                                    </template>
+                                                    <template #message="message">
+                                                        <?php i::_e('Remover selo?') ?>
+                                                    </template>
+                                                </mc-confirm-button>
+                                            </div>
                                         </div>
                                     </div>
                                 </slot>
@@ -77,14 +87,26 @@
                                         </div>
                                         <div class="seal-header">
                                             <h3>{{seal.name}}</h3>
-                                            <input type="checkbox" id="show-on-profile" name="show-on-profile" />
-                                            <label for="show-on-profile">Mostrar no perfil</label>
+                                            <!-- <input type="checkbox" id="show-on-profile" name="show-on-profile" />
+                                            <label for="show-on-profile">Mostrar no perfil</label> -->
                                         </div>
                                         <p><b>Criador do selo: </b>{{seal.sealRelationFullData.seal.owner.name}}</p>
                                         <p><b>Selo atribuido por: </b>{{seal.sealRelationFullData.agent.name}}</p>
                                         <p><b>Descrição curta: </b>{{seal.sealRelationFullData.seal.shortDescription}}</p>
                                         <p><mc-icon name="date"></mc-icon> Data de recebimento do selo: {{ formatReceivedDate(seal) }}</p>
                                         <p><mc-icon name="date"></mc-icon> Validade do selo: {{ formatValidDate(seal) }}</p>
+                                        <div class="seal-footer">
+                                            <div class="icon">
+                                                <mc-confirm-button @confirm="removeSeal(seal)">
+                                                    <template #button="modal">
+                                                    <button class="button" @click="modal.open()"><mc-icon name="trash"></mc-icon>Excluir selo</button>
+                                                    </template>
+                                                    <template #message="message">
+                                                        <?php i::_e('Remover selo?') ?>
+                                                    </template>
+                                                </mc-confirm-button>
+                                            </div>
+                                        </div>
                                     </div>
                                 </slot>
                                 <hr>