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>