Skip to content

Fix: make isAbout field visible as checklist and styled consistently #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
klaus321901 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix: make isAbout field visible as checklist and styled consistently #50

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 26 additions & 111 deletions src/components/TermProperties.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,10 @@

<style scoped>
.scroll {
/*margin:4px;*/
/*padding:4px;*/
height: 880px;
overflow-y: auto;
}


h1 {
text-align: center;
font-size: 36px;
Expand All @@ -42,17 +39,14 @@
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*border-color: #ddd;*/
}

.panel-body {
padding: 15px;
overflow-y: scroll;
}

.button {

}
.button { }

.field-checklist .wrapper {
width: 100%;
Expand All @@ -62,27 +56,27 @@
transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
.fade-enter, .fade-leave-to {
opacity: 0;
}

/*.field-checklist-wrapper {*/
/* width: 100%;*/
/*}*/
.group-one-class {
background-color: red;
width: 100%;
}

.checklist-class {
width: 100%;
box-sizing: border-box;
display: block;
}

</style>

<script>
import VueFormGenerator from 'vue-form-generator';
import 'vue-form-generator/dist/vfg.css';
import _ from 'lodash';

export default {
name: "TermProperties",
props: {
Expand Down Expand Up @@ -127,32 +121,33 @@
inputType: "text",
label: "Label",
model: "label",
hint: "Label for the term",
readonly: false,
featured: true,
disabled: false,
validator: VueFormGenerator.validators.string
},
{
type: "input",
inputType: "text",
label: "Source variable",
model: "sourceVariable",
readonly: true,
hint: "Variable name from dataset",
featured: true,
required: false,
disabled: true
},
{
type: "input",
inputType: "text",
label: "Description",
model: "description",
featured: true,
validator: VueFormGenerator.validators.string
},
{
type: "checklist",
label: "isAbout",
model: "isAbout",
required: false,
multiSelect: true,
featured: true,
styleClasses: 'checklist-class',
values() {
return [
{ name: "Option A", value: "A" },
{ name: "Option B", value: "B" },
{ name: "Option C", value: "C" }
];
},
hint: "An explanation of the nature, scope, or meaning of the new term.",
validator: VueFormGenerator.validators.string
help: "Check right column for definition of the related concept terms",
validator: VueFormGenerator.validators.array,
},
{
type: "select",
Expand All @@ -172,55 +167,28 @@
inputType: 'text',
label: "datumType",
model: "datumType",
hint: "What type of datum it is (e.g. range,count,scalar etc.): see IAO definitions",
readonly: false,
featured: true,
disabled: false,
validator: VueFormGenerator.validators.string
},
{
type: "input",
inputType: 'text',
label: "Unit",
model: "unitCode",
hint: "Unit of measurement following BIDS specification",
readonly: false,
featured: true,
disabled: false,
validator: VueFormGenerator.validators.string
},
{
type: "input",
inputType: "number",
label: "Min Value",
model: "minValue",
readonly: false,
featured: true,
disabled: false,
validator: VueFormGenerator.validators.number
},
{
type: "input",
inputType: 'number',
label: "Max Value",
model: "maxValue",
readonly: false,
featured: true,
disabled: false,
validator: VueFormGenerator.validators.number
},
{
type: "checklist",
label: "isAbout",
model: "isAbout",
required: false,
multiSelect: true,
featured: true,
styleClasses: 'checklist-class',
values: [],
hint: "An explanation of the nature, scope, or meaning of the new term.",
help: "Check right column for definition of the related concept terms",
validator: VueFormGenerator.validators.array,
}
]
},
Expand All @@ -235,9 +203,6 @@
featured: true,
showRemoveButton: true,
styleClasses: "col-sm-5",
// newElementButtonLabelClasses: "btn btn-solid",
// newElementButtonLabel: "Add new Option",
// validator: VueFormGenerator.validators.array,
},
{
type: "array",
Expand All @@ -247,7 +212,6 @@
showRemoveButton: true,
styleClasses: "col-sm-5",
}

]
}
]
Expand All @@ -261,63 +225,14 @@
final_list: []
};
},
watch: {
searchResults: {
deep: true,
immediate: true,
handler(newVal) {
const searchLabels = _.map(newVal, s => {
return s['label'];
});
searchLabels.unshift('No concept needed');
this.schema.groups[0].fields[8].values = searchLabels;
}
},
selectedConcepts: {
handler(newVal) {

const finallist = _.map(newVal, url => {
const s = _.find(this.searchResults, concept => {
return concept.url === url;
// const newObj = { '@id': concept['url'],
// 'label': concept.label};
// // delete concept.description;
// // delete Object.assign(concept, {['@id']: concept['url'] })['url'];
// return newObj;
});
// eslint-disable-next-line no-console
// console.log(281, s);
let newObj = {};
if (s) {
newObj = { '@id': s['url'],
'label': s.label};
}
return newObj;
});

// _.filter(this.searchResults, concept => {
// if (concept.url )
// return concept.url === newVal;
// });
// const select_concept_lst = []
this.model.isAbout = finallist;
// eslint-disable-next-line no-console
// console.log(272, newVal);
}
}
},
methods: {
onSave() {
// eslint-disable-next-line no-console
// console.log(284, this.model);
this.$emit('saveResponse', this.selectedTerm, this.model, this.final_list);
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
},
},
mounted() {
// eslint-disable-next-line no-console
// console.log(317, this.selectedConcepts, this.init);
if (this.init) {
this.model = this.init;
}
Expand Down