@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/components/BusinessTypeVersionEditorDialog.vue

@@ -1,417 +0,0 @@
-<template>
-    <q-dialog v-model="open" persistent>
-        <q-card style="min-width: 720px; max-width: 96vw">
-            <q-card-section>
-                <div class="text-h6">
-                    {{ mode === 'create' ? 'Neue BusinessTypeVersion' : 'Draft bearbeiten' }}
-                </div>
-                <p class="text-caption text-grey-7">
-                    BusinessType <code>{{ businessTypeKey }}</code> · v{{ versionNumber }}
-                    {{ mode === 'create' ? '(neu)' : '(Draft)' }}
-                </p>
-            </q-card-section>
-
-            <q-card-section class="bvt__body">
-                <!-- Bundle composition -->
-                <div>
-                    <div class="bvt__label">Bundle-Komposition</div>
-                    <p class="text-caption text-grey-7 q-mb-sm">
-                        BusinessType referenziert konkrete <strong>published</strong>
-                        BundleVersions. Reihenfolge bestimmt die Sortierung im UI.
-                    </p>
-
-                    <q-list bordered separator dense>
-                        <q-item
-                            v-for="(entry, idx) in form.bundles"
-                            :key="`${entry.bundleVersionId}-${idx}`"
-                        >
-                            <q-item-section>
-                                <q-select
-                                    :model-value="entry.bundleVersionId"
-                                    :options="bundleOptions"
-                                    option-label="label"
-                                    option-value="value"
-                                    emit-value
-                                    map-options
-                                    outlined
-                                    dense
-                                    label="BundleVersion"
-                                    @update:model-value="(v) => updateBundleAt(idx, String(v))"
-                                />
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-btn
-                                    flat
-                                    dense
-                                    round
-                                    icon="arrow_upward"
-                                    :disable="idx === 0"
-                                    @click="moveBundle(idx, -1)"
-                                />
-                                <q-btn
-                                    flat
-                                    dense
-                                    round
-                                    icon="arrow_downward"
-                                    :disable="idx === form.bundles.length - 1"
-                                    @click="moveBundle(idx, 1)"
-                                />
-                                <q-btn
-                                    flat
-                                    dense
-                                    round
-                                    icon="delete"
-                                    color="negative"
-                                    @click="removeBundle(idx)"
-                                />
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                    <q-banner
-                        v-if="form.bundles.length === 0"
-                        class="bvt__warn"
-                        inline-actions
-                        rounded
-                    >
-                        <template #avatar>
-                            <q-icon name="warning" color="warning" />
-                        </template>
-                        Mindestens ein Bundle muss referenziert werden, bevor die Version published
-                        werden kann.
-                    </q-banner>
-                    <q-btn
-                        flat
-                        dense
-                        icon="add"
-                        label="Bundle ergänzen"
-                        color="primary"
-                        :disable="availableBundles.length === 0"
-                        @click="addBundle"
-                    />
-                </div>
-
-                <!-- Quota overrides -->
-                <div>
-                    <div class="bvt__label">Quota-Overrides</div>
-                    <p class="text-caption text-grey-7 q-mb-sm">
-                        Fehlender Key = Σ(Bundle-Quotas); gesetzter Key ersetzt die Summe (-1 =
-                        unbegrenzt).
-                    </p>
-                    <div class="bvt__quotas">
-                        <div
-                            v-for="(_value, key) in form.quotaOverrides"
-                            :key="key"
-                            class="bvt__quota-row"
-                        >
-                            <q-input
-                                :model-value="key"
-                                outlined
-                                dense
-                                label="Key"
-                                @update:model-value="(newKey) => renameQuota(key, String(newKey))"
-                            />
-                            <q-input
-                                v-model.number="form.quotaOverrides[key]"
-                                outlined
-                                dense
-                                type="number"
-                                label="Wert"
-                            />
-                            <q-btn
-                                flat
-                                dense
-                                round
-                                icon="delete"
-                                color="negative"
-                                @click="removeQuota(String(key))"
-                            />
-                        </div>
-                        <q-btn
-                            flat
-                            dense
-                            icon="add"
-                            label="Quota-Override ergänzen"
-                            color="primary"
-                            @click="addQuota"
-                        />
-                    </div>
-                </div>
-
-                <!-- Pricing -->
-                <div class="bvt__pricing">
-                    <q-input
-                        v-model="form.monthlyNet"
-                        outlined
-                        dense
-                        label="Monatspreis (Override, EUR)"
-                        hint="leer = Σ(Bundle-Preise)"
-                        clearable
-                    />
-                    <q-input
-                        v-model="form.yearlyNet"
-                        outlined
-                        dense
-                        label="Jahrespreis (Override, EUR)"
-                        clearable
-                    />
-                </div>
-
-                <q-toggle v-model="form.marketed" label="In Public-Catalog vermarkten" />
-
-                <q-input
-                    v-model="form.changeNote"
-                    outlined
-                    dense
-                    type="textarea"
-                    autogrow
-                    label="Change-Note"
-                />
-
-                <q-banner
-                    v-if="lastWarnings.length > 0"
-                    class="bvt__warnings"
-                    inline-actions
-                    rounded
-                >
-                    <template #avatar>
-                        <q-icon name="warning" color="warning" />
-                    </template>
-                    <strong>{{ lastWarnings.length }} Strict-Mode-Warnung(en):</strong>
-                    <ul class="bvt__warnings-list">
-                        <li v-for="(w, i) in lastWarnings" :key="i">
-                            <code>{{ w.code }}</code>
-                            <template v-if="w.value">
-                                · <code>{{ w.value }}</code></template
-                            >
-                            — {{ w.message }}
-                        </li>
-                    </ul>
-                </q-banner>
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="close" />
-                <q-btn
-                    unelevated
-                    color="primary"
-                    :label="mode === 'create' ? 'Anlegen' : 'Speichern'"
-                    :disable="form.bundles.length === 0"
-                    :loading="submitting"
-                    @click="submit"
-                />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type {
-    BundleVersionRow,
-    BusinessTypeVersionMutationResult,
-    BusinessTypeVersionRow,
-    CreateBusinessTypeVersionDraftData,
-    StrictModeWarning,
-    UpdateBusinessTypeVersionDraftData,
-} from '@saasicat/types';
-
-interface FormState {
-    bundles: Array<{ bundleVersionId: string; sortOrder: number }>;
-    quotaOverrides: Record<string, number>;
-    monthlyNet: string | null;
-    yearlyNet: string | null;
-    marketed: boolean;
-    changeNote: string;
-}
-
-const props = defineProps<{
-    modelValue: boolean;
-    mode: 'create' | 'edit';
-    businessTypeKey: string;
-    draft?: BusinessTypeVersionRow | null;
-    versionNumber: number;
-    /**
-     * List of all available published BundleVersions in the project. The consumer
-     * wrapper collects this from useBundles + useBundleVersions.
-     */
-    availableBundles: BundleVersionRow[];
-    submit: (
-        data: CreateBusinessTypeVersionDraftData | UpdateBusinessTypeVersionDraftData,
-    ) => Promise<BusinessTypeVersionMutationResult>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void;
-    (e: 'submitted', result: BusinessTypeVersionMutationResult): void;
-}>();
-
-const open = computed({
-    get: () => props.modelValue,
-    set: (v) => emit('update:modelValue', v),
-});
-
-const form = ref<FormState>(buildInitialForm());
-const submitting = ref(false);
-const lastWarnings = ref<StrictModeWarning[]>([]);
-
-const bundleOptions = computed(() =>
-    props.availableBundles.map((bv) => ({
-        value: bv.id,
-        label: `${bv.bundleKey} · v${bv.version} (${bv.features.length} Features)`,
-    })),
-);
-
-watch(
-    () => [props.modelValue, props.draft],
-    () => {
-        if (props.modelValue) {
-            form.value = buildInitialForm();
-            lastWarnings.value = [];
-        }
-    },
-    { immediate: true },
-);
-
-function buildInitialForm(): FormState {
-    if (props.mode === 'edit' && props.draft) {
-        return {
-            bundles: props.draft.bundles.map((b) => ({
-                bundleVersionId: b.bundleVersionId,
-                sortOrder: b.sortOrder,
-            })),
-            quotaOverrides: { ...props.draft.quotaOverrides } as Record<string, number>,
-            monthlyNet: props.draft.monthlyNet,
-            yearlyNet: props.draft.yearlyNet,
-            marketed: props.draft.marketed,
-            changeNote: props.draft.changeNote,
-        };
-    }
-    return {
-        bundles: [],
-        quotaOverrides: {},
-        monthlyNet: null,
-        yearlyNet: null,
-        marketed: true,
-        changeNote: '',
-    };
-}
-
-function close(): void {
-    open.value = false;
-}
-
-function addBundle(): void {
-    const used = new Set(form.value.bundles.map((b) => b.bundleVersionId));
-    const next = props.availableBundles.find((bv) => !used.has(bv.id));
-    if (!next) return;
-    form.value.bundles = [
-        ...form.value.bundles,
-        { bundleVersionId: next.id, sortOrder: form.value.bundles.length },
-    ];
-}
-
-function updateBundleAt(idx: number, bundleVersionId: string): void {
-    form.value.bundles = form.value.bundles.map((b, i) =>
-        i === idx ? { ...b, bundleVersionId } : b,
-    );
-}
-
-function removeBundle(idx: number): void {
-    form.value.bundles = form.value.bundles
-        .filter((_, i) => i !== idx)
-        .map((b, i) => ({ ...b, sortOrder: i }));
-}
-
-function moveBundle(idx: number, delta: number): void {
-    const newIdx = idx + delta;
-    if (newIdx < 0 || newIdx >= form.value.bundles.length) return;
-    const next = [...form.value.bundles];
-    [next[idx], next[newIdx]] = [next[newIdx], next[idx]];
-    form.value.bundles = next.map((b, i) => ({ ...b, sortOrder: i }));
-}
-
-function addQuota(): void {
-    const newKey = `newQuota${Object.keys(form.value.quotaOverrides).length + 1}`;
-    form.value.quotaOverrides = { ...form.value.quotaOverrides, [newKey]: 0 };
-}
-
-function removeQuota(key: string): void {
-    const next = { ...form.value.quotaOverrides };
-    delete next[key];
-    form.value.quotaOverrides = next;
-}
-
-function renameQuota(oldKey: string | number, newKey: string): void {
-    if (!newKey || newKey === oldKey) return;
-    const next: Record<string, number> = {};
-    for (const [k, v] of Object.entries(form.value.quotaOverrides)) {
-        next[k === String(oldKey) ? newKey : k] = v;
-    }
-    form.value.quotaOverrides = next;
-}
-
-async function submit(): Promise<void> {
-    submitting.value = true;
-    try {
-        const payload = {
-            bundles: form.value.bundles,
-            quotaOverrides: form.value.quotaOverrides,
-            monthlyNet: form.value.monthlyNet || null,
-            yearlyNet: form.value.yearlyNet || null,
-            marketed: form.value.marketed,
-            changeNote: form.value.changeNote,
-        };
-        const result = await props.submit(payload);
-        lastWarnings.value = result.warnings;
-        emit('submitted', result);
-        if (result.warnings.length === 0) {
-            close();
-        }
-    } finally {
-        submitting.value = false;
-    }
-}
-</script>
-
-<style scoped>
-.bvt__body {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-.bvt__label {
-    font-size: 12px;
-    color: var(--q-grey-7, #757575);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
-}
-.bvt__quotas {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-.bvt__quota-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr auto;
-    gap: 8px;
-    align-items: center;
-}
-.bvt__pricing {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-}
-.bvt__warn {
-    border-left: 4px solid var(--q-warning, #f2c037);
-    margin: 8px 0;
-}
-.bvt__warnings {
-    border-left: 4px solid var(--q-warning, #f2c037);
-}
-.bvt__warnings-list {
-    margin: 8px 0 0;
-    padding-left: 20px;
-    font-size: 13px;
-}
-</style>

package/src/components/BusinessTypeVersionPublishDialog.vue

@@ -1,258 +0,0 @@
-<template>
-    <q-dialog v-model="open" persistent>
-        <q-card style="min-width: 600px; max-width: 96vw">
-            <q-card-section>
-                <div class="text-h6">BusinessTypeVersion publishen</div>
-                <p class="text-caption text-grey-7">
-                    BusinessType <code>{{ businessTypeKey }}</code> · v{{ draft.version }}
-                </p>
-            </q-card-section>
-
-            <q-card-section v-if="!previewLoaded" class="bvtp__loading">
-                <q-spinner color="primary" size="32px" />
-                <span class="q-ml-sm">Diff wird geladen …</span>
-            </q-card-section>
-
-            <q-card-section v-else class="bvtp__body">
-                <q-banner v-if="warnings.length > 0" class="bvtp__warnings" inline-actions rounded>
-                    <template #avatar>
-                        <q-icon name="warning" color="warning" />
-                    </template>
-                    <strong>{{ warnings.length }} Strict-Mode-Warnung(en)</strong>
-                    <ul class="bvtp__list">
-                        <li v-for="(w, i) in warnings" :key="i">
-                            <code>{{ w.code }}</code>
-                            <template v-if="w.value">
-                                · <code>{{ w.value }}</code></template
-                            >
-                            — {{ w.message }}
-                        </li>
-                    </ul>
-                </q-banner>
-
-                <div>
-                    <div class="bvtp__label">
-                        Änderungen gegenüber
-                        <span v-if="previousVersion">v{{ previousVersion }}</span>
-                        <span v-else class="text-grey-7">
-                            — keine Vorgänger-Version (Erst-Veröffentlichung)
-                        </span>
-                    </div>
-                    <q-banner
-                        v-if="changes.length === 0 && previousVersion"
-                        class="bvtp__neutral"
-                        inline-actions
-                        rounded
-                    >
-                        <template #avatar>
-                            <q-icon name="info" color="grey-7" />
-                        </template>
-                        Keine Änderungen — die Versionen sind inhaltlich gleich.
-                    </q-banner>
-                    <q-list v-else-if="changes.length > 0" bordered separator>
-                        <q-item v-for="(c, i) in changes" :key="i">
-                            <q-item-section side>
-                                <q-chip
-                                    dense
-                                    :color="directionColor(c.direction)"
-                                    text-color="white"
-                                >
-                                    {{ directionLabel(c.direction) }}
-                                </q-chip>
-                            </q-item-section>
-                            <q-item-section>
-                                <q-item-label>
-                                    <code>{{ c.field }}</code>
-                                </q-item-label>
-                                <q-item-label caption>
-                                    <span class="bvtp__old">{{ formatValue(c.oldValue) }}</span>
-                                    <q-icon name="arrow_forward" size="14px" class="q-mx-xs" />
-                                    <span class="bvtp__new">{{ formatValue(c.newValue) }}</span>
-                                </q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </div>
-
-                <q-banner v-if="isRegression" class="bvtp__regression" inline-actions rounded>
-                    <template #avatar>
-                        <q-icon name="error" color="negative" />
-                    </template>
-                    <strong>Regressive Änderung erkannt.</strong>
-                    Diese Version entfernt Bundles, senkt Quota-Overrides oder erhöht Preise.
-                    Vertragsschutz P3 verlangt Bestand-Opt-in.
-                    <template #action>
-                        <q-toggle
-                            v-model="forceRegressive"
-                            label="Trotzdem publishen"
-                            color="negative"
-                        />
-                    </template>
-                </q-banner>
-            </q-card-section>
-
-            <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="close" />
-                <q-btn
-                    unelevated
-                    :color="isRegression ? 'negative' : 'positive'"
-                    :label="isRegression ? 'Regressiv publishen' : 'Publishen'"
-                    :loading="submitting"
-                    :disable="isRegression && !forceRegressive"
-                    @click="submit"
-                />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type {
-    BusinessTypeVersionMutationResult,
-    BusinessTypeVersionRow,
-    StrictModeWarning,
-    VersionChange,
-} from '@saasicat/types';
-
-const props = defineProps<{
-    modelValue: boolean;
-    businessTypeKey: string;
-    draft: BusinessTypeVersionRow;
-    previous: BusinessTypeVersionRow | null;
-    warnings: StrictModeWarning[];
-    /**
-     * Pure-function diff classifier for BusinessTypeVersion. The consumer
-     * wrapper imports `classifyBusinessTypeVersionDiff` from
-     * `@saasicat/types` and passes it through.
-     */
-    classifyDiff: (
-        previous: BusinessTypeVersionRow,
-        draft: BusinessTypeVersionRow,
-    ) => { changes: VersionChange[]; nonRegressive: boolean };
-    submit: (opts: { forceRegressive: boolean }) => Promise<BusinessTypeVersionMutationResult>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void;
-    (e: 'submitted', result: BusinessTypeVersionMutationResult): void;
-}>();
-
-const open = computed({
-    get: () => props.modelValue,
-    set: (v) => emit('update:modelValue', v),
-});
-
-const previewLoaded = ref(false);
-const changes = ref<VersionChange[]>([]);
-const nonRegressive = ref(true);
-const forceRegressive = ref(false);
-const submitting = ref(false);
-
-const previousVersion = computed(() => props.previous?.version ?? null);
-const isRegression = computed(() => previewLoaded.value && !nonRegressive.value);
-
-watch(
-    () => [props.modelValue, props.draft, props.previous],
-    () => {
-        if (!props.modelValue) return;
-        previewLoaded.value = false;
-        forceRegressive.value = false;
-        try {
-            const diff = props.previous
-                ? props.classifyDiff(props.previous, props.draft)
-                : { changes: [], nonRegressive: true };
-            changes.value = diff.changes;
-            nonRegressive.value = diff.nonRegressive;
-        } finally {
-            previewLoaded.value = true;
-        }
-    },
-    { immediate: true },
-);
-
-function close(): void {
-    open.value = false;
-}
-
-async function submit(): Promise<void> {
-    submitting.value = true;
-    try {
-        const result = await props.submit({ forceRegressive: forceRegressive.value });
-        emit('submitted', result);
-        close();
-    } finally {
-        submitting.value = false;
-    }
-}
-
-function directionColor(d: VersionChange['direction']): string {
-    switch (d) {
-        case 'IMPROVEMENT':
-            return 'positive';
-        case 'REGRESSION':
-            return 'negative';
-        default:
-            return 'grey-7';
-    }
-}
-function directionLabel(d: VersionChange['direction']): string {
-    switch (d) {
-        case 'IMPROVEMENT':
-            return '+';
-        case 'REGRESSION':
-            return '−';
-        default:
-            return '○';
-    }
-}
-function formatValue(v: unknown): string {
-    if (v === null || v === undefined) return '—';
-    if (Array.isArray(v)) return v.length === 0 ? '[]' : v.join(', ');
-    if (typeof v === 'object') return JSON.stringify(v);
-    return String(v);
-}
-</script>
-
-<style scoped>
-.bvtp__body {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-.bvtp__label {
-    font-size: 12px;
-    color: var(--q-grey-7, #757575);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 6px;
-}
-.bvtp__loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 32px;
-}
-.bvtp__warnings {
-    border-left: 4px solid var(--q-warning, #f2c037);
-}
-.bvtp__neutral {
-    border-left: 4px solid var(--q-grey-7, #757575);
-}
-.bvtp__regression {
-    border-left: 4px solid var(--q-negative, #c10015);
-}
-.bvtp__list {
-    margin: 8px 0 0;
-    padding-left: 20px;
-    font-size: 13px;
-}
-.bvtp__old {
-    color: var(--q-negative, #c10015);
-    text-decoration: line-through;
-}
-.bvtp__new {
-    color: var(--q-positive, #21ba45);
-    font-weight: 600;
-}
-</style>