v11
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<pn-page-template>
|
||||
<template #title>
|
||||
{{ $t(title) }}
|
||||
</template>
|
||||
<template #footer>
|
||||
<template #card-actions>
|
||||
<q-btn
|
||||
rounded color="primary"
|
||||
class="w100 fix-disabled-btn"
|
||||
@@ -13,143 +13,142 @@
|
||||
{{ $t(btnText) }}
|
||||
</q-btn>
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<div class="column items-center q-pa-md q-pb-sm">
|
||||
<div class="relative-position flex justify-center w100 text-center">
|
||||
<pn-auto-avatar
|
||||
:img="userMod.photo"
|
||||
:name="tname"
|
||||
size="100px"
|
||||
class="q-pb-lg"
|
||||
:style="!userStatus ? {} : { filter: 'grayscale(100%)'}"
|
||||
/>
|
||||
<div
|
||||
v-if="userStatus"
|
||||
class="flex justify-center absolute-center w100 items-center"
|
||||
>
|
||||
<q-chip
|
||||
square
|
||||
:label="$t(userStatus.text)"
|
||||
:color="userStatus.color"
|
||||
text-color="white"
|
||||
class="text-uppercase"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex row items-start justify-center no-wrap q-pb-lg">
|
||||
<div class="flex column justify-center">
|
||||
<div class="text-bold q-pr-xs text-center" align="center">{{ tname }}</div>
|
||||
<div caption class="text-primary text-caption" align="center" v-if="user?.username">{{ user.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-form
|
||||
ref="formRef"
|
||||
@validation-success="isFormValid = true"
|
||||
@validation-error="isFormValid = false"
|
||||
class="q-gutter-y-lg w100"
|
||||
<div class="column items-center q-pa-md q-pb-sm">
|
||||
<div class="relative-position flex justify-center w100 text-center">
|
||||
<pn-auto-avatar
|
||||
:img="userMod.photo"
|
||||
:name="tname"
|
||||
size="100px"
|
||||
class="q-pb-lg"
|
||||
:style="!userStatus ? {} : { filter: 'grayscale(100%)'}"
|
||||
/>
|
||||
<div
|
||||
v-if="userStatus"
|
||||
class="flex justify-center absolute-center w100 items-center"
|
||||
>
|
||||
<q-input
|
||||
v-model.trim="userMod.fullname"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding"
|
||||
:label = "$t('user_block__name')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
<q-chip
|
||||
square
|
||||
:label="$t(userStatus.text)"
|
||||
:color="userStatus.color"
|
||||
text-color="white"
|
||||
class="text-uppercase"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
v-model="userMod.company_id"
|
||||
:options="displayCompanies"
|
||||
dense
|
||||
filled
|
||||
class="w100 q-pt-sm"
|
||||
:label = "$t('user_block__company')"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="formRef.validate()"
|
||||
>
|
||||
<template #option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
v-if="scope.opt.id"
|
||||
:img="scope.opt.logo"
|
||||
:name="scope.opt.label"
|
||||
size="md"
|
||||
type="rounded"
|
||||
/>
|
||||
<q-avatar
|
||||
v-else
|
||||
rounded
|
||||
size="md"
|
||||
>
|
||||
<q-icon size="32px" color="grey" name="mdi-cancel"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ scope.opt.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.department"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:label = "$t('user_block__department')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.role"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:label = "$t('user_block__role')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.phone"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-phone-outline"/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.email"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-email-outline"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</div>
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
<div class="flex row items-start justify-center no-wrap q-pb-lg">
|
||||
<div class="flex column justify-center">
|
||||
<div class="text-bold q-pr-xs text-center" align="center">{{ tname }}</div>
|
||||
<div caption class="text-primary text-caption" align="center" v-if="user?.username">{{ user.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-form
|
||||
ref="formRef"
|
||||
@validation-success="isFormValid = true"
|
||||
@validation-error="isFormValid = false"
|
||||
class="q-gutter-y-lg w100"
|
||||
>
|
||||
<q-input
|
||||
v-model.trim="userMod.fullname"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding"
|
||||
:label = "$t('user_block__name')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
v-model="userMod.company_id"
|
||||
:options="displayCompanies"
|
||||
dense
|
||||
filled
|
||||
class="w100 q-pt-sm"
|
||||
:label = "$t('user_block__company')"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="formRef.validate()"
|
||||
>
|
||||
<template #option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
v-if="scope.opt.id"
|
||||
:img="scope.opt.logo"
|
||||
:name="scope.opt.label"
|
||||
size="md"
|
||||
type="rounded"
|
||||
/>
|
||||
<q-avatar
|
||||
v-else
|
||||
rounded
|
||||
size="md"
|
||||
>
|
||||
<q-icon size="32px" color="grey" name="mdi-cancel"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ scope.opt.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.department"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:label = "$t('user_block__department')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.role"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:label = "$t('user_block__role')"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.phone"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-phone-outline"/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model.trim="userMod.email"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding q-pt-sm"
|
||||
:rules="[inputRules.middleText]"
|
||||
@update:model-value="formRef.validate()"
|
||||
debounce="300"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-email-outline"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</div>
|
||||
</pn-page-template>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user