From e0d84b1e8dd1a9cf6a92180a0fd222fdd3f58610 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 20 Nov 2024 15:57:07 +0100
Subject: [PATCH] virtual sample : create dynamic vue component

---
 src/components/project/DialogWrapper.vue      |   2 +-
 .../project/virtual-sample/Dynamic.vue        | 115 ++++++++++++++++++
 .../{ => virtual-sample}/VirtualSample.vue    | 114 +----------------
 3 files changed, 122 insertions(+), 109 deletions(-)
 create mode 100644 src/components/project/virtual-sample/Dynamic.vue
 rename src/components/project/{ => virtual-sample}/VirtualSample.vue (51%)

diff --git a/src/components/project/DialogWrapper.vue b/src/components/project/DialogWrapper.vue
index 61d2fdd..6aa633f 100644
--- a/src/components/project/DialogWrapper.vue
+++ b/src/components/project/DialogWrapper.vue
@@ -11,7 +11,7 @@
 <script setup>
 import PdfViewer from "./brief/PdfViewer.vue";
 import { useDialogStore } from "../../stores/dialog";
-import VirtualSample from "./VirtualSample.vue";
+import VirtualSample from "./virtual-sample/VirtualSample.vue";
 
 const dialog = useDialogStore();
 </script>
diff --git a/src/components/project/virtual-sample/Dynamic.vue b/src/components/project/virtual-sample/Dynamic.vue
new file mode 100644
index 0000000..aaedba8
--- /dev/null
+++ b/src/components/project/virtual-sample/Dynamic.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="dialog__inner">
+    <header class="flex">
+      <div class="options-selector">
+        <button
+          v-for="(track, index) in tracks"
+          class="btn btn--image"
+          :aria-pressed="activeTrack === track ? true : false"
+          :aria-controls="track.slug"
+          :style="`--btn-image: url(${track.files[7].url});`"
+          @click="
+            activeTrack = track;
+            currentX = 0;
+            currentY = 0;
+          "
+        >
+          <span>{{ track.title }}</span>
+        </button>
+      </div>
+      <button class="btn | ml-auto">
+        <span>Comparer les pistes</span>
+      </button>
+    </header>
+
+    <!--  -->
+    <div class="track-container">
+      <figure>
+        <img :src="currentFile.url" alt="" />
+      </figure>
+      <fieldset>
+        <button
+          class="btn btn--icon"
+          id="y-up"
+          @click="currentY++"
+          :disabled="currentY === yMax.length"
+          data-icon="chevron-single-left"
+          title="Pivoter vers le haut"
+        >
+          <span class="sr-only">Top</span>
+        </button>
+        <button
+          class="btn btn--icon"
+          id="x-down"
+          @click="rotateX('left')"
+          data-icon="chevron-single-left"
+          title="Pivoter vers la gauche"
+        >
+          <span class="sr-only">Left</span>
+        </button>
+        <button
+          class="btn btn--icon"
+          id="x-up"
+          @click="rotateX('right')"
+          data-icon="chevron-single-left"
+          title="Pivoter vers la droite"
+        >
+          <span class="sr-only">Right</span>
+        </button>
+        <button
+          class="btn btn--icon"
+          id="y-down"
+          @click="currentX === xMax ? xMax : currentX--"
+          :disabled="currentY === 0"
+          data-icon="chevron-single-left"
+          title="Pivoter vers le bas"
+        >
+          <span class="sr-only">Bottom</span>
+        </button>
+      </fieldset>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { usePageStore } from "../../../stores/page";
+
+const { page } = storeToRefs(usePageStore());
+
+const tracks = computed(
+  () => page.value.steps[page.value.steps.length - 1].files.dynamic
+);
+
+const activeTrack = ref(tracks.value[0]);
+const yMax = computed(() => {
+  return parseInt(
+    activeTrack.value.files[activeTrack.value.files.length - 1].name.charAt(0)
+  );
+});
+const xMax = computed(() => {
+  return parseInt(
+    activeTrack.value.files[activeTrack.value.files.length - 1].name
+      .split("_")[1]
+      .split(".")[0]
+  );
+});
+
+const currentX = ref(0);
+const currentY = ref(0);
+const currentFileIndex = computed(() => currentY.value + "_" + currentX.value);
+const currentFile = computed(() =>
+  activeTrack.value.files.find((file) =>
+    file.name.includes(currentFileIndex.value)
+  )
+);
+
+function rotateX(direction) {
+  if (direction == "left") {
+    currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1;
+  }
+  if (direction == "right") {
+    currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1;
+  }
+}
+</script>
diff --git a/src/components/project/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
similarity index 51%
rename from src/components/project/VirtualSample.vue
rename to src/components/project/virtual-sample/VirtualSample.vue
index 20932c4..bc82d9f 100644
--- a/src/components/project/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -24,76 +24,9 @@
       </div>
       <h2 class="font-serif text-lg">Titre du rendu</h2>
     </template>
