@mundogamernetwork/shared-ui 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -113,11 +113,26 @@
|
|
|
113
113
|
<span class="channel">{{ card.ad_channel?.name }}</span>
|
|
114
114
|
<span class="price">{{ formatPrice(card.price_min, card.price_max, card.currency) }}</span>
|
|
115
115
|
</div>
|
|
116
|
-
|
|
116
|
+
<!-- Two-step delete rather than a modal: this component ships to
|
|
117
|
+
several host apps and cannot assume any particular confirm
|
|
118
|
+
dialog exists in the host. The trash icon used to fire the
|
|
119
|
+
DELETE on the first click, with no way back. -->
|
|
120
|
+
<div v-if="pendingDeleteId === card.id" class="card-actions confirm">
|
|
121
|
+
<span class="confirm-label">{{ $t("media_kit.editor.confirm_delete") }}</span>
|
|
122
|
+
<button @click="removeCard(card.id)" class="btn-confirm-delete">
|
|
123
|
+
{{ $t("media_kit.editor.confirm_delete_yes") }}
|
|
124
|
+
</button>
|
|
125
|
+
<!-- Reuses the editor's existing cancel key, which every host
|
|
126
|
+
app already ships, so only two keys are new. -->
|
|
127
|
+
<button @click="pendingDeleteId = null" class="btn-cancel-delete">
|
|
128
|
+
{{ $t("media_kit.editor.cancel") }}
|
|
129
|
+
</button>
|
|
130
|
+
</div>
|
|
131
|
+
<div v-else class="card-actions">
|
|
117
132
|
<button @click="editCard(card)" class="btn-edit">
|
|
118
133
|
<MGIcon icon="edit" />
|
|
119
134
|
</button>
|
|
120
|
-
<button @click="
|
|
135
|
+
<button @click="pendingDeleteId = card.id" class="btn-delete">
|
|
121
136
|
<MGIcon icon="trash" />
|
|
122
137
|
</button>
|
|
123
138
|
</div>
|
|
@@ -315,9 +330,13 @@ const saveRateCard = async () => {
|
|
|
315
330
|
}
|
|
316
331
|
};
|
|
317
332
|
|
|
333
|
+
/** Card awaiting a second click to confirm its deletion. */
|
|
334
|
+
const pendingDeleteId = ref<number | null>(null);
|
|
335
|
+
|
|
318
336
|
const removeCard = async (id: number) => {
|
|
319
337
|
try {
|
|
320
338
|
await deleteRateCard(id);
|
|
339
|
+
pendingDeleteId.value = null;
|
|
321
340
|
emit('refresh');
|
|
322
341
|
} catch (error) {
|
|
323
342
|
emit('error', t('media_kit.editor.error_generic'));
|
|
@@ -605,6 +624,36 @@ const netDisplay = computed(() => {
|
|
|
605
624
|
.btn-delete:hover i {
|
|
606
625
|
color: #ff4d4f;
|
|
607
626
|
}
|
|
627
|
+
|
|
628
|
+
&.confirm {
|
|
629
|
+
align-items: center;
|
|
630
|
+
gap: 12px;
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
.confirm-label {
|
|
634
|
+
color: #AAA;
|
|
635
|
+
font-size: 13px;
|
|
636
|
+
white-space: nowrap;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.btn-confirm-delete,
|
|
640
|
+
.btn-cancel-delete {
|
|
641
|
+
font-size: 13px;
|
|
642
|
+
padding: 4px 10px;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.btn-confirm-delete {
|
|
646
|
+
color: #ff4d4f;
|
|
647
|
+
font-weight: 600;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.btn-cancel-delete {
|
|
651
|
+
color: #AAA;
|
|
652
|
+
|
|
653
|
+
&:hover {
|
|
654
|
+
color: #FFF;
|
|
655
|
+
}
|
|
656
|
+
}
|
|
608
657
|
}
|
|
609
658
|
}
|
|
610
659
|
}
|