Dav: add UI to edit document

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+import {computed, reactive} from "vue";
+
+export interface DesktopEditButtonConfig {
+    editLink: null,
+    classes: { [k: string]: boolean },
+    expirationLink: number|Date,
+}
+
+interface DesktopEditButtonState {
+    modalOpened: boolean
+};
+
+const state: DesktopEditButtonState = reactive({modalOpened: false});
+
+const props = defineProps<DesktopEditButtonConfig>();
+
+const buildCommand = computed<string>(() => 'vnd.libreoffice.command:ofe|u|' + props.editLink);
+
+const editionUntilFormatted = computed<string>(() => {
+    let d;
+
+    if (props.expirationLink instanceof Date) {
+        d = props.expirationLink;
+    } else {
+        d = new Date(props.expirationLink * 1000);
+    }
+    console.log(props.expirationLink);
+
+    return (new Intl.DateTimeFormat(undefined, {'dateStyle': 'long', 'timeStyle': 'medium'})).format(d);
+});
+
+</script>
+
+<template>
+    <teleport to="body">
+        <modal v-if="state.modalOpened" @close="state.modalOpened=false">
+            <template v-slot:body>
+                <div class="desktop-edit">
+                    <p class="center">Veuillez enregistrer vos modifications avant le</p>
+                    <p><strong>{{ editionUntilFormatted }}</strong></p>
+
+                    <p><a class="btn btn-primary" :href="buildCommand">Ouvrir le document pour édition</a></p>
+
+                    <p><small>Le document peut être édité uniquement en utilisant Libre Office.</small></p>
+
+                    <p><small>En cas d'échec lors de l'enregistrement, sauver le document sur le poste de travail avant de le déposer à nouveau ici.</small></p>
+
+                    <p><small>Vous pouvez naviguez sur d'autres pages pendant l'édition.</small></p>
+                </div>
+            </template>
+        </modal>
+    </teleport>
+    <a :class="props.classes" @click="state.modalOpened = true">
+        <i class="fa fa-desktop"></i>
+        Éditer sur le bureau
+    </a>
+</template>
+
+<style scoped lang="scss">
+.desktop-edit {
+    text-align: center;
+}
+</style>