<commit_before><template>
  <AposModal
    class="apos-widget-editor"
    :modal="modal" :modal-title="editLabel"
    @inactive="modal.active = false" @show-modal="modal.showModal = true"
    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
  >
    <template #breadcrumbs>
      <AposModalBreadcrumbs :items="breadcrumbs" />
    </template>
    <template #main>
      <AposModalBody>
        <template #bodyMain>
          <div class="apos-widget-editor__body">
            <AposSchema
              :schema="schema"
              :value="docFields"
              @input="updateDocFields"
              ref="schema"
            />
          </div>
        </template>
      </AposModalBody>
    </template>
    <template #footer>
      <AposButton
        type="default" label="Cancel"
        @click="confirmAndCancel"
      />
      <AposButton
        type="primary" @click="save"
        :label="saveLabel"
        :disabled="docFields.hasErrors"
      />
    </template>
  </AposModal>
</template>

<script>
import AposModalModifiedMixin from 'Modules/@apostrophecms/modal/mixins/AposModalModifiedMixin';
import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
import cuid from 'cuid';
import klona from 'klona';

export default {
  name: 'AposWidgetEditor',
  mixins: [ AposModalModifiedMixin ],
  props: {
    type: {
      required: true,
      type: String
    },
    breadcrumbs: {
      type: Array,
      default: function () {
        return [];
      }
    },
    options: {
      required: true,
      type: Object
    },
    value: {
      required: false,
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: [ 'safe-close', 'modal-result' ],
  data() {
    return {
      id: this.value && this.value._id,
      original: null,
      docFields: {
        data: { ...this.value },
        hasErrors: false
      },
      modal: {
        title: this.editLabel,
        active: false,
        type: 'slide',
        showModal: false
      }
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.modules[apos.area.widgetManagers[this.type]];
    },
    typeLabel() {
      return this.moduleOptions.label;
    },
    editLabel() {
      if (this.moduleOptions.editLabel) {
        return this.moduleOptions.editLabel;
      } else {
        return `Edit ${this.typeLabel}`;
      }
    },
    saveLabel() {
      if (this.moduleOptions.saveLabel) {
        return this.moduleOptions.saveLabel;
      } else {
        return `Save ${this.typeLabel}`;
      }
    },
    schema() {
      return this.moduleOptions.schema;
    }
  },
  async mounted() {
    this.modal.active = true;
  },
  created() {
    this.original = this.value ? klona(this.value) : this.getDefault();
  },
  methods: {
    updateDocFields(value) {
      this.docFields = value;
    },
    isModified() {
      const result = detectDocChange(this.schema, this.original, this.docFields.data);
      return result;
    },
    save() {
      const widget = this.docFields.data;
      if (!widget.type) {
        widget.type = this.type;
      }
      if (!this.id) {
        widget._id = cuid();
      }
      this.$emit('modal-result', widget);
      this.modal.showModal = false;
    },
    getDefault() {
      const widget = {};
      this.schema.forEach(field => {
        widget[field.name] = field.def ? klona(field.def) : field.def;
      });
      return widget;
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-widget-editor /deep/ .apos-modal__inner {
    max-width: 458px;
  }
</style><commit_msg>Do the trigger validation dance properly<commit_after><template>
  <AposModal
    class="apos-widget-editor"
    :modal="modal" :modal-title="editLabel"
    @inactive="modal.active = false" @show-modal="modal.showModal = true"
    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
  >
    <template #breadcrumbs>
      <AposModalBreadcrumbs :items="breadcrumbs" />
    </template>
    <template #main>
      <AposModalBody>
        <template #bodyMain>
          <div class="apos-widget-editor__body">
            <AposSchema
              :trigger-validation="triggerValidation"
              :schema="schema"
              :value="docFields"
              @input="updateDocFields"
              ref="schema"
            />
          </div>
        </template>
      </AposModalBody>
    </template>
    <template #footer>
      <AposButton
        type="default" label="Cancel"
        @click="confirmAndCancel"
      />
      <AposButton
        type="primary" @click="save"
        :label="saveLabel"
        :disabled="docFields.hasErrors"
      />
    </template>
  </AposModal>
</template>

<script>
import AposModalModifiedMixin from 'Modules/@apostrophecms/modal/mixins/AposModalModifiedMixin';
import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
import cuid from 'cuid';
import klona from 'klona';

export default {
  name: 'AposWidgetEditor',
  mixins: [ AposModalModifiedMixin ],
  props: {
    type: {
      required: true,
      type: String
    },
    breadcrumbs: {
      type: Array,
      default: function () {
        return [];
      }
    },
    options: {
      required: true,
      type: Object
    },
    value: {
      required: false,
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: [ 'safe-close', 'modal-result' ],
  data() {
    return {
      id: this.value && this.value._id,
      original: null,
      docFields: {
        data: { ...this.value },
        hasErrors: false
      },
      modal: {
        title: this.editLabel,
        active: false,
        type: 'slide',
        showModal: false
      },
      triggerValidation: false
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.modules[apos.area.widgetManagers[this.type]];
    },
    typeLabel() {
      return this.moduleOptions.label;
    },
    editLabel() {
      if (this.moduleOptions.editLabel) {
        return this.moduleOptions.editLabel;
      } else {
        return `Edit ${this.typeLabel}`;
      }
    },
    saveLabel() {
      if (this.moduleOptions.saveLabel) {
        return this.moduleOptions.saveLabel;
      } else {
        return `Save ${this.typeLabel}`;
      }
    },
    schema() {
      return this.moduleOptions.schema;
    }
  },
  async mounted() {
    this.modal.active = true;
  },
  created() {
    this.original = this.value ? klona(this.value) : this.getDefault();
  },
  methods: {
    updateDocFields(value) {
      this.docFields = value;
    },
    isModified() {
      const result = detectDocChange(this.schema, this.original, this.docFields.data);
      return result;
    },
    save() {
      this.triggerValidation = true;
      this.$nextTick(async () => {
        if (this.docFields.hasErrors) {
          this.triggerValidation = false;
          return;
        }
        const widget = this.docFields.data;
        if (!widget.type) {
          widget.type = this.type;
        }
        if (!this.id) {
          widget._id = cuid();
        }
        this.$emit('modal-result', widget);
        this.modal.showModal = false;
      });
    },
    getDefault() {
      const widget = {};
      this.schema.forEach(field => {
        widget[field.name] = field.def ? klona(field.def) : field.def;
      });
      return widget;
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-widget-editor /deep/ .apos-modal__inner {
    max-width: 458px;
  }
</style>
{'fraction_non_alphanumeric': 0.14213265714667023, 'fraction_numerical': 0.0008007473642065928, 'mean_word_length': 2.0550346514472073, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 54, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4266378', 'n_tokens_mistral': 2349, 'n_tokens_neox': 2360, 'n_words': 419}