nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 17:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
View File

@@ -6,19 +6,20 @@
{{ $t('Basic Setup') }}
</FormLabel>
<AppInputSwitch
:title="$t('Allow Google Adsense')"
:description="$t('Allow ads on app pages.')"
>
<AppInputSwitch :title="$t('Allow Google Adsense')" :description="$t('Allow ads on app pages.')">
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_adsense', adsense.allowedService)"
v-model="adsense.allowedService"
class="switch"
:state="adsense.allowedService"
/>
@input="$updateText('/admin/settings', 'allowed_adsense', adsense.allowedService)"
v-model="adsense.allowedService"
class="switch"
:state="adsense.allowedService"
/>
</AppInputSwitch>
<AppInputText :title="$t('Client Id')" :description="$t('Paste your Adsense Client ID e.g. ca-pub-XXXXXXXXXXXXXXXXX')" :is-last="true">
<AppInputText
:title="$t('Client Id')"
:description="$t('Paste your Adsense Client ID e.g. ca-pub-XXXXXXXXXXXXXXXXX')"
:is-last="true"
>
<input
@input="$updateText('/admin/settings', 'adsense_client_id', adsense.clientId, true)"
v-model="adsense.clientId"
@@ -35,37 +36,47 @@
{{ $t('Ads') }}
</FormLabel>
<AppInputText :title="$t('File Viewport Banner')" :description="$t('This banner will be showed above user files')">
<AppInputText
:title="$t('File Viewport Banner')"
:description="$t('This banner will be showed above user files')"
>
<textarea
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_01', adsense.banner01, true)"
v-model="adsense.banner01"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_01', adsense.banner01, true)"
v-model="adsense.banner01"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Download Page Banner')" :description="$t('This banner will be showed below file download page')">
<AppInputText
:title="$t('Download Page Banner')"
:description="$t('This banner will be showed below file download page')"
>
<textarea
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_02', adsense.banner02, true)"
v-model="adsense.banner02"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_02', adsense.banner02, true)"
v-model="adsense.banner02"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Homepage Banner')" :description="$t('This banner will be showed on the homepage')" :is-last="true">
<AppInputText
:title="$t('Homepage Banner')"
:description="$t('This banner will be showed on the homepage')"
:is-last="true"
>
<textarea
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_03', adsense.banner03, true)"
v-model="adsense.banner03"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
rows="3"
@input="$updateText('/admin/settings', 'adsense_banner_03', adsense.banner03, true)"
v-model="adsense.banner03"
:placeholder="$t('Paste the <ins></ins> tag here...')"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
</div>
</PageTab>
@@ -98,18 +109,18 @@ export default {
adsense: {
allowedService: undefined,
clientId: undefined,
banner01: undefined,
banner01: undefined,
},
}
},
created() {
this.adsense = {
allowedService: this.config.allowedAdsense,
clientId: this.config.adsenseClientId,
banner01: this.config.adsenseBanner01,
banner02: this.config.adsenseBanner02,
banner03: this.config.adsenseBanner03,
}
allowedService: this.config.allowedAdsense,
clientId: this.config.adsenseClientId,
banner01: this.config.adsenseBanner01,
banner02: this.config.adsenseBanner02,
banner03: this.config.adsenseBanner03,
}
},
}
</script>

31
resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
View File

@@ -6,7 +6,12 @@
</FormLabel>
<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color" />
<input
@input="$updateText('/admin/settings', 'app_color', app.color)"
v-model="app.color"
:placeholder="$t('admin_settings.appearance.title_plac')"
type="color"
/>
</AppInputSwitch>
<AppInputText :title="$t('admin_settings.appearance.title')">
@@ -35,7 +40,11 @@
</FormLabel>
<AppInputText :title="$t('admin_settings.appearance.logo')">
<ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" />
<ImageInput
@input="$updateImage('/admin/settings', 'app_logo', app.logo)"
:image="$getImage(app.logo)"
v-model="app.logo"
/>
</AppInputText>
<AppInputText :title="$t('admin_settings.appearance.logo_horizontal')">
@@ -47,15 +56,27 @@
</AppInputText>
<AppInputText :title="$t('admin_settings.appearance.favicon')">
<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" />
<ImageInput
@input="$updateImage('/admin/settings', 'app_favicon', app.favicon)"
:image="$getImage(app.favicon)"
v-model="app.favicon"
/>
</AppInputText>
<AppInputText :title="$t('og_image')" :description="$t('og_image_description')">
<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" />
<ImageInput
@input="$updateImage('/admin/settings', 'app_og_image', app.og_image)"
:image="$getImage(app.og_image)"
v-model="app.og_image"
/>
</AppInputText>
<AppInputText :title="$t('app_touch_icon')" :description="$t('app_touch_icon_description')" :is-last="true">
<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" />
<ImageInput
@input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)"
:image="$getImage(app.touch_icon)"
v-model="app.touch_icon"
/>
</AppInputText>
</div>
</PageTab>

387
resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
View File

@@ -1,101 +1,209 @@
<template>
<PageTab :is-loading="isLoading">
<ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="card shadow-card">
<ValidationObserver
@submit.prevent="EmailSetupSubmit"
ref="EmailSetup"
v-slot="{ invalid }"
tag="form"
class="card shadow-card"
>
<FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Driver" :error="errors[0]">
<SelectInput v-model="mailDriver" :default="mailDriver" :options="mailDriverList" placeholder="Select your mail driver" :isError="errors[0]" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Driver" :error="errors[0]">
<SelectInput
v-model="mailDriver"
:default="mailDriver"
:options="mailDriverList"
placeholder="Select your mail driver"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === 'smtp'">
<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Host" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="smtp.host" placeholder="Type your mail host" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === 'smtp'">
<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Host" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="smtp.host"
placeholder="Type your mail host"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Port" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="smtp.port" placeholder="Type your mail port" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Port" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="smtp.port"
placeholder="Type your mail port"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Username" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="smtp.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Username" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="smtp.username"
placeholder="Type your mail username"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Password" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="smtp.password" placeholder="Type your mail password" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Password" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="smtp.password"
placeholder="Type your mail password"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Encryption" :error="errors[0]">
<SelectInput v-model="smtp.encryption" :default="smtp.encryption" :options="mailEncryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
</AppInputText>
</ValidationProvider>
</div>
<ValidationProvider
tag="div"
mode="passive"
name="Mail Encryption"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Mail Encryption" :error="errors[0]">
<SelectInput
v-model="smtp.encryption"
:default="smtp.encryption"
:options="mailEncryptionList"
placeholder="Select your mail encryption"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === 'mailgun'">
<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
<AppInputText title="Domain" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="mailgun.domain" placeholder="Type your domain" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === 'mailgun'">
<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
<AppInputText title="Domain" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="mailgun.domain"
placeholder="Type your domain"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
<AppInputText title="Secret" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="mailgun.secret" placeholder="Type your secret" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
<AppInputText title="Secret" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="mailgun.secret"
placeholder="Type your secret"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
<AppInputText title="Endpoint" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="mailgun.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
</div>
<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
<AppInputText title="Endpoint" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="mailgun.endpoint"
placeholder="Type your endpoint"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === 'postmark'">
<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
<AppInputText title="Token" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="postmark.token" placeholder="Type your token" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === 'postmark'">
<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
<AppInputText title="Token" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="postmark.token"
placeholder="Type your token"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === 'ses'">
<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
<AppInputText title="Access Key" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="ses.access_key" placeholder="Type your access key" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === 'ses'">
<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
<AppInputText title="Access Key" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="ses.access_key"
placeholder="Type your access key"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Secret Access Key" rules="required" v-slot="{ errors }">
<AppInputText title="Secret Access Key" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="ses.secret_access_key" placeholder="Type your secret access key" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider
tag="div"
mode="passive"
name="Secret Access Key"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Secret Access Key" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="ses.secret_access_key"
placeholder="Type your secret access key"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
<AppInputText title="Default Region" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="ses.default_region" placeholder="Type your default region" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
<AppInputText title="Default Region" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="ses.default_region"
placeholder="Type your default region"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
<AppInputText title="Session Token" :error="errors[0]">
<input class="focus-border-theme input-dark" v-model="ses.session_token" placeholder="Type your session token" type="text" :class="{ 'border-red': errors[0] }" />
</AppInputText>
</ValidationProvider>
</div>
<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
<AppInputText title="Session Token" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="ses.session_token"
placeholder="Type your session token"
type="text"
:class="{ 'border-red': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
<ButtonBase
:loading="isSendingRequest"
:disabled="isSendingRequest"
type="submit"
button-style="theme"
class="w-full sm:w-auto"
>
{{ $t('admin_settings.email.save_button') }}
</ButtonBase>
</ValidationObserver>
@@ -116,7 +224,7 @@ import InfoBox from '../../../../components/Others/Forms/InfoBox'
import { required } from 'vee-validate/dist/rules'
import { events } from '../../../../bus'
import axios from 'axios'
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: 'AppAppearance',
@@ -134,78 +242,73 @@ export default {
PageTab,
InfoBox,
},
computed: {
...mapGetters([
'mailEncryptionList',
'mailDriverList',
]),
},
computed: {
...mapGetters(['mailEncryptionList', 'mailDriverList']),
},
data() {
return {
isLoading: false,
isSendingRequest: false,
mailDriver: undefined,
ses: {
access_key: undefined,
secret_access_key: undefined,
default_region: undefined,
session_token: undefined,
},
smtp: {
host: undefined,
port: undefined,
username: undefined,
password: undefined,
encryption: undefined,
},
mailgun: {
domain: undefined,
secret: undefined,
endpoint: undefined,
},
postmark: {
token: undefined,
},
mailDriver: undefined,
ses: {
access_key: undefined,
secret_access_key: undefined,
default_region: undefined,
session_token: undefined,
},
smtp: {
host: undefined,
port: undefined,
username: undefined,
password: undefined,
encryption: undefined,
},
mailgun: {
domain: undefined,
secret: undefined,
endpoint: undefined,
},
postmark: {
token: undefined,
},
}
},
methods: {
async EmailSetupSubmit() {
// Validate fields
const isValid = await this.$refs.EmailSetup.validate()
// Validate fields
const isValid = await this.$refs.EmailSetup.validate()
if (!isValid) return
if (!isValid) return
// Start loading
this.isSendingRequest = true
// Start loading
this.isSendingRequest = true
// Send request to get verify account
axios
.post('/api/admin/settings/email', {
environment: this.environment,
storage: this.storage,
mailDriver: this.mailDriver,
smtp: this.smtp,
mailgun: this.mailgun,
ses: this.ses,
postmark: this.postmark,
})
.then(() => {
events.$emit('toaster', {
type: 'success',
message: this.$t('toaster.email_set'),
})
})
.catch((error) => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
this.isSendingRequest = false
})
// Send request to get verify account
axios
.post('/api/admin/settings/email', {
environment: this.environment,
storage: this.storage,
mailDriver: this.mailDriver,
smtp: this.smtp,
mailgun: this.mailgun,
ses: this.ses,
postmark: this.postmark,
})
.then(() => {
events.$emit('toaster', {
type: 'success',
message: this.$t('toaster.email_set'),
})
})
.catch((error) => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
.finally(() => {
this.isSendingRequest = false
})
},
},
}

