samedi 22 septembre 2018

AngularJS : display html element when applying action

I'm using angularJS with coffeescript syntax in the development of my project, I want to display a button only when applying some filter( search by name, by date , by type ..), you find attached screen chots that describe better the situation.

here is the angularjs part :

@am.controller 'ReportsIndexController', ( $scope, $translate, SessionStorageService,
                                          AMDataStore, Utility, GetModal, NotificationService ) ->
  DATASTORE_CACHE_KEY = 'ReportsIndexController'
  dataStore           = AMDataStore.getInstance()

  defaultActiveTab = 'reports'
  $scope.tabActive = SessionStorageService.getReportTab( 'reports' ) || defaultActiveTab
  $scope.tabsActive   = []
  $scope.filterActivated = false
  $scope.count =
    reports:      undefined
    otherReports: undefined
    sentReports:  undefined

  dataStore.get DATASTORE_CACHE_KEY, "/report_templates", {}, ( data ) ->
    $scope.reportTemplates = data.report_sheet_templates()

  $scope.$watch 'postParams.options.template_id', ( template_id ) ->
    if template_id?
      $scope.filterActivated = true
      reportTemplate = dataStore.report_sheet_templates[ template_id ]
      $scope.steps   = _( reportTemplate.steps ).map ( step ) ->
        id: step.key, label: step.value, order: step.order
      stateEntry  =
        id:    'unassigned'
        label: $translate.instant( 'filters.state' )
        order: -1
      $scope.steps.push( stateEntry )
      $scope.stepsLength = $scope.steps.length
    else
      $scope.filterActivated = false

  $scope.initFilter = ->
    $scope.inputReport = {}
    reportParams       = SessionStorageService.getPostParams( "reports" )
    if reportParams and reportParams.scopes and reportParams.scopes.report
      $scope.inputReport =
        from: reportParams.scopes.report.from
        to:   reportParams.scopes.report.to

    $scope.inputSentReport = {}
    sentReportsParams      = SessionStorageService.getPostParams( "sent_email_recipients" )
    if sentReportsParams and sentReportsParams.scopes and sentReportsParams.scopes.report
      $scope.inputSentReport =
        from: sentReportsParams.scopes.report.from
        to:   sentReportsParams.scopes.report.to

    $scope.displayOptions =
      itemsPerPage: SessionStorageService.getDisplayOptions( "reports" )?.perPage or 25
      query:        SessionStorageService.getDisplayOptions( "reports" )?.query   or ''

    $scope.postParams     =
      options:
        template_id: SessionStorageService.getPostParams( "reports" )?.template_id
        step_key:    SessionStorageService.getPostParams( "reports" )?.step_key
        scopes:
          report:
            from: undefined
            to:   undefined
          sent:
            from: undefined
            to:   undefined
          not_sent: SessionStorageService.getPostParams( "reports" )?.scopes?.not_sent

  $scope.initFilter()
  $scope.$watchGroup [ 'inputReport.from', 'inputReport.to', 'inputSentReport.from', 'inputSentReport.to', 'displayOptions.query' ],
    ( [ inputReportFrom, inputReportTo, inputSentReportFrom, inputSentReportTo ] ) ->
      $scope.postParams.options.scopes.report.from = inputReportFrom
      $scope.postParams.options.scopes.report.to   = inputReportTo
      $scope.postParams.options.scopes.sent.from   = inputSentReportFrom
      $scope.postParams.options.scopes.sent.to     = inputSentReportTo
      console.log inputReportFrom

      if inputReportFrom || inputReportTo || $scope.displayOptions.query
        $scope.filterActivated = true
      else
        $scope.filterActivated = false

and here the haml part :

#sidebar

  %uib_tabset

    %uib_tab
      %search{ query: 'displayOptions.query' }
      .send-reports{ ng_if: "tabActive == 'reports'"}
        %button.btn-block.btn.btn-green.pull-right.btn-send-reports{ type: 'button',  ng: { click: 'sendAllReport()', disabled: 'count.reports == 0', if: 'filterActivated' }}
          reports.btn_group.send_all

      .filter-container
        .row.filter-by-date
          %span{ ng_if: "tabActive == 'reports'"}
            reports.filter_by_date.head
          %span{ ng_if: "tabActive == 'sent_reports'"}
            reports.sent_filter_by_date.head
          %span{ ng_if: "tabActive == 'other_reports'"}
            reports.others_filter_by_date.head

this code does not give a good result : when make the date filter with Filter by report type the button appear , On the other hand when remove date filter and leave the filter report type activated the button disappear !

enter image description here enter image description here can some one give some help to refactor the code ! thanks.

Aucun commentaire:

Enregistrer un commentaire