Créer facilement une application de type Trello avec Kendo UI (Partie 2)

Dans la deuxième partie de ce guide pas à pas, découvrez comment améliorer l’interactivité de votre application de gestion de projets similaire à Trello grâce au Kendo UI.

Dans la première partie de cette série nous a utilisé les composants ListView et Sortable de Kendo UI pour créer facilement une liste de tâches ressemblant à Trello. Dans cette partie, vous rendrez vos listes plus interactives en ajoutant des fonctionnalités permettant d’ajouter des cartes, de supprimer des cartes et d’éditer des cartes dans chaque liste.

Lorsque vous cliquez sur le bouton Ajouter, une carte apparaît en mode édition en haut de la fenêtre. liste. Les modifications seront enregistrées en cliquant sur un bouton de mise à jour qui remplacera la carte par une carte normale. Lorsqu'un utilisateur survole une carte, un bouton Modifier et supprimer apparaît. Lorsque le bouton Modifier est cliqué, une carte apparaîtra en mode édition en haut de la liste. Lorsque le bouton Supprimer est cliqué, la carte sera supprimée de la liste.

Mise en route

Pour implémenter ces fonctionnalités, procédez comme suit:

1. Ajoutez un bouton à l'en-tête du modèle de liste [19659007] Créez un modèle d’édition et ajoutez-le aux options de chaque liste
2. Définissez un gestionnaire de clics pour le bouton d’ajout
3. Ajoutez des boutons au modèle de carte pour les éditer et les supprimer

Avant de commencer, c’est le code que nous modifiera:

 < html > 
   < head > 
     < méta   charset  =  " ] utf-8  " > 
     < titre >  Panneau Kanban  </  titre > 
     < link   rel  =  " feuille de style "    href  =  " https: //kendo.cdn.telerik .com / 2018.3.911 / styles / kendo.bootstrap-v4.min.css  " > 
     < script   src  = "  https://code.jquery.com/jquery-1.12.3.min .js  " >    </  script > 
     < script   src  = [19659012] " https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js "  >    </  script > 
     < style >  
       body  {
         famille de polices :  helvetica ;  
         couleur :   # 444 ; 
      } 

       .board   {
         overflow-x :  faites défiler ; 
         l'espace-blanc :  maintenant ; 
         position 
         position [19659012]:  absolute ; 
         top :   0 ; 
         right :   0  et 
         bottom  :   0 ; 
         left :   0 ; 
         background :   # cd5a91 ; 
      } 

      . list-wrapper   { 
         width :   16  de ;  
         de la couleur de fond :   #eee ; 19659051] margin :   .5  em ; 
         border-radius :   3  px ; 
         cadre de taille de boîte  ]:  Boîte à frontière ; 
         di :  inline-block ; 
         alignement vertical :  en haut ; 
      } 

       .list   {[19659051] couleur d'arrière-plan :   #eee ; 
         frontière :  aucune ; 
         padding :   .5  em ; 
         margin-bottom :   2  em ; 
         taille de la boîte :  la boîte à frontière ; 
       } 
 
       .list-header   {
         height :   3  de ; 
         hauteur de ligne :   3  em ; 
         padding :   0   1  em ; 
      } 

       .list-title   [[19659051] poids de la police :  bold ; 
      } 
 
       .card   {
         Taille de la boîte :  Le cadre de la frontière ; 
         position :  relative ; 
         largeur :   100% ; 
         hauteur minimale :   4  em ; 
         rembourrage :   1  em ; 
         border-radius :   3  px ; 
         bord inférieur :   .5  em ; 
         contexte :   #fff ; 
      } 
      </  style > 
   </  head > 
   < corps > 
     < div [19659016] class  =  " panneau "  >   </  div > 
      
     < script   id  =  " listTemplate "    type  =  " texte / x- kendo-template  " >  
       < div  class  =  "list-wrapper" > 
         < div  class  =  =  "list- header "> 
           < span  class  = " list-title ">  # :  nom #  < /  span > 
         < /  div > 
         < div id  =  "list- #: listID # "  class  = " list ">  < /  div > 
       < /  de  / . > 
      </  script > 
      
     < script   id  =  " cardTemplate "    type  =  " texte / x- kendo-template  " >  
       < div  classe  =  "carte" >  # :  nom #  < /  div > 
      </  script > 
      
     < script >  
        $  ( '. Board' ) .  kendoListView  ( {
        modèle :  kendo .  modèle  ( $  ( '# listTemplate' ) .  html  ] () ) 
        source de données :   [
           { listID :   0  nom :   'To Do' } [19659012]
           { listID :   1  name :   'Faire' } 
           { ] listID :   2  name :   'Done' } 
        ] 
      } ) ;  ] $  ( '# list-0' ) .  kendoListView  ( {
        modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
        dataSource :   [
             { cardID :   0  nom :   'Create UI' } [19659257]] 
      } ) ; 

     $  ( '# list-1' ) .  kendoListView  ( {
        modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
        dataSource :   [
           { cardID :   1  nom :   'Implémenter le comportement des boutons'   } 19659012]
           { cardID :   2  nom :   'Code du refactor'  } 
        ] 
      } ) ; 
 
     $  ( '# list-2' ) .  kendoListView  ( {
        modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
      } ) ; 
 
       var  sortableOptions  =   {
        filtre :   '. carte' 
        conteneur :   '. board' 
        connectWith :   '. list' 
        curseur :   'agrippant' 
        placeholder :   function  ( élément )  {
           return   $  ( '
' ) [19659012].  css  ( {
            background :   '# ddd' 
          } ) ; 
        } 
        indice :   function  ( élément )   {
           retour  élément .  clone  (). 19659012].  css  ( {
            largeur :   '15em' 
            transformation :   'rotation (-5deg)' 
            border :   '1px solid #eee' 
          } ) ; 
        } 
      } ; 
 
        ( '. # list-0 ') .  kendoSortable  ( options triables ) ; 
       $  (' # liste-1 ' ) .  kendoSortable  ( options triables ) ; 
       $  ( '# list-2' ) [19659012].  kendoSortable  ( options triables ) ; 
      </  script > 
   </  body > 
 </  html > 

 

Mise à jour des modèles

Nous allons d'abord ajouter le balisage du bouton Ajouter aux listes. Dans le bloc de script du modèle de liste, ajoutez le code suivant dans l'élément list-header :

   < div   class  =  " tirez à droite "  > 
   < span   class  =  " k-add-button Icône k-ki-add "  >   </  span > 
 </  div > 
 

Ajoutez ce code CSS à vos styles:

  .pull-right   {
  float :  right ; 
 }
 textarea  afin que les utilisateurs puissent entrer le nom de la carte et un bouton de mise à jour pour enregistrer les modifications. Dans la zone de texte  nous allons ajouter l’attribut  data-bind = "value: name"  pour lier le champ  name  de la donnée à la valeur de  textarea . Vous n'avez pas besoin de créer un gestionnaire de clic pour que le bouton Enregistrer fonctionne. En ajoutant la classe  k-update-button  aux attributs du bouton, le composant s’occupera de cette fonctionnalité pour nous. Voici à quoi ressemble notre nouveau modèle:
 
   < script   id  =  " cardEditTemplate "    type  =  "  text / x-kendo-template  " >  
    < div > 
  < textarea  class  =  "carte-edit"  nom  =  "nom"  données  -  bind  =  "valeur: nom"  required  =  "required" >  < /  textarea > 
  < div  class  =  "carte-edit-controls" > 
  < bouton
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires