austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

feat: unify tariff package price rows

Browse Source
This commit is contained in:
3252a8
2026-06-03 11:34:08 +03:00
parent 5d1fd3304b
commit e52c75538f
3 changed files with 269 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/sections/TariffEditorModal.svelte
+182 -333
View File
@@ -32,16 +32,6 @@
}));
$: defaultCurrencyKey = normalizeCurrencyKey(tariffsCatalog?.default_currency || "rub");
$: defaultCurrencyCode = defaultCurrencyKey.toUpperCase();
$: currencyPackageLabel = at(
"tariff_btn_package_currency",
{ currency: defaultCurrencyCode },
`Пакет ${defaultCurrencyCode}`
);
$: currencyPaymentLabel = at(
"payment_default_currency",
{ currency: defaultCurrencyCode },
`Оплата ${defaultCurrencyCode}`
);
$: currencyPriceColumnLabel = at(
"tariff_col_price_currency",
{ currency: defaultCurrencyCode },
@@ -413,103 +403,71 @@
>
</div>
<div class="admin-editor-section-actions">
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("premiumTopupRubRows", { gb: 10, price: "" })}
><Plus size={12} /> {currencyPackageLabel}</AdminButton
>
<AdminButton
size="sm"
onclick={() =>
tariffsStore.addDraftRow("premiumTopupStarsRows", { gb: 10, price: "" })}
><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</AdminButton
tariffsStore.addDraftRow("premiumTopupRows", { gb: 10, price: "", stars: "" })}
><Plus size={12} /> {at("tariff_btn_package", {}, "Пакет")}</AdminButton
>
</div>
</header>
<div class="admin-package-columns">
{#if tariffDraft.premiumTopupRows.length}
<div class="admin-row-editor">
<span class="admin-row-editor-caption">{currencyPaymentLabel}</span>
{#if tariffDraft.premiumTopupRubRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.premiumTopupRubRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="10"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём premium-пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="199"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("premiumTopupRubRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
</div>
<div class="admin-row-editor">
<span class="admin-row-editor-caption"
>{at("payment_stars", {}, "Оплата Telegram Stars")}</span
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span>{at("tariff_col_price_stars_full", {}, "Цена, ⭐ Stars")}</span>
<span></span>
</div>
<Sortable
items={tariffDraft.premiumTopupRows}
class="admin-row-editor-line admin-row-editor-drag"
handleLabel={at("tariff_package_reorder", {}, "Перетащите, чтобы изменить порядок")}
onReorder={(from, to) => tariffsStore.moveDraftRow("premiumTopupRows", from, to)}
let:item={row}
let:index
>
{#if tariffDraft.premiumTopupStarsRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.premiumTopupStarsRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="10"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём premium-пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="100"
bind:value={row.price}
aria-label={at(
"tariff_label_price_stars",
{},
"Цена premium-пакета в Telegram Stars"
)}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("premiumTopupStarsRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="10"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём premium-пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="199"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="100"
bind:value={row.stars}
aria-label={at(
"tariff_label_price_stars",
{},
"Цена premium-пакета в Telegram Stars"
)}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("premiumTopupRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</Sortable>
</div>
</div>
{/if}
</section>
</Tabs.Content>
@@ -641,32 +599,26 @@
<div class="admin-editor-section-actions">
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("trafficRubRows", { gb: 10, price: "" })}
><Plus size={12} /> {currencyPackageLabel}</AdminButton
>
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("trafficStarsRows", { gb: 10, price: "" })}
><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</AdminButton
onclick={() =>
tariffsStore.addDraftRow("trafficRows", { gb: 10, price: "", stars: "" })}
><Plus size={12} /> {at("tariff_btn_package", {}, "Пакет")}</AdminButton
>
</div>
</header>
<div class="admin-package-columns">
{#if tariffDraft.trafficRows.length}
<div class="admin-row-editor">
<span class="admin-row-editor-caption">{currencyPaymentLabel}</span>
{#if tariffDraft.trafficRubRows.length}
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span></span>
</div>
{/if}
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span>{at("tariff_col_price_stars_full", {}, "Цена, ⭐ Stars")}</span>
<span></span>
</div>
<Sortable
items={tariffDraft.trafficRubRows}
items={tariffDraft.trafficRows}
class="admin-row-editor-line admin-row-editor-drag"
handleLabel={at("tariff_package_reorder", {}, "Перетащите, чтобы изменить порядок")}
onReorder={(from, to) => tariffsStore.moveDraftRow("trafficRubRows", from, to)}
onReorder={(from, to) => tariffsStore.moveDraftRow("trafficRows", from, to)}
let:item={row}
let:index
>
@@ -688,61 +640,24 @@
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("trafficRubRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</Sortable>
</div>
<div class="admin-row-editor">
<span class="admin-row-editor-caption"
>{at("payment_stars", {}, "Оплата Telegram Stars")}</span
>
{#if tariffDraft.trafficStarsRows.length}
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
<span></span>
</div>
{/if}
<Sortable
items={tariffDraft.trafficStarsRows}
class="admin-row-editor-line admin-row-editor-drag"
handleLabel={at("tariff_package_reorder", {}, "Перетащите, чтобы изменить порядок")}
onReorder={(from, to) => tariffsStore.moveDraftRow("trafficStarsRows", from, to)}
let:item={row}
let:index
>
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="50"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="150"
bind:value={row.price}
bind:value={row.stars}
aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("trafficStarsRows", index)}
onclick={() => tariffsStore.removeDraftRow("trafficRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</Sortable>
</div>
</div>
{/if}
</section>
{/if}
</Tabs.Content>
@@ -766,96 +681,65 @@
<div class="admin-editor-section-actions">
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("topupRubRows", { gb: 10, price: "" })}
><Plus size={12} /> {currencyPackageLabel}</AdminButton
>
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("topupStarsRows", { gb: 10, price: "" })}
><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</AdminButton
onclick={() =>
tariffsStore.addDraftRow("topupRows", { gb: 10, price: "", stars: "" })}
><Plus size={12} /> {at("tariff_btn_package", {}, "Пакет")}</AdminButton
>
</div>
</header>
<div class="admin-package-columns">
{#if tariffDraft.topupRows.length}
<div class="admin-row-editor">
<span class="admin-row-editor-caption">{currencyPaymentLabel}</span>
{#if tariffDraft.topupRubRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.topupRubRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="20"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="149"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("topupRubRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
</div>
<div class="admin-row-editor">
<span class="admin-row-editor-caption"
>{at("payment_stars", {}, "Оплата Telegram Stars")}</span
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{currencyPriceColumnLabel}</span>
<span>{at("tariff_col_price_stars_full", {}, "Цена, ⭐ Stars")}</span>
<span></span>
</div>
<Sortable
items={tariffDraft.topupRows}
class="admin-row-editor-line admin-row-editor-drag"
handleLabel={at("tariff_package_reorder", {}, "Перетащите, чтобы изменить порядок")}
onReorder={(from, to) => tariffsStore.moveDraftRow("topupRows", from, to)}
let:item={row}
let:index
>
{#if tariffDraft.topupStarsRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_volume_gb", {}, "Объём, GB")}</span>
<span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.topupStarsRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="20"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="75"
bind:value={row.price}
aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("topupStarsRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
<Input
class="input"
type="number"
min="0.1"
step="0.1"
placeholder="20"
bind:value={row.gb}
aria-label={at("tariff_col_volume_gb", {}, "Объём пакета в GB")}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="149"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="75"
bind:value={row.stars}
aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("topupRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</Sortable>
</div>
</div>
{/if}
</section>
{:else}
<p class="admin-muted">
@@ -890,104 +774,69 @@
<div class="admin-editor-section-actions">
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("hwidRubRows", { count: 1, price: "" })}
><Plus size={12} /> {currencyPackageLabel}</AdminButton
>
<AdminButton
size="sm"
onclick={() => tariffsStore.addDraftRow("hwidStarsRows", { count: 1, price: "" })}
><Plus size={12} /> {at("tariff_btn_package_stars", {}, "Пакет ⭐")}</AdminButton
onclick={() =>
tariffsStore.addDraftRow("hwidRows", { count: 1, price: "", stars: "" })}
><Plus size={12} /> {at("tariff_btn_package", {}, "Пакет")}</AdminButton
>
</div>
</header>
<div class="admin-package-columns">
{#if tariffDraft.hwidRows.length}
<div class="admin-row-editor">
<span class="admin-row-editor-caption">{currencyPaymentLabel}</span>
{#if tariffDraft.hwidRubRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_hwid_count", {}, "+ устройств")}</span>
<span>{currencyPriceColumnLabel}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.hwidRubRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="1"
step="1"
placeholder="1"
bind:value={row.count}
aria-label={at(
"tariff_label_hwid_count_full",
{},
"Сколько устройств добавляет пакет"
)}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="99"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("hwidRubRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
</div>
<div class="admin-row-editor">
<span class="admin-row-editor-caption"
>{at("payment_stars", {}, "Оплата Telegram Stars")}</span
<div class="admin-row-editor-line admin-row-editor-drag admin-row-editor-header">
<span></span>
<span>{at("tariff_col_hwid_count", {}, "+ устройств")}</span>
<span>{currencyPriceColumnLabel}</span>
<span>{at("tariff_col_price_stars_full", {}, "Цена, ⭐ Stars")}</span>
<span></span>
</div>
<Sortable
items={tariffDraft.hwidRows}
class="admin-row-editor-line admin-row-editor-drag"
handleLabel={at("tariff_package_reorder", {}, "Перетащите, чтобы изменить порядок")}
onReorder={(from, to) => tariffsStore.moveDraftRow("hwidRows", from, to)}
let:item={row}
let:index
>
{#if tariffDraft.hwidStarsRows.length}
<div class="admin-row-editor-line admin-row-editor-header">
<span>{at("tariff_col_hwid_count", {}, "+ устройств")}</span>
<span>{at("tariff_col_price_stars", {}, "Цена, ⭐")}</span>
<span></span>
</div>
{/if}
{#each tariffDraft.hwidStarsRows as row, index}
<div class="admin-row-editor-line">
<Input
class="input"
type="number"
min="1"
step="1"
placeholder="1"
bind:value={row.count}
aria-label={at(
"tariff_label_hwid_count_full",
{},
"Сколько устройств добавляет пакет"
)}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="50"
bind:value={row.price}
aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("hwidStarsRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</div>
{/each}
<Input
class="input"
type="number"
min="1"
step="1"
placeholder="1"
bind:value={row.count}
aria-label={at(
"tariff_label_hwid_count_full",
{},
"Сколько устройств добавляет пакет"
)}
/>
<Input
class="input"
type="number"
min="0"
step="0.01"
placeholder="99"
bind:value={row.price}
aria-label={currencyPriceAriaLabel}
/>
<Input
class="input"
type="number"
min="0"
step="1"
placeholder="50"
bind:value={row.stars}
aria-label={at("tariff_label_price_stars", {}, "Цена пакета в Telegram Stars")}
/>
<AdminButton
size="sm"
variant="danger"
onclick={() => tariffsStore.removeDraftRow("hwidRows", index)}
aria-label={at("btn_delete", {}, "Удалить")}><Trash2 size={13} /></AdminButton
>
</Sortable>
</div>
</div>
{/if}
</section>
</Tabs.Content>
</Tabs.Root>