Home Reference Source

scripts/django_cradmin/widgets/DataListDisplayByStateWidget.js

import AbstractWidget from "ievv_jsbase/widget/AbstractWidget";
import DomUtilities from "../utilities/DomUtilities";


export default class DataListDisplayByStateWidget extends AbstractWidget {
  getDefaultConfig() {
    return {
      signalNameSpace: null,
      displayStyle: 'block',
      // Valid values:
      // - 'IsInitializingDataList'
      // - 'IsNotInitializingDataList'
      // - 'UnfilteredIsEmpty'
      // - 'UnfilteredIsNotEmpty'
      // - 'FilteredIsNotEmpty'
      // - 'FilteredIsEmpty'
      // - 'HasNextPage'
      // - 'HasSearchString'
      // - 'HasFocus'
      // - 'HasNoFocus'
      // - 'HasSelectedItems'
      // - 'HasNoSelectedItems'
      showStates: [],

      hideStates: []
    };
  }

  constructor(element, widgetInstanceId) {
    super(element, widgetInstanceId);
    this._widgetInstanceId = widgetInstanceId;
    this._name = `django_cradmin.widgets.DataListDisplayByStateWidget.${widgetInstanceId}`;
    this.logger = new window.ievv_jsbase_core.LoggerSingleton().getLogger(
      'django_cradmin.widgets.DataListDisplayByStateWidget');
    if(this.config.signalNameSpace == null) {
      throw new Error('The signalNameSpace config is required.');
    }
    this._onDataListInitializedSignal = this._onDataListInitializedSignal.bind(this);
    this._onIsEmpyDataListSignal = this._onIsEmpyDataListSignal.bind(this);
    this._onNotEmpyDataListSignal = this._onNotEmpyDataListSignal.bind(this);
    this._onDataChangeSignal = this._onDataChangeSignal.bind(this);
    this._onSearchValueChangeSignal = this._onSearchValueChangeSignal.bind(this);
    this._onFocusSignal = this._onFocusSignal.bind(this);
    this._onBlurSignal = this._onBlurSignal.bind(this);
    this._onLoadingStateChangeSignal = this._onLoadingStateChangeSignal.bind(this);
    this._onSelectionChangeSignal = this._onSelectionChangeSignal.bind(this);

    this._watchedStates = new Set(this.config.showStates);
    for(let hideState of this.config.hideStates) {
      this._watchedStates.add(hideState);
    }
    this.stateSet = new Set();
    if(this._watchInitializingDataList()) {
      this.stateSet.add('IsInitializingDataList');
    }
    this._refresh();
    this.initializeSignalHandlers();
  }

  _watchIsEmpty() {
    return this._watchedStates.has('UnfilteredIsEmpty');
  }

  _watchNotEmpty() {
    return this._watchedStates.has('UnfilteredIsNotEmpty');
  }

  _watchInitializingDataList() {
    return this._watchedStates.has('IsInitializingDataList') ||
      this._watchedStates.has('IsNotInitializingDataList');
  }

  _watchResultCount() {
    return this._watchedStates.has('FilteredIsNotEmpty') ||
         this._watchedStates.has('FilteredIsEmpty');
  }

  _watchNextPage() {
    return this._watchedStates.has('HasNextPage');
  }

  _watchSearchString() {
    return this._watchedStates.has('HasSearchString');
  }

  _watchFocus() {
    return this._watchedStates.has('HasFocus') ||
         this._watchedStates.has('HasNoFocus');
  }

  _watchLoadingStateChange() {
    return this._watchedStates.has('IsLoading');
  }

  _watchSelectionChangeCount() {
    return this._watchedStates.has('HasSelectedItems') ||
         this._watchedStates.has('HasNoSelectedItems');
  }

  _listenForDataListInitializedSignal() {
    return this._watchInitializingDataList();
  }

  _listenForIsEmpyDataListSignal() {
    return this._watchIsEmpty();
  }

  _listenForNotEmpyDataListSignal() {
    return this._watchNotEmpty();
  }

  _listenForDataChangeSignal() {
    return this._watchResultCount() || this._watchNextPage();
  }

  _listenForSearchValueChangeSignal() {
    return this._watchSearchString();
  }

  _listenForFocusSignal() {
    return this._watchFocus();
  }

  _listenForBlurSignal() {
    return this._watchFocus();
  }

  _listenForLoadingStateChangeSignal() {
    return this._watchLoadingStateChange();
  }

  _listenForSelectionChangeSignal() {
    return this._watchSelectionChangeCount();
  }

