fonction Copier/coller

resources/js/components/ScheduleComponent.vue

@@ -38,7 +38,14 @@
                                 {{user[key][day.key]['text']}}
                                 <button class="btn btn-edit" type="button" data-bs-toggle="modal"
                                 data-bs-target="#editModal" @click="setModalData(index,key,day.key,user[key][day.key]['id'])">✎</button>
-                                <button v-if="user[key][day.key]['id']" class="btn btn-clear" @click="eraseCell(index,key,day.key,user[key][day.key]['id'])">⌫</button>
+                                <button :class="'btn btn-paste '+(!clipBoard.set ? 'hide' : '') " type="button"
+                                @click="pasteCell(index,key,day.key,user[key][day.key]['id'])">📋</button>
+                                <button class="btn btn-copy" type="button"
+                                @click="copyCell(index,key,day.key,user[key][day.key]['id'])">
+                                <span style="font-size: .875em; margin-right: .125em; position: relative; top: -.25em; left: -.125em">
+                                    📄<span style="position: absolute; top: .25em; left: .25em">📄</span>
+                                </span></button>
+                                <button :class="'btn btn-clear '+(!user[key][day.key]['id'] ? 'hide' : '')" @click="eraseCell(index,key,day.key,user[key][day.key]['id'])">⌫</button>
                             </td>
                         </tr>
                     </template>
@@ -135,6 +142,7 @@
 </template>
 
 <script>
+import Toastify from 'toastify-js'
 export default {
     props: {
         dbSchedules: {
@@ -164,6 +172,7 @@ export default {
         }
     },
     mounted() {
+        window.Toastify = Toastify
         this.currentDate = JSON.parse(this.browseDate);
         this.weeksCells = JSON.parse(this.weeks);
         this.numweeks = this.weeksCells.length;
@@ -233,7 +242,24 @@ export default {
                     "value":""
                 },
                 "id":null
-            }
+            },
+            clipBoard: {
+                "set": false,
+                "type": {
+                    "label":"",
+                    "value":""
+                },
+                "text":"",
+                "id_lie": {
+                    "label":"",
+                    "value":""
+                },
+                "model_lie": {
+                    "label":"",
+                    "value":""
+                },
+                "id":null
+            },
         };
     },
     watch: {
@@ -257,6 +283,21 @@ export default {
         }
     },
     methods: {
+        sendToast(message) {
+            Toastify({
+                text: message,
+                duration: 3000,
+                gravity: "top",
+                position: "right",
+                offset: {
+                    x: '2rem',
+                    y: '3rem'
+                },
+                style: {
+                    background: "linear-gradient(to right, #00317d, #0058ca)",
+                }
+            }).showToast();
+        },
         goToPlanning(forward) {
 //            console.log(forward);
             let date = this.moment(this.currentDate).startOf('week').subtract(7, 'day');
@@ -406,6 +447,55 @@ export default {
                 this.value = this.schedules[userid][slotkey][day]['id_lie'];
             })
         },
+        pasteCell(userid,slotkey,day,id) {
+            //this.eraseCell(userid,slotkey,day,id)
+            const data = {
+                'id': id,
+                'user_id': userid,
+                'date': day,
+                'activity': this.clipBoard.activity.value,
+                'slot': slotkey,
+                'model_lie': this.clipBoard.model_lie.value,
+                'id_lie': this.clipBoard.id_lie.value,
+                'description': this.clipBoard.description,
+            }
+            this.saveCellOnServer(data)
+            this.clearClipBoard()
+            this.sendToast('Cellule collée')
+        },
+        clearClipBoard() {
+            this.clipBoard = {
+                "set": false,
+                "type": {
+                    "label":"",
+                    "value":""
+                },
+                "text":"",
+                "id_lie": {
+                    "label":"",
+                    "value":""
+                },
+                "model_lie": {
+                    "label":"",
+                    "value":""
+                },
+                "id":null
+            }
+        },
+        copyCell(userid,slotkey,day,id) {
+            this.clipBoard = {
+                'set' : true,
+                'id': id,
+                'user_id': userid,
+                'date': day,
+                'activity': this.schedules[userid][slotkey][day].type,
+                'slot': slotkey,
+                'model_lie': this.schedules[userid][slotkey][day].model_lie,
+                'id_lie': this.schedules[userid][slotkey][day].id_lie,
+                'description': this.schedules[userid][slotkey][day].text,
+            }
+            this.sendToast('Cellule copiée')
+        },
         setSelected(value) {
             this.modale.id_lie = value;
         },