@startuml

left to right direction
' skinparam groupInheritance 3

together {
  class AppComp {
    +ENUM_LANG
    +ENUM_ROOT_ROUTES
    ..Signals..
    +currentUrl$
    --
    -_initTranslate()
    -_isInEnumLang()
  }

  !include route.puml
  caption RouteGroup

  AppComp <-- AppRoutingModule: . <Router Outlet>
}



together {
  ' !include router-targer.puml
  ' caption RouterTargerGroup
  package "Router Target Module" as RouterTargetModule <<rectangle>> {
    class TaskIndexComp {
      +ENUM_TASK_QUERY_TYPE
      --
      ..Some Signals..
      --
      +onSetRoomTaskSelectId()
      +createTaskIndexQuery()
      -_switchToRoomTaskTab()
    }

    class AuthLogin {

    }

    class AdminIndex {

    }
  }

  ' !include components.puml
  ' caption componentsGroup
  package "Components Module" as ComponentsModule <<rectangle>> {
    class HotelTasksComp {
      ..@Input..
      +taskQueryType
      +taskQuery
      --
      +taskAll
      +taskInDisplay
      --
      +reduceRoomFromTaskAll()
      +filteTasksInRoom()
      +taskHasUpdateByEmit()
      --
      -_initRoomTaskBySelect()
      -_stopAsyncTask()
      -_startAsyncTask()
      -_selectTask()
      -_getTaskData()
      -_getTaskFromRemote()
      -_getTaskFromCache()
      -_getRoomTaskFromRemote()
      -_isRoomHasNotInTask()
      -_sortRequestTimestamp()
      -_detectUncheckedSizeInType()
      -_isRemoteTaskChanged()

    }

    class TaskUnitComp {
      ..@Input..
      +tasks
      +taskQueryType
      +roomName
      ..@Output..
      +updateTaskEmit
      ..Signals..
      +roomTaskIdBySelected$
      --
      +setTaskCheckStatus()
      +minutesPass()
      +formatDateTime()
    }

    class SystemTopComp {
      +onLogout()
      +onSwitchLang()
    }

    class SystemBottomComp {

    }

    class TasktopComp {

    }
    class AdminTopComp {

    }
    class DashboardTop {

    }
  }

  TaskIndexComp <-- HotelTasksComp: . Mat Tab (Query Type)
  HotelTasksComp <-- TaskUnitComp: . loop from Task

  SystemTopComp <-- TasktopComp
  SystemTopComp <-- AdminTopComp
  SystemTopComp <-- DashboardTop

}

together {
  package "Services" as Services {
    !include services.puml
  }
  caption ServicesGroup
}

AppComp -- SystemTopComp
AppComp -- SystemBottomComp

TaskRoutingModule -- TaskIndexComp

@enduml
