mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
447 lines
23 KiB
Vue
447 lines
23 KiB
Vue
<template>
|
|
<PageTab :is-loading="isLoading">
|
|
<PageTabGroup v-if="app">
|
|
<div class="form block-form">
|
|
<div class="card shadow-card">
|
|
<FormLabel>
|
|
{{ $t('Homepage') }}
|
|
</FormLabel>
|
|
|
|
<AppInputSwitch :title="$t('Allow Homepage')" :description="$t('When this is turned on, your visitors can visit your default homepage.')" :is-last="true">
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'allow_homepage', app.allow_homepage)"
|
|
v-model="app.allow_homepage"
|
|
class="switch"
|
|
:state="app.allow_homepage"
|
|
/>
|
|
</AppInputSwitch>
|
|
</div>
|
|
|
|
<!--Header-->
|
|
<div class="card shadow-card">
|
|
<FormLabel>Header Title</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<img src="/assets/images/admin/main-header.jpg" alt="Main Header" class="page-image" />
|
|
</div>
|
|
|
|
<div class="block-wrapper">
|
|
<label>Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'header_title', app.header_title)"
|
|
v-model="app.header_title"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'header_description', app.header_description)"
|
|
rows="2"
|
|
v-model="app.header_description"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Features title-->
|
|
<div class="card shadow-card">
|
|
<FormLabel>Features Title</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<div>
|
|
<div class="inline-wrapper">
|
|
<div class="switch-label">
|
|
<label class="input-label"> Show section: </label>
|
|
</div>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'section_features', app.section_features)"
|
|
v-model="app.section_features"
|
|
class="switch"
|
|
:state="app.section_features"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="app.section_features">
|
|
<div class="block-wrapper">
|
|
<img src="/assets/images/admin/main-features.jpg" alt="Main Features" class="page-image" />
|
|
</div>
|
|
|
|
<div class="block-wrapper">
|
|
<label>Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'features_title', app.features_title)"
|
|
v-model="app.features_title"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'features_description', app.features_description)"
|
|
rows="2"
|
|
v-model="app.features_description"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Feature boxes-->
|
|
<div class="card shadow-card">
|
|
<FormLabel>Feature Boxes</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<div>
|
|
<div class="inline-wrapper">
|
|
<div class="switch-label">
|
|
<label class="input-label"> Show section: </label>
|
|
</div>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'section_feature_boxes', app.section_feature_boxes)"
|
|
v-model="app.section_feature_boxes"
|
|
class="switch"
|
|
:state="app.section_feature_boxes"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="app.section_feature_boxes">
|
|
<div class="block-wrapper">
|
|
<img src="/assets/images/admin/feature-boxes.jpg" alt="Main Features" class="page-image" />
|
|
</div>
|
|
<div class="block-wrapper">
|
|
<label>First Box Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Title 1" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)"
|
|
v-model="app.feature_title_1"
|
|
type="text"
|
|
:class="{ 'border-red': 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>First Box Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Description 1" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)"
|
|
rows="2"
|
|
v-model="app.feature_description_1"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
<div class="block-wrapper">
|
|
<label>Second Box Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Title 2" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)"
|
|
v-model="app.feature_title_2"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Second Box Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Description 2" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)"
|
|
rows="2"
|
|
v-model="app.feature_description_2"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
<div class="block-wrapper">
|
|
<label>Third Box Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Title 3" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)"
|
|
v-model="app.feature_title_3"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Third Box Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="Feature Description 3" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)"
|
|
rows="2"
|
|
v-model="app.feature_description_3"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Pricing Content-->
|
|
<div v-if="config.isSaaS" class="card shadow-card">
|
|
<FormLabel>Pricing Content</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<div>
|
|
<div class="inline-wrapper">
|
|
<div class="switch-label">
|
|
<label class="input-label"> Show section: </label>
|
|
</div>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'section_pricing_content', app.section_pricing_content)"
|
|
v-model="app.section_pricing_content"
|
|
class="switch"
|
|
:state="app.section_pricing_content"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="app.section_pricing_content">
|
|
<div class="block-wrapper">
|
|
<img src="/assets/images/admin/pricing-content.jpg" alt="Main Features" class="page-image" />
|
|
</div>
|
|
<div class="block-wrapper">
|
|
<label>Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)"
|
|
v-model="app.pricing_title"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)"
|
|
rows="2"
|
|
v-model="app.pricing_description"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Get Started-->
|
|
<div class="card shadow-card">
|
|
<FormLabel>Get Started Content</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<div>
|
|
<div class="inline-wrapper">
|
|
<div class="switch-label">
|
|
<label class="input-label"> Show section: </label>
|
|
</div>
|
|
<SwitchInput
|
|
@input="$updateText('/admin/settings', 'section_get_started', app.section_get_started)"
|
|
v-model="app.section_get_started"
|
|
class="switch"
|
|
:state="app.section_get_started"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="app.section_get_started">
|
|
<div class="block-wrapper">
|
|
<img src="/assets/images/admin/get-started-content.jpg" alt="Main Features" class="page-image" />
|
|
</div>
|
|
<div class="block-wrapper">
|
|
<label>Title:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)"
|
|
v-model="app.get_started_title"
|
|
type="text"
|
|
:class="{ 'border-red': 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>Description:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
|
|
<textarea
|
|
@input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)"
|
|
rows="2"
|
|
v-model="app.get_started_description"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
></textarea>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Footer-->
|
|
<div class="card shadow-card">
|
|
<FormLabel>Footer</FormLabel>
|
|
|
|
<div class="block-wrapper">
|
|
<label>Footer content:</label>
|
|
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
|
|
<input
|
|
@input="$updateText('/admin/settings', 'footer_content', app.footer_content)"
|
|
v-model="app.footer_content"
|
|
type="text"
|
|
:class="{ 'border-red': errors[0] }"
|
|
class="focus-border-theme input-dark"
|
|
/>
|
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
|
</ValidationProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageTabGroup>
|
|
</PageTab>
|
|
</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 PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
|
|
import SelectInput from '../../../../components/Others/Forms/SelectInput'
|
|
import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
|
|
import ImageInput from '../../../../components/Others/Forms/ImageInput'
|
|
import FormLabel from '../../../../components/Others/Forms/FormLabel'
|
|
import ButtonBase from '../../../../components/FilesView/ButtonBase'
|
|
import SetupBox from '../../../../components/Others/Forms/SetupBox'
|
|
import PageTab from '../../../../components/Others/Layout/PageTab'
|
|
import InfoBox from '../../../../components/Others/Forms/InfoBox'
|
|
import { required } from 'vee-validate/dist/rules'
|
|
import axios from 'axios'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'AppIndex',
|
|
components: {
|
|
AppInputSwitch,
|
|
AppInputText,
|
|
ValidationObserver,
|
|
ValidationProvider,
|
|
PageTabGroup,
|
|
SwitchInput,
|
|
SelectInput,
|
|
ImageInput,
|
|
ButtonBase,
|
|
FormLabel,
|
|
SetupBox,
|
|
required,
|
|
PageTab,
|
|
InfoBox,
|
|
},
|
|
computed: {
|
|
...mapGetters(['config']),
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
app: undefined,
|
|
}
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get('/api/admin/settings', {
|
|
params: {
|
|
column: 'allow_homepage|footer_content|get_started_description|get_started_title|pricing_description|pricing_title|feature_description_3|feature_title_3|feature_description_2|feature_title_2|feature_description_1|feature_title_1|features_description|features_title|header_description|header_title|section_get_started|section_pricing_content|section_feature_boxes|section_features',
|
|
},
|
|
})
|
|
.then((response) => {
|
|
this.app = {
|
|
allow_homepage: parseInt(response.data.allow_homepage),
|
|
section_features: parseInt(response.data.section_features),
|
|
section_feature_boxes: parseInt(response.data.section_feature_boxes),
|
|
section_pricing_content: parseInt(response.data.section_pricing_content),
|
|
section_get_started: parseInt(response.data.section_get_started),
|
|
header_title: response.data.header_title,
|
|
header_description: response.data.header_description,
|
|
features_title: response.data.features_title,
|
|
features_description: response.data.features_description,
|
|
feature_title_1: response.data.feature_title_1,
|
|
feature_description_1: response.data.feature_description_1,
|
|
feature_title_2: response.data.feature_title_2,
|
|
feature_description_2: response.data.feature_description_2,
|
|
feature_title_3: response.data.feature_title_3,
|
|
feature_description_3: response.data.feature_description_3,
|
|
pricing_title: response.data.pricing_title,
|
|
pricing_description: response.data.pricing_description,
|
|
get_started_title: response.data.get_started_title,
|
|
get_started_description: response.data.get_started_description,
|
|
footer_content: response.data.footer_content,
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../../../sass/vuefilemanager/variables';
|
|
@import '../../../../../sass/vuefilemanager/mixins';
|
|
@import '../../../../../sass/vuefilemanager/forms';
|
|
|
|
.block-form {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.page-image {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: block;
|
|
border-radius: 8px;
|
|
border: 1px solid #ececec;
|
|
}
|
|
</style>
|