<commit_before><template>
  <div class="apos-media-manager-editor">
    <div class="apos-media-manager-editor__inner" v-if="media">
      <div class="apos-media-manager-editor__thumb-wrapper">
        <img
          v-if="media.attachment"
          class="apos-media-manager-editor__thumb"
          :src="media.attachment._urls['one-third']" :alt="media.description"
        >
      </div>
      <ul class="apos-media-manager-editor__details">
        <li class="apos-media-manager-editor__detail">
          {{ media.uploadedAt }}
        </li>
        <li class="apos-media-manager-editor__detail">
          File Size: {{ media.fileSize }}
        </li>
        <li class="apos-media-manager-editor__detail">
          {{ media.dim }}
        </li>
      </ul>
      <AposSchema
        v-if="doc.data.title"
        :schema="schema"
        v-model="doc"
        :modifiers="['small', 'inverted']"
      />
    </div>
    <AposModalLip :refresh="lipKey">
      <div
        class="apos-media-manager-editor__lip"
      >
        <AposButton
          @click="$emit('back')"
          class="apos-media-manager-editor__back" type="outline"
          label="Cancel"
        />
        <AposButton
          @click="save" class="apos-media-manager-editor__save"
          label="Save" type="primary"
        />
      </div>
    </AposModalLip>
  </div>
</template>

<script>
import AposHelpers from 'Modules/@apostrophecms/ui/mixins/AposHelpersMixin';
import klona from 'klona';

export default {
  mixins: [ AposHelpers ],
  props: {
    media: {
      type: Object,
      default() {
        return {};
      }
    },
    selected: {
      type: Array,
      default() {
        return [];
      }
    },
    moduleLabels: {
      type: Object,
      default() {
        return {
          label: 'Image',
          pluralLabel: 'Images'
        };
      }
    }
  },
  emits: [ 'saved', 'back' ],
  data() {
    return {
      doc: {
        data: {},
        hasErrors: false
      },
      published: {
        field: {
          required: false,
          name: 'published',
          type: 'radio',
          label: 'Published',
          toggle: {
            true: 'Published',
            false: 'Unpublished'
          }
        },
        status: {},
        value: {
          data: true
        }
      },
      lipKey: ''
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.modules[this.media.type] || {};
    },
    schema() {
      if (this.moduleOptions.schema) {
        return this.moduleOptions.schema.filter(field => {
          return field.type !== 'attachment';
        });
      }
      return [];
    }
  },
  watch: {
    media(newVal) {
      this.doc.data = klona(newVal);
      this.generateLipKey();
    }
  },
  mounted() {
    this.generateLipKey();
  },
  methods: {
    async save() {
      apos.bus.$emit('busy', true);
      const route = `${this.moduleOptions.action}/${this.media._id}`;
      // Repopulate `attachment` since it was removed from the schema.
      this.doc.data.attachment = this.media.attachment;

      try {
        await apos.http.put(route, {
          busy: true,
          body: this.doc.data
        });

        this.$emit('saved');
      } catch (err) {
        console.error('Error saving image', err);

        await apos.notify(`Error Saving ${this.moduleLabels.label}`, {
          type: 'danger',
          icon: 'alert-circle-icon',
          dismiss: true
        });
      } finally {
        apos.bus.$emit('busy', false);
      }
    },
    generateLipKey() {
      this.lipKey = this.generateId();
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-media-manager-editor {
    position: relative;
    height: 100%;
    padding: 20px;
  }

  .apos-media-manager-editor__thumb-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;<commit_msg>Adds triggerValidation to media editor<commit_after><template>
  <div class="apos-media-manager-editor">
    <div class="apos-media-manager-editor__inner" v-if="media">
      <div class="apos-media-manager-editor__thumb-wrapper">
        <img
          v-if="media.attachment"
          class="apos-media-manager-editor__thumb"
          :src="media.attachment._urls['one-third']" :alt="media.description"
        >
      </div>
      <ul class="apos-media-manager-editor__details">
        <li class="apos-media-manager-editor__detail">
          {{ media.uploadedAt }}
        </li>
        <li class="apos-media-manager-editor__detail">
          File Size: {{ media.fileSize }}
        </li>
        <li class="apos-media-manager-editor__detail">
          {{ media.dim }}
        </li>
      </ul>
      <AposSchema
        :schema="schema"
        v-model="doc"
        :modifiers="['small', 'inverted']"
        :trigger-validation="triggerValidation"
      />
    </div>
    <AposModalLip :refresh="lipKey">
      <div
        class="apos-media-manager-editor__lip"
      >
        <AposButton
          @click="$emit('back')"
          class="apos-media-manager-editor__back" type="outline"
          label="Cancel"
        />
        <AposButton
          @click="save" class="apos-media-manager-editor__save"
          label="Save" type="primary"
        />
      </div>
    </AposModalLip>
  </div>
</template>

<script>
import AposHelpers from 'Modules/@apostrophecms/ui/mixins/AposHelpersMixin';
import klona from 'klona';

export default {
  mixins: [ AposHelpers ],
  props: {
    media: {
      type: Object,
      default() {
        return {};
      }
    },
    selected: {
      type: Array,
      default() {
        return [];
      }
    },
    moduleLabels: {
      type: Object,
      default() {
        return {
          label: 'Image',
          pluralLabel: 'Images'
        };
      }
    }
  },
  emits: [ 'saved', 'back' ],
  data() {
    return {
      doc: {
        data: {},
        hasErrors: false
      },
      published: {
        field: {
          required: false,
          name: 'published',
          type: 'radio',
          label: 'Published',
          toggle: {
            true: 'Published',
            false: 'Unpublished'
          }
        },
        status: {},
        value: {
          data: true
        }
      },
      lipKey: '',
      triggerValidation: false
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.modules[this.media.type] || {};
    },
    schema() {
      if (this.moduleOptions.schema) {
        return this.moduleOptions.schema.filter(field => {
          return field.type !== 'attachment';
        });
      }
      return [];
    }
  },
  watch: {
    media(newVal) {
      this.doc.data = klona(newVal);
      this.generateLipKey();
    }
  },
  mounted() {
    this.generateLipKey();
  },
  methods: {
    save() {
      this.triggerValidation = true;
      apos.bus.$emit('busy', true);
      const route = `${this.moduleOptions.action}/${this.media._id}`;
      // Repopulate `attachment` since it was removed from the schema.
      this.doc.data.attachment = this.media.attachment;
      this.$nextTick(async () => {
        if (this.doc.hasErrors) {
          return;
        }

        try {
          await apos.http.put(route, {
            busy: true,
            body: this.doc.data
          });

          this.$emit('saved');
        } catch (err) {
          console.error('Error saving image', err);

          await apos.notify(`Error Saving ${this.moduleLabels.label}`, {
            type: 'danger',
            icon: 'alert-circle-icon',
            dismiss: true
          });
        } finally {
          apos.bus.$emit('busy', false);
        }
      });
    },
    generateLipKey() {
      this.lipKey = this.generateId();
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-media-manager-editor {
    position: relative;
    height: 100%;
    padding: 20px;
  }

  .apos-media-manager-editor__thumb-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
{'fraction_non_alphanumeric': 0.1522956326987682, 'fraction_numerical': 0.0019907925842976236, 'mean_word_length': 1.7745944080082845, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 60, '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': '2406818', 'n_tokens_mistral': 2510, 'n_tokens_neox': 2510, 'n_words': 424}