Add field editor for team fields

This commit is contained in:
Kevin Chung
2020-08-20 14:49:35 -04:00
parent 03dfbf5458
commit bec48aaabc
5 changed files with 37 additions and 9 deletions

View File

@@ -33,7 +33,9 @@ export default {
components: {
Field
},
props: {},
props: {
type: String
},
data: function() {
return {
fields: []
@@ -41,7 +43,7 @@ export default {
},
methods: {
loadFields: function() {
CTFd.fetch("/api/v1/configs/fields?type=user", {
CTFd.fetch(`/api/v1/configs/fields?type=${this.type}`, {
method: "GET",
credentials: "same-origin",
headers: {
@@ -59,7 +61,7 @@ export default {
addField: function() {
this.fields.push({
id: Math.random(),
type: "user",
type: this.type,
field_type: "text",
name: "",
description: "",

View File

@@ -363,9 +363,22 @@ $(() => {
})
.change();
// Insert CommentBox element
// Insert FieldList element for users
const fieldList = Vue.extend(FieldList);
let vueContainer = document.createElement("div");
document.querySelector("#user-field-list").appendChild(vueContainer);
new fieldList({}).$mount(vueContainer);
let userVueContainer = document.createElement("div");
document.querySelector("#user-field-list").appendChild(userVueContainer);
new fieldList({
propsData: {
type: "user"
}
}).$mount(userVueContainer);
// Insert FieldList element for teams
let teamVueContainer = document.createElement("div");
document.querySelector("#team-field-list").appendChild(teamVueContainer);
new fieldList({
propsData: {
type: "team"
}
}).$mount(teamVueContainer);
});

View File

@@ -188,7 +188,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n
/***/ (function(module, exports, __webpack_require__) {
;
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _CTFd = _interopRequireDefault(__webpack_require__(/*! core/CTFd */ \"./CTFd/themes/core/assets/js/CTFd.js\"));\n\nvar _Field = _interopRequireDefault(__webpack_require__(/*! ./Field.vue */ \"./CTFd/themes/admin/assets/js/components/configs/fields/Field.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"FieldList\",\n components: {\n Field: _Field.default\n },\n props: {},\n data: function data() {\n return {\n fields: []\n };\n },\n methods: {\n loadFields: function loadFields() {\n var _this = this;\n\n _CTFd.default.fetch(\"/api/v1/configs/fields?type=user\", {\n method: \"GET\",\n credentials: \"same-origin\",\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"application/json\"\n }\n }).then(function (response) {\n return response.json();\n }).then(function (response) {\n _this.fields = response.data;\n });\n },\n addField: function addField() {\n this.fields.push({\n id: Math.random(),\n type: \"user\",\n field_type: \"text\",\n name: \"\",\n description: \"\",\n editable: false,\n required: false,\n public: false\n });\n },\n removeField: function removeField(index) {\n this.fields.splice(index, 1);\n console.log(this.fields);\n }\n },\n created: function created() {\n this.loadFields();\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/components/configs/fields/FieldList.vue?./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _CTFd = _interopRequireDefault(__webpack_require__(/*! core/CTFd */ \"./CTFd/themes/core/assets/js/CTFd.js\"));\n\nvar _Field = _interopRequireDefault(__webpack_require__(/*! ./Field.vue */ \"./CTFd/themes/admin/assets/js/components/configs/fields/Field.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n name: \"FieldList\",\n components: {\n Field: _Field.default\n },\n props: {\n type: String\n },\n data: function data() {\n return {\n fields: []\n };\n },\n methods: {\n loadFields: function loadFields() {\n var _this = this;\n\n _CTFd.default.fetch(\"/api/v1/configs/fields?type=\".concat(this.type), {\n method: \"GET\",\n credentials: \"same-origin\",\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"application/json\"\n }\n }).then(function (response) {\n return response.json();\n }).then(function (response) {\n _this.fields = response.data;\n });\n },\n addField: function addField() {\n this.fields.push({\n id: Math.random(),\n type: this.type,\n field_type: \"text\",\n name: \"\",\n description: \"\",\n editable: false,\n required: false,\n public: false\n });\n },\n removeField: function removeField(index) {\n this.fields.splice(index, 1);\n console.log(this.fields);\n }\n },\n created: function created() {\n this.loadFields();\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/components/configs/fields/FieldList.vue?./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options");
/***/ }),

File diff suppressed because one or more lines are too long

View File

@@ -12,6 +12,11 @@
Users
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team-fields" role="tab" data-toggle="tab">
Teams
</a>
</li>
</ul>
<div class="tab-content">
@@ -23,6 +28,14 @@
<div id="user-field-list" class="pt-3">
</div>
</div>
<div role="tabpanel" class="tab-pane" id="team-fields">
<div class="col-md-12 py-3">
<small>Custom team fields are shown during team creation. Team captains can optionally edit these fields in the team profile.</small>
</div>
<div id="team-field-list" class="pt-3">
</div>
</div>
</div>
</form>
</div>