mixtape/zero.Backoffice.UI/old_app/pages/media/detail.vue

<template>
  <ui-form ref="form" class="mediaitem" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
    <ui-form-header v-model="model" prefix="@media.list" title="@media.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
    <ui-editor config="media" v-model="model" :meta="meta" :active-toggle="false" :disabled="disabled">
      <template v-slot:below>
        <ui-editor-infos v-model="model" :disabled="disabled">
          <template v-slot:before>
            <ui-property label="@media.fields.size">
              <span v-filesize="model.size"></span>
            </ui-property>
            <ui-property v-if="model.imageMeta.width" label="@media.fields.dimension" :is-text="true">
              {{model.imageMeta.width}} × {{model.imageMeta.height}}
            </ui-property>
            <ui-property v-if="model.imageMeta.dpi != 0" label="@media.fields.dpi" :is-text="true">
              {{model.imageMeta.dpi}}
            </ui-property>
            <ui-property v-if="model.imageMeta.colorSpace" label="@media.fields.colorSpace" :is-text="true">
              {{model.imageMeta.colorSpace}}
            </ui-property>
            <ui-property v-if="model.imageMeta.frames > 1" label="@media.fields.frames" :is-text="true">
              {{model.imageMeta.frames}}
            </ui-property>
          </template>
        </ui-editor-infos>
      </template>
    </ui-editor>
  </ui-form>
</template>


<script>
  import MediaApi from 'zero/api/media.js';
  import UiEditor from 'zero/editor/editor.vue';

  export default {
    props: ['id'],

    components: { UiEditor },

    data: () => ({
      meta: {},
      model: { },
      route: 'media-edit',
      disabled: false
    }),

    methods: {

      onLoad(form)
      {
        form.load(!this.id ? MediaApi.getEmpty() : MediaApi.getById(this.id)).then(response =>
        {
          this.disabled = !response.meta.canEdit;
          this.meta = response.meta;
          this.model = response.entity;
        });
      },


      onSubmit(form)
      {
        form.handle(MediaApi.save(this.model));
      },


      onDelete(item, opts)
      {
        opts.hide();
        this.$refs.form.onDelete(MediaApi.delete.bind(this, this.id));
      }     
    }
  }
</script>