@ file : Suppress (" D uplicated Code ") Ċ Ċ package Ġorg . pattern fly . show case . demo Ċ Ċ import Ġdev . f rit z 2 . binding . store Of Ċ import Ġdev . f rit z 2 . dom . html .* Ċ import Ġdev . f rit z 2 . dom . values Ċ import Ġdev . f rit z 2 . mvp . Presenter Ċ import Ġdev . f rit z 2 . mvp . View Ċ import Ġdev . f rit z 2 . mvp . View Content Ċ import Ġdev . f rit z 2 . mvp . With Presenter Ċ import Ġkotlinx . coroutines . Main Scope Ċ import Ġkotlinx . coroutines . flow . filter Ċ import Ġkotlinx . coroutines . flow . map Ċ import Ġkotlinx . coroutines . launch Ċ import Ġorg . pattern fly .* Ċ import Ġorg . pattern fly . Button Variation .* Ċ import Ġorg . pattern fly . dom . Id Ċ import Ġorg . pattern fly . dom . plus Assign Ċ import Ġorg . pattern fly . show case . data . Location Ċ import Ġorg . pattern fly . show case . data . User Ċ import Ġorg . pattern fly . show case . data . random Users Ċ import Ġorg . pattern fly . show case . demo . User Demo View . Data Component .* Ċ Ċ class ĠUser Demo Presenter Ġ: ĠPres enter < User Demo View > Ġ{ ĊĊĠĠĠ Ġinternal Ġval Ġuser Store Ġ= ĠItems Store < User > Ġ{ Ġit . login . uuid Ġ} ĊĠĠĠ Ġoverride Ġval Ġview : ĠUser Demo View Ġ= ĠUser Demo View ( this ) ĊĊĠĠĠ Ġoverride Ġfun Ġshow () Ġ{ ĊĠĠĠĠĠĠĠ ĠMain Scope (). launch Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġuser Store . addAll ( random Users ( 7 3 )) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ class ĠUser Demo View ( override Ġval Ġpresenter : ĠUser Demo Presenter ) Ġ: ĠView , ĠWith Presenter < User Demo Presenter > Ġ{ ĊĊĠĠĠ Ġinternal Ġenum Ġclass ĠData Component Ġ{ ĠC ARD , ĠLIST , ĠTABLE Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġactive Component Ġ= Ġstore Of ( CARD ) ĊĠĠĠ Ġprivate Ġval Ġsort Infos Ġ= Ġlinked Map Of < String , ĠSort Info < User >>( ĊĠĠĠĠĠĠĠ Ġ" last - name " Ġto ĠSort Info (" last - name ", Ġ" Last Ġname ", Ġcompare By Ġ{ Ġit . name . last Ġ}), ĊĠĠĠĠĠĠĠ Ġ" first - name " Ġto ĠSort Info (" first - name ", Ġ" First Ġname ", Ġcompare By Ġ{ Ġit . name . first Ġ}), ĊĠĠĠĠĠĠĠ Ġ" user - name " Ġto ĠSort Info (" user - name ", Ġ" User Ġname ", Ġcompare By Ġ{ Ġit . login . username Ġ}), ĊĠĠĠĠĠĠĠ Ġ" age " Ġto ĠSort Info (" age ", Ġ" Age ", Ġcompare By Ġ{ Ġit . dob . age Ġ}), ĊĠĠĠĠĠĠĠ Ġ" nat " Ġto ĠSort Info (" nat ", Ġ" National ity ", Ġcompare By Ġ{ Ġit . nat Ġ}), ĊĠĠĠ Ġ) ĊĊĠĠĠ Ġoverride Ġval Ġcontent : ĠView Content Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġpage Section Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ{ Ġ+" User ĠDemo " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" A Ġlist Ġof Ġ 7 3 Ġrandom Ġusers Ġprovided Ġby Ġ" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" https :// random user . me " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" https :// random user . me ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtarget (" ext ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ ". ĠFlags Ġgenerated Ġwith Ġ" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" https :// flag icons . lip is . dev /" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" https :// flag icons . lip is . dev /") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtarget (" ext ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ ". ĠSee Ġ" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" User . kt " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" https :// github . com / pattern fly - kotlin / pattern fly - f rit z 2 - show case / blob / master / src / main / kotlin / org / pattern fly / show case / demo / User . kt ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtarget (" ext ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Ġfor Ġthe Ġcode ." ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġpage Section ( base Class Ġ= Ġ" light ". modifier ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Content Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Content Section Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbulk Select ( presenter . user Store ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġinput Group Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġinput FormControl ( id Ġ= ĠId . unique (" usr ", Ġ" flt ")) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtype (" search ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġaria [" invalid "] Ġ= Ġfalse ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchanges . values () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. filter Ġ{ Ġit . isEmpty () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. map Ġ{ Ġdom Node . id Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. handled By ( presenter . user Store . remove Filter ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchanges . values () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. filter Ġ{ Ġit . isNotEmpty () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. map Ġ{ Ġdom Node . id Ġto Ġ{ Ġuser : ĠUser Ġ-> Ġuser . match ( it ) Ġ} Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. handled By ( presenter . user Store . add Filter ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpush Button ( control ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" search ". fas ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsort Options ( presenter . user Store , Ġsort Infos . values . toList ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Group (" icon - button - group ". modifier ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclick Button ( plain ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" address - card ". fas ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}. map Ġ{ ĠC ARD Ġ} Ġhandled By Ġactive Component . update ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclick Button ( plain ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" list ". fas ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}. map Ġ{ ĠLIST Ġ} Ġhandled By Ġactive Component . update ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclick Button ( plain ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" table ". fas ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}. map Ġ{ ĠTABLE Ġ} Ġhandled By Ġactive Component . update ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtoolbar Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpagination ( store Ġ= Ġpresenter . user Store , Ġcompact Ġ= Ġtrue ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcard View ( presenter . user Store ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclass Map ( active Component . data . map Ġ{ Ġmap Of (" display - none ". util () Ġto Ġ( it Ġ!= ĠC ARD )) Ġ}) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard ( user , Ġbase Class Ġ= Ġclasses Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" hover able ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" compact ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" flat ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" sc - user - card " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard Header Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġnat ( user ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġspan ( base Class Ġ= Ġclasses (" ml - sm ". util (), Ġ" sc - user - card __ title ")) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . name . toString () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard Action Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdropdown < String >( align Ġ= ĠAlign . RIGHT ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstore . single Selection . unwrap () Ġhandled By Ġnotification Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġseverity ( Severity . INFO ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle ("$ it Ġ${ user . name } Ġnot Ġyet Ġimplemented ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġke bab Toggle () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitems Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitem (" Edit ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitem (" Remove ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard Checkbox () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard Body ( base Class Ġ= Ġclasses Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" flex ". layout () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" nowrap ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" align - items - center ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġphoto ( user ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġaddress ( user ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdom Node . classList Ġ+= Ġ" sc - user - card __ address " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcard Footer Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon ( icon Class Ġ= Ġ" user - alt ". fas (), Ġbase Class Ġ= Ġ" mr - sm ". util ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . login . username ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdata List ( presenter . user Store ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclass Map ( active Component . data . map Ġ{ Ġmap Of (" display - none ". util () Ġto Ġ( it Ġ!= ĠLIST )) Ġ}) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata ListItem ( user ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Row Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Control Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Toggle () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Checkbox () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Content Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Cell ( base Class Ġ= Ġ" icon ". modifier ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġnat ( user ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Cell Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġp ( id Ġ= ĠitemId ( user )) Ġ{ Ġ+ user . name . toString () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Cell (" flex - 4 ". modifier ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" user - alt ". fas (), Ġbase Class Ġ= Ġ" mr - sm ". util ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . login . username ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ Ġsmall Ġ{ Ġ+" MD 5 : Ġ"; Ġcode Ġ{ Ġ+ user . login . md 5 Ġ} Ġ} Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġp Ġ{ Ġsmall Ġ{ Ġ+" SHA - 1 : Ġ"; Ġcode Ġ{ Ġ+ user . login . sha 1 Ġ} Ġ} Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Action Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclick Button ( secondary ) Ġ{ Ġ+" Edit " Ġ} Ġhandled By Ġnotification Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġseverity ( Severity . INFO ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle (" Edit Ġ${ user . name } Ġnot Ġyet Ġimplemented ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclick Button ( secondary ) Ġ{ Ġ+" Remove " Ġ} Ġhandled By Ġnotification Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġseverity ( Severity . INFO ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle (" Remove Ġ${ user . name } Ġnot Ġyet Ġimplemented ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata List Expand able Content Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv ( base Class Ġ= Ġclasses Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" flex ". layout () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" align - items - center ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" space - items - 2 xl ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġphoto ( user ); Ġaddress ( user ); Ġcontact ( user ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdata Table ( presenter . user Store ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclass Map ( active Component . data . map Ġ{ Ġmap Of (" display - none ". util () Ġto Ġ( it Ġ!= ĠTABLE )) Ġ}) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata Table Columns Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata Table Toggle Column ( base Class Ġ= Ġclasses Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" flex ". layout () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" align - items - center ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" space - items - 2 xl ". modifier () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}) Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġphoto ( user ); Ġaddress ( user ); Ġcontact ( user ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata Table Select Column () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata TableColumn (" First Ġname ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsort Info ( sort Infos [" first - name "] !! ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheader Class (" with - 2 5 ". modifier ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcell Display Ġ{ Ġuser Ġ-> Ġ+ user . name . first Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata TableColumn (" Last Ġname ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsort Info ( sort Infos [" last - name "] !! ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheader Class (" with - 2 5 ". modifier ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcell Display Ġ{ Ġuser Ġ-> Ġ+ user . name . last Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata TableColumn (" Birth day ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsort Info (" birthday ", Ġ" Birth day ", Ġcompare By Ġ{ Ġit . dob . date Ġ}) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcell Display Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . dob . as Date (). toLocale DateString (" en ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata TableColumn (" Registered ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcell Display Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcustom (" relative - time ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattr (" datetime ", Ġuser . registered . date ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdata Table Action Column Ġ{ Ġuser Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdropdown < String >( align Ġ= ĠAlign . RIGHT ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstore . single Selection . unwrap () Ġhandled By Ġnotification Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġseverity ( Severity . INFO ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle ("$ it Ġ${ user . name } Ġnot Ġyet Ġimplemented ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġke bab Toggle () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitems Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitem (" Edit ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġitem (" Remove ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun ĠRender Context . address ( user : ĠUser , Ġcontent : ĠText Element . () Ġ-> ĠUnit Ġ= Ġ{} ): ĠText Element Ġ= Ġaddress Ġ{ ĊĠĠĠĠĠĠĠ Ġcontent ( this ) ĊĠĠĠĠĠĠĠ Ġ+" ${ user . location . street . name } Ġ${ user . location . street . number }" ĊĠĠĠĠĠĠĠ Ġbr Ġ{ Ġ} ĊĠĠĠĠĠĠĠ Ġ+" ${ user . location . postcode } Ġ${ user . location . city }" ĊĠĠĠĠĠĠĠ Ġbr Ġ{ Ġ} ĊĠĠĠĠĠĠĠ Ġ+" ${ user . location . state } Ġ${ user . nat }" ĊĠĠĠĠĠĠĠ Ġa ( base Class Ġ= Ġ" ml - sm ". util ()) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġhref ( google Maps ( user . location )) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtarget (" map ") ĊĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" map - marked - alt ". fas ()) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun ĠRender Context . contact ( user : ĠUser ): ĠU l Ġ= Ġul Ġ{ ĊĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" mailto :${ user . email }") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" envelope ". fas (), Ġbase Class Ġ= Ġ" mr - sm ". util ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . email ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" tel :${ user . phone }") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" phone ". fas (), Ġbase Class Ġ= Ġ" mr - sm ". util ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . phone ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġa Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhref (" tel :${ user . cell }") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon (" mobile - alt ". fas (), Ġbase Class Ġ= Ġ" mr - sm ". util ()) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ user . cell ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun ĠRender Context . nat ( user : ĠUser ): ĠImg Ġ= Ġimg ( base Class Ġ= Ġ" sc - user - nat ") Ġ{ ĊĠĠĠĠĠĠĠ Ġsrc (" https :// lip is . github . io / flag - icon - css / flags / 4 x 3 /${ user . nat . lowercase ()}. svg ") ĊĠĠĠĠĠĠĠ Ġwith ( dom Node ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġuser . nat ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun ĠRender Context . photo ( user : ĠUser ): ĠDiv Ġ= Ġdiv ( base Class Ġ= Ġ" sc - user - photo - 7 5 ") Ġ{ ĊĠĠĠĠĠĠĠ Ġimg Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġsrc ( user . picture . medium ) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun Ġgoogle Maps ( location : ĠLocation ): ĠString Ġ= ĊĠĠĠĠĠĠĠ Ġ" https :// www . google . com / maps / search /? api = 1 & query =${ location . coordinates . latitude }, ${ location . coordinates . longitude }" Ċ } Ċ