users inputs refactoring

This commit is contained in:
Čarodej
2021-11-23 06:51:18 +01:00
parent d039700b90
commit d958da933d
4 changed files with 68 additions and 78 deletions

View File

@@ -51,7 +51,7 @@
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
"/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=725b13827e6e55f2d286",
"/chunks/pages.js": "/chunks/pages.js?id=038b6c946b7eb16f85bf",
"/chunks/pages.js": "/chunks/pages.js?id=10510081613e26cb3d84",
"/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
@@ -93,14 +93,14 @@
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
"/chunks/user.js": "/chunks/user.js?id=5c5421f40243bcba9c23",
"/chunks/user-create.js": "/chunks/user-create.js?id=244c7f71f243260e3faa",
"/chunks/user-create.js": "/chunks/user-create.js?id=0f1bce798ff38795cc9a",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=0559dd74a7d8e4b8afbc",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=03bfe48eb0673efa5001",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
"/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=bb30538ad15465e45248",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
"/chunks/users.js": "/chunks/users.js?id=2359885214cec5135847",
"/chunks/users.js": "/chunks/users.js?id=bd78d2a3c0c6253da984",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
"/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -710,5 +710,16 @@
"/chunks/settings-password.341fa6aa904779d9998e.hot-update.js": "/chunks/settings-password.341fa6aa904779d9998e.hot-update.js",
"/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js": "/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js",
"/chunks/settings-password.ab8197b698f0904eb479.hot-update.js": "/chunks/settings-password.ab8197b698f0904eb479.hot-update.js",
"/chunks/settings-password.3bee9428ac750796944f.hot-update.js": "/chunks/settings-password.3bee9428ac750796944f.hot-update.js"
"/chunks/settings-password.3bee9428ac750796944f.hot-update.js": "/chunks/settings-password.3bee9428ac750796944f.hot-update.js",
"/chunks/user-create.f9dbb82204d796743cf0.hot-update.js": "/chunks/user-create.f9dbb82204d796743cf0.hot-update.js",
"/chunks/user-create.3975eef598298e51f4d7.hot-update.js": "/chunks/user-create.3975eef598298e51f4d7.hot-update.js",
"/chunks/user-create.dbbc650d3a7d90c8549b.hot-update.js": "/chunks/user-create.dbbc650d3a7d90c8549b.hot-update.js",
"/chunks/user-create.b64d0b07e164d3c5cb98.hot-update.js": "/chunks/user-create.b64d0b07e164d3c5cb98.hot-update.js",
"/chunks/user-create.2227386c711d31784151.hot-update.js": "/chunks/user-create.2227386c711d31784151.hot-update.js",
"/chunks/user-create.d8cce1ef42c68f249562.hot-update.js": "/chunks/user-create.d8cce1ef42c68f249562.hot-update.js",
"/chunks/user-create.ad21177ea9970bd7150c.hot-update.js": "/chunks/user-create.ad21177ea9970bd7150c.hot-update.js",
"/chunks/users.5bef86aeafe91be3c73d.hot-update.js": "/chunks/users.5bef86aeafe91be3c73d.hot-update.js",
"/chunks/pages.35e66049556a2f1388a3.hot-update.js": "/chunks/pages.35e66049556a2f1388a3.hot-update.js",
"/chunks/pages.89358421733f488c18c9.hot-update.js": "/chunks/pages.89358421733f488c18c9.hot-update.js",
"/chunks/pages.3857ee94741a4c0f04eb.hot-update.js": "/chunks/pages.3857ee94741a4c0f04eb.hot-update.js"
}

View File

@@ -5,7 +5,7 @@
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
<template slot-scope="{ row }">
<tr>
<td class="py-3">
<td class="py-4">
<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="cell-item" tag="div">
<span>{{ row.data.attributes.title }}</span>
</router-link>

View File

@@ -122,7 +122,7 @@
return 'purple'
break;
case 'user':
return 'yellow'
return 'green'
break;
}
}

View File

@@ -1,86 +1,70 @@
<template>
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form">
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<!--Avatar-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
<ValidationProvider tag="div" mode="passive" name="avatar" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.create_user.avatar')" :error="errors[0]">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</ValidationProvider>
</div>
</AppInputText>
</ValidationProvider>
<!--Email-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</AppInputText>
</ValidationProvider>
<!--Name-->
<div class="block-wrapper">
<label>{{ $t('page_registration.label_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</AppInputText>
</ValidationProvider>
<!--Password-->
<div class="wrapper-inline">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_confirm_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
</div>
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<div class="flex space-x-4">
<ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
<AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
<AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</AppInputText>
</ValidationProvider>
</div>
</div>
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<!--User Role-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.select_role') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
</AppInputText>
</ValidationProvider>
<!--Storage Capacity-->
<div class="block-wrapper">
<label>{{ $t('admin_page_user.label_change_capacity') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
<input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>
</ValidationObserver>
<ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
<input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</AppInputText>
</ValidationProvider>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>
</ValidationObserver>
</template>
<script>
import AppInputText from "../../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -97,6 +81,7 @@
export default {
name: 'Profile',
components: {
AppInputText,
ValidationProvider,
ValidationObserver,
SectionTitle,
@@ -215,9 +200,3 @@
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
</style>