117 lines
3.5 KiB
Text
117 lines
3.5 KiB
Text
<template>
|
|
<div :id="id" ref="modal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
Administration
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="m-5">
|
|
<h5>
|
|
Contacts
|
|
</h5>
|
|
|
|
<button class="btn btn-primary" @click="exportContacts">
|
|
Exporter les Contacts
|
|
</button>
|
|
<a ref="downloadlink" href="#" class="d-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="m-5">
|
|
<div id="accordionContacts" class="accordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button
|
|
class="accordion-button"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseContacts"
|
|
aria-expanded="true"
|
|
aria-controls="collapseContacts"
|
|
>
|
|
Contacts Liste
|
|
</button>
|
|
</h2>
|
|
<div id="collapseContacts" class="accordion-collapse collapse show" data-bs-parent="#accordionContacts">
|
|
<div class="accordion-body">
|
|
<ul class="list-group">
|
|
<li v-for="(contact, contactIndex) of contacts" :key="contactIndex" class="list-group-item">
|
|
<div class="d-flex flex-column">
|
|
<span>{{ getProductName(contact.product_id) }}</span>
|
|
<span class="fw-bold">{{ contact.email }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import data from "data/test.json";
|
|
|
|
export default defineComponent({
|
|
name: "AdministrativeModal",
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
contacts: {
|
|
type: Array<Contact>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: ["saved"],
|
|
data(): {
|
|
fileName: string
|
|
} {
|
|
return {
|
|
fileName: `export ${Date()}`
|
|
};
|
|
},
|
|
watch: {
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
getProductName(id:number): string {
|
|
return (data.items ?? []).find((item) => item?.id === id)?.name ?? String(id);
|
|
},
|
|
exportContacts() {
|
|
const json = JSON.stringify(this.contacts);
|
|
const downloadlink = this.$refs.downloadlink as HTMLLinkElement;
|
|
const file = new File([json], this.fileName, {type: "application/json"});
|
|
const exportUrl = URL.createObjectURL(file);
|
|
downloadlink.href = exportUrl;
|
|
downloadlink.click();
|
|
URL.revokeObjectURL(exportUrl);
|
|
},
|
|
downloadFile() {
|
|
alert("download file");
|
|
}
|
|
},
|
|
});
|
|
</script>
|