constructor()

in src/Explorer/Tabs/ScriptTabBase.ts [38:178]


  constructor(options: ViewModels.ScriptTabOption) {
    super(options);
    this._partitionKey = options.partitionKey;
    this.isNew = ko.observable(options.isNew);
    this.resource = ko.observable(options.resource);
    this.isTemplateReady = ko.observable<boolean>(false);
    this.isTemplateReady.subscribe((isTemplateReady: boolean) => {
      if (isTemplateReady) {
        // setTimeout is needed as creating the edtior manipulates the dom directly and expects
        // Knockout to have completed all of the initial bindings for the component
        setTimeout(() => this._createBodyEditor(), Constants.ClientDefaults.waitForDOMElementMs);
      }
    });

    this.editorId = `editor_${this.tabId}`;
    this.ariaLabel = ko.observable<string>();
    if (this.isNew()) {
      this.editorState = ko.observable(ViewModels.ScriptEditorState.newInvalid);
    } else {
      this.editorState = ko.observable(ViewModels.ScriptEditorState.existingNoEdits);
    }

    this.id = editable.observable<string>();
    this.id.validations([IsValidCosmosDbResourceId]);

    this.editorContent = editable.observable<string>();
    this.editorContent.validations([ScriptTabBase._isNotEmpty]);

    this.formFields = ko.observableArray([this.id, this.editorContent]);

    this._setBaselines();

    this.id.editableIsValid.subscribe((isValid) => {
      const currentState = this.editorState();
      switch (currentState) {
        case ViewModels.ScriptEditorState.newValid:
        case ViewModels.ScriptEditorState.newInvalid:
          if (isValid) {
            this.editorState(ViewModels.ScriptEditorState.newValid);
          } else {
            this.editorState(ViewModels.ScriptEditorState.newInvalid);
          }
          break;
        case ViewModels.ScriptEditorState.existingDirtyInvalid:
        case ViewModels.ScriptEditorState.existingDirtyValid:
          if (isValid) {
            this.editorState(ViewModels.ScriptEditorState.existingDirtyValid);
          } else {
            this.editorState(ViewModels.ScriptEditorState.existingDirtyInvalid);
          }
          break;
        case ViewModels.ScriptEditorState.existingDirtyValid:
        default:
          break;
      }
    });

    this.editor = ko.observable<monaco.editor.IStandaloneCodeEditor>();

    this.formIsValid = ko.computed<boolean>(() => {
      const formIsValid: boolean = this.formFields().every((field) => {
        return field.editableIsValid();
      });

      return formIsValid;
    });

    this.formIsDirty = ko.computed<boolean>(() => {
      const formIsDirty: boolean = this.formFields().some((field) => {
        return field.editableIsDirty();
      });

      return formIsDirty;
    });

    this.saveButton = {
      enabled: ko.computed<boolean>(() => {
        if (!this.formIsValid()) {
          return false;
        }

        if (!this.formIsDirty()) {
          return false;
        }

        return true;
      }),

      visible: ko.computed<boolean>(() => {
        return this.isNew();
      }),
    };

    this.updateButton = {
      enabled: ko.computed<boolean>(() => {
        if (!this.formIsValid()) {
          return false;
        }

        if (!this.formIsDirty()) {
          return false;
        }

        return true;
      }),

      visible: ko.computed<boolean>(() => {
        return !this.isNew();
      }),
    };

    this.discardButton = {
      enabled: ko.computed<boolean>(() => {
        return this.formIsDirty();
      }),

      visible: ko.computed<boolean>(() => {
        return true;
      }),
    };

    this.deleteButton = {
      enabled: ko.computed<boolean>(() => {
        return !this.isNew();
      }),

      visible: ko.computed<boolean>(() => {
        return true;
      }),
    };

    this.executeButton = {
      enabled: ko.computed<boolean>(() => {
        return !this.isNew() && !this.formIsDirty() && this.formIsValid();
      }),

      visible: ko.computed<boolean>(() => {
        return true;
      }),
    };
  }