198
resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
View File

@@ -7,7 +7,11 @@
{{ $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">
<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"
@@ -27,7 +31,13 @@
<div class="block-wrapper">
<label>Title:</label>
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
<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"
@@ -41,7 +51,13 @@
<div class="block-wrapper">
<label>Description:</label>
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
<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"
@@ -81,7 +97,13 @@
<div class="block-wrapper">
<label>Title:</label>
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
<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"
@@ -95,9 +117,17 @@
<div class="block-wrapper">
<label>Description:</label>
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="App Description"
rules="required"
v-slot="{ errors }"
>
<textarea
@input="$updateText('/admin/settings', 'features_description', app.features_description)"
@input="
$updateText('/admin/settings', 'features_description', app.features_description)
"
rows="2"
v-model="app.features_description"
:class="{ 'border-red': errors[0] }"
@@ -120,7 +150,13 @@
<label class="input-label"> Show section: </label>
</div>
<SwitchInput
@input="$updateText('/admin/settings', 'section_feature_boxes', app.section_feature_boxes)"
@input="
$updateText(
'/admin/settings',
'section_feature_boxes',
app.section_feature_boxes
)
"
v-model="app.section_feature_boxes"
class="switch"
:state="app.section_feature_boxes"
@@ -135,7 +171,13 @@
</div>
<div class="block-wrapper">
<label>First Box Title:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Title 1" rules="required" v-slot="{ errors }">
<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"
@@ -148,9 +190,21 @@
</div>
<div class="block-wrapper">
<label>First Box Description:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Description 1" rules="required" v-slot="{ errors }">
<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)"
@input="
$updateText(
'/admin/settings',
'feature_description_1',
app.feature_description_1
)
"
rows="2"
v-model="app.feature_description_1"
:class="{ 'border-red': errors[0] }"
@@ -161,7 +215,13 @@
</div>
<div class="block-wrapper">
<label>Second Box Title:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Title 2" rules="required" v-slot="{ errors }">
<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"
@@ -174,9 +234,21 @@
</div>
<div class="block-wrapper">
<label>Second Box Description:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Description 2" rules="required" v-slot="{ errors }">
<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)"
@input="
$updateText(
'/admin/settings',
'feature_description_2',
app.feature_description_2
)
"
rows="2"
v-model="app.feature_description_2"
:class="{ 'border-red': errors[0] }"
@@ -187,7 +259,13 @@
</div>
<div class="block-wrapper">
<label>Third Box Title:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Title 3" rules="required" v-slot="{ errors }">
<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"
@@ -200,9 +278,21 @@
</div>
<div class="block-wrapper">
<label>Third Box Description:</label>
<ValidationProvider tag="div" mode="passive" name="Feature Description 3" rules="required" v-slot="{ errors }">
<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)"
@input="
$updateText(
'/admin/settings',
'feature_description_3',
app.feature_description_3
)
"
rows="2"
v-model="app.feature_description_3"
:class="{ 'border-red': errors[0] }"
@@ -225,7 +315,13 @@
<label class="input-label"> Show section: </label>
</div>
<SwitchInput
@input="$updateText('/admin/settings', 'section_pricing_content', app.section_pricing_content)"
@input="
$updateText(
'/admin/settings',
'section_pricing_content',
app.section_pricing_content
)
"
v-model="app.section_pricing_content"
class="switch"
:state="app.section_pricing_content"
@@ -236,11 +332,21 @@
<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" />
<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 }">
<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"
@@ -254,9 +360,17 @@
<div class="block-wrapper">
<label>Description:</label>
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="App Description"
rules="required"
v-slot="{ errors }"
>
<textarea
@input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)"
@input="
$updateText('/admin/settings', 'pricing_description', app.pricing_description)
"
rows="2"
v-model="app.pricing_description"
:class="{ 'border-red': errors[0] }"
@@ -279,7 +393,9 @@
<label class="input-label"> Show section: </label>
</div>
<SwitchInput
@input="$updateText('/admin/settings', 'section_get_started', app.section_get_started)"
@input="
$updateText('/admin/settings', 'section_get_started', app.section_get_started)
"
v-model="app.section_get_started"
class="switch"
:state="app.section_get_started"
@@ -290,11 +406,21 @@
<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" />
<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 }">
<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"
@@ -308,9 +434,21 @@
<div class="block-wrapper">
<label>Description:</label>
<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
<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)"
@input="
$updateText(
'/admin/settings',
'get_started_description',
app.get_started_description
)
"
rows="2"
v-model="app.get_started_description"
:class="{ 'border-red': errors[0] }"
@@ -328,7 +466,13 @@
<div class="block-wrapper">
<label>Footer content:</label>
<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
<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"

37
resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
View File

@@ -8,7 +8,10 @@
<!--Available only when is not metered billing-->
<div v-if="config.subscriptionType !== 'metered'">
<AppInputSwitch :title="$t('admin_settings.others.storage_limit')" :description="$t('admin_settings.others.storage_limit_help')">
<AppInputSwitch
:title="$t('admin_settings.others.storage_limit')"
:description="$t('admin_settings.others.storage_limit_help')"
>
<SwitchInput
@input="$updateText('/admin/settings', 'storage_limitation', app.storageLimitation)"
v-model="app.storageLimitation"
@@ -30,7 +33,10 @@
</AppInputText>
</div>
<AppInputText :title="$t('admin_settings.others.upload_limit')" :description="$t('admin_settings.others.upload_limit_help')">
<AppInputText
:title="$t('admin_settings.others.upload_limit')"
:description="$t('admin_settings.others.upload_limit_help')"
>
<input
@input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)"
v-model="app.uploadLimit"
@@ -42,7 +48,11 @@
/>
</AppInputText>
<AppInputText :title="$t('admin_settings.others.mimetypes_blacklist')" :description="$t('admin_settings.others.mimetypes_blacklist_help')" :is-last="true">
<AppInputText
:title="$t('admin_settings.others.mimetypes_blacklist')"
:description="$t('admin_settings.others.mimetypes_blacklist_help')"
:is-last="true"
>
<textarea
rows="2"
@input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)"
@@ -60,8 +70,17 @@
{{ $t('Application') }}
</FormLabel>
<AppInputButton :title="$t('Cache')" :description="$t('Did you change anything in your .env file? Then clear your cache.')">
<ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" class="w-full sm:w-auto" button-style="theme">
<AppInputButton
:title="$t('Cache')"
:description="$t('Did you change anything in your .env file? Then clear your cache.')"
>
<ButtonBase
@click.native="flushCache"
:loading="isFlushingCache"
:disabled="isFlushingCache"
class="w-full sm:w-auto"
button-style="theme"
>
{{ $t('admin_settings.others.cache_clear') }}
</ButtonBase>
</AppInputButton>
@@ -153,7 +172,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>

301
resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
View File

