PhSubmit.vue

<template>
  <!--<v-container grid-list-lg fluid class="pa-0 ma-0" v-if="form && form.sections">-->
  <v-container>
    <v-tabs v-model="activetab">
      <v-tab ripple grow>
        Metadata editor
        <template v-if="targetpid">
          &nbsp;-&nbsp;
          <span class="text-lowercase">{{ targetpid }}</span>
        </template>
      </v-tab>
    <v-tab ripple @click="updatePrettyPrint()">Metadata preview</v-tab>
      <v-tab v-if="templating" ripple @click="loadTemplates()">Templates</v-tab>
    </v-tabs>

    <v-tabs-items v-model="activetab">
      <v-tab-item v-if="form">
     
        <ph-input-form
        :model="model"
          :form="form"
          :loading="loading"
          :templating="templating"
          :jsondata="getMetadata()"
          :targetpid="targetpid"
          v-on:submit="checkWarnings()"
        ></ph-input-form>
       
          <v-footer>
        Fields indicated with (*) are required field for submission.
        </v-footer>
      </v-tab-item>
      <!--second tab-->
      <v-tab-item class="ma-4">
        <vue-json-pretty :data="metadatapreview" ref="prettyprint"></vue-json-pretty>
      </v-tab-item>
      <!--third tab-->
      <v-tab-item class="ma-4">
        <!--<p-t-list ref="templates" v-on:load-template="loadTemplate($event)"></p-t-list>-->
      </v-tab-item>
    </v-tabs-items>
  </v-container>
</template>

<script>
import VueJsonPretty from "vue-json-pretty";
import arrays from "../../utils/arrays";
import jsonLd from "../../utils/json-ld";
import fields from "../../utils/fields";

import PhInputForm from "./pharma-input-fields/PhInputForm";