-    <div class="dialog__inner">
-      <header class="flex">
-        <div class="options-selector">
-          <button
-            v-for="(track, index) in tracks"
-            class="btn btn--image"
-            :aria-pressed="activeTrack === track ? true : false"
-            :aria-controls="track.slug"
-            :style="`--btn-image: url(${track.files[7].url});`"
-            @click="
-              activeTrack = track;
-              currentX = 0;
-              currentY = 0;
-            "
-          >
-            <span>{{ track.title }}</span>
-          </button>
-        </div>
-        <button class="btn | ml-auto">
-          <span>Comparer les pistes</span>
-        </button>
-      </header>
 
-      <!--  -->
-      <div class="track-container">
-        <figure>
-          <img :src="currentFile.url" alt="" />
-        </figure>
-        <fieldset>
-          <button
-            class="btn btn--icon"
-            id="y-up"
-            @click="currentY++"
-            :disabled="currentY === yMax.length"
-            data-icon="chevron-single-left"
-            title="Pivoter vers le haut"
-          >
-            <span class="sr-only">Top</span>
-          </button>
-          <button
-            class="btn btn--icon" 
-            id="x-down" 
-            @click="rotateX('left')" 
-            data-icon="chevron-single-left"
-            title="Pivoter vers la gauche"
-          >
-            <span class="sr-only">Left</span>
-          </button>
-          <button
-            class="btn btn--icon"
-            id="x-up"
-            @click="rotateX('right')"
-            data-icon="chevron-single-left"
-            title="Pivoter vers la droite"
-          >
-            <span class="sr-only">Right</span>
-          </button>
-          <button
-            class="btn btn--icon" 
-            id="y-down" 
-            @click="currentX === xMax ? xMax : currentX--" 
-            :disabled="currentY === 0"
-            data-icon="chevron-single-left"
-            title="Pivoter vers le bas"
-          >
-            <span class="sr-only">Bottom</span>
-          </button>
-        </fieldset>
-      </div>
-    </div>
+    <Dynamic />
+
     <template #footer>
       <button
         id="download-image"
@@ -132,55 +65,20 @@
 <script setup>
 import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
+import Dynamic from "./Dynamic.vue";
 import { computed, ref } from "vue";
-import { usePageStore } from "../../stores/page";
-import { useDialogStore } from "../../stores/dialog";
+import { usePageStore } from "../../../stores/page";
+import { useDialogStore } from "../../../stores/dialog";
 
 const { file } = defineProps({
   file: Object,
 });
-const { page } = storeToRefs(usePageStore());
+
 const { comments } = storeToRefs(useDialogStore());
 
-const tracks = computed(
-  () => page.value.steps[page.value.steps.length - 1].files.dynamic
-);
-
-const activeTrack = ref(tracks.value[0]);
-const yMax = computed(() => {
-  return parseInt(
-    activeTrack.value.files[activeTrack.value.files.length - 1].name.charAt(0)
-  );
-});
-const xMax = computed(() => {
-  return parseInt(
-    activeTrack.value.files[activeTrack.value.files.length - 1].name
-      .split("_")[1]
-      .split(".")[0]
-  );
-});
-
-const currentX = ref(0);
-const currentY = ref(0);
-const currentFileIndex = computed(() => currentY.value + "_" + currentX.value);
-const currentFile = computed(() =>
-  activeTrack.value.files.find((file) =>
-    file.name.includes(currentFileIndex.value)
-  )
-);
-
 // Variables
 const isOpen = ref(true);
 const isCommentsOpen = ref(false);
-
-function rotateX(direction) {
-  if (direction == 'left') {
-    currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1
-  }
-  if (direction == 'right') {
-    currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1
-  }
-}
 </script>
 
 <style scoped>