@@ -1,179 +1,208 @@
<template>
<PageTab v-if="! isLoading">
<!--Cron check-->
<div class="card shadow-card">
<FormLabel icon="info">
Cron
</FormLabel>
<PageTab v-if="!isLoading">
<!--Cron check-->
<div class="card shadow-card">
<FormLabel icon="info"> Cron </FormLabel>
<div class="flex items-center justify-between">
<div class="text-left">
<b class="text-sm font-bold block">Cron Jobs</b>
<small v-if="!cron.running" class="text-xs text-gray-600">
We detect, your cron jobs probably doesn't work correctly, please check it.
</small>
<small v-if="cron.running" class="text-xs text-gray-600">
Latest Update: {{ cron.lastUpdate }}
</small>
</div>
<div class="flex items-center">
<check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<div class="flex items-center justify-between">
<div class="text-left">
<b class="block text-sm font-bold">Cron Jobs</b>
<small v-if="!cron.running" class="text-xs text-gray-600">
We detect, your cron jobs probably doesn't work correctly, please check it.
</small>
<small v-if="cron.running" class="text-xs text-gray-600">
Latest Update: {{ cron.lastUpdate }}
</small>
</div>
<div class="flex items-center">
<check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600" />
<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ cron.running ? 'Working correctly' : "Doesn't work" }}
</span>
</div>
</div>
</div>
<span
class="ml-3 text-sm font-bold"
:class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
>
{{ cron.running ? 'Working correctly' : "Doesn't work" }}
</span>
</div>
</div>
</div>
<!--Database Backups check-->
<div class="card shadow-card">
<FormLabel icon="database">
Latest Database Backups
</FormLabel>
<!--Database Backups check-->
<div class="card shadow-card">
<FormLabel icon="database"> Latest Database Backups </FormLabel>
<InfoBox v-if="! backups.length" class="!mb-0">
<p v-html="$t('There is not any database backup stored.')"></p>
</InfoBox>
<InfoBox v-if="!backups.length" class="!mb-0">
<p v-html="$t('There is not any database backup stored.')"></p>
</InfoBox>
<InfoBox v-if="backups.length" class="!mb-3">
<p v-html="$t('You can find your backups in <b>/storage/app/app-backups</b>.')"></p>
</InfoBox>
<InfoBox v-if="backups.length" class="!mb-3">
<p v-html="$t('You can find your backups in <b>/storage/app/app-backups</b>.')"></p>
</InfoBox>
<div v-if="backups.length" v-for="(filename, i) in backups" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<div class="text-left">
<b class="text-sm font-bold block">{{ filename }}</b>
</div>
<div class="flex items-center">
<check-icon size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<div
v-if="backups.length"
v-for="(filename, i) in backups"
:key="i"
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<div class="text-left">
<b class="block text-sm font-bold">{{ filename }}</b>
</div>
<div class="flex items-center">
<check-icon size="16" class="vue-feather text-green-600 dark:text-green-600" />
<span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600">
Stored Successfully
</span>
</div>
</div>
</div>
<span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600"> Stored Successfully </span>
</div>
</div>
</div>
<!--PHP version and ini check-->
<div class="card shadow-card">
<FormLabel icon="info">
PHP Settings
</FormLabel>
<!--PHP version and ini check-->
<div class="card shadow-card">
<FormLabel icon="info"> PHP Settings </FormLabel>
<div class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<div class="text-left">
<b class="text-sm font-bold block">PHP Version</b>
<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
You need PHP version at least {{ phpVersion.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<div
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<div class="text-left">
<b class="block text-sm font-bold">PHP Version</b>
<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
You need PHP version at least {{ phpVersion.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon
v-if="phpVersion.acceptable"
size="16"
class="vue-feather text-green-600 dark:text-green-600"
/>
<x-icon
v-if="!phpVersion.acceptable"
size="16"
class="vue-feather text-red-600 dark:text-red-600"
/>
<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ phpVersion.current }}
</span>
</div>
</div>
<span
class="ml-3 text-sm font-bold"
:class="
phpVersion.acceptable
? 'text-green-600 dark:text-green-600'
: 'text-red-600 dark:text-red-600'
"
>
{{ phpVersion.current }}
</span>
</div>
</div>
<div v-for="(values, setting, i) in ini" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<div class="text-left">
<b class="text-sm font-bold block">{{ setting }}</b>
<small v-if="!values.status" class="text-xs text-gray-600">
We recommend set this value at least {{ values.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<div
v-for="(values, setting, i) in ini"
:key="i"
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<div class="text-left">
<b class="block text-sm font-bold">{{ setting }}</b>
<small v-if="!values.status" class="text-xs text-gray-600">
We recommend set this value at least {{ values.minimal }}.
</small>
</div>
<div class="flex items-center">
<check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600" />
<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
</span>
</div>
</div>
</div>
<span
class="ml-3 text-sm font-bold"
:class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
>
{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
</span>
</div>
</div>
</div>
<!--PHP Extension info-->
<div class="card shadow-card">
<FormLabel icon="info">
PHP Extensions
</FormLabel>
<!--PHP Extension info-->
<div class="card shadow-card">
<FormLabel icon="info"> PHP Extensions </FormLabel>
<div v-if="modules" v-for="(value, module, i) in modules" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
<b class="text-sm font-bold">
{{ module }}
</b>
<div class="flex items-center">
<check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
<x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600"/>
<div
v-if="modules"
v-for="(value, module, i) in modules"
:key="i"
class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
>
<b class="text-sm font-bold">
{{ module }}
</b>
<div class="flex items-center">
<check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600" />
<x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600" />
<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
{{ value ? 'Module Installed' : 'Missing Module' }}
</span>
</div>
</div>
</div>
<span
class="ml-3 text-sm font-bold"
:class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
>
{{ value ? 'Module Installed' : 'Missing Module' }}
</span>
</div>
</div>
</div>
</PageTab>
</template>
<script>
import InfoBox from "../../../../components/Others/Forms/InfoBox"
import InfoBox from '../../../../components/Others/Forms/InfoBox'
import FormLabel from '../../../../components/Others/Forms/FormLabel'
import PageTab from '../../../../components/Others/Layout/PageTab'
import { CheckIcon, XIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex'
import axios from "axios";
import axios from 'axios'
export default {
name: 'Server',
components: {
FormLabel,
InfoBox,
InfoBox,
PageTab,
CheckIcon,
XIcon,
CheckIcon,
XIcon,
},
computed: {
...mapGetters(['config']),
isCheckedAPI() {
return typeof this.apiRunning !== 'undefined'
},
isCheckedAPI() {
return typeof this.apiRunning !== 'undefined'
},
},
data() {
return {
isLoading: true,
ini: undefined,
cron: undefined,
modules: undefined,
phpVersion: undefined,
apiRunning: undefined,
backups: undefined,
isLoading: true,
ini: undefined,
cron: undefined,
modules: undefined,
phpVersion: undefined,
apiRunning: undefined,
backups: undefined,
}
},
created() {
// Get status
axios.get('/api/admin/status')
.then(response => {
this.isLoading = false
this.ini = response.data.ini
this.cron = response.data.cron
this.modules = response.data.modules
this.phpVersion = response.data.php_version
this.backups = response.data.backups
})
// Get status
axios.get('/api/admin/status').then((response) => {
this.isLoading = false
this.ini = response.data.ini
this.cron = response.data.cron
this.modules = response.data.modules
this.phpVersion = response.data.php_version
this.backups = response.data.backups
})
// Ping API
axios
.get('/api/ping')
.then((response) => {
this.apiRunning = response.data === 'pong';
})
.catch(() => {
this.apiRunning = false
})
// Ping API
axios
.get('/api/ping')
.then((response) => {
this.apiRunning = response.data === 'pong'
})
.catch(() => {
this.apiRunning = false
})
},
}
</script>

57
resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
View File

@@ -6,7 +6,10 @@
{{ $t('User Login/Registration') }}
</FormLabel>
<AppInputSwitch :title="$t('admin_settings.others.allow_registration')" :description="$t('admin_settings.others.allow_registration_help')">
<AppInputSwitch
:title="$t('admin_settings.others.allow_registration')"
:description="$t('admin_settings.others.allow_registration_help')"
>
<SwitchInput
@input="$updateText('/admin/settings', 'registration', app.userRegistration)"
v-model="app.userRegistration"
@@ -15,7 +18,11 @@
/>
</AppInputSwitch>
<AppInputSwitch :title="$t('Require Email Verification')" :description="$t('admin_settings.others.allow_user_verification_help')" :is-last="true">
<AppInputSwitch
:title="$t('Require Email Verification')"
:description="$t('admin_settings.others.allow_user_verification_help')"
:is-last="true"
>
<SwitchInput
@input="$updateText('/admin/settings', 'user_verification', app.userVerification)"
v-model="app.userVerification"
@@ -29,7 +36,11 @@
<div class="card shadow-card">
<img :src="$getSocialLogo('facebook')" alt="Facebook" class="mb-8 h-5" />
<AppInputSwitch :title="$t('Allow Login via Facebook')" :description="$t('You users will be able to login via Facebook account.')" :is-last="!facebook.allowedService">
<AppInputSwitch
:title="$t('Allow Login via Facebook')"
:description="$t('You users will be able to login via Facebook account.')"
:is-last="!facebook.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_facebook_login', facebook.allowedService)"
v-model="facebook.allowedService"
@@ -50,7 +61,9 @@
<!--Set up facebook credentials-->
<ValidationObserver
v-if="(!config.isFacebookLoginConfigured || facebook.isVisibleCredentialsForm) && facebook.allowedService"
v-if="
(!config.isFacebookLoginConfigured || facebook.isVisibleCredentialsForm) && facebook.allowedService
"
@submit.prevent="storeCredentials('facebook_login')"
ref="credentialsForm"
v-slot="{ invalid }"
@@ -85,7 +98,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
@@ -95,7 +114,11 @@
<div class="card shadow-card">
<img :src="$getSocialLogo('google')" alt="Google" class="mb-8 h-7" />
<AppInputSwitch :title="$t('Allow Login via Google')" :description="$t('You users will be able to login via Google account.')" :is-last="!google.allowedService">
<AppInputSwitch
:title="$t('Allow Login via Google')"
:description="$t('You users will be able to login via Google account.')"
:is-last="!google.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_google_login', google.allowedService)"
v-model="google.allowedService"
@@ -151,7 +174,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
@@ -161,7 +190,11 @@
<div class="card shadow-card">
<img :src="$getSocialLogo('github')" alt="Github" class="mb-8 h-5" />
<AppInputSwitch :title="$t('Allow Login via GitHub')" :description="$t('You users will be able to login via GitHub account.')" :is-last="!github.allowedService">
<AppInputSwitch
:title="$t('Allow Login via GitHub')"
:description="$t('You users will be able to login via GitHub account.')"
:is-last="!github.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_github_login', github.allowedService)"
v-model="github.allowedService"
@@ -217,7 +250,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>

71
resources/js/views/Admin/Dashboard.vue
View File

@@ -5,18 +5,30 @@
<div v-if="config.isAdminVueFileManagerBar" class="mb-4 hidden justify-between md:mb-6 md:block md:flex">
<!--VueFileManager logo-->
<a href="https://vuefilemanager.com" target="_blank">
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode" />
<img
src="/assets/images/vuefilemanager-horizontal-logo.svg"
alt="VueFileManager"
class="light-mode"
/>
</a>
<!--App Info-->
<div class="mt-4 flex items-center md:mt-0">
<a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="mr-4 inline-block">
<a
href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d"
target="_blank"
class="mr-4 inline-block"
>
<span class="text-sm font-bold"> {{ $t('admin_page_dashboard.version') }}: </span>
<ColorLabel color="purple">
{{ data.app.version }}
</ColorLabel>
</a>
<a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="mr-4 inline-block">
<a
href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986"
target="_blank"
class="mr-4 inline-block"
>
<span class="text-sm font-bold"> {{ $t('admin_page_dashboard.license') }}: </span>
<ColorLabel color="purple">
{{ data.app.license }}
@@ -28,7 +40,11 @@
{{ config.subscriptionType }}
</ColorLabel>
</b>
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="bg-theme-100 lg:ml-4 ml-8 inline-block hidden items-center rounded-lg py-1.5 px-3 md:flex">
<a
href="https://bit.ly/VueFileManager-survey"
target="_blank"
class="bg-theme-100 ml-8 inline-block hidden items-center rounded-lg py-1.5 px-3 md:flex lg:ml-4"
>
<thumbs-up-icon size="15" class="vue-feather text-theme mr-2.5" />
<span class="text-theme text-sm font-bold">
{{ $t('Write a Feedback') }}
@@ -37,17 +53,33 @@
</div>
</div>
<!--Create metered plan alert-->
<div v-if="config.subscriptionType === 'metered' && config.isEmptyPlans" class="p-5 bg-rose-200 rounded-xl shadow-card mb-6 flex items-center">
<alert-octagon-icon size="18" class="vue-feather text-rose-700 mr-4 shrink-0"/>
<p class="text-sm text-rose-700">As you installed app with metered subscription type, you have to <router-link :to="{name: 'CreateMeteredPlan'}" class="font-bold underline text-sm">create your plan</router-link> as soon as possible to prevent new user registration without automatically assigned subscription plan.</p>
</div>
<!--Create metered plan alert-->
<div
v-if="config.subscriptionType === 'metered' && config.isEmptyPlans"
class="mb-6 flex items-center rounded-xl bg-rose-200 p-5 shadow-card"
>
<alert-octagon-icon size="18" class="vue-feather mr-4 shrink-0 text-rose-700" />
<p class="text-sm text-rose-700">
As you installed app with metered subscription type, you have to
<router-link :to="{ name: 'CreateMeteredPlan' }" class="text-sm font-bold underline"
>create your plan</router-link
>
as soon as possible to prevent new user registration without automatically assigned subscription
plan.
</p>
</div>
<!--Cron Alert-->
<div v-if="! data.app.isRunningCron && !config.isDev" class="p-5 bg-rose-200 rounded-xl shadow-card mb-6 flex items-center">
<alert-octagon-icon size="18" class="vue-feather text-rose-700 mr-4 shrink-0"/>
<p class="text-sm text-rose-700">We detect your cron jobs probably doesn't work correctly, please check it, you need it for running app correctly. If you set your cron job, please get back one minute later.</p>
</div>
<!--Cron Alert-->
<div
v-if="!data.app.isRunningCron && !config.isDev"
class="mb-6 flex items-center rounded-xl bg-rose-200 p-5 shadow-card"
>
<alert-octagon-icon size="18" class="vue-feather mr-4 shrink-0 text-rose-700" />
<p class="text-sm text-rose-700">
We detect your cron jobs probably doesn't work correctly, please check it, you need it for running
app correctly. If you set your cron job, please get back one minute later.
</p>
</div>
<!--Metric widgets-->
<div class="mb-2 md:mb-6 md:flex md:space-x-6">
@@ -145,7 +177,10 @@
</div>
<!--Latest transactions widgets-->
<div v-if="['fixed', 'metered'].includes(this.config.subscriptionType)" class="card mb-4 shadow-card md:mb-6">
<div
v-if="['fixed', 'metered'].includes(this.config.subscriptionType)"
class="card mb-4 shadow-card md:mb-6"
>
<FormLabel icon="dollar">
{{ $t('Latest Transactions') }}
</FormLabel>
@@ -170,16 +205,16 @@ import BarChart from '../../components/UI/BarChart'
import { mapGetters } from 'vuex'
import axios from 'axios'
import WidgetLatestTransactions from '../../components/Admin/WidgetLatestTransactions'
import InfoBox from "../../components/Others/Forms/InfoBox";
import InfoBox from '../../components/Others/Forms/InfoBox'
export default {
name: 'Dashboard',
components: {
InfoBox,
InfoBox,
WidgetLatestTransactions,
WidgetLatestRegistrations,
ChevronRightIcon,
AlertOctagonIcon,
AlertOctagonIcon,
WidgetWrapper,
ThumbsUpIcon,
ColorLabel,

26
resources/js/views/Admin/Invoices.vue
View File

@@ -1,22 +1,40 @@
<template>
<div>
<!--Datatable-->
<DatatableWrapper v-if="!config.isEmptyTransactions" class="card overflow-x-auto shadow-card" api="/api/admin/transactions" :paginator="true" :columns="columns">
<DatatableWrapper
v-if="!config.isEmptyTransactions"
class="card overflow-x-auto shadow-card"
api="/api/admin/transactions"
:paginator="true"
:columns="columns"
>
<template slot-scope="{ row }">
<!--Transaction rows-->
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" :user="true" @showDetail="showTransactionDetail" />
<MeteredTransactionRow
v-if="config.subscriptionType === 'metered'"
:row="row"
:user="true"
@showDetail="showTransactionDetail"
/>
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" :user="true" />
<!--Transaction detail-->
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
<MeteredTransactionDetailRow
v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
:row="row"
/>
</template>
</DatatableWrapper>
<!--Empty State-->
<div v-if="config.isEmptyTransactions" class="flex h-full items-center justify-center">
<div class="text-center">
<img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg" alt="transaction" />
<img
class="mb-6 inline-block w-28"
src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg"
alt="transaction"
/>
<h1 class="mb-1 text-2xl font-bold">
{{ $t('There is Nothing') }}
</h1>

66
resources/js/views/Admin/Languages/Language.vue
View File

@@ -5,7 +5,8 @@
<div
class="z-20 bg-white pt-3 sm:pt-5"
:class="{
'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-70 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground': fixedNav,
'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-70 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground':
fixedNav,
'card sticky top-0 z-10 block py-0 shadow-card md:hidden': !fixedNav,
}"
>
@@ -19,8 +20,12 @@
:key="language.data.id"
class="border-bottom-theme inline-block border-b-2 border-transparent px-4 py-5 text-sm font-bold"
:class="{
'text-theme router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale,
'text-gray-600': !selectedLanguage && selectedLanguage.data.attributes.locale !== language.data.attributes.locale,
'text-theme router-link-active':
selectedLanguage &&
selectedLanguage.data.attributes.locale === language.data.attributes.locale,
'text-gray-600':
!selectedLanguage &&
selectedLanguage.data.attributes.locale !== language.data.attributes.locale,
}"
>
{{ language.data.attributes.name }}
@@ -52,12 +57,19 @@
<label
class="text-base font-bold"
:class="{
'text-theme': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale,
'text-theme':
selectedLanguage &&
selectedLanguage.data.attributes.locale === language.data.attributes.locale,
}"
>
{{ language.data.attributes.name }}
</label>
<x-icon v-if="language.data.attributes.locale !== 'en'" @click.stop="deleteLanguage(language)" class="opacity-0 group-hover:opacity-100" size="12" />
<x-icon
v-if="language.data.attributes.locale !== 'en'"
@click.stop="deleteLanguage(language)"
class="opacity-0 group-hover:opacity-100"
size="12"
/>
</div>
<!-- Create Language button -->
@@ -78,10 +90,22 @@
{{ $t('language_settings') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Language name" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="Language name"
rules="required"
v-slot="{ errors }"
>
<AppInputText :title="$t('language_name')" :error="errors[0]">
<input
@input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)"
@input="
$updateText(
`/admin/languages/${selectedLanguage.data.id}`,
'name',
selectedLanguage.data.attributes.name
)
"
v-model="selectedLanguage.data.attributes.name"
:placeholder="$t('admin_settings.appearance.description_plac')"
type="text"
@@ -93,14 +117,19 @@
<AppInputSwitch
:title="$t('set_as_default_language')"
:description="$t('If this language is set as default, app will appear in this language for all users.')"
:description="
$t(
'If this language is set as default, app will appear in this language for all users.'
)
"
:is-last="true"
>
<SwitchInput
@input="setDefaultLanguage"
class="switch"
:class="{
'disable-switch': selectedLanguage.data.attributes.locale === this.defaultLanguageLocale,
'disable-switch':
selectedLanguage.data.attributes.locale === this.defaultLanguageLocale,
}"
:state="selectedLanguage.data.attributes.locale === this.defaultLanguageLocale"
/>
@@ -126,10 +155,21 @@
</div>
<ValidationProvider tag="div" name="Language string" rules="required" v-slot="{ errors }">
<AppInputText :title="referenceTranslations[key]" :error="errors[0]" v-for="(translation, key) in translationList" :key="key">
<AppInputText
:title="referenceTranslations[key]"
:error="errors[0]"
v-for="(translation, key) in translationList"
:key="key"
>
<textarea
v-model="selectedLanguage.data.attributes.translations[key]"
@input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
@input="
$updateText(
`/admin/languages/${selectedLanguage.data.id}/strings`,
key,
selectedLanguage.data.attributes.translations[key]
)
"
:rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
@@ -210,7 +250,9 @@ export default {
return this.searchedTranslationResults && this.query !== ''
},
translationList() {
return this.isSearching ? this.searchedTranslationResults : this.selectedLanguage.data.attributes.translations
return this.isSearching
? this.searchedTranslationResults
: this.selectedLanguage.data.attributes.translations
},
},
methods: {

16
resources/js/views/Admin/Pages.vue
View File

@@ -1,7 +1,13 @@
<template>
<div>
<div class="card shadow-card">
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="overflow-x-auto">
<DatatableWrapper
@init="isLoading = false"
api="/api/admin/pages"
:paginator="false"
:columns="columns"
class="overflow-x-auto"
>
<template slot-scope="{ row }">
<tr class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<td class="py-5 pr-3 md:pr-1">
@@ -24,7 +30,13 @@
<td class="px-3 md:px-1">
<span class="text-sm font-bold">
<SwitchInput
@input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)"
@input="
$updateText(
`/admin/pages/${row.data.id}`,
'visibility',
row.data.attributes.visibility
)
"
v-model="row.data.attributes.visibility"
:state="row.data.attributes.visibility"
class="switch"

5
resources/js/views/Admin/Pages/PageEdit.vue
View File

@@ -4,7 +4,10 @@
<FormLabel>
{{ page.data.attributes.title }}
</FormLabel>
<AppInputSwitch :title="$t('admin_pages.form.visibility')" :description="$t('admin_pages.form.visibility_help')">
<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')">

12
resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
View File

@@ -63,7 +63,13 @@
<AppInputText :title="$t('admin_settings.billings.postal_code')" class="w-full">
<input
@input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)"
@input="
$updateText(
'/admin/settings',
'billing_postal_code',
billingInformation.billing_postal_code
)
"
v-model="billingInformation.billing_postal_code"
:placeholder="$t('admin_settings.billings.postal_code_plac')"
type="text"
@@ -84,7 +90,9 @@
<AppInputText :title="$t('admin_settings.billings.phone_number')" :is-last="true">
<input
@input="$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)"
@input="
$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)
"
v-model="billingInformation.billing_phone_number"
:placeholder="$t('admin_settings.billings.phone_number_plac')"
type="text"

191
resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
View File

@@ -6,12 +6,25 @@
{{ $t('Subscription Payments') }}
</FormLabel>
<AppInputSwitch :title="$t('Allow Subscription Payments')" :description="$t('User can subscribe to fixed or metered plan')" :is-last="!allowedPayments">
<SwitchInput @input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)" v-model="allowedPayments" :state="allowedPayments" />
<AppInputSwitch
:title="$t('Allow Subscription Payments')"
:description="$t('User can subscribe to fixed or metered plan')"
:is-last="!allowedPayments"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)"
v-model="allowedPayments"
:state="allowedPayments"
/>
</AppInputSwitch>
<AppInputText v-if="allowedPayments" :title="$t('Subscription Type')" :is-last="true">
<SelectInput @change="subscriptionTypeChange" :default="config.subscriptionType" :options="subscriptionTypes" :placeholder="$t('Select your subscription type')" />
<SelectInput
@change="subscriptionTypeChange"
:default="config.subscriptionType"
:options="subscriptionTypes"
:placeholder="$t('Select your subscription type')"
/>
</AppInputText>
</div>
@@ -21,7 +34,10 @@
{{ $t('Metered Billing Settings') }}
</FormLabel>
<AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('Credit user automatically bonus to his balance after registration.')">
<AppInputSwitch
:title="$t('Allow Registration Bonus')"
:description="$t('Credit user automatically bonus to his balance after registration.')"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_registration_bonus', allowedRegistrationBonus)"
v-model="allowedRegistrationBonus"
@@ -43,7 +59,11 @@
/>
</AppInputText>
<AppInputButton :title="$t('Metered Plan')" :description="$t('Your price set up for billing multiple features by user usage.')" :is-last="true">
<AppInputButton
:title="$t('Metered Plan')"
:description="$t('Your price set up for billing multiple features by user usage.')"
:is-last="true"
>
<router-link
v-if="config.isCreatedMeteredPlan"
:to="{
@@ -68,8 +88,16 @@
<div v-if="allowedPayments" class="card shadow-card">
<img :src="$getPaymentLogo('stripe')" alt="Stripe" class="mb-8 h-8" />
<AppInputSwitch :title="$t('Allow Stripe Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!stripe.allowedService">
<SwitchInput @input="$updateText('/admin/settings', 'allowed_stripe', stripe.allowedService)" v-model="stripe.allowedService" :state="stripe.allowedService" />
<AppInputSwitch
:title="$t('Allow Stripe Service')"
:description="$t('Allow your users pay by their credit card')"
:is-last="!stripe.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_stripe', stripe.allowedService)"
v-model="stripe.allowedService"
:state="stripe.allowedService"
/>
</AppInputSwitch>
<!--Stripe credentials are set up-->
@@ -82,15 +110,27 @@
>
<textarea
rows="2"
@input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription, true)"
@input="
$updateText(
'/admin/settings',
'stripe_payment_description',
stripe.paymentDescription,
true
)
"
v-model="stripe.paymentDescription"
:placeholder="$t('Describe in short which methods user can pay with this payment method...')"
:placeholder="
$t('Describe in short which methods user can pay with this payment method...')
"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
<AppInputText
:title="$t('Your Webhook URL')"
:description="$t('Please copy your url and paste it to the service webhook setup.')"
>
<CopyInput size="small" :str="getWebhookEndpoint('stripe')" />
</AppInputText>
@@ -116,7 +156,13 @@
<FormLabel v-if="!stripe.isConfigured" icon="shield">
{{ $t('Configure Your Credentials') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="Publishable Key"
rules="required"
v-slot="{ errors }"
>
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
<input
v-model="stripe.credentials.key"
@@ -138,7 +184,13 @@
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="Webhook Secret"
rules="required"
v-slot="{ errors }"
>
<AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
<input
v-model="stripe.credentials.webhook"
@@ -150,7 +202,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
@@ -161,7 +219,11 @@
<div v-if="allowedPayments" class="card shadow-card">
<img :src="$getPaymentLogo('paystack')" alt="Paystack" class="mb-8 h-7" />
<AppInputSwitch :title="$t('Allow Paystack Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!paystack.allowedService">
<AppInputSwitch
:title="$t('Allow Paystack Service')"
:description="$t('Allow your users pay by their credit card')"
:is-last="!paystack.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_paystack', paystack.allowedService)"
v-model="paystack.allowedService"
@@ -173,21 +235,35 @@
<div v-if="paystack.allowedService">
<div v-if="paystack.isConfigured">
<AppInputText
@input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)"
@input="
$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)
"
:title="$t('Payment Description')"
:description="$t('The description showed below user payment method selection.')"
>
<textarea
rows="2"
@input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription, true)"
@input="
$updateText(
'/admin/settings',
'paystack_payment_description',
paystack.paymentDescription,
true
)
"
v-model="paystack.paymentDescription"
:placeholder="$t('Describe in short which methods user can pay with this payment method...')"
:placeholder="
$t('Describe in short which methods user can pay with this payment method...')
"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
<AppInputText
:title="$t('Your Webhook URL')"
:description="$t('Please copy your url and paste it to the service webhook setup.')"
>
<CopyInput size="small" :str="getWebhookEndpoint('paystack')" />
</AppInputText>
@@ -213,7 +289,13 @@
<FormLabel v-if="!paystack.isConfigured" icon="shield">
{{ $t('Configure Your Credentials') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="Publishable Key"
rules="required"
v-slot="{ errors }"
>
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
<input
v-model="paystack.credentials.key"
@@ -236,7 +318,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
@@ -247,15 +335,27 @@
<div v-if="allowedPayments" class="card shadow-card">
<img :src="$getPaymentLogo('paypal')" alt="PayPal" class="mb-8 h-8" />
<AppInputSwitch :title="$t('Allow PayPal Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!paypal.allowedService">
<SwitchInput @input="$updateText('/admin/settings', 'allowed_paypal', paypal.allowedService)" v-model="paypal.allowedService" :state="paypal.allowedService" />
<AppInputSwitch
:title="$t('Allow PayPal Service')"
:description="$t('Allow your users pay by their credit card')"
:is-last="!paypal.allowedService"
>
<SwitchInput
@input="$updateText('/admin/settings', 'allowed_paypal', paypal.allowedService)"
v-model="paypal.allowedService"
:state="paypal.allowedService"
/>
</AppInputSwitch>
<!--Stripe credentials are set up-->
<div v-if="paypal.allowedService">
<div v-if="paypal.isConfigured">
<AppInputSwitch :title="$t('Live Mode')" :description="$t('Toggle amid live and sandbox mode')">
<SwitchInput @input="$updateText('/admin/settings', 'paypal_live', config.isPayPalLive)" v-model="config.isPayPalLive" :state="config.isPayPalLive" />
<SwitchInput
@input="$updateText('/admin/settings', 'paypal_live', config.isPayPalLive)"
v-model="config.isPayPalLive"
:state="config.isPayPalLive"
/>
</AppInputSwitch>
<AppInputText
@@ -265,15 +365,27 @@
>
<textarea
rows="2"
@input="$updateText('/admin/settings', 'paypal_payment_description', paypal.paymentDescription, true)"
@input="
$updateText(
'/admin/settings',
'paypal_payment_description',
paypal.paymentDescription,
true
)
"
v-model="paypal.paymentDescription"
:placeholder="$t('Describe in short which methods user can pay with this payment method...')"
:placeholder="
$t('Describe in short which methods user can pay with this payment method...')
"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
<AppInputText
:title="$t('Your Webhook URL')"
:description="$t('Please copy your url and paste it to the service webhook setup.')"
>
<CopyInput size="small" :str="getWebhookEndpoint('paypal')" />
</AppInputText>
@@ -299,7 +411,13 @@
<FormLabel v-if="!paypal.isConfigured" icon="shield">
{{ $t('Configure Your Credentials') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<ValidationProvider
tag="div"
mode="passive"
name="Publishable Key"
rules="required"
v-slot="{ errors }"
>
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
<input
v-model="paypal.credentials.key"
@@ -333,7 +451,13 @@
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full"
>
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
@@ -390,7 +514,9 @@ export default {
computed: {
...mapGetters(['subscriptionTypes', 'config']),
submitButtonText() {
return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
return this.isLoading
? this.$t('admin_settings.payments.button_testing')
: this.$t('admin_settings.payments.button_submit')
},
},
data() {
@@ -528,9 +654,10 @@ export default {
},
},
created() {
events.$on('action:confirmed', (data) => {
if (data.operation === 'change-subscription-type') this.$updateText('/admin/settings', 'subscription_type', data.type)
})
events.$on('action:confirmed', (data) => {
if (data.operation === 'change-subscription-type')
this.$updateText('/admin/settings', 'subscription_type', data.type)
})
// Set payment description
this.stripe.paymentDescription = this.config.stripe_payment_description

33
resources/js/views/Admin/Plans.vue
View File

@@ -12,10 +12,20 @@
</div>
<!--Datatable-->
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns" class="overflow-x-auto">
<DatatableWrapper
@data="plans = $event"
@init="isLoading = false"
api="/api/subscriptions/admin/plans"
:paginator="true"
:columns="columns"
class="overflow-x-auto"
>
<template slot-scope="{ row }">
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'metered'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-5 pr-3 md:pr-1">
<router-link
class="text-sm font-bold"
@@ -73,10 +83,19 @@
</tr>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'fixed'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-5 pr-3 md:pr-1">
<SwitchInput
@input="$updateInput(`/subscriptions/admin/plans/${row.data.id}`, 'visible', row.data.attributes.visible)"
@input="
$updateInput(
`/subscriptions/admin/plans/${row.data.id}`,
'visible',
row.data.attributes.visible
)
"
v-model="row.data.attributes.visible"
:state="row.data.attributes.visible"
class="switch"
@@ -144,7 +163,11 @@
<!--Empty State-->
<div v-if="config.isEmptyPlans" class="flex h-full items-center justify-center">
<div class="text-center">
<img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9fe.svg" alt="transaction" />
<img
class="mb-6 inline-block w-28"
src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9fe.svg"
alt="transaction"
/>
<h1 class="mb-1 text-2xl font-bold">
{{ $t('There is Nothing') }}

51
resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
View File

@@ -39,7 +39,14 @@
<div class="justify-items md:flex md:space-x-4">
<!--Price-->
<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
<ValidationProvider
tag="div"
mode="passive"
name="Price"
rules="required"
v-slot="{ errors }"
class="w-full"
>
<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
<input
v-model="plan.amount"
@@ -55,9 +62,21 @@
</ValidationProvider>
<!--Currency-->
<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }" class="w-full">
<ValidationProvider
tag="div"
mode="passive"
name="Currency"
rules="required"
v-slot="{ errors }"
class="w-full"
>
<AppInputText :title="$t('Currency')" class="w-full">
<SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
<SelectInput
v-model="plan.currency"
:options="currencyList"
:placeholder="$t('Select plan currency')"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
@@ -65,7 +84,12 @@
<!--Interval-->
<ValidationProvider tag="div" mode="passive" name="Interval" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('Interval')" :is-last="true">
<SelectInput v-model="plan.interval" :options="intervalList" :placeholder="$t('Select billing interval')" :isError="errors[0]" />
<SelectInput
v-model="plan.interval"
:options="intervalList"
:placeholder="$t('Select billing interval')"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
@@ -76,8 +100,17 @@
</FormLabel>
<!--Storage Capacity-->
<ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
<ValidationProvider
tag="div"
mode="passive"
name="Max Storage Capacity"
rules="required"
v-slot="{ errors }"
>
<AppInputText
:title="$t('admin_page_plans.form.storage')"
:description="$t('admin_page_plans.form.storage_helper')"
>
<input
v-model="plan.features.max_storage_amount"
:placeholder="$t('admin_page_plans.form.storage_plac')"
@@ -92,7 +125,11 @@
<!--Team Members-->
<ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
<AppInputText
:title="$t('Team Members')"
:description="$t('To set unlimited team members, type -1 into form')"
:is-last="true"
>
<input
v-model="plan.features.max_team_members"
:placeholder="$t('Add max team members in number')"

94
resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
View File

@@ -33,7 +33,12 @@
<!--Currency-->
<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('Currency')" class="w-full" :is-last="true">
<SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
<SelectInput
v-model="plan.currency"
:options="currencyList"
:placeholder="$t('Select plan currency')"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
@@ -45,11 +50,26 @@
<!--Bandwidth-->
<div>
<AppInputSwitch :title="$t('Bandwidth Price per 1GB')" :description="$t('Charge your user by the amount of data he upload or download.')">
<SwitchInput v-model="plan.features.bandwidth.active" class="switch" :state="plan.features.bandwidth.active" />
<AppInputSwitch
:title="$t('Bandwidth Price per 1GB')"
:description="$t('Charge your user by the amount of data he upload or download.')"
>
<SwitchInput
v-model="plan.features.bandwidth.active"
class="switch"
:state="plan.features.bandwidth.active"
/>
</AppInputSwitch>
<ValidationProvider v-if="plan.features.bandwidth.active" class="-mt-3" tag="div" mode="passive" name="Bandwidth Price" rules="required" v-slot="{ errors }">
<ValidationProvider
v-if="plan.features.bandwidth.active"
class="-mt-3"
tag="div"
mode="passive"
name="Bandwidth Price"
rules="required"
v-slot="{ errors }"
>
<AppInputText class="w-full">
<input
v-model="plan.features.bandwidth.per_unit"
@@ -67,12 +87,27 @@
<!--Storage-->
<div>
<AppInputSwitch :title="$t('Storage Price per 1GB')" :description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')">
<SwitchInput v-model="plan.features.storage.active" class="switch" :state="plan.features.storage.active" />
<AppInputSwitch
:title="$t('Storage Price per 1GB')"
:description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')"
>
<SwitchInput
v-model="plan.features.storage.active"
class="switch"
:state="plan.features.storage.active"
/>
</AppInputSwitch>
</div>
<ValidationProvider v-if="plan.features.storage.active" class="-mt-3" tag="div" mode="passive" name="Storage Price" rules="required" v-slot="{ errors }">
<ValidationProvider
v-if="plan.features.storage.active"
class="-mt-3"
tag="div"
mode="passive"
name="Storage Price"
rules="required"
v-slot="{ errors }"
>
<AppInputText class="w-full">
<input
v-model="plan.features.storage.per_unit"
@@ -89,12 +124,27 @@
<!--Member-->
<div>
<AppInputSwitch :title="$t('Price per 1 Member')" :description="$t('Charge your user by the total members he use in his Team Folders.')">
<SwitchInput v-model="plan.features.member.active" class="switch" :state="plan.features.member.active" />
<AppInputSwitch
:title="$t('Price per 1 Member')"
:description="$t('Charge your user by the total members he use in his Team Folders.')"
>
<SwitchInput
v-model="plan.features.member.active"
class="switch"
:state="plan.features.member.active"
/>
</AppInputSwitch>
</div>
<ValidationProvider v-if="plan.features.member.active" class="-mt-3" tag="div" mode="passive" name="Member Price" rules="required" v-slot="{ errors }">
<ValidationProvider
v-if="plan.features.member.active"
class="-mt-3"
tag="div"
mode="passive"
name="Member Price"
rules="required"
v-slot="{ errors }"
>
<AppInputText class="w-full">
<input
v-model="plan.features.member.per_unit"
@@ -111,11 +161,27 @@
<!--Flat Fee-->
<div>
<AppInputSwitch :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" :is-last="!plan.features.flatFee.active">
<SwitchInput v-model="plan.features.flatFee.active" class="switch" :state="plan.features.flatFee.active" />
<AppInputSwitch
:title="$t('Flat Fee per Cycle')"
:description="$t('Charge monthly flat fee.')"
:is-last="!plan.features.flatFee.active"
>
<SwitchInput
v-model="plan.features.flatFee.active"
class="switch"
:state="plan.features.flatFee.active"
/>
</AppInputSwitch>
<ValidationProvider v-if="plan.features.flatFee.active" class="-mt-3" tag="div" mode="passive" name="FlatFee Price" rules="required" v-slot="{ errors }">
<ValidationProvider
v-if="plan.features.flatFee.active"
class="-mt-3"
tag="div"
mode="passive"
name="FlatFee Price"
rules="required"
v-slot="{ errors }"
>
<AppInputText class="w-full" :is-last="true">
<input
v-model="plan.features.flatFee.per_unit"
@@ -273,7 +339,7 @@ export default {
}
})
.catch((error) => {
console.log(error);
console.log(error)
events.$emit('toaster', {
type: 'danger',
message: this.$t('popup_error.title'),

16
resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
View File

@@ -4,7 +4,13 @@
{{ $t('admin_page_plans.form.title_delete') }}
</FormLabel>
<ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
<ValidationProvider
tag="div"
v-slot="{ errors }"
mode="passive"
name="Plan name"
:rules="'required|is:' + plan.attributes.name"
>
<AppInputText
:title="
$t('admin_page_user.label_delete_user', {
@@ -23,7 +29,13 @@
:class="{ 'border-red': errors[0] }"
class="focus-border-theme input-dark"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="w-full sm:w-auto">
<ButtonBase
:loading="isSendingRequest"
:disabled="isSendingRequest"
type="submit"
button-style="danger"
class="w-full sm:w-auto"
>
{{ $t('admin_page_plans.delete_plan_button') }}
</ButtonBase>
</div>

52
resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
View File

@@ -6,9 +6,18 @@
</FormLabel>
<!--Visible-->
<AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
<AppInputSwitch
:title="$t('admin_page_plans.form.status')"
:description="$t('admin_page_plans.form.status_help')"
>
<SwitchInput
@input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)"
@input="
$updateInput(
'/subscriptions/admin/plans/' + $route.params.id,
'visible',
plan.attributes.visible
)
"
v-model="plan.attributes.visible"
class="switch"
:state="plan.attributes.visible"
@@ -18,7 +27,9 @@
<!--Name-->
<AppInputText :title="$t('admin_page_plans.form.name')">
<input
@input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)"
@input="
$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)
"
v-model="plan.attributes.name"
:placeholder="$t('admin_page_plans.form.name_plac')"
type="text"
@@ -29,7 +40,13 @@
<!--Description-->
<AppInputText :title="$t('admin_page_plans.form.description')">
<textarea
@input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'description', plan.attributes.description)"
@input="
$updateInput(
'/subscriptions/admin/plans/' + $route.params.id,
'description',
plan.attributes.description
)
"
v-model="plan.attributes.description"
:placeholder="$t('admin_page_plans.form.description_plac')"
class="focus-border-theme input-dark"
@@ -38,7 +55,11 @@
<InfoBox style="margin-bottom: 0">
<p>
{{ $t('Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.') }}
{{
$t(
'Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.'
)
}}
</p>
</InfoBox>
</div>
@@ -48,9 +69,18 @@
</FormLabel>
<!--Storage Capacity-->
<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
<AppInputText
:title="$t('admin_page_plans.form.storage')"
:description="$t('admin_page_plans.form.storage_helper')"
>
<input
@input="$updateInput(`/subscriptions/admin/plans/${$route.params.id}/features`, 'max_storage_amount', plan.attributes.features.max_storage_amount)"
@input="
$updateInput(
`/subscriptions/admin/plans/${$route.params.id}/features`,
'max_storage_amount',
plan.attributes.features.max_storage_amount
)
"
v-model="plan.attributes.features.max_storage_amount"
:placeholder="$t('admin_page_plans.form.storage_plac')"
type="number"
@@ -63,7 +93,13 @@
<!--Team Members-->
<AppInputText :title="$t('Max Team Members')" is-last="true">
<input
@input="$updateInput(`/subscriptions/admin/plans/${$route.params.id}/features`, 'max_team_members', plan.attributes.features.max_team_members)"
@input="
$updateInput(
`/subscriptions/admin/plans/${$route.params.id}/features`,
'max_team_members',
plan.attributes.features.max_team_members
)
"
v-model="plan.attributes.features.max_team_members"
:placeholder="$t('Add max team members in number')"
type="number"

37
resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
View File

@@ -8,7 +8,9 @@
<!--Name-->
<AppInputText :title="$t('admin_page_plans.form.name')">
<input
@input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)"
@input="
$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)
"
v-model="plan.attributes.name"
:placeholder="$t('admin_page_plans.form.name_plac')"
type="text"
@@ -19,7 +21,13 @@
<!--Description-->
<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
<textarea
@input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'description', plan.attributes.description)"
@input="
$updateInput(
'/subscriptions/admin/plans/' + $route.params.id,
'description',
plan.attributes.description
)
"
v-model="plan.attributes.description"
:placeholder="$t('admin_page_plans.form.description_plac')"
class="focus-border-theme input-dark"
@@ -39,7 +47,9 @@
class="w-full"
>
<input
:value="formatCurrency(plan.attributes.currency, plan.attributes.features.bandwidth.tiers[0].per_unit)"
:value="
formatCurrency(plan.attributes.currency, plan.attributes.features.bandwidth.tiers[0].per_unit)
"
type="text"
class="focus-border-theme input-dark"
disabled
@@ -54,7 +64,9 @@
class="w-full"
>
<input
:value="formatCurrency(plan.attributes.currency, plan.attributes.features.storage.tiers[0].per_unit)"
:value="
formatCurrency(plan.attributes.currency, plan.attributes.features.storage.tiers[0].per_unit)
"
type="text"
class="focus-border-theme input-dark"
disabled
@@ -77,9 +89,16 @@
</AppInputText>
<!--Flat Fee-->
<AppInputText v-if="plan.attributes.features.flatFee" :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" class="w-full">
<AppInputText
v-if="plan.attributes.features.flatFee"
:title="$t('Flat Fee per Cycle')"
:description="$t('Charge monthly flat fee.')"
class="w-full"
>
<input
:value="formatCurrency(plan.attributes.currency, plan.attributes.features.flatFee.tiers[0].per_unit)"
:value="
formatCurrency(plan.attributes.currency, plan.attributes.features.flatFee.tiers[0].per_unit)
"
type="text"
class="focus-border-theme input-dark"
disabled
@@ -88,7 +107,11 @@
<InfoBox style="margin-bottom: 0">
<p>
{{ $t('Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.') }}
{{
$t(
'Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.'
)
}}
</p>
</InfoBox>
</div>

38
resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
View File

@@ -10,7 +10,10 @@
>
<!--Table data content-->
<template slot-scope="{ row }">
<tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'metered'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-3 pr-3 md:pr-1">
<router-link
class="flex items-center"
@@ -23,7 +26,10 @@
>
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -38,10 +44,17 @@
</span>
</td>
<td class="pl-3 text-right md:pl-1">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
<img
class="inline-block max-h-5"
:src="$getPaymentLogo(row.data.attributes.driver)"
:alt="row.data.attributes.driver"
/>
</td>
</tr>
<tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'fixed'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-3 pr-3 md:pr-1">
<router-link
class="flex items-center"
@@ -54,7 +67,10 @@
>
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -76,7 +92,11 @@
<td class="px-3 md:px-1">
<span class="text-sm font-bold">
<!--todo: update renew attribute-->
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
{{
row.data.attributes.renews_at
? row.data.attributes.renews_at
: row.data.attributes.created_at
}}
</span>
</td>
<td class="px-3 md:px-1">
@@ -85,7 +105,11 @@
</span>
</td>
<td class="pl-3 text-right md:pl-1">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
<img
class="inline-block max-h-5"
:src="$getPaymentLogo(row.data.attributes.driver)"
:alt="row.data.attributes.driver"
/>
</td>
</tr>
</template>

23
resources/js/views/Admin/Subscriptions.vue
View File

@@ -24,7 +24,10 @@
>
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -51,7 +54,11 @@
<td class="px-3 md:px-1">
<span class="text-sm font-bold">
<!--todo: update renew attribute-->
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
{{
row.data.attributes.renews_at
? row.data.attributes.renews_at
: row.data.attributes.created_at
}}
</span>
</td>
<td class="px-3 md:px-1">
@@ -60,7 +67,11 @@
</span>
</td>
<td class="pl-3 text-right md:pl-1">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
<img
class="inline-block max-h-5"
:src="$getPaymentLogo(row.data.attributes.driver)"
:alt="row.data.attributes.driver"
/>
</td>
</tr>
</template>
@@ -69,7 +80,11 @@
<!--Empty State-->
<div v-if="config.isEmptySubscriptions" class="flex h-full items-center justify-center">
<div class="text-center">
<img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg" alt="transaction" />
<img
class="mb-6 inline-block w-28"
src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg"
alt="transaction"
/>
<h1 class="mb-1 text-2xl font-bold">
{{ $t('There is Nothing') }}

56
resources/js/views/Admin/Users.vue
View File

@@ -14,10 +14,19 @@
</div>
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="overflow-x-auto">
<DatatableWrapper
@init="isLoading = false"
api="/api/admin/users"
:paginator="true"
:columns="columns"
class="overflow-x-auto"
>
<template slot-scope="{ row }">
<!--Not a subscription-->
<tr v-if="config.subscriptionType === 'none'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'none'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-3 pr-3 md:pr-1">
<router-link
:to="{
@@ -26,9 +35,16 @@
}"
>
<div class="flex items-center">
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -85,7 +101,10 @@
</tr>
<!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'fixed'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-3 pr-3 md:pr-1">
<router-link
:to="{
@@ -94,9 +113,16 @@
}"
>
<div class="flex items-center">
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -158,7 +184,10 @@
</tr>
<!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<tr
v-if="config.subscriptionType === 'metered'"
class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
>
<td class="py-3 pr-3 md:pr-1">
<router-link
:to="{
@@ -167,9 +196,16 @@
}"
>
<div class="flex items-center">
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
<MemberAvatar
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
<b
class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
style="max-width: 155px"
>
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs text-gray-600 dark:text-gray-500">

