0

I have a frontend form working that is successfully saving new blocks to a Matrix field (the field has only one block type). When sending the form data to Craft I am also sending a new sortOrder value for some pre-existing blocks, but these are not being listened to and the new block is always being added to the end of the blocks.

Here's the use case:

  • User loads page and sees items that are listed from the matrix field in question.
  • User clicks "replace" button on one of these items, which reveals a form at the bottom of the list for adding a new block to this matrix field. It has a replaces field which will get populated with the id of the row they clicked.
  • sortOrder for this new row gets populated with the sortOrder of the target row + 1.
  • Before sending the form data to Craft, Vue loops through the pre-existing rows and if any rows have a sortOrder >= the current row it increases it by 1... theoretically bumping everything necessary up 1 to make room for the new row so that it can be placed right below the row it is "replacing"

Some hopefully relevant Vue code:

  data() {
    return {
      isAddingReplacement: false,
      fields: {
        scriptFormula: {
          new1: {
            type: 'formulaItem',
            enabled: 1,
            sortOrder: null,
            fields: {
              drug: null,
              dosage: null,
              unit: 'CC',
              replaces: null,
              outOfStock: false,
              replacement: null
            }
          }
        },
      },
    }
  },

  methods: {

    openReplacementForm(replacingId, replacingSortOrder) {
      this.isAddingReplacement = true;
      // Clear any old replacement data
      this.clearReplacementValues();
      // Wait a tick and then change focus to the replacement drug field
      let drugFieldFocusTimeout;
      let drugField = document.getElementById('replacementDrugInput');
      drugFieldFocusTimeout = window.setTimeout( function() {
        drugField.focus();
      }, 300);
      // Assign ID of Formula Item we are making a replacement for to the replacement field.
      this.fields.scriptFormula.new1.fields.replaces = replacingId;
      // @todo Craft does not respect the sortOrder we give it. Modify it via before_save_event?
      this.fields.scriptFormula.new1.sortOrder = Number(replacingSortOrder) + 1;
    },

    addAllFormulaBlocksToFormulaSubmission() {
      let newSortOrder;
      for (let i = 0; i < this.formula.length; i++) {
        if (this.formula[i].sortOrder >= this.fields.scriptFormula.new1.sortOrder) {
          newSortOrder = Number(this.formula[i].sortOrder) + 1;
          this.$set(
              this.fields.scriptFormula,
              this.formula[i].id,
              {
                type: 'formulaItem',
                enabled: 1,
                sortOrder: newSortOrder
              }
          );
        } else {
          this.$set(
              this.fields.scriptFormula,
              this.formula[i].id,
              {
                type: 'formulaItem',
                enabled: 1,
                sortOrder: this.formula[i].sortOrder
              }
          );
        }
      }
    },

    submitReplacement() {
      // make sure we're sending all pre-exisitng Formula Blocks with our submission
      this.addAllFormulaBlocksToFormulaSubmission();
      // what we're sending
      let data = {
        entryId: this.scriptId,
        sectionId: 3,
        enabled: 1,
        fields: this.fields
      };
      console.log('About to submit: ', data);
      this.$axios.post('actions/entries/save-entry', data)
          .then((response) => {
            console.log('Formula saved.');
            console.log(response);
            // query Formula again and update Store?
          })
          .catch((error) => {
            if (error.response) {
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else if (error.request) {
              console.log(error.request);
            } else {
              console.log('Error', error.message);
            }
            console.log(error.config);
            this.hasSubmitted = false;
          });
      // clear replacement data and turn off `isAddingReplacement`.
      this.isAddingReplacement = false;
    },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.