redis: add key modal style

This commit is contained in:
Jan Prochazka 2022-03-24 18:41:39 +01:00
parent 735c48902f
commit 5b39576e61
2 changed files with 19 additions and 14 deletions

View File

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import _ from 'lodash';
import AceEditor from '../query/AceEditor.svelte'; import AceEditor from '../query/AceEditor.svelte';
export let dbKeyFields; export let dbKeyFields;
@ -8,7 +10,7 @@
<div class="props"> <div class="props">
{#each dbKeyFields as column} {#each dbKeyFields as column}
<div class="colname">{column.name}</div> <div class="colname">{_.startCase(column.name)}</div>
<div class="colvalue"> <div class="colvalue">
<AceEditor <AceEditor
readOnly={!onChangeItem} readOnly={!onChangeItem}
@ -34,7 +36,8 @@
} }
.colname { .colname {
margin: 10px; margin-top: 20px;
color: var(--theme-font-3);
} }
.colvalue { .colvalue {

View File

@ -26,10 +26,22 @@
<FormProvider> <FormProvider>
<ModalBase {...$$restProps}> <ModalBase {...$$restProps}>
<svelte:fragment slot="header">Add item</svelte:fragment> <svelte:fragment slot="header">Add key</svelte:fragment>
<div class="container"> <div class="container">
<FormFieldTemplateLarge label="Type" type="combo"> <FormFieldTemplateLarge label="Key" type="text" noMargin>
<TextField
value={keyName}
on:change={e => {
// @ts-ignore
keyName = e.target.value;
}}
/>
</FormFieldTemplateLarge>
<div class="m-3" />
<FormFieldTemplateLarge label="Type" type="combo" noMargin>
<SelectField <SelectField
options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))} options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
value={type} value={type}
@ -40,16 +52,6 @@
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
<FormFieldTemplateLarge label="Name" type="text">
<TextField
value={keyName}
on:change={e => {
// @ts-ignore
keyName = e.target.value;
}}
/>
</FormFieldTemplateLarge>
<DbKeyItemDetail <DbKeyItemDetail
dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields} dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
{item} {item}