# ---
# jupyter:
#   jupytext:
#     text_representation:
#       extension: .py
#       format_name: light
#       format_version: '1.5'
#       jupytext_version: 1.14.4
#   kernelspec:
#     display_name: Python 3
#     language: python
#     name: python3
# ---

# +
import ipyvuetify as v
import ipyvuedraggable as d
from traitlets import (Any, Unicode, List)

# Output a dummy Draggable instance, so ipyvue gets loaded. This does not 
# happen automatically when only VueTemplate is used
d.Draggable()


# +
def getItems():
    return [
        {
          'id': 1,
          'avatar': "https://s3.amazonaws.com/vuetify-docs/images/lists/1.jpg",
          'title': "Brunch this life?",
          'subtitle': "Subtitle 1"
        },
        {
          'id': 2,
          'avatar': "https://s3.amazonaws.com/vuetify-docs/images/lists/2.jpg",
          'title': "Winter Lunch",
          'subtitle': "Subtitle 2"
        },
        {
          'id': 3,
          'avatar': "https://s3.amazonaws.com/vuetify-docs/images/lists/3.jpg",
          'title': "Oui oui",
          'subtitle': "Subtitle 3"
        }
      ]

def getItems2():
    return [
    {
      'id': 4,
      'avatar': "https://s3.amazonaws.com/vuetify-docs/images/lists/4.jpg",
      'title': "Brunch this weekend?",
      'subtitle': "Subtitle 4"
    },
    {
      'id': 5,
      'avatar': "https://s3.amazonaws.com/vuetify-docs/images/lists/5.jpg",
      'title': 'Summer BBQ',
      'subtitle': "Subtitle 5"
    }
]


# +
class MyDraggable(v.VuetifyTemplate):
    items =  List(getItems()).tag(sync=True)

    items2 = List(getItems2()).tag(sync=True)

    template = Unicode('''
        <v-content>
          <v-container fluid>
            <v-layout align-start justify-center>
              <v-flex xs4 class="elevation-1 pa-3 ma-2">
                <v-list two-line>
                  <v-subheader>
                    FIRST LIST
                  </v-subheader>
                  <draggable v-model="items" :group="{name:'people'}" style="min-height: 10px">
                    <template v-for="item in items">
                    <v-list-item :key="item.id">
                    <v-list-item-avatar>
                      <img :src="item.avatar">
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title v-html="item.title"></v-list-item-title>
                      <v-list-item-sub-title v-html="item.subtitle"></v-list-item-sub-title>
                    </v-list-item-content>
                  </v-list-item>
                </template>
                  </draggable>
                </v-list>
              </v-flex>
              <v-flex xs4 class="elevation-1 pa-3 ma-2">
                <v-list two-line>
                  <v-subheader>
                    SECOND LIST
                  </v-subheader>
                  <draggable v-model="items2" :group="{name:'people'}" style="min-height: 10px">
                    <template v-for="item in items2">
                  <v-list-item :key="item.id">
                    <v-list-item-avatar>
                      <img :src="item.avatar">
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title v-html="item.title"></v-list-item-title>
                      <v-list-item-sub-title v-html="item.subtitle"></v-list-item-sub-title>
                    </v-list-item-content>
                  </v-list-item>
                </template>
                  </draggable>
                </v-list>
              </v-flex>
            </v-layout>
          </v-container>
        </v-content>
        ''').tag(sync=True)
    
    
MyDraggable()


# +
def makeListItem(item):
    return v.ListItem(children=[
        v.ListItemAvatar(children=[
            v.Html(tag='img', attributes={'src': item['avatar']})
        ]),
        v.ListItemContent(children=[
            v.ListItemTitle(children=[item['title']]),
            v.ListItemSubtitle(children=[item['subtitle']])
        ])
    ])

dg1 = d.Draggable(
    v_model=getItems(),
    group={'name': 'people'},
    children=[makeListItem(item) for item in getItems()])

def update_dg1(change):
    dg1.children=[makeListItem(item) for item in dg1.v_model]
    
dg1.observe(update_dg1, names=['v_model'])


dg2 = d.Draggable(
    v_model=getItems2(),
    group={'name': 'people'},
    children=[makeListItem(item) for item in getItems2()])

def update_dg2(change):
    dg2.children=[makeListItem(item) for item in dg2.v_model]
    
dg2.observe(update_dg2, names=['v_model'])


v.Content(children=[
    v.Container(fluid=True, children=[
        v.Layout(align_start=True, justify_center=True, children=[
            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[
                v.List(two_line=True, children=[
                    v.Subheader(children=['FIRST LIST']),
                    dg1
                ])
            ]),
            v.Flex(xs4=True, class_='elevation-1 pa-3 ma-2', children=[
                v.List(two_line=True, children=[
                    v.Subheader(children=['SECOND LIST']),
                    dg2
                ])
            ])
        ])
    ])
])


# +
class MyDraggableArea(v.VuetifyTemplate):
    items =  List(getItems() + getItems2()).tag(sync=True)

    items2 = List().tag(sync=True)

    template = Unicode('''
        <!-- Toplevel draggable is used to cancel drop -->
        <draggable id="catchAll" class="droptarget" :group="{name:'people'}">
        <v-content>
          <v-container fluid>
            <v-layout align-start justify-center>
              <v-flex xs4 class="elevation-1 pa-3 ma-2">
                <v-list two-line>
                  <v-subheader>
                    FIRST LIST
                  </v-subheader>
                  <draggable
                      id="source"
                      :move="checkMove"
                      v-model="items" 
                      :group="{name:'people', pull:'clone'}"
                      style="min-height: 10px">
                    <template v-for="item in items">
                    <v-list-item :key="item.id">
                    <v-list-item-avatar>
                      <img :src="item.avatar">
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title v-html="item.title"></v-list-item-title>
                      <v-list-item-subtitle v-html="item.subtitle"></v-list-item-sub-title>
                    </v-list-item-content>
                  </v-list-item>
                </template>
                  </draggable>
                </v-list>
              </v-flex>
              <v-flex xs4 class="elevation-1 pa-3 ma-2">
                <v-list two-line>
                  <v-subheader>
                    DROP AREA
                  </v-subheader>
                  <draggable v-model="items2" :group="{name:'people'}" class="droptarget">
                    <div class="droparea">Nr of items: {{ items2.length }}</div>
                  </draggable>
                </v-list>
              </v-flex>
            </v-layout>
          </v-container>
        </v-content>
        </draggable>
        ''').tag(sync=True)

    css = Unicode('''
        /* Hide dragged element in target */
        .droptarget > [draggable=true] {
            display: none;
        }

        .sortable-ghost.no-drop {
           cursor: no-drop;
        }

        .droparea {
            height: 200px;
            border: 1px solid black;
        }
    ''').tag(sync=True)


    methods = Unicode('''{
        checkMove(e) {
            duplicate = this.items2.some(item => item.id === e.draggedContext.element.id)
            canMove = e.to.id !== "source" && !duplicate;
            cancelDrop = e.to.id === "catchAll"

            if (canMove && !cancelDrop) {
                e.dragged.classList.remove('no-drop')
            } else {
                e.dragged.classList.add('no-drop')
            }

            return canMove;
        },
    }''').tag(sync=True)
    

MyDraggableArea()
# -



StarcoderdataJupyterScriptsDedupFiltered