41
resources/js/views/Admin/Users/UserCreate.vue
View File

@@ -10,10 +10,15 @@
</AppInputText>
</ValidationProvider>
<!--User Role-->
<!--User Role-->
<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]" />
<SelectInput
v-model="user.role"
:options="$translateSelectOptions(roles)"
:placeholder="$t('admin_page_user.select_role')"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
@@ -45,7 +50,14 @@
<!--Password-->
<div class="flex space-x-4">
<ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
<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]" :is-last="true">
<input
v-model="user.password"
@@ -56,8 +68,19 @@
/>
</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]" :is-last="true">
<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]"
:is-last="true"
>
<input
v-model="user.password_confirmation"
:placeholder="$t('admin_page_user.create_user.label_conf_pass')"
@@ -70,7 +93,13 @@
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full sm:w-auto">
<ButtonBase
:disabled="isLoading"
:loading="isLoading"
button-style="theme"
type="submit"
class="w-full sm:w-auto"
>
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>

8
resources/js/views/Admin/Users/UserTabs/UserDelete.vue
View File

@@ -23,7 +23,13 @@
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="w-full sm:w-auto">
<ButtonBase
:loading="isSendingRequest"
:disabled="isSendingRequest"
type="submit"
button-style="danger"
class="w-full sm:w-auto"
>
{{ $t('admin_page_user.delete_user') }}
</ButtonBase>
</div>

