Merge pull request #335 from ReproNim/fix/elements

Fix/elements

Author: satra

README.md

@@ -202,3 +202,50 @@ npm test
 npm run lint
 ```
 
+## To test protocols and schemas locally
+
+Run this cors server script in the root directory of your reproschema. For
+example, if you clone the demo-protocol, run the script inside the cloned 
+directory. This script will serve the tree locally.
+
+```python
+#!/usr/bin/env python3
+
+# It's python3 -m http.server PORT for a CORS world
+
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+import sys
+
+class CORSRequestHandler(SimpleHTTPRequestHandler):
+
+    def end_headers(self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
+        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
+        return super(CORSRequestHandler, self).end_headers()
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
+        self.end_headers()
+
+host = sys.argv[1] if len(sys.argv) > 2 else '0.0.0.0'
+port = int(sys.argv[len(sys.argv)-1]) if len(sys.argv) > 1 else 8000
+
+print("Listening on {}:{}".format(host, port))
+httpd = HTTPServer((host, port), CORSRequestHandler)
+httpd.serve_forever()
+```
+
+Change config.js in this ui repo to point to your local schema. For example,
+if you cloned the demo protocol it would look like this:
+
+```
+  githubSrc: 'http://localhost:8000/DemoProtocol/DemoProtocol_schema',
+```
+
+
+

package-lock.json

@@ -343,9 +343,7 @@ export default {
       this.$emit('dontKnow');
     },
     sendData(val) {
-      if (val instanceof Date) {
-        this.$emit('valueChanged', val.getFullYear());
-      } else this.$emit('valueChanged', val);
+      this.$emit('valueChanged', val);
       this.$emit('next');
     },
   },

src/components/InputSelector/InputSelector.vue

@@ -35,7 +35,10 @@ export default {
   methods: {
     onSubmit(e) {
       e.preventDefault();
-      const name = { first_name: this.input1, middle_name: this.input2, last_name: this.input3 };
+      const name = { "schema:givenName": this.input1,
+        "schema:additionalName": this.input2,
+        "schema:familyName": this.input3,
+        "@type": "schema:Person" };
       this.$emit('valueChanged', name);
     },
   },

src/components/Inputs/MultiTextInput/MultiTextInput.vue

@@ -3,25 +3,37 @@
     <multiselect v-if=" inputType=== 'select' && this.constraints['http://schema.org/itemListElement']"
                  v-model="selected" :options="this.options" :searchable="false"
                  :show-labels="false"
-                 placeholder="Pick a value" @input="checkNotOtherAndSendData">
+                 placeholder="Pick a value">
+    </multiselect>
+    <multiselect v-else-if="multipleAllowed" v-model="selected" id="ajax"
+                 placeholder="Type to search"
+                 :options="this.options" :multiple="true"
+                 :searchable="true"
+                 :internal-search="true" :clear-on-select="false"
+                 :close-on-select="true" :options-limit="300"
+                 :limit="5" :limit-text="limitText" :max-height="600"
+                 :show-no-results="false" :hide-selected="true">
     </multiselect>
     <multiselect v-else v-model="selected" id="ajax"
                  placeholder="Type to search"
-                 :options="this.options" :multiple="multipleAllowed"
+                 :options="this.options"
                  :searchable="true"
                  :internal-search="true" :clear-on-select="false"
                  :close-on-select="true" :options-limit="300"
                  :limit="5" :limit-text="limitText" :max-height="600"
-                 :show-no-results="false" :hide-selected="true"
-                 @input="checkNotOtherAndSendData">
+                 :show-no-results="false" :hide-selected="false">
       <span slot="noResult">{{ $t('select-invalid-query')}}</span>
     </multiselect>
     <div v-if="checkOther" id="ifOther" style="display: block;">
-      <br><b-form-input v-model="otherInput" placeholder="Please describe" @change="sendData">
-    </b-form-input>
+      <br>
+          <b-form-input v-model="otherInput" placeholder="Please describe">
+        </b-form-input>
     </div>
+    <br>
+      <b-form v-if="this.selected" @submit="checkAndSendData">
+        <b-btn type="submit">{{ $t('submit-button')}}</b-btn>
+      </b-form>
   </div>
-
 </template>
 
 <script>
@@ -47,6 +59,7 @@ export default {
       options: [],
       selectedCountries: [],
       isLoading: false,
+      valueMap: {},
     };
   },
   watch: {
@@ -57,14 +70,34 @@ export default {
 
   },
   methods: {
-    checkNotOtherAndSendData(val) {
-      if (val !== 'Other') {
-        this.$emit('valueChanged', val);
+    checkAndSendData() {
+      if (this.selected) {
+        if (this.selected.includes('Other')) {
+          if (!_.isEmpty(this.valueMap)) {
+            this.valueMap["Other"] = this.otherInput;
+          }
+        }
+        let out = null;
+        if (this.multipleAllowed) {
+          if (!_.isEmpty(this.valueMap)) {
+            out = _.map(this.selected, v => this.valueMap[v]);
+          } else if (this.selected.includes('Other')) {
+            out = [...this.selected.slice(0, -1), this.otherInput];
+          } else {
+            out = [...this.selected]
+          }
+        } else {
+          if (!_.isEmpty(this.valueMap)) {
+            out = this.valueMap[this.selected];
+          } else if (this.selected === 'Other') {
+            out = this.otherInput;
+          } else {
+            out = this.selected;
+          }
+        }
+        this.$emit('valueChanged', out);
       }
     },
-    sendData(val) {
-      this.$emit('valueChanged', [this.selected, val]);
-    },
     limitText(count) {
       return `and ${count} other countries`;
     },
@@ -82,6 +115,9 @@ export default {
         const activeValueChoices = _.filter(v['http://schema.org/name'], ac => ac['@language'] === this.selected_language);
         return (activeValueChoices[0]['@value']);
       });
+      this.options.forEach((key, index) => {
+        this.valueMap[key] = this.constraints['http://schema.repronim.org/choices'][index]['http://schema.repronim.org/value'][0]['@value'];
+      });
     } else if (this.constraints['http://schema.repronim.org/choices'].length === 1) { // choice list defined in external file
       axios.get(this.constraints['http://schema.repronim.org/choices'][0]['@value'])
         .then((resp) => {
@@ -97,12 +133,17 @@ export default {
     multipleAllowed() {
       if (this.constraints['http://schema.repronim.org/multipleChoice']) {
         // console.log(94, this.constraints[this.reprotermsUrl+'multipleChoice']);
-        return true;
-      } return false;
+        return this.constraints['http://schema.repronim.org/multipleChoice'][0]['@value'];
+      }
+      return false;
     },
     checkOther() {
-      if (this.selected === 'Other') {
-        return true;
+      if (this.selected) {
+        if (this.multipleAllowed) {
+          return this.selected.includes('Other');
+        } else {
+          return this.selected === 'Other';
+        }
       }
       return false;
     },

src/components/Inputs/SelectInput/SelectInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="staticReadOnly">
     <div v-if="true">
-      <b-btn @click="onSubmit"> Done reading </b-btn>
+      <b-btn @click="onSubmit"> Continue activity </b-btn>
     </div>
     <div v-else>
       <b-alert show>

src/components/Inputs/StaticReadOnly/StaticReadOnly.vue

@@ -121,11 +121,7 @@ export default {
   },
   methods: {
     sendData() {
-      this.$emit('valueChanged', {
-        startTime: this.sleptAt.toISOString(),
-        endTime: this.wokeAt.toISOString(),
-        difference: this.timeSlept,
-      });
+      this.$emit('valueChanged', this.sleptAt.toISOString() + "/" + this.wokeAt.toISOString());
     },
   },
   watch: {

src/components/Inputs/TimeRange/TimeRange.vue

@@ -73,7 +73,11 @@ export default {
       this.$refs.form.className = 'was-validated';
       if (this.isValidFloat) {
         if (this.hasUnit) { // send value + unit
-          const name = { value: this.input1, unitCode: this.input2 };
+          const name = {
+            value: this.input1,
+            unitCode: this.input2,
+            "@type": "schema:QuantitativeValue"
+          };
           this.$emit('valueChanged', name);
         } else this.$emit('valueChanged', this.input1);
       }

src/components/Inputs/WebFloatInput/FloatInput.vue

@@ -73,7 +73,11 @@ export default {
       this.$refs.form.className = 'was-validated';
       if (this.isValidInt) {
         if (this.hasUnit) { // send value + unit
-          const name = { value: this.input1, unitCode: this.input2 };
+          const name = {
+            value: this.input1,
+            unitCode: this.input2,
+            "@type": "schema:QuantitativeValue"
+          };
           this.$emit('valueChanged', name);
         } this.$emit('valueChanged', this.input1); // else send only value
       }

src/components/Inputs/WebIntegerInput/IntegerInput.vue

@@ -20,20 +20,16 @@ export default {
   watch: {
     input() {
       // if there is a change, emit it.
-      this.$emit('valueChanged', this.input);
-
+      this.$emit('valueChanged', this.customFormatter(this.input));
       // make sure you validate the date based on this.constraints.
     },
   },
   methods: {
-    sendData(val) {
-      this.$emit('valueChanged', val.getFullYear());
-    },
     customFormatter(date) {
       if (this.inputType === 'year') {
         return moment(date).format('YYYY');
       } else if (this.inputType === 'date') {
-        return moment(date).format('MMM DD YYYY');
+        return moment(date).format('YYYY MMM DD');
       } return date;
     },
   },