mirror of
https://github.com/gotson/komga.git
synced 2025-12-06 08:32:25 +01:00
add missing v-container in user create edit
This commit is contained in:
Gauthier Roebroeck
parent
2ea1e4a1a3
commit
7f7696958f
1 changed files with 237 additions and 235 deletions
|
|
@ -1,256 +1,258 @@
|
|||
<template>
|
||||
<template v-if="!user.id">
|
||||
<v-container class="px-0">
|
||||
<template v-if="!user.id">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="user!.email"
|
||||
autofocus
|
||||
:rules="['required', 'email']"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation dialog: Email field',
|
||||
defaultMessage: 'Email',
|
||||
id: 'ToD0+o',
|
||||
})
|
||||
"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="user.password"
|
||||
:rules="['required']"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation dialog: Password field',
|
||||
defaultMessage: 'Password',
|
||||
id: 'o+A10T',
|
||||
})
|
||||
"
|
||||
autocomplete="off"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
|
||||
@click:append-inner="showPassword = !showPassword"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="user!.email"
|
||||
autofocus
|
||||
:rules="['required', 'email']"
|
||||
<v-divider
|
||||
v-if="!user.id"
|
||||
class="mb-4"
|
||||
/>
|
||||
<div class="text-subtitle-2">Permissions</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Roles -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="user.roles"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation dialog: Email field',
|
||||
defaultMessage: 'Email',
|
||||
id: 'ToD0+o',
|
||||
description: 'User creation/edit dialog: Roles field',
|
||||
defaultMessage: 'Roles',
|
||||
id: 'CUxhzL',
|
||||
})
|
||||
"
|
||||
:items="userRoles"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Shared libraries -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="user.password"
|
||||
<v-select
|
||||
v-model="user.sharedLibraries!.libraryIds"
|
||||
multiple
|
||||
hide-details
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Shared Libraries field',
|
||||
defaultMessage: 'Shared Libraries',
|
||||
id: 'UvhIIT',
|
||||
})
|
||||
"
|
||||
:items="libraries"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
>
|
||||
<!-- Workaround for the lack of a slot to override the whole selection -->
|
||||
<template #prepend-inner>
|
||||
<!-- Show an All Libraries chip instead of the selection -->
|
||||
<v-chip
|
||||
v-if="user.sharedLibraries?.all"
|
||||
:text="
|
||||
$formatMessage({
|
||||
description:
|
||||
'User creation/edit dialog: Shared Libraries field, value shown when user has access to all libraries',
|
||||
defaultMessage: 'All libraries',
|
||||
id: 'app.user-create-dialog.all_libraries',
|
||||
})
|
||||
"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #selection="{ item }">
|
||||
<!-- Show the selection only if 'all' is false -->
|
||||
<v-chip
|
||||
v-if="!user.sharedLibraries?.all"
|
||||
size="small"
|
||||
:text="item.title"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #prepend-item>
|
||||
<v-list-item
|
||||
:title="
|
||||
$formatMessage({
|
||||
description:
|
||||
'User creation/edit dialog: Shared Libraries field, value shown when user has access to all libraries',
|
||||
defaultMessage: 'All libraries',
|
||||
id: 'app.user-create-dialog.all_libraries',
|
||||
})
|
||||
"
|
||||
@click="selectAllLibraries"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-checkbox-btn :model-value="user.sharedLibraries?.all" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<template #item="{ props: itemProps }">
|
||||
<v-list-item
|
||||
:disabled="user.sharedLibraries?.all"
|
||||
v-bind="itemProps"
|
||||
>
|
||||
<template #prepend="{ isSelected }">
|
||||
<v-checkbox-btn :model-value="isSelected" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Age restriction -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider class="mb-4" />
|
||||
<div class="text-subtitle-2">Age restriction</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-select
|
||||
v-model="user.ageRestriction!.restriction"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Age restriction field label',
|
||||
defaultMessage: 'Age restriction',
|
||||
id: 'hEOGa9',
|
||||
})
|
||||
"
|
||||
:items="ageRestrictions"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-number-input
|
||||
v-model="user.ageRestriction!.age"
|
||||
:disabled="user.ageRestriction?.restriction?.toString() === 'NONE'"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Age Restriction > Age field label',
|
||||
defaultMessage: 'Age',
|
||||
id: 'jywpqq',
|
||||
})
|
||||
"
|
||||
:min="0"
|
||||
:rules="['required']"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation dialog: Password field',
|
||||
defaultMessage: 'Password',
|
||||
id: 'o+A10T',
|
||||
})
|
||||
"
|
||||
autocomplete="off"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
|
||||
@click:append-inner="showPassword = !showPassword"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider
|
||||
v-if="!user.id"
|
||||
class="mb-4"
|
||||
/>
|
||||
<div class="text-subtitle-2">Permissions</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Roles -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="user.roles"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Roles field',
|
||||
defaultMessage: 'Roles',
|
||||
id: 'CUxhzL',
|
||||
})
|
||||
"
|
||||
:items="userRoles"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider class="mb-4" />
|
||||
<div class="text-subtitle-2">Label restrictions</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Allow labels -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
v-model="user.labelsAllow"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Allow only labels field label',
|
||||
defaultMessage: 'Allow only labels',
|
||||
id: 'Sj0HXz',
|
||||
})
|
||||
"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:items="sharingLabels"
|
||||
>
|
||||
<template #prepend-item>
|
||||
<v-list-item>
|
||||
<span class="font-weight-medium">
|
||||
{{ $formatMessage(commonMessages.selectItemOrCreateOne) }}
|
||||
</span>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Shared libraries -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="user.sharedLibraries!.libraryIds"
|
||||
multiple
|
||||
hide-details
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Shared Libraries field',
|
||||
defaultMessage: 'Shared Libraries',
|
||||
id: 'UvhIIT',
|
||||
})
|
||||
"
|
||||
:items="libraries"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
>
|
||||
<!-- Workaround for the lack of a slot to override the whole selection -->
|
||||
<template #prepend-inner>
|
||||
<!-- Show an All Libraries chip instead of the selection -->
|
||||
<v-chip
|
||||
v-if="user.sharedLibraries?.all"
|
||||
:text="
|
||||
$formatMessage({
|
||||
description:
|
||||
'User creation/edit dialog: Shared Libraries field, value shown when user has access to all libraries',
|
||||
defaultMessage: 'All libraries',
|
||||
id: 'app.user-create-dialog.all_libraries',
|
||||
})
|
||||
"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #selection="{ item }">
|
||||
<!-- Show the selection only if 'all' is false -->
|
||||
<v-chip
|
||||
v-if="!user.sharedLibraries?.all"
|
||||
size="small"
|
||||
:text="item.title"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #prepend-item>
|
||||
<v-list-item
|
||||
:title="
|
||||
$formatMessage({
|
||||
description:
|
||||
'User creation/edit dialog: Shared Libraries field, value shown when user has access to all libraries',
|
||||
defaultMessage: 'All libraries',
|
||||
id: 'app.user-create-dialog.all_libraries',
|
||||
})
|
||||
"
|
||||
@click="selectAllLibraries"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-checkbox-btn :model-value="user.sharedLibraries?.all" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<template #item="{ props: itemProps }">
|
||||
<v-list-item
|
||||
:disabled="user.sharedLibraries?.all"
|
||||
v-bind="itemProps"
|
||||
>
|
||||
<template #prepend="{ isSelected }">
|
||||
<v-checkbox-btn :model-value="isSelected" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Age restriction -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider class="mb-4" />
|
||||
<div class="text-subtitle-2">Age restriction</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-select
|
||||
v-model="user.ageRestriction!.restriction"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Age restriction field label',
|
||||
defaultMessage: 'Age restriction',
|
||||
id: 'hEOGa9',
|
||||
})
|
||||
"
|
||||
:items="ageRestrictions"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-number-input
|
||||
v-model="user.ageRestriction!.age"
|
||||
:disabled="user.ageRestriction?.restriction?.toString() === 'NONE'"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Age Restriction > Age field label',
|
||||
defaultMessage: 'Age',
|
||||
id: 'jywpqq',
|
||||
})
|
||||
"
|
||||
:min="0"
|
||||
:rules="['required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-divider class="mb-4" />
|
||||
<div class="text-subtitle-2">Label restrictions</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Allow labels -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
v-model="user.labelsAllow"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Allow only labels field label',
|
||||
defaultMessage: 'Allow only labels',
|
||||
id: 'Sj0HXz',
|
||||
})
|
||||
"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:items="sharingLabels"
|
||||
>
|
||||
<template #prepend-item>
|
||||
<v-list-item>
|
||||
<span class="font-weight-medium">
|
||||
{{ $formatMessage(commonMessages.selectItemOrCreateOne) }}
|
||||
</span>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Exclude labels -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
v-model="user.labelsExclude"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Exclude labels field label',
|
||||
defaultMessage: 'Exclude labels',
|
||||
id: '3W0jUi',
|
||||
})
|
||||
"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:items="sharingLabels"
|
||||
>
|
||||
<template #prepend-item>
|
||||
<v-list-item>
|
||||
<span class="font-weight-medium">
|
||||
{{ $formatMessage(commonMessages.selectItemOrCreateOne) }}
|
||||
</span>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Exclude labels -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
v-model="user.labelsExclude"
|
||||
:label="
|
||||
$formatMessage({
|
||||
description: 'User creation/edit dialog: Exclude labels field label',
|
||||
defaultMessage: 'Exclude labels',
|
||||
id: '3W0jUi',
|
||||
})
|
||||
"
|
||||
chips
|
||||
closable-chips
|
||||
multiple
|
||||
hide-details
|
||||
:items="sharingLabels"
|
||||
>
|
||||
<template #prepend-item>
|
||||
<v-list-item>
|
||||
<span class="font-weight-medium">
|
||||
{{ $formatMessage(commonMessages.selectItemOrCreateOne) }}
|
||||
</span>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
Loading…
Reference in a new issue