web-api-manager/config/js/components/domain-rules.vue.js

70 lines
2.5 KiB
JavaScript
Raw Normal View History

2017-10-14 20:24:18 +00:00
/*jslint es6: true, this: true*/
/*global window, Vue*/
2017-10-12 19:00:04 +00:00
(function () {
"use strict";
Vue.component("domain-rules", {
props: ["domainNames", "selectedDomain"],
template: `
<div class="domain-rules-container well">
2017-10-12 19:00:04 +00:00
<div class="radio" v-for="aDomain in domainNames">
<label>
<input type="radio"
:value="aDomain"
v-model="selectedDomain"
@change="onRadioChange">
{{ aDomain }}
<span class="glyphicon glyphicon-remove"
v-if="!isDefault(aDomain)"
@click="onRemoveClick(aDomain)"></span>
</label>
</div>
<div class="alert alert-danger" role="alert" v-if="errorMessage">
{{ errorMessage }}
</div>
<div class="form-group" v-bind:class="{ 'has-error': errorMessage }">
<label for="newDomainName">Add New Domain Rule</label>
<input class="form-control" v-model.trim="newDomain" placeholder="*.example.org">
</div>
<button type="submit" class="btn btn-default btn-block" @click="newDomainSubmitted">Add Rule</button>
2017-10-12 19:00:04 +00:00
</div>
`,
data: function () {
return {
newDomain: "",
errorMessage: ""
};
},
methods: {
newDomainSubmitted: function () {
const state = this.$root.$data;
if (this.newDomain.length === 0) {
this.errorMessage = "Domain rule field cannot be empty.";
return;
}
if (state.domainNames.indexOf(this.newDomain) !== -1) {
this.errorMessage = "There are already settings for this domain pattern.";
return;
}
state.addDomainRule(this.newDomain);
this.newDomain = "";
},
onRadioChange: function () {
this.$root.$data.setSelectedDomain(this.selectedDomain);
},
onRemoveClick: function (aDomain) {
this.$root.$data.deleteDomainRule(aDomain);
},
isDefault: function (domainName) {
return domainName === "(default)";
}
2017-10-14 20:24:18 +00:00
}
2017-10-12 19:00:04 +00:00
});
}());