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