mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-20 14:43:49 +00:00
Add attachments to workflow
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, useTemplateRef } from "vue";
|
||||
import type { WorkflowAttachment } from "ChillMainAssets/types";
|
||||
import PickGenericDocModal from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue";
|
||||
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
|
||||
import AttachmentList from "ChillMainAssets/vuejs/WorkflowAttachment/Component/AttachmentList.vue";
|
||||
import { GenericDoc } from "ChillDocStoreAssets/types";
|
||||
|
||||
interface AppConfig {
|
||||
workflowId: number;
|
||||
accompanyingPeriodId: number;
|
||||
attachments: WorkflowAttachment[];
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: "pickGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
|
||||
}>();
|
||||
|
||||
type PickGenericModalType = InstanceType<typeof PickGenericDocModal>;
|
||||
|
||||
const pickDocModal = useTemplateRef<PickGenericModalType>("pickDocModal");
|
||||
const props = defineProps<AppConfig>();
|
||||
|
||||
const attachedGenericDoc = computed<GenericDocForAccompanyingPeriod[]>(
|
||||
() =>
|
||||
props.attachments
|
||||
.map((a: WorkflowAttachment) => a.genericDoc)
|
||||
.filter(
|
||||
(g: GenericDoc | null) => g !== null,
|
||||
) as GenericDocForAccompanyingPeriod[],
|
||||
);
|
||||
|
||||
const openModal = function () {
|
||||
pickDocModal.value?.openModal();
|
||||
};
|
||||
|
||||
const onPickGenericDoc = ({
|
||||
genericDoc,
|
||||
}: {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
}) => {
|
||||
emit("pickGenericDoc", { genericDoc });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<pick-generic-doc-modal
|
||||
:accompanying-period-id="props.accompanyingPeriodId"
|
||||
:to-remove="attachedGenericDoc"
|
||||
ref="pickDocModal"
|
||||
@pickGenericDoc="onPickGenericDoc"
|
||||
></pick-generic-doc-modal>
|
||||
<attachment-list
|
||||
:attachments="props.attachments"
|
||||
@removeAttachment="(payload) => emit('removeAttachment', payload)"
|
||||
></attachment-list>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button type="button" class="btn btn-create" @click="openModal">
|
||||
Ajouter une pièce jointe
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { WorkflowAttachment } from "ChillMainAssets/types";
|
||||
import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue";
|
||||
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
|
||||
|
||||
interface AttachmentListProps {
|
||||
attachments: WorkflowAttachment[];
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-function-type
|
||||
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<AttachmentListProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p
|
||||
v-if="props.attachments.length === 0"
|
||||
class="chill-no-data-statement text-center"
|
||||
>
|
||||
Aucune pièce jointe
|
||||
</p>
|
||||
<!-- TODO translate -->
|
||||
<div else class="flex-table">
|
||||
<div v-for="a in props.attachments" :key="a.id" class="item-bloc">
|
||||
<generic-doc-item-box
|
||||
v-if="a.genericDoc !== null"
|
||||
:generic-doc="a.genericDoc"
|
||||
></generic-doc-item-box>
|
||||
<div class="item-row separator">
|
||||
<ul class="record_actions">
|
||||
<li v-if="a.genericDoc?.storedObject !== null">
|
||||
<document-action-buttons-group
|
||||
:stored-object="a.genericDoc.storedObject"
|
||||
></document-action-buttons-group>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-delete"
|
||||
@click="emit('removeAttachment', { attachment: a })"
|
||||
></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
|
||||
|
||||
interface GenericDocItemBoxProps {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
}
|
||||
|
||||
const props = defineProps<GenericDocItemBoxProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="'html' in props.genericDoc.metadata"
|
||||
v-html="props.genericDoc.metadata.html"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
GenericDoc,
|
||||
GenericDocForAccompanyingPeriod,
|
||||
} from "ChillDocStoreAssets/types/generic_doc";
|
||||
import PickGenericDocItem from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue";
|
||||
import { fetch_generic_docs_by_accompanying_period } from "ChillDocStoreAssets/js/generic-doc-api";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
interface PickGenericDocProps {
|
||||
accompanyingPeriodId: number;
|
||||
pickedList: GenericDocForAccompanyingPeriod[];
|
||||
toRemove: GenericDocForAccompanyingPeriod[];
|
||||
}
|
||||
|
||||
const props = defineProps<PickGenericDocProps>();
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: "pickGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
|
||||
(
|
||||
e: "removeGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
}>();
|
||||
|
||||
const genericDocs = ref<GenericDocForAccompanyingPeriod[]>([]);
|
||||
const loaded = ref(false);
|
||||
|
||||
const isPicked = (genericDoc: GenericDocForAccompanyingPeriod): boolean =>
|
||||
props.pickedList.findIndex(
|
||||
(element: GenericDocForAccompanyingPeriod) =>
|
||||
element.uniqueKey === genericDoc.uniqueKey,
|
||||
) !== -1;
|
||||
|
||||
onMounted(async () => {
|
||||
genericDocs.value = await fetch_generic_docs_by_accompanying_period(
|
||||
props.accompanyingPeriodId,
|
||||
);
|
||||
loaded.value = true;
|
||||
});
|
||||
|
||||
const textFilter = ref<string>("");
|
||||
const dateFromFilter = ref<string | null>(null);
|
||||
const dateToFilter = ref<string | null>(null);
|
||||
const placesFilter = ref<string[]>([]);
|
||||
|
||||
const availablePlaces = computed<string[]>(() => {
|
||||
const places = new Set<string>(
|
||||
genericDocs.value.map((genericDoc: GenericDoc) => genericDoc.key),
|
||||
);
|
||||
|
||||
return Array.from(places).sort((a, b) => (a < b ? -1 : a === b ? 0 : 1));
|
||||
});
|
||||
|
||||
const placeTrans = (str: string): string => {
|
||||
switch (str) {
|
||||
case "accompanying_course_document":
|
||||
return "Documents du parcours";
|
||||
case "person_document":
|
||||
return "Documents de l'usager";
|
||||
case "accompanying_period_calendar_document":
|
||||
return "Document des rendez-vous des parcours";
|
||||
case "accompanying_period_activity_document":
|
||||
return "Document des échanges des parcours";
|
||||
case "accompanying_period_work_evaluation_document":
|
||||
return "Document des actions d'accompagnement";
|
||||
default:
|
||||
return str;
|
||||
}
|
||||
};
|
||||
|
||||
const filteredDocuments = computed<GenericDocForAccompanyingPeriod[]>(() => {
|
||||
if (false === loaded.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return genericDocs.value
|
||||
.filter(
|
||||
(genericDoc: GenericDocForAccompanyingPeriod) =>
|
||||
!props.toRemove
|
||||
.map((g: GenericDocForAccompanyingPeriod) => g.uniqueKey)
|
||||
.includes(genericDoc.uniqueKey),
|
||||
)
|
||||
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
|
||||
if (textFilter.value === "") {
|
||||
return true;
|
||||
}
|
||||
|
||||
const needles = textFilter.value
|
||||
.trim()
|
||||
.split(" ")
|
||||
.map((str: string) => str.trim().toLowerCase())
|
||||
.filter((str: string) => str.length > 0);
|
||||
const title: string =
|
||||
"title" in genericDoc.metadata
|
||||
? (genericDoc.metadata.title as string)
|
||||
: "";
|
||||
if (title === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
return needles.every((n: string) =>
|
||||
title.toLowerCase().includes(n),
|
||||
);
|
||||
})
|
||||
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
|
||||
if (placesFilter.value.length === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return placesFilter.value.includes(genericDoc.key);
|
||||
})
|
||||
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
|
||||
if (dateToFilter.value === null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return genericDoc.doc_date.datetime8601 < dateToFilter.value;
|
||||
})
|
||||
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
|
||||
if (dateFromFilter.value === null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return genericDoc.doc_date.datetime8601 > dateFromFilter.value;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loaded">
|
||||
<div>
|
||||
<form name="f" method="get">
|
||||
<div class="accordion my-3" id="filterOrderAccordion">
|
||||
<h2 class="accordion-header" id="filterOrderHeading">
|
||||
<button
|
||||
class="accordion-button"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#filterOrderCollapse"
|
||||
aria-expanded="true"
|
||||
aria-controls="filterOrderCollapse"
|
||||
>
|
||||
<strong
|
||||
><i class="fa fa-fw fa-filter"></i>Filtrer la
|
||||
liste</strong
|
||||
>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
class="accordion-collapse collapse"
|
||||
id="filterOrderCollapse"
|
||||
aria-labelledby="filterOrderHeading"
|
||||
data-bs-parent="#filterOrderAccordion"
|
||||
style=""
|
||||
>
|
||||
<div
|
||||
class="accordion-body chill_filter_order container-xxl p-5 py-2"
|
||||
>
|
||||
<div class="row my-2">
|
||||
<div class="col-sm-12">
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="textFilter"
|
||||
type="search"
|
||||
id="f_q"
|
||||
name="f[q]"
|
||||
placeholder="Chercher dans la liste"
|
||||
class="form-control"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-misc"
|
||||
>
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<legend
|
||||
class="col-form-label col-sm-4 required"
|
||||
>
|
||||
Date du document
|
||||
</legend>
|
||||
<div class="col-sm-8 pt-1">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">Du</span>
|
||||
<input
|
||||
v-model="dateFromFilter"
|
||||
type="date"
|
||||
id="f_dateRanges_dateRange_from"
|
||||
name="f[dateRanges][dateRange][from]"
|
||||
class="form-control"
|
||||
/>
|
||||
<span class="input-group-text">Au</span>
|
||||
<input
|
||||
v-model="dateToFilter"
|
||||
type="date"
|
||||
id="f_dateRanges_dateRange_to"
|
||||
name="f[dateRanges][dateRange][to]"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<div class="col-sm-4 col-form-label">
|
||||
Filtrer par
|
||||
</div>
|
||||
<div class="col-sm-8 pt-2">
|
||||
<div
|
||||
class="form-check"
|
||||
v-for="p in availablePlaces"
|
||||
:key="p"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="placesFilter"
|
||||
name="f[checkboxes][places][]"
|
||||
class="form-check-input"
|
||||
:value="p"
|
||||
/>
|
||||
<label class="form-check-label">{{
|
||||
placeTrans(p)
|
||||
}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row my-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm btn-misc"
|
||||
>
|
||||
<i class="fa fa-fw fa-filter"></i>Filtrer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="genericDocs.length > 0" class="flex-table chill-task-list">
|
||||
<pick-generic-doc-item
|
||||
v-for="g in filteredDocuments"
|
||||
:key="g.uniqueKey"
|
||||
:accompanying-period-id="accompanyingPeriodId"
|
||||
:genericDoc="g"
|
||||
:is-picked="isPicked(g)"
|
||||
@pickGenericDoc="(payload) => emit('pickGenericDoc', payload)"
|
||||
@removeGenericDoc="
|
||||
(payload) => emit('removeGenericDoc', payload)
|
||||
"
|
||||
></pick-generic-doc-item>
|
||||
</div>
|
||||
<div v-else class="text-center chill-no-data-statement">
|
||||
Aucun document dans ce parcours
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Chargement…</strong>
|
||||
<div
|
||||
class="spinner-border ms-auto"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
|
||||
import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue";
|
||||
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
|
||||
|
||||
interface PickGenericDocItemProps {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
accompanyingPeriodId: number;
|
||||
isPicked: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<PickGenericDocItemProps>();
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: "pickGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
|
||||
(
|
||||
e: "removeGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
}>();
|
||||
|
||||
const clickOnAddButton = () => {
|
||||
emit("pickGenericDoc", { genericDoc: props.genericDoc });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item-bloc" :class="{ isPicked: isPicked }">
|
||||
<generic-doc-item-box
|
||||
:generic-doc="props.genericDoc"
|
||||
></generic-doc-item-box>
|
||||
|
||||
<div class="item-row separator">
|
||||
<ul class="record_actions">
|
||||
<li v-if="props.genericDoc.storedObject !== null">
|
||||
<document-action-buttons-group
|
||||
:stored-object="props.genericDoc.storedObject"
|
||||
></document-action-buttons-group>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
v-if="!isPicked"
|
||||
type="button"
|
||||
class="btn btn-chill-green text-white"
|
||||
@click="clickOnAddButton"
|
||||
>
|
||||
<i class="bi bi-cart-plus"></i>
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-chill-red text-white"
|
||||
@click="
|
||||
emit('removeGenericDoc', {
|
||||
genericDoc: props.genericDoc,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="bi bi-cart-dash"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-bloc {
|
||||
&.isPicked {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 135, 84, 1) 0px,
|
||||
rgba(25, 135, 84, 0) 9px
|
||||
),
|
||||
linear-gradient(
|
||||
270deg,
|
||||
rgba(25, 135, 84, 1) 0px,
|
||||
rgba(25, 135, 84, 0) 9px
|
||||
),
|
||||
linear-gradient(
|
||||
0deg,
|
||||
rgba(25, 135, 84, 1) 0px,
|
||||
rgba(25, 135, 84, 0) 9px
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(25, 135, 84, 1) 0px,
|
||||
rgba(25, 135, 84, 0) 9px
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
|
||||
import { computed, ref, useTemplateRef } from "vue";
|
||||
import PickGenericDoc from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue";
|
||||
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
|
||||
|
||||
interface PickGenericDocModalProps {
|
||||
accompanyingPeriodId: number;
|
||||
toRemove: GenericDocForAccompanyingPeriod[];
|
||||
}
|
||||
|
||||
type PickGenericDocType = InstanceType<typeof PickGenericDoc>;
|
||||
|
||||
const props = defineProps<PickGenericDocModalProps>();
|
||||
const emit = defineEmits<{
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-function-type
|
||||
(
|
||||
e: "pickGenericDoc",
|
||||
payload: { genericDoc: GenericDocForAccompanyingPeriod },
|
||||
): void;
|
||||
}>();
|
||||
const picker = useTemplateRef<PickGenericDocType>("picker");
|
||||
const modalOpened = ref<boolean>(false);
|
||||
const pickeds = ref<GenericDocForAccompanyingPeriod[]>([]);
|
||||
const modalClasses = { "modal-xl": true, "modal-dialog-scrollable": true };
|
||||
|
||||
const numberOfPicked = computed<number>(() => pickeds.value.length);
|
||||
|
||||
const onPicked = ({
|
||||
genericDoc,
|
||||
}: {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
}) => {
|
||||
pickeds.value.push(genericDoc);
|
||||
};
|
||||
|
||||
const onRemove = ({
|
||||
genericDoc,
|
||||
}: {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
}) => {
|
||||
const index = pickeds.value.findIndex(
|
||||
(item) => item.uniqueKey === genericDoc.uniqueKey,
|
||||
);
|
||||
|
||||
if (index === -1) {
|
||||
throw new Error("Remove generic doc that doesn't exist");
|
||||
}
|
||||
|
||||
pickeds.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
for (let genericDoc of pickeds.value) {
|
||||
emit("pickGenericDoc", { genericDoc });
|
||||
}
|
||||
pickeds.value = [];
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const closeModal = function () {
|
||||
modalOpened.value = false;
|
||||
};
|
||||
|
||||
const openModal = function () {
|
||||
modalOpened.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ openModal, closeModal });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<modal
|
||||
v-if="modalOpened"
|
||||
@close="closeModal"
|
||||
:modal-dialog-class="modalClasses"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<h2 class="modal-title">Ajouter une pièce jointe</h2>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<pick-generic-doc
|
||||
:accompanying-period-id="props.accompanyingPeriodId"
|
||||
:to-remove="props.toRemove"
|
||||
:picked-list="pickeds"
|
||||
ref="picker"
|
||||
@pickGenericDoc="onPicked"
|
||||
@removeGenericDoc="onRemove"
|
||||
></pick-generic-doc>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<ul v-if="numberOfPicked > 0" class="record_actions">
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-chill-green text-white"
|
||||
@click="onConfirm"
|
||||
>
|
||||
<template v-if="numberOfPicked > 1">
|
||||
<i class="fa fa-plus"></i> Ajouter
|
||||
{{ numberOfPicked }} pièces jointes
|
||||
</template>
|
||||
<template v-else>
|
||||
<i class="fa fa-plus"></i> Ajouter une pièce jointe
|
||||
</template>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,109 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { _createI18n } from "../_js/i18n";
|
||||
import { WorkflowAttachment } from "ChillMainAssets/types";
|
||||
import {
|
||||
create_attachment,
|
||||
delete_attachment,
|
||||
find_attachments_by_workflow,
|
||||
} from "ChillMainAssets/lib/workflow/attachments";
|
||||
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
|
||||
import ToastPlugin from "vue-toast-notification";
|
||||
import "vue-toast-notification/dist/theme-bootstrap.css";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const attachments = document.querySelectorAll<HTMLDivElement>(
|
||||
'div[data-app="workflow_attachments"]',
|
||||
);
|
||||
|
||||
attachments.forEach(async (el) => {
|
||||
const workflowId = parseInt(el.dataset.entityWorkflowId || "");
|
||||
const accompanyingPeriodId = parseInt(
|
||||
el.dataset.relatedAccompanyingPeriodId || "",
|
||||
);
|
||||
const attachments = await find_attachments_by_workflow(workflowId);
|
||||
|
||||
const app = createApp({
|
||||
template:
|
||||
'<app :workflowId="workflowId" :accompanyingPeriodId="accompanyingPeriodId" :attachments="attachments" @pickGenericDoc="onPickGenericDoc" @removeAttachment="onRemoveAttachment"></app>',
|
||||
components: { App },
|
||||
data: function () {
|
||||
return { workflowId, accompanyingPeriodId, attachments };
|
||||
},
|
||||
methods: {
|
||||
onRemoveAttachment: async function ({
|
||||
attachment,
|
||||
}: {
|
||||
attachment: WorkflowAttachment;
|
||||
}): Promise<void> {
|
||||
const index = this.$data.attachments.findIndex(
|
||||
(el: WorkflowAttachment) => el.id === attachment.id,
|
||||
);
|
||||
if (-1 === index) {
|
||||
console.warn(
|
||||
"this attachment is not associated with the workflow",
|
||||
attachment,
|
||||
);
|
||||
this.$toast.error(
|
||||
"This attachment is not associated with the workflow",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await delete_attachment(attachment);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.$toast.error("Error while removing element");
|
||||
throw error;
|
||||
}
|
||||
this.$data.attachments.splice(index, 1);
|
||||
this.$toast.success("Pièce jointe supprimée");
|
||||
},
|
||||
onPickGenericDoc: async function ({
|
||||
genericDoc,
|
||||
}: {
|
||||
genericDoc: GenericDocForAccompanyingPeriod;
|
||||
}): Promise<void> {
|
||||
console.log("picked generic doc", genericDoc);
|
||||
|
||||
// prevent to create double attachment:
|
||||
if (
|
||||
-1 !==
|
||||
this.$data.attachments.findIndex(
|
||||
(el: WorkflowAttachment) =>
|
||||
el.genericDoc?.key === genericDoc.key &&
|
||||
JSON.stringify(el.genericDoc?.identifiers) ==
|
||||
JSON.stringify(genericDoc.identifiers),
|
||||
)
|
||||
) {
|
||||
console.warn(
|
||||
"this document is already attached to the workflow",
|
||||
genericDoc,
|
||||
);
|
||||
this.$toast.error(
|
||||
"Ce document est déjà attaché au workflow",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const attachment = await create_attachment(
|
||||
workflowId,
|
||||
genericDoc,
|
||||
);
|
||||
this.$data.attachments.push(attachment);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
const i18n = _createI18n({});
|
||||
app.use(i18n);
|
||||
app.use(ToastPlugin);
|
||||
|
||||
app.mount(el);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user