Support custom PHP server values (#218)

* Add the logic for custom php paths

* Add the i18n strings

* Fix some visual things
This commit is contained in:
Matt (IPv4) Cowley
2021-02-04 19:29:32 +00:00
committed by GitHub
parent 323cae4c50
commit ad63ca0c8b
9 changed files with 112 additions and 24 deletions

View File

@@ -1,5 +1,5 @@
<!--
Copyright 2020 DigitalOcean
Copyright 2021 DigitalOcean
This code is licensed under the MIT License.
You may obtain a copy of the License at
@@ -42,8 +42,8 @@ THE SOFTWARE.
</div>
<template v-else>
<div class="field is-horizontal">
<div class="field-label">
<div class="field is-horizontal is-aligned-top">
<div class="field-label has-margin-top">
<label class="label">{{ $t('templates.globalSections.php.phpServer') }}</label>
</div>
<div class="field-body">
@@ -55,12 +55,18 @@ THE SOFTWARE.
:reduce="s => s.value"
></VueSelect>
</div>
<div v-if="phpServerCustomEnabled"
:class="`control${phpServerCustomChanged ? ' is-changed' : ''}`"
>
<input v-model="phpServerCustom" class="input" type="text" :placeholder="$props.data.phpServerCustom.default" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<div class="field is-horizontal is-aligned-top">
<div class="field-label has-margin-top">
<label class="label">{{ $t('templates.globalSections.php.phpBackupServer') }}</label>
</div>
<div class="field-body">
@@ -73,6 +79,12 @@ THE SOFTWARE.
:reduce="s => s.value"
></VueSelect>
</div>
<div v-if="phpBackupServerCustomEnabled"
:class="`control${phpBackupServerCustomChanged ? ' is-changed' : ''}`"
>
<input v-model="phpBackupServerCustom" class="input" type="text" :placeholder="$props.data.phpBackupServerCustom.default" />
</div>
</div>
</div>
</div>
@@ -98,7 +110,9 @@ THE SOFTWARE.
'/var/run/php/php7.4-fpm.sock': 'templates.globalSections.php.php74Socket',
'/var/run/php/php8.0-fpm.sock': 'templates.globalSections.php.php80Socket',
'/var/run/php/php-fpm.sock': 'templates.globalSections.php.phpSocket',
'custom': 'templates.globalSections.php.custom',
};
const hiddenValues = ['', 'custom'];
const defaults = {
phpServer: {
@@ -106,11 +120,19 @@ THE SOFTWARE.
options: serverOptions,
enabled: true,
},
phpServerCustom: {
default: 'unix:/var/run/php/php-fpm.sock',
enabled: false,
},
phpBackupServer: {
default: '',
options: { '': 'templates.globalSections.php.disabled', ...serverOptions },
enabled: true,
},
phpBackupServerCustom: {
default: 'unix:/var/run/php/php-fpm.sock',
enabled: false,
},
};
export default {
@@ -128,31 +150,47 @@ THE SOFTWARE.
...computedFromDefaults(defaults, 'php'), // Getters & setters for the delegated data
phpServerOptions() {
return Object.entries(this.$props.data.phpServer.options)
.map(([key, value]) => ({ label: `${this.$t(value)}${key ? `: ${key}` : ''}`, value: key }));
.map(([key, value]) => this.formattedOption(key, value));
},
phpBackupServerOptions() {
return Object.entries(this.$props.data.phpBackupServer.options)
.map(([key, value]) => ({ label: `${this.$t(value)}${key ? `: ${key}` : ''}`, value: key }));
.map(([key, value]) => this.formattedOption(key, value));
},
},
watch: {
// Check server selection is valid
'$props.data.phpServer': {
handler(data) {
// This might cause recursion, but seems not to
if (data.enabled)
if (data.enabled) {
// This might cause recursion, but seems not to
if (!Object.keys(data.options).includes(data.computed))
data.computed = data.default;
// Show the custom box
this.$props.data.phpServerCustom.enabled = data.computed === 'custom';
return;
}
// Hide custom if disabled
this.$props.data.phpServerCustom.enabled = false;
},
deep: true,
},
// Check backup server selection is valid
'$props.data.phpBackupServer': {
handler(data) {
// This might cause recursion, but seems not to
if (data.enabled)
if (data.enabled) {
// This might cause recursion, but seems not to
if (!Object.keys(data.options).includes(data.computed))
data.computed = data.default;
// Show the custom box
this.$props.data.phpBackupServerCustom.enabled = data.computed === 'custom';
return;
}
// Hide custom if disabled
this.$props.data.phpBackupServerCustom.enabled = false;
},
deep: true,
},
@@ -175,11 +213,23 @@ THE SOFTWARE.
},
deep: true,
},
// Ensure 'Disabled' gets translated in VueSelect on language switch
// Ensure 'Custom'/'Disabled' get translated in VueSelect on language switch
'$i18n.locale'() {
const updated = this.phpBackupServerOptions
const updated = this.phpServerOptions
.find(x => x.value === this.$refs.phpServerOptions.$data._value.value);
if (updated) this.$refs.phpServerOptions.$data._value = updated;
const updatedBackup = this.phpBackupServerOptions
.find(x => x.value === this.$refs.phpBackupServerSelect.$data._value.value);
if (updated) this.$refs.phpBackupServerSelect.$data._value = updated;
if (updatedBackup) this.$refs.phpBackupServerSelect.$data._value = updatedBackup;
},
},
methods: {
formattedOption(key, value) {
return {
label: `${this.$t(value)}${hiddenValues.includes(key) ? '' : `: ${key}`}`,
value: key,
};
},
},
};