github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add confirmation modal for all reset/remove actions in global tools section

pull/111/head
MattIPv4 2020-05-06 17:05:02 +01:00
parent 6a72ae5173
commit 6d918739f2
2 changed files with 94 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/nginxconfig/scss/style.scss
View File

@ -346,4 +346,10 @@ $highlight: #f2c94c;
}
}
}
.modal {
.modal-card {
text-align: left;
}
}
}

106
src/nginxconfig/templates/global_sections/tools.vue
View File

@ -28,7 +28,7 @@
<div class="checkbox">
<PrettyCheck v-model="symlinkVhost" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable symlink from sites-available/ to sites-enabled/
enable symlinks from sites-available/ to sites-enabled/
</PrettyCheck>
</div>
</div>
@ -47,6 +47,7 @@
class="input"
type="text"
readonly="readonly"
@click="select"
/>
</div>
</div>
@ -60,17 +61,17 @@
<div class="field-body">
<div class="field is-grouped">
<div class="control">
<a class="button is-danger is-mini" @click="resetGlobal">
<a class="button is-danger is-outline is-mini" @click="resetGlobal">
Reset global config
</a>
</div>
<div v-if="hasDomain" class="control">
<a class="button is-danger is-mini" @click="resetDomains">
<a class="button is-danger is-outline is-mini" @click="resetDomains">
Reset all domains
</a>
</div>
<div v-if="hasDomain" class="control">
<a class="button is-danger is-mini" @click="removeDomains">
<a class="button is-danger is-outline is-mini" @click="removeDomains">
Remove all domains
</a>
</div>
@ -89,12 +90,12 @@
<div class="field-body">
<div class="field is-grouped">
<div class="control">
<a class="button is-danger is-mini" @click="resetDomain(domainData[1])">
<a class="button is-danger is-outline is-mini" @click="resetDomain(domainData[1])">
Reset domain config
</a>
</div>
<div class="control">
<a class="button is-danger is-mini" @click="removeDomain(domainData[1])">
<a class="button is-danger is-outline is-mini" @click="removeDomain(domainData[1])">
Remove domain
</a>
</div>
@ -103,11 +104,18 @@
</div>
</div>
</div>
<Modal ref="confirmModal" :title="confirmTitle">
<p>{{ confirmBody }}</p>
<a class="button is-danger is-outline" @click="doConfirmAction">Yes, I'm sure</a>
<a class="button is-outline" @click="$refs.confirmModal.close()">No, cancel</a>
</Modal>
</div>
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import Modal from 'do-vue/src/templates/modal';
import qs from 'qs';
import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
@ -132,6 +140,7 @@
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
Modal,
},
props: {
data: Object, // Data delegated back to us from parent
@ -139,6 +148,10 @@
data() {
return {
i18n,
confirmTitle: '',
confirmBody: '',
confirmAction: () => {
},
};
},
computed: {
@ -162,19 +175,17 @@
},
},
methods: {
// TODO: These all need confirmation prompts!
resetGlobal() {
Object.values(this.$parent.$props.data).forEach(category => {
Object.values(category).forEach(property => {
property.value = property.default;
property.computed = property.default;
});
});
confirm(title, body, callback) {
this.$data.confirmTitle = title;
this.$data.confirmBody = body;
this.$data.confirmAction = callback;
this.$refs.confirmModal.open();
},
resetDomain(index) {
if (index >= this.$parent.$parent.$data.domains.length) return;
const domain = this.$parent.$parent.$data.domains[index];
doConfirmAction() {
this.$refs.confirmModal.close();
this.$data.confirmAction();
},
doResetDomain(domain) {
if (!domain) return;
Object.values(domain).forEach(category => {
@ -184,21 +195,70 @@
});
});
},
removeDomain(index) {
if (index >= this.$parent.$parent.$data.domains.length) return;
doRemoveDomain(index) {
this.$set(this.$parent.$parent.$data.domains, index, null);
},
resetGlobal() {
this.confirm(
'Reset global config',
'Are you sure you want to reset all configuration options in the global config section?',
() => {
Object.values(this.$parent.$props.data).forEach(category => {
Object.values(category).forEach(property => {
property.value = property.default;
property.computed = property.default;
});
});
},
);
},
resetDomain(index) {
if (index >= this.$parent.$parent.$data.domains.length) return;
const domain = this.$parent.$parent.$data.domains[index];
if (!domain) return;
this.confirm(
'Reset domain config',
`Are you sure you want to reset all configuration options for the ${domain.server.domain.computed} domain?`,
() => this.doResetDomain(domain),
);
},
removeDomain(index) {
if (index >= this.$parent.$parent.$data.domains.length) return;
const domain = this.$parent.$parent.$data.domains[index];
if (!domain) return;
this.confirm(
'Remove domain',
`Are you sure you want to remove the ${domain.server.domain.computed} domain configuration?`,
() => this.doRemoveDomain(index),
);
},
resetDomains() {
this.confirm(
'Reset all domain configs',
'Are you sure you want to reset the configuration of ALL domains?',
() => {
for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
this.resetDomain(i);
this.doResetDomain(this.$parent.$parent.$data.domains[i]);
}
},
);
},
removeDomains() {
this.confirm(
'Remove all domains',
'Are you sure you want to remove ALL domain configurations?',
() => {
for (let i = 0; i < this.$parent.$parent.$data.domains.length; i++) {
this.removeDomain(i);
this.doRemoveDomain(i);
}
},
);
},
select(event) {
event.target.setSelectionRange(0, event.target.value.length);
},
},
};
</script>