22
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
View File

@@ -7,10 +7,26 @@
</FormLabel>
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
<AppInputText
:title="$t('admin_page_user.select_role')"
:description="$t('user_box_role.description')"
:error="errors[0]"
:is-last="true"
>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
<SelectInput
v-model="userRole"
:options="$translateSelectOptions(roles)"
:placeholder="$t('admin_page_user.select_role')"
:isError="errors[0]"
/>
<ButtonBase
:loading="isSendingRequest"
:disabled="isSendingRequest"
type="submit"
button-style="theme"
class="w-full sm:w-auto"
>
{{ $t('admin_page_user.save_role') }}
</ButtonBase>
</div>

22
resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
View File

@@ -10,9 +10,19 @@
{{ user.data.relationships.balance.data.attributes.formatted }}
</b>
<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
<ValidationObserver
ref="creditUserBalance"
@submit.prevent="increaseBalance"
v-slot="{ invalid }"
tag="form"
class="mt-6"
>
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
<AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
<AppInputText
:description="$t('User balance will be increased for the amount above.')"
:error="errors[0]"
:is-last="true"
>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<input
v-model="balanceAmount"
@@ -23,7 +33,13 @@
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
<ButtonBase type="submit" button-style="theme" class="w-full sm:w-auto" :loading="isUpdatingBalanceAmount" :disabled="isUpdatingBalanceAmount">
<ButtonBase
type="submit"
button-style="theme"
class="w-full sm:w-auto"
:loading="isUpdatingBalanceAmount"
:disabled="isUpdatingBalanceAmount"
>
{{ $t('Increase Balance') }}
</ButtonBase>
</div>

