123 lines
4.2 KiB
Vue
123 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
type ChangeItem = {
|
|
id: string;
|
|
title: string;
|
|
entity: string;
|
|
action: string;
|
|
rolledBack?: boolean;
|
|
};
|
|
|
|
const props = defineProps<{
|
|
visible: boolean;
|
|
activeChangeStepNumber: number;
|
|
activeChangeItems: ChangeItem[];
|
|
activeChangeItem: ChangeItem | null;
|
|
activeChangeIndex: number;
|
|
rollbackableCount: number;
|
|
changeActionBusy: boolean;
|
|
describeChangeEntity: (entity: string) => string;
|
|
describeChangeAction: (action: string) => string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "close"): void;
|
|
(e: "open-item-target", item: ChangeItem): void;
|
|
(e: "rollback-item", itemId: string): void;
|
|
(e: "rollback-all"): void;
|
|
(e: "prev-step"): void;
|
|
(e: "next-step"): void;
|
|
(e: "done"): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="props.visible"
|
|
class="pointer-events-none fixed inset-x-2 bottom-2 z-40 md:inset-auto md:right-4 md:bottom-4 md:w-[390px]"
|
|
>
|
|
<section class="pointer-events-auto rounded-2xl border border-base-300 bg-base-100/95 p-3 shadow-2xl backdrop-blur">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="text-[11px] font-semibold uppercase tracking-wide text-base-content/60">
|
|
Review {{ props.activeChangeStepNumber }}/{{ props.activeChangeItems.length }}
|
|
</p>
|
|
<p class="truncate text-sm font-semibold text-base-content">
|
|
{{ props.activeChangeItem?.title || "Change step" }}
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-ghost btn-xs" @click="emit('close')">Close</button>
|
|
</div>
|
|
|
|
<div v-if="props.activeChangeItem" class="mt-2 rounded-xl border border-base-300 bg-base-200/35 p-2">
|
|
<p class="text-xs text-base-content/80">
|
|
{{ props.describeChangeEntity(props.activeChangeItem.entity) }}
|
|
{{ props.describeChangeAction(props.activeChangeItem.action) }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-2 max-h-40 space-y-1 overflow-y-auto pr-1">
|
|
<div
|
|
v-for="(item, index) in props.activeChangeItems"
|
|
:key="`review-step-${item.id}`"
|
|
class="group flex items-center gap-2 rounded-lg border px-2 py-1"
|
|
:class="index === props.activeChangeIndex ? 'border-primary/45 bg-primary/10' : 'border-base-300 bg-base-100'"
|
|
>
|
|
<button
|
|
class="min-w-0 flex-1 text-left"
|
|
@click="emit('open-item-target', item)"
|
|
>
|
|
<p class="truncate text-xs font-medium text-base-content">
|
|
{{ index + 1 }}. {{ item.title }}
|
|
</p>
|
|
<p class="truncate text-[11px] text-base-content/65">
|
|
{{ props.describeChangeEntity(item.entity) }}
|
|
</p>
|
|
</button>
|
|
<button
|
|
v-if="!item.rolledBack"
|
|
class="btn btn-ghost btn-xs opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
|
|
:disabled="props.changeActionBusy"
|
|
@click="emit('rollback-item', item.id)"
|
|
>
|
|
Rollback
|
|
</button>
|
|
<span v-else class="text-[10px] font-medium uppercase tracking-wide text-warning">Rolled back</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-center justify-between gap-2">
|
|
<div class="join">
|
|
<button
|
|
class="btn btn-xs join-item"
|
|
:disabled="props.activeChangeIndex <= 0"
|
|
@click="emit('prev-step')"
|
|
>
|
|
Prev
|
|
</button>
|
|
<button
|
|
class="btn btn-xs join-item"
|
|
:disabled="props.activeChangeIndex >= props.activeChangeItems.length - 1"
|
|
@click="emit('next-step')"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
<p class="text-[11px] text-base-content/70">
|
|
Rollback available: {{ props.rollbackableCount }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-2 flex flex-wrap gap-2">
|
|
<button
|
|
class="btn btn-xs btn-warning"
|
|
:disabled="props.changeActionBusy || props.rollbackableCount === 0"
|
|
@click="emit('rollback-all')"
|
|
>
|
|
{{ props.changeActionBusy ? "Applying..." : "Rollback all" }}
|
|
</button>
|
|
<button class="btn btn-xs btn-primary ml-auto" @click="emit('done')">Done</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|