Dav: add UI to edit document

src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts

@@ -17,18 +17,22 @@ window.addEventListener('DOMContentLoaded', function (e) {
            canEdit: string,
            storedObject: string,
            buttonSmall: string,
+           davLink: string,
+           davLinkExpiration: string,
          };
 
          const
            storedObject = JSON.parse(datasets.storedObject) as StoredObject,
            filename = datasets.filename,
            canEdit = datasets.canEdit === '1',
-           small = datasets.buttonSmall === '1'
+           small = datasets.buttonSmall === '1',
+           davLink = 'davLink' in datasets && datasets.davLink !== '' ? datasets.davLink : null,
+           davLinkExpiration = 'davLinkExpiration' in datasets  ? Number.parseInt(datasets.davLinkExpiration) : null
            ;
 
-         return { storedObject, filename, canEdit, small };
+         return { storedObject, filename, canEdit, small, davLink, davLinkExpiration };
        },
-       template: '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
+       template: '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
        methods: {
          onStoredObjectStatusChange: function(newStatus: StoredObjectStatusChange): void {
            this.$data.storedObject.status = newStatus.status;

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue

@@ -7,6 +7,9 @@
       <li v-if="props.canEdit && is_extension_editable(props.storedObject.type)">
         <wopi-edit-button :stored-object="props.storedObject" :classes="{'dropdown-item': true}" :execute-before-leave="props.executeBeforeLeave"></wopi-edit-button>
       </li>
+      <li v-if="props.canEdit && is_extension_editable(props.storedObject.type) && props.davLink !== undefined && props.davLinkExpiration !== undefined">
+        <desktop-edit-button :classes="{'dropdown-item': true}" :edit-link="props.davLink" :expiration-link="props.davLinkExpiration"></desktop-edit-button>
+      </li>
       <li v-if="props.storedObject.type != 'application/pdf' && is_extension_viewable(props.storedObject.type) && props.canConvertPdf">
         <convert-button :stored-object="props.storedObject" :filename="filename" :classes="{'dropdown-item': true}"></convert-button>
       </li>
@@ -36,6 +39,7 @@ import {
   StoredObjectStatusChange,
   WopiEditButtonExecutableBeforeLeaveFunction
 } from "../types";
+import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";
 
 interface DocumentActionButtonsGroupConfig {
   storedObject: StoredObject,
@@ -57,6 +61,16 @@ interface DocumentActionButtonsGroupConfig {
    * If set, will execute this function before leaving to the editor
    */
   executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction,
+
+  /**
+   * a link to download and edit file using webdav
+   */
+  davLink?: string,
+
+  /**
+   * the expiration date of the download, as a unix timestamp
+   */
+  davLinkExpiration?: number,
 }
 
 const emit = defineEmits<{
@@ -68,7 +82,7 @@ const props = withDefaults(defineProps<DocumentActionButtonsGroupConfig>(), {
   canEdit: true,
   canDownload: true,
   canConvertPdf: true,
-  returnPath: window.location.pathname + window.location.search + window.location.hash,
+  returnPath: window.location.pathname + window.location.search + window.location.hash
 });
 
 /**

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>