14
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
View File

@@ -5,8 +5,18 @@
{{ $t('user_box_password.title') }}
</FormLabel>
<AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="w-full sm:w-auto" button-style="theme">
<AppInputText
:title="$t('Reset User Password')"
:description="$t('user_box_password.description')"
:is-last="true"
>
<ButtonBase
@click.native="requestPasswordResetEmail"
:loading="isSendingRequest"
:disabled="isSendingRequest"
class="w-full sm:w-auto"
button-style="theme"
>
{{ $t('admin_page_user.send_password_link') }}
</ButtonBase>
</AppInputText>

34
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
View File

@@ -10,7 +10,12 @@
{{ storage.data.attributes.used }}
</b>
<b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
<b
v-if="
config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
"
class="mt-0.5 block text-sm text-gray-400"
>
{{ $t('Total of') }} {{ storage.data.attributes.capacity }}
{{ $t('Used') }}
</b>
@@ -53,13 +58,26 @@
</div>
<!--Set Storage Size-->
<div v-if="config.storageLimit && !user.data.attributes.subscription && config.subscriptionType !== 'metered'" class="card shadow-card">
<div
v-if="config.storageLimit && !user.data.attributes.subscription && config.subscriptionType !== 'metered'"
class="card shadow-card"
>
<FormLabel>
{{ $t('user_box_storage.title') }}
</FormLabel>
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
<ValidationObserver
ref="changeStorageCapacity"
@submit.prevent="changeStorageCapacity"
v-slot="{ invalid }"
tag="form"
>
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
<AppInputText
:title="$t('admin_page_user.label_change_capacity')"
:description="$t('user_box_storage.description')"
:error="errors[0]"
:is-last="true"
>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<input
v-model="capacity"
@@ -70,7 +88,13 @@
class="focus-border-theme input-dark"
:class="{ 'border-red': errors[0] }"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
<ButtonBase
:loading="isSendingRequest"
:disabled="isSendingRequest"
type="submit"
button-style="theme"
class="w-full sm:w-auto"
>
{{ $t('admin_page_user.change_capacity') }}
</ButtonBase>
</div>