export default {
  name: "ph-submit",
  components: {
    PhInputForm,

    VueJsonPretty
  },
  props: {
    form: {
      type: Object,
      default: {
        sections: []
      }
    },
    model: {
      type: String,
      default: "https://pid.phaidra.org/vocabulary/8MY0-BQDQ"
    },
    targetpid: {
      type: String
    },
    owner: {
      // if defined, phaidra will transfer ownership to this user
      // IIF the current user is authorized to do so in phaidra-api
      type: String
    },
    addbutton: {
      type: Boolean,
      default: true
    },
    templating: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    submittype: function() {
      for (let s of this.form.sections) {
        if (s.fields && s.type !== "member") {
          for (let field of s.fields) {
            if (field.predicate === "dcterms:type") {
              return this.getObjectType(field.value);
            }
          }
        }
      }
    },
    filteredMetadatafields() {
      let list = fields.getEditableFields();
      if (this.searchfieldsinput) {
        return list.filter(
          f =>
            f.fieldname
              .toLowerCase()
              .includes(this.searchfieldsinput.toLowerCase()) ||
            f.definition
              .toLowerCase()
              .includes(this.searchfieldsinput.toLowerCase())
        );
      } else {
        return list;
      }
    },
    s: function() {
      return this.form.sections;
    }
  },
  data() {
    return {
      activetab: null,
      loadedMetadata: [],
      loading: false,
      fab: false,
      addfieldselection: [],
      templatedialog: "",
      templatename: "",
      previewMember: "",
      searchfieldsinput: "",
      metadatapreview: {},
      ticked: []
    };
  },
  methods: {
    alert: function(f) {
      console.log("warn", f);
    },

    alertFile: function(e) {
      console.log("file", e);
    },

    loadTemplates: function() {
      this.$refs.templates.loadTemplates();
    },
    loadTemplate: function(form) {
      this.$emit("load-form", form);
      this.activetab = 0;
    },
    saveAsTemplate: function() {
      var self = this;
      var httpFormData = new FormData();
      this.loading = true;
      httpFormData.append("name", this.templatename);
      httpFormData.append("form", JSON.stringify(this.form));
      var url =
        self.$store.state.settings.instance.api + "/jsonld/template/add";
      var promise = fetch(url, {
        method: "POST",
        mode: "cors",
        headers: {
          "X-XSRF-TOKEN": this.$store.state.user.token
        },
        body: httpFormData
      })
        .then(function(response) {
          return response.json();
        })
        .then(function(json) {
          if (json.alerts && json.alerts.length > 0) {
            self.$store.commit("setAlerts", json.alerts);
          }
          self.loading = false;
          self.templatedialog = false;
        })
        .catch(function(error) {
          //console.log(error)
        });
      return promise;
    },
    getMetadata: function() {
      let jsonlds;

      if (!this.targetpid && this.submittype === "container") {
        jsonlds = jsonLd.containerForm2json(this.form);
      } else {
        jsonlds = jsonLd.form2json(this.form);
      }
      let md = { metadata: { "json-ld": jsonlds } };
      for (let s of this.form.sections) {
        if (s.type === "accessrights") {
          md["metadata"]["rights"] = s.rights;
        }
      }
      let colorder = [];
      //let i = 0;
      for (let s of this.form.sections) {
        if (s.type === "member") {
          var n = s.fields[0].nfile;
          for (var i = 1; i < n + 1; i++) {
            //i++;
            // colorder.push({ member: "member_" + s.id, pos: i });
            colorder.push({ member: "member_" + i, pos: i });
          }
        }
      }
      if (colorder.length > 0) {
        md["metadata"]["membersorder"] = colorder;
      }
      if (this.previewMember) {
        md["metadata"]["relationships"] = [
          {
            s: "member_" + this.previewMember,
            p: "http://phaidra.org/XML/V1.0/relations#isThumbnailFor",
            o: "container"
          }
        ];
      }
      if (this.owner) {
        md["metadata"]["ownerid"] = this.owner;
      }

      return md;
    },

    getObjectType: function(contentmodel) {
      switch (contentmodel) {
        case "https://pid.phaidra.org/vocabulary/44TN-P1S0":
          return "picture";
        case "https://pid.phaidra.org/vocabulary/8YB5-1M0J":
          return "audio";
        case "https://pid.phaidra.org/vocabulary/B0Y6-GYT8":
          return "video";
        case "https://pid.phaidra.org/vocabulary/69ZZ-2KGX":
          return "document";
        case "https://pid.phaidra.org/vocabulary/8MY0-BQDQ":
          return "container";
        default:
          return "unknown";
      }
    },
    submit: async function() {
      var self = this;
      this.loading = true;
      var httpFormData = new FormData();
      httpFormData.append("metadata", JSON.stringify(self.getMetadata()));

      //console.log("httpFormData", self.getMetadata());
      if (this.submittype === "container") {
        for (var i = 0; i < this.form.sections.length; i++) {
          var s = this.form.sections[i];
          if (s.type === "member") {
            for (var j = 0; j < s.fields.length; j++) {
              /* if (s.fields[j].component === "input-file") {
                if (s.fields[j].file !== "") {
                  httpFormData.append("member_" + s.id, s.fields[j].file);
                }
              }*/
              if (s.fields[j].component === "files") {
                // console.log("s.fields[j]", s.fields[j].file);
                if (s.fields[j].file !== "") {
                  var n = s.fields[0].nfile;
                  for (var i = 1; i < n + 1; i++) {
                    httpFormData.append("member_" + i, s.fields[j].file[i - 1]);
                  }
                }
              }
            }
          }
        }
      } else {
        for (i = 0; i < this.form.sections.length; i++) {
          s = this.form.sections[i];
          if (s.fields) {
            for (j = 0; j < s.fields.length; j++) {
              if (s.fields[j].component === "files") {
                /* if (s.fields[j].component === "input-file") {*/
                if (s.fields[j].file !== "") {
                  httpFormData.append("file", s.fields[j].file);
                }
              }
            }
          }
        }
      }
      /*console.log(
        "posting",
        self.$store.state.settings.instance.api +
          "/" +
          this.submittype +
          "/create",
        httpFormData
      );*/
      fetch(
        self.$store.state.settings.instance.api +
          "/" +
          this.submittype +
          "/create",
        {
          method: "POST",
          mode: "cors",
          headers: {
            //'Authorization': 'Basic ' + base64.encode(self.$store.state.settings.instance.adminuser + ':' + self.$store.state.settings.instance.adminpass),
            "X-XSRF-TOKEN": this.$store.state.user.token
          },
          body: httpFormData
        }
      )
        .then(response => response.json())
        .then(function(json) {
          if (json.alerts && json.alerts.length > 0) {
            self.$store.commit("setAlerts", json.alerts);
          }
          self.loading = false;
          if (json.status === 200) {
            if (json.pid) {
              self.$emit("object-created", json.pid);
            }
          }
          self.$vuetify.goTo(0);
        })
        .catch(function(error) {
          self.$store.commit("setAlerts", [{ type: "danger", msg: error }]);
          self.loading = false;
          self.$vuetify.goTo(0);
        });
    },
    save: function() {
      var self = this;
      this.loading = true;
      var httpFormData = new FormData();
      httpFormData.append("metadata", JSON.stringify(self.getMetadata()));
      fetch(
        self.$store.state.settings.instance.api +
          "/object/" +
          self.targetpid +
          "/metadata",
        {
          method: "POST",
          mode: "cors",
          headers: {
            "X-XSRF-TOKEN": self.$store.state.user.token
          },
          body: httpFormData
        }
      )
        .then(response => response.json())
        .then(function(json) {
          if (json.alerts && json.alerts.length > 0) {
            if (json.status === 401) {
              json.alerts.push({ type: "danger", msg: "Please log in" });
            }
            self.$store.commit("setAlerts", json.alerts);
          }
          self.loading = false;
          if (json.status === 200) {
            self.$emit("object-saved", self.targetpid);
          }
          self.$vuetify.goTo(0);
        })
        .catch(function(error) {
          self.$store.commit("setAlerts", [{ type: "danger", msg: error }]);
          self.loading = false;
          self.$vuetify.goTo(0);
        });
    },
    updatePrettyPrint: function() {
      this.metadatapreview = this.getMetadata();
      this.$refs.prettyprint.$forceUpdate();
    },

    checkWarnings: function() {
      var self = this;
      let missingF = [];
      //this.submit();
      var w = false;
      for (var section in self.s) {
        let fields = self.s[section].fields;

        for (var f in fields) {
          if (fields[f].warning === true) {
            w = true;

            missingF.push(" " + fields[f].label);
          }
          if (fields[f].licenseWarning) {
            var nwf = false;
            // = 0; i < this.form.sections.length; i++
            for (var wf = 0; wf < fields[f].licenseWarning.length; wf++) {
              if (fields[f].licenseWarning[wf] == true) {
                var new_wf = wf + 1;
                missingF.push(" Missing licenses for file: " + new_wf);
                w = true;
              }
            }
          }
        }
      }
      if (w === true) {
        let str = missingF.toString();

        self.$store.commit("setAlerts", [
          { type: "danger", msg: "Missing required fields:" + str }
        ]);
        self.loading = false;
        self.$vuetify.goTo(0);
      } else {
        self.loading = false;
        self.$store.commit("setAlerts", []);
        this.submit();
      }
    }
  },
  mounted: function() {
    this.$store.dispatch("loadLanguages");
  }
};
</script>

<style scoped>
.v-btn {
  margin: 0;
}
.container {
  padding: 0 !important;
}
.pharma-form .v-label {
  color: rgba(0, 0, 0, 0.8) !important;
}
</style>