214 lines
6.3 KiB
Vue
214 lines
6.3 KiB
Vue
<template>
|
|
<div class="mt-6" v-resize="onResize">
|
|
<span class="v-label v-label--active theme--light">
|
|
{{ $ay.t("Attachments") }}
|
|
</span>
|
|
|
|
<v-tabs v-model="tab" color="primary">
|
|
<v-tabs-slider></v-tabs-slider>
|
|
<v-tab key="list"><v-icon>fa-folder</v-icon></v-tab>
|
|
<v-tab key="attach"><v-icon>fa-paperclip</v-icon></v-tab>
|
|
<v-tabs-items v-model="tab">
|
|
<v-tab-item key="list">
|
|
<div class="mt-4" :style="cardTextStyle()">
|
|
<v-list color="grey lighten-5" three-line>
|
|
<v-list-item
|
|
v-for="item in attachedFiles"
|
|
:key="item.id"
|
|
@click="download(item)"
|
|
>
|
|
<v-list-item-avatar>
|
|
<v-icon v-text="item.icon"></v-icon>
|
|
</v-list-item-avatar>
|
|
|
|
<v-list-item-content>
|
|
<v-list-item-title v-text="item.name"></v-list-item-title>
|
|
<v-list-item-subtitle
|
|
v-text="item.date"
|
|
></v-list-item-subtitle>
|
|
|
|
<v-list-item-subtitle
|
|
v-text="item.notes"
|
|
></v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
|
|
<v-list-item-action>
|
|
<v-btn icon>
|
|
<v-icon>fa-edit</v-icon>
|
|
</v-btn>
|
|
<v-btn icon>
|
|
<v-icon>fa-trash</v-icon>
|
|
</v-btn>
|
|
</v-list-item-action>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</v-tab-item>
|
|
<v-tab-item key="attach">
|
|
<div class="mt-8">
|
|
{{ uploadFiles }}
|
|
<v-file-input
|
|
v-model="uploadFiles"
|
|
:label="$ay.t('AttachFile')"
|
|
prepend-icon="fa-paperclip"
|
|
multiple
|
|
chips
|
|
></v-file-input>
|
|
<v-text-field
|
|
v-model="notes"
|
|
:label="$ay.t('AttachmentNotes')"
|
|
></v-text-field>
|
|
<v-btn color="primary" text @click="upload">{{
|
|
$ay.t("Upload")
|
|
}}</v-btn>
|
|
</div>
|
|
</v-tab-item>
|
|
</v-tabs-items>
|
|
</v-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
created() {},
|
|
data() {
|
|
return {
|
|
height: 300,
|
|
attachedFiles: [
|
|
{
|
|
id: 1,
|
|
icon: "fa-file-image",
|
|
name: "drawings.pdf",
|
|
date: "2020-01-09",
|
|
notes:
|
|
"Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: "fa-file-image",
|
|
name: "drawings.pdf",
|
|
date: "2020-01-09",
|
|
notes:
|
|
"Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.Notes, here are some notes, notes notes notes.\n Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: "fa-file-image",
|
|
name: "drawings.pdf",
|
|
date: "2020-01-09",
|
|
notes: null
|
|
}
|
|
],
|
|
notes: null,
|
|
tab: null,
|
|
uploadFiles: []
|
|
};
|
|
},
|
|
props: {
|
|
ayaType: Number,
|
|
ayaId: Number,
|
|
readonly: Boolean
|
|
},
|
|
|
|
methods: {
|
|
onResize() {
|
|
this.height = window.innerHeight * 0.8;
|
|
},
|
|
cardTextStyle() {
|
|
return "height: " + this.height + "px;overflow-y:auto;";
|
|
},
|
|
upload() {
|
|
let at = {
|
|
ayaId: this.ayaId,
|
|
ayaType: this.ayaType,
|
|
files: this.uploadFiles
|
|
};
|
|
window.$gz.api.uploadAttachment(at).then(res => {
|
|
//vm.formState.loading = false;
|
|
if (res.error) {
|
|
console.log(res.error);
|
|
// vm.formState.serverError = res.error;
|
|
// window.$gz.form.setErrorBoxErrors(vm);
|
|
} else {
|
|
console.log("SUCCESS");
|
|
}
|
|
});
|
|
// .catch(function handleSubmitError(error) {
|
|
// vm.formState.loading = false;
|
|
// window.$gz.errorHandler.handleFormError(error, vm);
|
|
// });
|
|
// if (this.uploadFiles.length > 0) {
|
|
// this.uploadFiles.forEach(file => {
|
|
// window.console.log(file);
|
|
// });
|
|
// }
|
|
},
|
|
download(item) {
|
|
console.log("CLICK", item);
|
|
}
|
|
}
|
|
|
|
/**[
|
|
{
|
|
icon: "fa-file-image",
|
|
title: "drawings.pdf",
|
|
subtitle: "2020-01-09"
|
|
},
|
|
{
|
|
icon: "fa-image",
|
|
title: "Recipes",
|
|
subtitle: "Jan 17, 2014"
|
|
},
|
|
{
|
|
icon: "fa-pen",
|
|
title: "Work",
|
|
subtitle: "Jan 28, 2014"
|
|
},
|
|
{
|
|
icon: "fa-file",
|
|
title: "2drawings.pdf",
|
|
subtitle: "2020-01-09"
|
|
},
|
|
{
|
|
icon: "fa-image",
|
|
title: "2Recipes",
|
|
subtitle: "Jan 17, 2014"
|
|
},
|
|
{
|
|
icon: "fa-pen",
|
|
title: "2Work",
|
|
subtitle: "Jan 28, 2014"
|
|
},
|
|
{
|
|
icon: "fa-file",
|
|
title: "3drawings.pdf",
|
|
subtitle: "2020-01-09"
|
|
},
|
|
{
|
|
icon: "fa-image",
|
|
title: "3Recipes",
|
|
subtitle: "Jan 17, 2014"
|
|
}
|
|
// {
|
|
// icon: "fa-pen",
|
|
// title: "3Work",
|
|
// subtitle: "Jan 28, 2014"
|
|
// },
|
|
// {
|
|
// icon: "fa-file",
|
|
// title: "4drawings.pdf",
|
|
// subtitle: "2020-01-09"
|
|
// },
|
|
// {
|
|
// icon: "fa-image",
|
|
// title: "4Recipes",
|
|
// subtitle: "Jan 17, 2014"
|
|
// },
|
|
// {
|
|
// icon: "fa-pen",
|
|
// title: "4Work",
|
|
// subtitle: "Jan 28, 2014"
|
|
// }
|
|
], */
|
|
};
|
|
</script>
|