Merge pull request #149 from PrestaSafe/fix-multishop-settings

Fix multishop settings

_dev/.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 # vite config
 # vite.config.js
+yaml/

_dev/public/iframe.css

@@ -4,6 +4,11 @@
     border-radius: 8px;
     border-width: 4px;
     position: relative;
+  }
+
+[data-prettyblocks-zone].border-dotted{
+
+    border-color: rgb(225, 212, 68);
 }
 
 
@@ -100,4 +105,25 @@
     border: 0;
     border-radius: 4px;
   }
-
+
+[data-prettyblocks-zone].ondrag{
+  background-color: #646cff;
+  border: 1px solid #646cff;
+  padding: 20px;
+
+}
+
+  [data-block]:active {
+    background-color: grey;
+    height: 20px;
+    position: relative;
+  }
+
+  [data-block]:active::after {
+    content: attr(data-id-prettyblocks);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+  }

_dev/src/components/Iframe.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, defineProps, ref, defineComponent } from 'vue'
+import { onMounted, onUnmounted, defineProps, ref, defineComponent, computed, watch } from 'vue'
 import emitter from 'tiny-emitter/instance'
 import Loader from './Loader.vue'
 import Button from './Button.vue'
@@ -47,27 +47,48 @@ emitter.on('reloadIframe', async (id_prettyblocks) => {
   iframe.reloadIframe()
 })
 
-emitter.on('changeUrl', (shop) => {
-  iframe.destroy()
-  iframe = new Iframe(shop.current_url, shop.id_lang, shop.id_shop)
+emitter.on('highLightBlock', (id_prettyblocks) => {
+  iframe.sendPrettyBlocksEvents('selectBlock', { id_prettyblocks: id_prettyblocks })
+})
+
+/**
+ * Change url with loader in iframe.
+ */
+emitter.on('changeUrl', (shop, custom_url = null) => {  
+  if(custom_url == null)
+  {
+    iframe.setUrl(shop.current_url)
+  }else{
+    iframe.setUrl(custom_url)
+  }
+
+  iframe.setIdLang(shop.id_lang)
+  iframe.setIdShop(shop.id_shop)
+  iframe.constructEvent()
   iframe.reloadIframe()
 })
 
 
+
+let showLoader = computed(() => {
+  return iframe.loader.value
+})
+
+ watch(iframe.loader);
+
 </script>
 
 <template>
   <!-- animate-pulse classe to put -->
   <section class="w-full h-full">
-    <!-- <button @click="reloadIframe()"> reload iframe </button> -->
-    <!-- {{ iframe.loader }} -->
-    <Loader :visible="iframe.loader.value" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-      Chargement en cours</Loader>
+    <!-- <button @click="reloadIframe()"> reload iframe </button> {{ showLoader }} -->
     <!-- {{ classes }} -->
 
     <iframe id="website-iframe" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-      :class="[height, width]" class="border-none h-full mx-auto rounded" :src="iframe.current_url.value"
+      :class="[height, width, showLoader ? 'opacity-50' : '']" class="border-none h-full mx-auto rounded" :src="iframe.current_url.value"
       frameborder="0"></iframe>
+    <Loader :visible="showLoader" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+      Chargement en cours</Loader>
   </section>
 </template>
 

_dev/src/components/LeftPanel.vue

@@ -1,23 +1,30 @@
 <script setup>
-import { ref, onMounted, defineComponent } from "vue";
+import { ref, onMounted, defineComponent,onBeforeUnmount, computed, watchEffect, watch } from "vue";
 import SortableList from "./SortableList.vue";
 import MenuGroup from "./MenuGroup.vue";
 import MenuItem from "./MenuItem.vue";
 import ButtonLight from "./ButtonLight.vue";
+import Button from "./Button.vue";
 import { HttpClient } from "../services/HttpClient";
 import Block from "../scripts/block";
 import ZoneSelect from "./form/ZoneSelect.vue";
 /* Demo data */
 // import { v4 as uuidv4 } from 'uuid'
 import emitter from "tiny-emitter/instance";
-import { useStore, currentZone, contextShop } from "../store/currentBlock";
+import { useStore, currentZone, contextShop, storedBlocks } from "../store/currentBlock";
 import { trans } from "../scripts/trans";
 
+import { createToaster } from "@meforma/vue-toaster";
+const toaster = createToaster({
+  position: "top",
+});
+
 defineComponent({
   SortableList,
   MenuGroup,
   MenuItem,
   ButtonLight,
+  Button,
   ZoneSelect,
 });
 const prettyblocks_version = ref(security_app.prettyblocks_version);
@@ -30,6 +37,7 @@ const loadStateConfig = async (e) => {
     id_prettyblocks: e.id_prettyblocks,
     // instance_id: e.instance_id
   });
+
   emitter.emit("displayBlockConfig", e);
 };
 // emitter.on('loadStateConfig', async (id_prettyblocks) => {
@@ -62,10 +70,9 @@ emitter.on("initStates", () => {
 });
 const initStates = async () => {
   let contextStore = contextShop();
-  // Attendez que l'action asynchrone getContext soit terminée
   let context = await contextStore.getContext();
-
   let current_zone = currentZone().name;
+  let piniaStored = storedBlocks();
   displayZoneName.value = current_zone;
   const params = {
     ajax: true,
@@ -81,6 +88,10 @@ const initStates = async () => {
       groups.value = Object.entries(data.blocks).map(([key, value] = block) => {
         return value.formatted;
       });
+
+      piniaStored.$patch({
+        blocks: data.blocks,
+      });
     })
     .catch((error) => console.error(error));
 };
@@ -116,14 +127,125 @@ let currentBlock = useStore();
 const state = ref({
   name: "displayHome",
 });