27
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
View File

@@ -1,8 +1,16 @@
<template>
<PageTab :is-loading="isLoading">
<UserMeteredSubscription v-if="subscription && config.subscriptionType === 'metered'" :subscription="subscription" :user="user" />
<UserMeteredSubscription
v-if="subscription && config.subscriptionType === 'metered'"
:subscription="subscription"
:user="user"
/>
<UserFixedSubscription v-if="subscription && config.subscriptionType === 'fixed'" :subscription="subscription" :user="user" />
<UserFixedSubscription
v-if="subscription && config.subscriptionType === 'fixed'"
:subscription="subscription"
:user="user"
/>
<!--Free Plan-->
<div v-if="!subscription && config.subscriptionType === 'fixed'" class="card shadow-card">
@@ -34,11 +42,18 @@
>
<template slot-scope="{ row }">
<!--Transaction rows-->
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
<MeteredTransactionRow
v-if="config.subscriptionType === 'metered'"
:row="row"
@showDetail="showTransactionDetail"
/>
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
<!--Transaction detail-->
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
<MeteredTransactionDetailRow
v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
:row="row"
/>
</template>
<!--Empty page-->
@@ -89,7 +104,9 @@ export default {
fixed: ['type', 'user_id'],
}
return this.$store.getters.transactionColumns.filter((column) => !filter[config.subscriptionType].includes(column.field))
return this.$store.getters.transactionColumns.filter(
(column) => !filter[config.subscriptionType].includes(column.field)
)
},
},
data() {