76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<ui-form v-if="!loading" ref="form" class="mediafolder" v-slot="form" @submit="onSubmit" @load="onLoad">
|
|
<h2 class="ui-headline" v-localize="model.id ? '@media.editfolder' : '@media.addfolder'"></h2>
|
|
<div class="mediafolder-items">
|
|
<ui-property :required="true">
|
|
<input v-model="item.name" type="text" class="ui-input" maxlength="80" v-localize:placeholder="'@media.fields.foldername_placeholder'" :disabled="disabled" />
|
|
<ui-error :catch-all="true" />
|
|
</ui-property>
|
|
</div>
|
|
<div class="app-confirm-buttons">
|
|
<ui-button type="primary" v-if="!disabled" :submit="true" :state="form.state" :label="model.id ? '@ui.save' : '@ui.create'"></ui-button>
|
|
<ui-button type="light" :label="config.closeLabel" :disabled="loading" @click="config.close"></ui-button>
|
|
<ui-button v-if="!disabled && model.id" type="light" label="@ui.delete" @click="onDelete" style="float:right;"></ui-button>
|
|
</div>
|
|
</ui-form>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import MediaFolderApi from 'zero/api/media-folder.js';
|
|
import Overlay from 'zero/helpers/overlay.js';
|
|
|
|
export default {
|
|
|
|
props: {
|
|
model: Object,
|
|
config: Object
|
|
},
|
|
|
|
data: () => ({
|
|
loading: false,
|
|
item: {},
|
|
disabled: false
|
|
}),
|
|
|
|
methods: {
|
|
|
|
onLoad(form)
|
|
{
|
|
form.load(!this.model.id ? MediaFolderApi.getEmpty() : MediaFolderApi.getById(this.model.id)).then(response =>
|
|
{
|
|
this.disabled = false; //!response.canEdit;
|
|
this.item = response.entity;
|
|
this.item.parentId = this.model.parentId;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
|
|
onSubmit(form)
|
|
{
|
|
form.handle(MediaFolderApi.save(this.item)).then(response =>
|
|
{
|
|
this.config.confirm(response, this.config);
|
|
});
|
|
},
|
|
|
|
onDelete()
|
|
{
|
|
this.config.confirm({ deleted: true });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mediafolder
|
|
{
|
|
text-align: left;
|
|
}
|
|
|
|
.mediafolder-items
|
|
{
|
|
margin-top: var(--padding);
|
|
}
|
|
</style> |