+
+/**
+  * Copy current zone
+  */
+const copyZone = async () => {
+  let contextStore = contextShop();
+  let context = await contextStore.getContext();
+  let current_zone = currentZone().name;
+  const params = {
+    action: "CopyZone",
+    zone: current_zone,
+    ctx_id_lang: context.id_lang,
+    ctx_id_shop: context.id_shop,
+  };
+  navigator.clipboard.writeText(JSON.stringify(params)).then(function() {
+    console.log('Copying to clipboard was successful!' );
+   
+  }, function(err) {
+    console.error('Could not copy text: ', err);
+  });
+  checkClipboardContent()
+}
+
+/**
+ * Paste current zone
+ */
+const pasteZone = async () => {
+  let current_zone = currentZone().name;
+  const clipboardData = await navigator.clipboard.readText();
+  const data = JSON.parse(clipboardData);
+  if (data.hasOwnProperty('zone')) {
+    let params = {
+      ...data,
+      zone_name_to_paste: current_zone,
+      ajax_token: security_app.ajax_token,
+      ajax: true,
+    };
+    HttpClient.post(ajax_urls.state, params).then((response) => {
+
+            if (response.success) {
+              toaster.show(response.message)
+              emitter.emit('reloadIframe')
+              // clear clipboard if zone is pasted
+             navigator.clipboard.writeText('').then(function() {
+                checkClipboardContent()
+              }, function(err) {
+                console.error('Could not empty clipboard: ', err);
+                checkClipboardContent()
+              });
+            }
+      })
+      .catch(error => console.error(error));
+    }
+
+}
+
+let showCopyZone = ref(false);
+const checkClipboardContent = async () => {
+    try {
+        const clipboardData = await navigator.clipboard.readText();
+        const data = JSON.parse(clipboardData);
+        showCopyZone.value = data.hasOwnProperty('zone');
+        window.blur();
+    } catch (error) {
+        showCopyZone.value = false;
+    }
+};
+
+/**
+ * Delete all blocks in current zone
+ */
+const deleteAllBlocks = async () => {
+  if(confirm('Warning: This will delete all blocks in this zone. Are you sure?') == false) {
+    return;
+  }
+  let current_zone = currentZone().name;
+  let contextStore = contextShop();
+  let context = await contextStore.getContext();
+  const params = {
+    action: "DeleteAllBlocks",
+    zone: current_zone,
+    ajax_token: security_app.ajax_token,
+    ctx_id_lang: context.id_lang,
+    ctx_id_shop: context.id_shop,
+    ajax: true,
+  };
+  HttpClient.post(ajax_urls.state, params).then((response) => {
+
+          if (response.success) {
+            toaster.show(response.message)
+            emitter.emit('reloadIframe')
+          }
+    })
+    .catch(error => console.error(error));
+}
+
+
 </script>
 
 <template>
   <div id="leftPanel" class="border-r border-gray-200">
     <div class="flex flex-col h-full">
       <div class="p-2 border-b border-gray-200">
-        <ZoneSelect v-model="state" />
+        <div class="flex items-center space-around">
+          <div>
+            <ZoneSelect v-model="state" />
+          </div>
+          <div class="pl-2 mt-[6px]" v-if="!showCopyZone">
+            <ButtonLight type="secondary" icon="TrashIcon" @click="deleteAllBlocks" size="6"/>
+          </div>
+          <div class="mt-[6px]">
+            <ButtonLight type="secondary" icon="Square2StackIcon" @click="copyZone" size="6"/>
+          </div>
+          <div class="mt-[6px]" v-if="showCopyZone">
+            <ButtonLight type="secondary" icon="ArrowDownOnSquareStackIcon" @click="pasteZone" size="6"/>
+          </div>
+        </div>
       </div>
+
       <div class="overflow-y-auto flex-grow p-2 border-b border-gray-200">
         <!-- sortable component is used to sort by drag and drop -->
         <SortableList :items="groups" group="menu-group">

_dev/src/components/MenuItem.vue

@@ -60,24 +60,37 @@ const removeState = async () => {
 
 // when we select a element in list
 function select(instance) {
-  // set store current block name
+  setSelectedElement(props.id)
+}
+
+function setSelectedElement(notFormattedId) {
+  let id = notFormattedId
   store.$patch({
-    id_prettyblocks: parseInt(props.id.split('-')[0]),
-    subSelected: props.id
+    id_prettyblocks: parseInt(id.split('-')[0]),
+    subSelected: id
   })
-  //  emitter.emit('displayState', props.element.id_prettyblocks)
 }
 
+emitter.on('setSelectedElement', (notFormattedId) => setSelectedElement(notFormattedId))
+
 const isSelected = computed(() => props.id == store.subSelected)
 
 // when we click on the eye icon to disable element
 const disabled = ref(false)
+
+const highLightBlock = () => {
+  // on hover item, select it in iframe
+  // setTimeout(() => {
+  //   emitter.emit('highLightBlock', parseInt(props.id.split('-')[1]))
+    
+  // }, 500);
+}
 </script>
 
 <template>
   <div
     :class="['menu-item flex items-center px-2 py-1 mb-1 rounded-md hover:bg-gray-100 border-2 border-transparent cursor-pointer', { 'selected': isSelected }]"
-    @click="select">
+    @click="select" @mouseover="highLightBlock">
     <!-- this slot is used to add extra action on the left, for example the collapse icon -->
     <slot></slot>
     <!-- icon and name of item -->
@@ -113,4 +126,5 @@ const disabled = ref(false)
 .menu-item:hover>.menu-item-actions {
   @apply w-auto;
 }
-</style>
+
+</style>