  initializeSignalHandlers() {
    if(this._listenForDataListInitializedSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.DataListInitialized`,
        this._name,
        this._onDataListInitializedSignal
      );
    }
    if(this._listenForIsEmpyDataListSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.IsEmpyDataList`,
        this._name,
        this._onIsEmpyDataListSignal
      );
    }
    if(this._listenForNotEmpyDataListSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.NotEmpyDataList`,
        this._name,
        this._onNotEmpyDataListSignal
      );
    }
    if(this._listenForDataChangeSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.DataChange`,
        this._name,
        this._onDataChangeSignal
      );
    }
    if(this._listenForSearchValueChangeSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.SearchValueChange`,
        this._name,
        this._onSearchValueChangeSignal
      );
    }
    if(this._listenForFocusSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.Focus`,
        this._name,
        this._onFocusSignal
      );
    }
    if(this._listenForBlurSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.Blur`,
        this._name,
        this._onBlurSignal
      );
    }
    if(this._listenForLoadingStateChangeSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.LoadingStateChange`,
        this._name,
        this._onLoadingStateChangeSignal
      );
    }
    if(this._listenForSelectionChangeSignal()) {
      new window.ievv_jsbase_core.SignalHandlerSingleton().addReceiver(
        `${this.config.signalNameSpace}.SelectionChange`,
        this._name,
        this._onSelectionChangeSignal
      );
    }
  }

  destroy() {
    new window.ievv_jsbase_core.SignalHandlerSingleton().removeAllSignalsFromReceiver(
      this._name);
  }

  _onDataListInitializedSignal(receivedSignalInfo) {
    if(this.stateSet.has('IsInitializingDataList')) {
      this.stateSet.delete('IsInitializingDataList');
      this.stateSet.add('IsNotInitializingDataList');
      this._refresh();
    }
  }

  _onIsEmpyDataListSignal(receivedSignalInfo) {
    if(!this.stateSet.has('UnfilteredIsEmpty')) {
      this.stateSet.add('UnfilteredIsEmpty');
      this.stateSet.delete('UnfilteredIsNotEmpty');
      this._refresh();
    }
  }

  _onNotEmpyDataListSignal(receivedSignalInfo) {
    if(!this.stateSet.has('UnfilteredIsNotEmpty')) {
      this.stateSet.add('UnfilteredIsNotEmpty');
      this.stateSet.delete('UnfilteredIsEmpty');
      this._refresh();
    }
  }

  _checkDataChanges(data) {
    let hasChanges = false;
    if(this._watchResultCount()) {
      if(data.count > 0) {
        if(!this.stateSet.has('FilteredIsNotEmpty')) {
          this.stateSet.add('FilteredIsNotEmpty');
          this.stateSet.delete('FilteredIsEmpty');
          hasChanges = true;
        }
      } else {
        if(!this.stateSet.has('FilteredIsEmpty')) {
          this.stateSet.add('FilteredIsEmpty');
          this.stateSet.delete('FilteredIsNotEmpty');
          hasChanges = true;
        }
      }
    }

    if(this._watchNextPage()) {
      if(data.next) {
        if(!this.stateSet.has('HasNextPage')) {
          this.stateSet.add('HasNextPage');
          hasChanges = true;
        }
      } else {
        if(this.stateSet.has('HasNextPage')) {
          this.stateSet.delete('HasNextPage');
          hasChanges = true;
        }
      }
    }

    return hasChanges;
  }

  _onDataChangeSignal(receivedSignalInfo) {
    const data = receivedSignalInfo.data;
    if(this._checkDataChanges(data)) {
      this._refresh();
    }
  }

  _checkSearchStringChanges(searchString) {
    let hasChanges = false;
    if(searchString.length > 0) {
      if(!this.stateSet.has('HasSearchString')) {
        this.stateSet.add('HasSearchString');
        hasChanges = true;
      }
    } else {
      if(this.stateSet.has('HasSearchString')) {
        this.stateSet.delete('HasSearchString');
        hasChanges = true;
      }
    }
    return hasChanges;
  }

  _onSearchValueChangeSignal(receivedSignalInfo) {
    const searchString = receivedSignalInfo.data;
    if(this._checkSearchStringChanges(searchString)) {
      this._refresh();
    }
  }

  _onFocusSignal(receivedSignalInfo) {
    if(!this.stateSet.has('HasFocus')) {
      this.stateSet.add('HasFocus');
      this.stateSet.delete('HasNoFocus');
      this._refresh();
    }
  }

  _onBlurSignal(receivedSignalInfo) {
    if(!this.stateSet.has('HasNoFocus')) {
      this.stateSet.add('HasNoFocus');
      this.stateSet.delete('HasFocus');
      this._refresh();
    }
  }

  _checkLoadingChanges(isLoading) {
    let hasChanges = false;
    if(isLoading) {
      if(!this.stateSet.has('IsLoading')) {
        this.stateSet.add('IsLoading');
        hasChanges = true;
      }
    } else {
      if(this.stateSet.has('IsLoading')) {
        this.stateSet.delete('IsLoading');
        hasChanges = true;
      }
    }
    return hasChanges;
  }

  _onLoadingStateChangeSignal(receivedSignalInfo) {
    const isLoading = receivedSignalInfo.data;
    if(this._checkLoadingChanges(isLoading)) {
      this._refresh();
    }
  }

  _checkSelectionChanges(selectedItemsMap) {
    let hasChanges = false;
    if(selectedItemsMap.size == 0) {
      if(!this.stateSet.has('HasNoSelectedItems')) {
        this.stateSet.add('HasNoSelectedItems');
        this.stateSet.delete('HasSelectedItems');
        hasChanges = true;
      }
    } else {
      if(!this.stateSet.has('HasSelectedItems')) {
        this.stateSet.add('HasSelectedItems');
        this.stateSet.delete('HasNoSelectedItems');
        hasChanges = true;
      }
    }
    return hasChanges;
  }

  _onSelectionChangeSignal(receivedSignalInfo) {
    const selectedItemsMap = receivedSignalInfo.data.selectedItemsMap;
    if(this._checkSelectionChanges(selectedItemsMap)) {
      this._refresh();
    }
  }

  _display(display) {
    if(display) {
      DomUtilities.show(this.element, this.config.displayStyle);
    } else {
      DomUtilities.hide(this.element);
    }
  }

  _refresh() {
    let display = false;
    for(let state of this.config.showStates) {
      if(this.stateSet.has(state)) {
        display = true;
        break;
      }
    }
    for(let state of this.config.hideStates) {
      if(this.stateSet.has(state)) {
        display = false;
        break;
      }
    }
    if(this.logger.isDebug) {
      this.logger.debug(
        `State changes detected by widgetInstanceId=${this._widgetInstanceId}. New stateSet`,
        this.stateSet, 'Display:', display);
    }
    this._display(display);
  }
}