changes, global search (clients, cleintCases)

2024-11-19 12:49:16 +01:00
parent c45751c1e2
commit 3ae70bf340
37 changed files with 1888 additions and 229 deletions
@@ -0,0 +1,135 @@
+<script setup>
+import { FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
+import draggable from 'vuedraggable';
+
+
+const props = defineProps({
+    list1: Array,
+    list2: Array
+});
+
+const item1 = {
+    id: 1,
+    name: 'Item 1'
+}
+
+const item2 = {
+    id: 2,
+    name: 'Item 2'
+}
+
+const item3 = {
+    id: 3,
+    name: 'Item 3'
+}
+
+const isDragging = ref(false);
+
+let containerOne = ref([item1, item2])
+let containerTwo = ref([item3])
+
+const dragOptions = computed(() => {
+    return {
+        animation: 200,
+        group: "actions",
+        disabled: false,
+        ghostClass: "ghost"
+    }
+});
+
+const removeAt = (idx, targeContainer) => {
+    targeContainer.splice(idx, 1);
+};
+
+watch(
+    () => containerOne.value,
+    (value) => {
+        console.log(value)
+    },
+    { deep: true }
+);
+
+</script>
+<template>
+    <div class="grid grid-cols-4 gap-4">
+        <draggable 
+            class="list-group"
+            :list="containerOne" 
+            item-key="id"
+            :component-data="{
+                tag: 'ul',
+                type: 'transition-group',
+                name: !isDragging ? 'flip-list' : null
+            }"
+            v-bind="dragOptions"
+            @start="isDragging = true"
+            @end="isDragging = false"
+            group="actions"
+        >
+            <template #item="{element, index}">
+                <fwb-list-group-item class="flex justify-between">
+                    <span class="text">{{ element.name }} </span>
+                    
+                    <i class=" cursor-pointer" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+                    </svg></i>
+                </fwb-list-group-item>
+            </template>
+        </draggable>
+        <draggable 
+            class="list-group"
+            :list="containerTwo"
+            :component-data="{
+                tag: 'ul',
+                type: 'transition-group',
+                name: !isDragging ? 'flip-list' : null
+            }"
+            item-key="id"
+            v-bind="dragOptions"
+            @start="isDragging = true"
+            @end="isDragging = false"
+            group="actions"
+        >
+            <template #item="{element, index}">
+                <fwb-list-group-item class="flex justify-between">
+                    <span class="text">{{ element.name }} </span>
+
+                    <i class="cursor-pointer" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+                    </svg></i>
+                </fwb-list-group-item>
+            </template>
+        </draggable>
+    </div>
+</template>
+<style lang="css">
+.button {
+  margin-top: 35px;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.list-group {
+  min-height: 20px;
+}
+
+.list-group-item {
+  cursor: move;
+}
+
+.list-group-item i {
+  cursor: pointer;
+}
+</style>
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue';
+
+const item1 = {
+  id: 1,
+  text: 'Item 1'
+};
+const item2 = {
+  id: 2,
+  text: 'Item 2'
+};
+
+let containerOne = ref([item1, item2])
+let containerTwo = ref([])
+
+const handleDragStart = (event, container, itemData) => {
+  event.dataTransfer.setData('application/json', JSON.stringify(itemData));
+  
+};
+
+const handleDrop = (event, targetContainer) => {
+  const itemData = JSON.parse(event.dataTransfer.getData('application/json'));
+  if (targetContainer === containerOne.value) {
+    containerTwo.value = containerTwo.value.filter(i => i.id !== itemData.id);
+  } else if (targetContainer === containerTwo.value) {
+    containerOne.value = containerOne.value.filter(i => i.id !== itemData.id);
+  }
+  targetContainer.push(itemData);
+};
+</script>
+
+<template>
+ <div class="drag-drop-container">
+    <div class="container-one"
+         v-on:dragover.prevent
+         v-on:drop="handleDrop($event, containerOne)">
+      <div class="item"
+           v-for="item in containerOne"
+           :key="item.id"
+           draggable="true"
+           v-on:dragstart="handleDragStart($event, containerOne, item)">
+        {{ item.text }}
+      </div>
+    </div>
+
+    <div class="container-two"
+         v-on:dragover.prevent
+         v-on:drop="handleDrop($event, containerTwo)">
+      <div class="item"
+           v-for="item in containerTwo"
+           :key="item.id"
+           draggable="true"
+           v-on:dragstart="handleDragStart($event, containerTwo, item)">
+        {{ item.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.drag-drop-container {
+  display: flex;
+}
+
+.container-one, .container-two {
+  border: 1px solid #1a1a1a;
+  width: 600px;
+  height: 800px;
+  padding: 10px;
+}
+
+.item {
+  padding: 10px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+  width: 90%;
+}
+</style>