ADD - botão de excluir selo abrindo modal, update default placeholder…

… image e remove checkbox de mostrar no perfil
RedeMapas · Aug 8, 2024 · 1e5dc85 · 1e5dc85
1 parent 7ccea85
commit 1e5dc85
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 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
@@ -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
@@ -12,6 +12,7 @@
     mc-container
     mc-tabs
     mc-tab
+    mc-confirm-button
     mc-icon
 ');
 ?>
@@ -31,20 +32,29 @@
                                     <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>
                                         <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">
-                                            <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>