mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-24 04:47:46 +00:00
Ajout de commentaires supplémentaires aux motifs
This commit is contained in:
@@ -1,208 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
import { StoredObject, StoredObjectVersionCreated } from "../../types";
|
||||
import {
|
||||
encryptFile,
|
||||
fetchNewStoredObject,
|
||||
uploadVersion,
|
||||
encryptFile,
|
||||
fetchNewStoredObject,
|
||||
uploadVersion,
|
||||
} from "../../js/async-upload/uploader";
|
||||
import { computed, ref, Ref } from "vue";
|
||||
import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
|
||||
|
||||
interface DropFileConfig {
|
||||
existingDoc?: StoredObject;
|
||||
existingDoc?: StoredObject;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DropFileConfig>(), {
|
||||
existingDoc: null,
|
||||
existingDoc: null,
|
||||
});
|
||||
|
||||
const emit =
|
||||
defineEmits<
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object_version: StoredObjectVersionCreated,
|
||||
stored_object: StoredObject,
|
||||
file_name: string,
|
||||
},
|
||||
) => void
|
||||
>();
|
||||
defineEmits<
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object_version: StoredObjectVersionCreated,
|
||||
stored_object: StoredObject,
|
||||
file_name: string,
|
||||
},
|
||||
) => void
|
||||
>();
|
||||
|
||||
const is_dragging: Ref<boolean> = ref(false);
|
||||
const uploading: Ref<boolean> = ref(false);
|
||||
const display_filename: Ref<string | null> = ref(null);
|
||||
|
||||
const has_existing_doc = computed<boolean>(() => {
|
||||
return props.existingDoc !== undefined && props.existingDoc !== null;
|
||||
return props.existingDoc !== undefined && props.existingDoc !== null;
|
||||
});
|
||||
|
||||
const onDragOver = (e: Event) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
is_dragging.value = true;
|
||||
is_dragging.value = true;
|
||||
};
|
||||
|
||||
const onDragLeave = (e: Event) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
is_dragging.value = false;
|
||||
is_dragging.value = false;
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
const files = e.dataTransfer?.files;
|
||||
const files = e.dataTransfer?.files;
|
||||
|
||||
if (null === files || undefined === files) {
|
||||
console.error("no files transferred", e.dataTransfer);
|
||||
return;
|
||||
}
|
||||
if (files.length === 0) {
|
||||
console.error("no files given");
|
||||
return;
|
||||
}
|
||||
if (null === files || undefined === files) {
|
||||
console.error("no files transferred", e.dataTransfer);
|
||||
return;
|
||||
}
|
||||
if (files.length === 0) {
|
||||
console.error("no files given");
|
||||
return;
|
||||
}
|
||||
|
||||
handleFile(files[0]);
|
||||
handleFile(files[0]);
|
||||
};
|
||||
|
||||
const onZoneClick = (e: Event) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.addEventListener("change", onFileChange);
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.addEventListener("change", onFileChange);
|
||||
|
||||
input.click();
|
||||
input.click();
|
||||
};
|
||||
|
||||
const onFileChange = async (event: Event): Promise<void> => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const input = event.target as HTMLInputElement;
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
console.log("file added", input.files[0]);
|
||||
const file = input.files[0];
|
||||
await handleFile(file);
|
||||
if (input.files && input.files[0]) {
|
||||
console.log("file added", input.files[0]);
|
||||
const file = input.files[0];
|
||||
await handleFile(file);
|
||||
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
throw "No file given";
|
||||
throw "No file given";
|
||||
};
|
||||
|
||||
const handleFile = async (file: File): Promise<void> => {
|
||||
uploading.value = true;
|
||||
display_filename.value = file.name;
|
||||
const type = file.type;
|
||||
uploading.value = true;
|
||||
display_filename.value = file.name;
|
||||
const type = file.type;
|
||||
|
||||
// create a stored_object if not exists
|
||||
let stored_object;
|
||||
if (null === props.existingDoc) {
|
||||
stored_object = await fetchNewStoredObject();
|
||||
} else {
|
||||
stored_object = props.existingDoc;
|
||||
}
|
||||
// create a stored_object if not exists
|
||||
let stored_object;
|
||||
if (null === props.existingDoc) {
|
||||
stored_object = await fetchNewStoredObject();
|
||||
} else {
|
||||
stored_object = props.existingDoc;
|
||||
}
|
||||
|
||||
const buffer = await file.arrayBuffer();
|
||||
const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
|
||||
const filename = await uploadVersion(encrypted, stored_object);
|
||||
const buffer = await file.arrayBuffer();
|
||||
const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
|
||||
const filename = await uploadVersion(encrypted, stored_object);
|
||||
|
||||
const stored_object_version: StoredObjectVersionCreated = {
|
||||
filename: filename,
|
||||
iv: Array.from(iv),
|
||||
keyInfos: jsonWebKey,
|
||||
type: type,
|
||||
persisted: false,
|
||||
};
|
||||
const stored_object_version: StoredObjectVersionCreated = {
|
||||
filename: filename,
|
||||
iv: Array.from(iv),
|
||||
keyInfos: jsonWebKey,
|
||||
type: type,
|
||||
persisted: false,
|
||||
};
|
||||
|
||||
const fileName = file.name;
|
||||
let file_name = "Nouveau document";
|
||||
const file_name_split = fileName.split(".");
|
||||
if (file_name_split.length > 1) {
|
||||
const extension = file_name_split
|
||||
? file_name_split[file_name_split.length - 1]
|
||||
: "";
|
||||
file_name = fileName.replace(extension, "").slice(0, -1);
|
||||
}
|
||||
const fileName = file.name;
|
||||
let file_name = "Nouveau document";
|
||||
const file_name_split = fileName.split(".");
|
||||
if (file_name_split.length > 1) {
|
||||
const extension = file_name_split
|
||||
? file_name_split[file_name_split.length - 1]
|
||||
: "";
|
||||
file_name = fileName.replace(extension, "").slice(0, -1);
|
||||
}
|
||||
|
||||
emit("addDocument", {
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name: file_name,
|
||||
});
|
||||
uploading.value = false;
|
||||
emit("addDocument", {
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name: file_name,
|
||||
});
|
||||
uploading.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="drop-file">
|
||||
<div
|
||||
v-if="!uploading"
|
||||
:class="{ area: true, dragging: is_dragging }"
|
||||
@click="onZoneClick"
|
||||
@dragover="onDragOver"
|
||||
@dragleave="onDragLeave"
|
||||
@drop="onDrop"
|
||||
>
|
||||
<p v-if="has_existing_doc" class="file-icon">
|
||||
<file-icon :type="props.existingDoc?.type"></file-icon>
|
||||
</p>
|
||||
<div class="drop-file">
|
||||
<div
|
||||
v-if="!uploading"
|
||||
:class="{ area: true, dragging: is_dragging }"
|
||||
@click="onZoneClick"
|
||||
@dragover="onDragOver"
|
||||
@dragleave="onDragLeave"
|
||||
@drop="onDrop"
|
||||
>
|
||||
<p v-if="has_existing_doc" class="file-icon">
|
||||
<file-icon :type="props.existingDoc?.type"></file-icon>
|
||||
</p>
|
||||
|
||||
<p v-if="display_filename !== null" class="display-filename">
|
||||
{{ display_filename }}
|
||||
</p>
|
||||
<!-- todo i18n -->
|
||||
<p v-if="has_existing_doc">
|
||||
Déposez un document ou cliquez ici pour remplacer le document
|
||||
existant
|
||||
</p>
|
||||
<p v-else>
|
||||
Déposez un document ou cliquez ici pour ouvrir le navigateur de
|
||||
fichier
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="waiting">
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<p v-if="display_filename !== null" class="display-filename">
|
||||
{{ display_filename }}
|
||||
</p>
|
||||
<!-- todo i18n -->
|
||||
<p v-if="has_existing_doc">
|
||||
Déposez un document ou cliquez ici pour remplacer le document existant
|
||||
</p>
|
||||
<p v-else>
|
||||
Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="waiting">
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drop-file {
|
||||
width: 100%;
|
||||
|
||||
.file-icon {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.display-filename {
|
||||
font-variant: small-caps;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
& > .area,
|
||||
& > .waiting {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
|
||||
.file-icon {
|
||||
font-size: xx-large;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
// require for display in DropFileModal
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.display-filename {
|
||||
font-variant: small-caps;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
& > .area,
|
||||
& > .waiting {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
// require for display in DropFileModal
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > .area {
|
||||
border: 4px dashed #ccc;
|
||||
|
||||
&.dragging {
|
||||
border: 4px dashed blue;
|
||||
}
|
||||
& > .area {
|
||||
border: 4px dashed #ccc;
|
||||
|
||||
&.dragging {
|
||||
border: 4px dashed blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,24 +6,24 @@ import { computed, reactive } from "vue";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
|
||||
interface DropFileConfig {
|
||||
allowRemove: boolean;
|
||||
existingDoc?: StoredObject;
|
||||
allowRemove: boolean;
|
||||
existingDoc?: StoredObject;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DropFileConfig>(), {
|
||||
allowRemove: false,
|
||||
allowRemove: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object: StoredObject,
|
||||
stored_object_version: StoredObjectVersion,
|
||||
file_name: string,
|
||||
},
|
||||
): void;
|
||||
(e: "removeDocument"): void;
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object: StoredObject,
|
||||
stored_object_version: StoredObjectVersion,
|
||||
file_name: string,
|
||||
},
|
||||
): void;
|
||||
(e: "removeDocument"): void;
|
||||
}>();
|
||||
|
||||
const $toast = useToast();
|
||||
@@ -33,67 +33,67 @@ const state = reactive({ showModal: false });
|
||||
const modalClasses = { "modal-dialog-centered": true, "modal-md": true };
|
||||
|
||||
const buttonState = computed<"add" | "replace">(() => {
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return "add";
|
||||
}
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return "add";
|
||||
}
|
||||
|
||||
return "replace";
|
||||
return "replace";
|
||||
});
|
||||
|
||||
function onAddDocument({
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name,
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name,
|
||||
}: {
|
||||
stored_object: StoredObject;
|
||||
stored_object_version: StoredObjectVersion;
|
||||
file_name: string;
|
||||
stored_object: StoredObject;
|
||||
stored_object_version: StoredObjectVersion;
|
||||
file_name: string;
|
||||
}): void {
|
||||
const message =
|
||||
buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
|
||||
$toast.success(message);
|
||||
emit("addDocument", { stored_object_version, stored_object, file_name });
|
||||
state.showModal = false;
|
||||
const message =
|
||||
buttonState.value === "add" ? "Document ajouté" : "Document remplacé";
|
||||
$toast.success(message);
|
||||
emit("addDocument", { stored_object_version, stored_object, file_name });
|
||||
state.showModal = false;
|
||||
}
|
||||
|
||||
function onRemoveDocument(): void {
|
||||
emit("removeDocument");
|
||||
emit("removeDocument");
|
||||
}
|
||||
|
||||
function openModal(): void {
|
||||
state.showModal = true;
|
||||
state.showModal = true;
|
||||
}
|
||||
|
||||
function closeModal(): void {
|
||||
state.showModal = false;
|
||||
state.showModal = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="buttonState === 'add'"
|
||||
@click="openModal"
|
||||
class="btn btn-create"
|
||||
>
|
||||
Ajouter un document
|
||||
</button>
|
||||
<button v-else @click="openModal" class="btn btn-edit">
|
||||
Remplacer le document
|
||||
</button>
|
||||
<modal
|
||||
v-if="state.showModal"
|
||||
:modal-dialog-class="modalClasses"
|
||||
@close="closeModal"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<drop-file-widget
|
||||
:existing-doc="existingDoc"
|
||||
:allow-remove="allowRemove"
|
||||
@add-document="onAddDocument"
|
||||
@remove-document="onRemoveDocument"
|
||||
></drop-file-widget>
|
||||
</template>
|
||||
</modal>
|
||||
<button
|
||||
v-if="buttonState === 'add'"
|
||||
@click="openModal"
|
||||
class="btn btn-create"
|
||||
>
|
||||
Ajouter un document
|
||||
</button>
|
||||
<button v-else @click="openModal" class="btn btn-edit">
|
||||
Remplacer le document
|
||||
</button>
|
||||
<modal
|
||||
v-if="state.showModal"
|
||||
:modal-dialog-class="modalClasses"
|
||||
@close="closeModal"
|
||||
>
|
||||
<template v-slot:body>
|
||||
<drop-file-widget
|
||||
:existing-doc="existingDoc"
|
||||
:allow-remove="allowRemove"
|
||||
@add-document="onAddDocument"
|
||||
@remove-document="onRemoveDocument"
|
||||
></drop-file-widget>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -5,97 +5,97 @@ import DropFile from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFile.vue";
|
||||
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
|
||||
|
||||
interface DropFileConfig {
|
||||
allowRemove: boolean;
|
||||
existingDoc?: StoredObject;
|
||||
allowRemove: boolean;
|
||||
existingDoc?: StoredObject;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DropFileConfig>(), {
|
||||
allowRemove: false,
|
||||
allowRemove: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object: StoredObject,
|
||||
stored_object_version: StoredObjectVersion,
|
||||
file_name: string,
|
||||
},
|
||||
): void;
|
||||
(e: "removeDocument"): void;
|
||||
(
|
||||
e: "addDocument",
|
||||
{
|
||||
stored_object: StoredObject,
|
||||
stored_object_version: StoredObjectVersion,
|
||||
file_name: string,
|
||||
},
|
||||
): void;
|
||||
(e: "removeDocument"): void;
|
||||
}>();
|
||||
|
||||
const has_existing_doc = computed<boolean>(() => {
|
||||
return props.existingDoc !== undefined && props.existingDoc !== null;
|
||||
return props.existingDoc !== undefined && props.existingDoc !== null;
|
||||
});
|
||||
|
||||
const dav_link_expiration = computed<number | undefined>(() => {
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc.status !== "ready") {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc.status !== "ready") {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return props.existingDoc._links?.dav_link?.expiration;
|
||||
return props.existingDoc._links?.dav_link?.expiration;
|
||||
});
|
||||
|
||||
const dav_link_href = computed<string | undefined>(() => {
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc.status !== "ready") {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc === undefined || props.existingDoc === null) {
|
||||
return undefined;
|
||||
}
|
||||
if (props.existingDoc.status !== "ready") {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return props.existingDoc._links?.dav_link?.href;
|
||||
return props.existingDoc._links?.dav_link?.href;
|
||||
});
|
||||
|
||||
const onAddDocument = ({
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name,
|
||||
stored_object,
|
||||
stored_object_version,
|
||||
file_name,
|
||||
}: {
|
||||
stored_object: StoredObject;
|
||||
stored_object_version: StoredObjectVersion;
|
||||
file_name: string;
|
||||
stored_object: StoredObject;
|
||||
stored_object_version: StoredObjectVersion;
|
||||
file_name: string;
|
||||
}): void => {
|
||||
emit("addDocument", { stored_object, stored_object_version, file_name });
|
||||
emit("addDocument", { stored_object, stored_object_version, file_name });
|
||||
};
|
||||
|
||||
const onRemoveDocument = (e: Event): void => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
emit("removeDocument");
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
emit("removeDocument");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<drop-file
|
||||
:existingDoc="props.existingDoc"
|
||||
@addDocument="onAddDocument"
|
||||
></drop-file>
|
||||
<div>
|
||||
<drop-file
|
||||
:existingDoc="props.existingDoc"
|
||||
@addDocument="onAddDocument"
|
||||
></drop-file>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li v-if="has_existing_doc">
|
||||
<document-action-buttons-group
|
||||
:stored-object="props.existingDoc"
|
||||
:can-edit="props.existingDoc?.status === 'ready'"
|
||||
:can-download="true"
|
||||
:dav-link="dav_link_href"
|
||||
:dav-link-expiration="dav_link_expiration"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
v-if="allowRemove"
|
||||
class="btn btn-delete"
|
||||
@click="onRemoveDocument($event)"
|
||||
></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="record_actions">
|
||||
<li v-if="has_existing_doc">
|
||||
<document-action-buttons-group
|
||||
:stored-object="props.existingDoc"
|
||||
:can-edit="props.existingDoc?.status === 'ready'"
|
||||
:can-download="true"
|
||||
:dav-link="dav_link_href"
|
||||
:dav-link-expiration="dav_link_expiration"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
v-if="allowRemove"
|
||||
class="btn btn-delete"
|
||||
@click="onRemoveDocument($event)"
|
||||
></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
Reference in New Issue
Block a user