page inputs refactoring

This commit is contained in:
Čarodej
2021-11-22 18:01:30 +01:00
parent 88234d5748
commit 4ea46f5e81
2 changed files with 40 additions and 53 deletions

View File

@@ -50,7 +50,7 @@
"/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1", "/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324", "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
"/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3", "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=e43f457e73127ec3f7ae", "/chunks/page-edit.js": "/chunks/page-edit.js?id=b17615724b6b9e36ea70",
"/chunks/pages.js": "/chunks/pages.js?id=038b6c946b7eb16f85bf", "/chunks/pages.js": "/chunks/pages.js?id=038b6c946b7eb16f85bf",
"/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60", "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf", "/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
@@ -627,5 +627,17 @@
"/chunks/settings-password.87743b19122f780b950c.hot-update.js": "/chunks/settings-password.87743b19122f780b950c.hot-update.js", "/chunks/settings-password.87743b19122f780b950c.hot-update.js": "/chunks/settings-password.87743b19122f780b950c.hot-update.js",
"/chunks/settings-password.378b875252bdd254d1ff.hot-update.js": "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js", "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js": "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js",
"/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js": "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js", "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js": "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js",
"/chunks/settings-password.55be9251fdc82b46822e.hot-update.js": "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js" "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js": "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js",
"/chunks/page-edit.119d9de8e7f269043a53.hot-update.js": "/chunks/page-edit.119d9de8e7f269043a53.hot-update.js",
"/chunks/page-edit.6f57d1a40bb2af8ff0ca.hot-update.js": "/chunks/page-edit.6f57d1a40bb2af8ff0ca.hot-update.js",
"/chunks/page-edit.f80e592c92f1d41434a5.hot-update.js": "/chunks/page-edit.f80e592c92f1d41434a5.hot-update.js",
"/chunks/page-edit.41f2b316701aeff99feb.hot-update.js": "/chunks/page-edit.41f2b316701aeff99feb.hot-update.js",
"/chunks/page-edit.03aca67cde03bb4dd2a9.hot-update.js": "/chunks/page-edit.03aca67cde03bb4dd2a9.hot-update.js",
"/chunks/page-edit.2f0e28ecfca98b3010b7.hot-update.js": "/chunks/page-edit.2f0e28ecfca98b3010b7.hot-update.js",
"/chunks/page-edit.7fdfbe406f3677ee5b9b.hot-update.js": "/chunks/page-edit.7fdfbe406f3677ee5b9b.hot-update.js",
"/chunks/page-edit.2d749c39eeebb26015f9.hot-update.js": "/chunks/page-edit.2d749c39eeebb26015f9.hot-update.js",
"/chunks/page-edit.5553ce000c33d0e81b05.hot-update.js": "/chunks/page-edit.5553ce000c33d0e81b05.hot-update.js",
"/chunks/page-edit.946fa7062f4aef8814b8.hot-update.js": "/chunks/page-edit.946fa7062f4aef8814b8.hot-update.js",
"/chunks/page-edit.7e2c8d9e5f65db50e24b.hot-update.js": "/chunks/page-edit.7e2c8d9e5f65db50e24b.hot-update.js",
"/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js": "/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js"
} }

View File

@@ -1,60 +1,31 @@
<template> <template>
<div id="single-page"> <div id="single-page">
<div id="page-content" v-if="! isLoading && page"> <div id="page-content" v-if="! isLoading && page">
<div class="card shadow-card"> <div class="card shadow-card">
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form"> <FormLabel>
<FormLabel> {{ page.data.attributes.title }}
{{ page.data.attributes.title }} </FormLabel>
</FormLabel> <AppInputSwitch :title="$t('admin_pages.form.visibility')" :description="$t('admin_pages.form.visibility_help')">
<SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/>
<!--Visible--> </AppInputSwitch>
<div class="block-wrapper"> <AppInputText :title="$t('admin_pages.form.title')">
<div class="input-wrapper"> <input @input="$updateText('/admin/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
<div class="inline-wrapper"> :placeholder="$t('admin_pages.form.title_plac')" type="text" class="focus-border-theme input-dark"/>
<div class="switch-label"> </AppInputText>
<label class="input-label">{{ $t('admin_pages.form.visibility') }}:</label> <AppInputText :title="$t('admin_pages.form.slug')">
<small class="input-help">{{ $t('admin_pages.form.visibility_help') }}</small> <input v-model="page.data.attributes.slug" type="text" class="focus-border-theme input-dark" disabled/>
</div> </AppInputText>
<SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/> <AppInputText :title="$t('admin_pages.form.content')">
</div> <textarea
</div> @input="$updateText('/admin/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
</div> v-model="page.data.attributes.content"
:placeholder="$t('admin_pages.form.content_plac')"
<div class="block-wrapper"> class="focus-border-theme input-dark"
<label>{{ $t('admin_pages.form.title') }}:</label> rows="18"
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }"> ></textarea>
<input @input="$updateText('/admin/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title" </AppInputText>
:placeholder="$t('admin_pages.form.title_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('admin_pages.form.slug') }}:</label>
<div class="input-wrapper">
<input v-model="page.data.attributes.slug" type="text" class="focus-border-theme input-dark" disabled/>
</div>
</div>
<div class="block-wrapper">
<label>{{ $t('admin_pages.form.content') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
<textarea
@input="$updateText('/admin/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
v-model="page.data.attributes.content"
:placeholder="$t('admin_pages.form.content_plac')"
:class="{'is-error': errors[0]}"
class="focus-border-theme input-dark"
rows="18"
></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</ValidationObserver>
</div> </div>
</div> </div>
<div id="loader" v-if="isLoading"> <div id="loader" v-if="isLoading">
<Spinner></Spinner> <Spinner></Spinner>
</div> </div>
@@ -62,6 +33,8 @@
</template> </template>
<script> <script>
import AppInputSwitch from "../../../components/Admin/AppInputSwitch";
import AppInputText from "../../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel' import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import {required} from 'vee-validate/dist/rules' import {required} from 'vee-validate/dist/rules'
@@ -76,6 +49,8 @@
export default { export default {
name: 'PageEdit', name: 'PageEdit',
components: { components: {
AppInputSwitch,
AppInputText,
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
FormLabel, FormLabel,