How to use the protractor.element.all function in protractor

this.vote(index, 1);
  }

  votes(index: number) {
    return this.list.get(index).element(by.css('.vote > span'));
  }
}

class Comments {
  sfQuestionPage: any;

  constructor(sfQuestionPage: any) {
    this.sfQuestionPage = sfQuestionPage;
  }

  list = element.all(by.repeater('comment in answer.comments'));

  // Return the handle to the last comment in the list
  last() {
    return this.list.last();
  }

  // Add a comment to the last (most recent) Answer on the page
  addToLastAnswer(comment: any) {
    const addCommentCtrl = this.sfQuestionPage.answers.last().element(by.css('.comments'))
      .element(by.css('a.addCommentLink'));
    const commentField = this.sfQuestionPage.answers.last().element(by.model('newComment.content'));
    const submit = this.sfQuestionPage.answers.last().element(by.css('.save-new-comment'));

    // Click "add comment" at the end of the Answers list to un-collapse the comment text area.
    addCommentCtrl.click();
    browser.wait(ExpectedConditions.visibilityOf(commentField), Utils.conditionTimeout);

it('should be possible to control phone order via the drop-down menu', function() {
      let queryField = element(by.css('input'));
      let orderSelect = element(by.css('select'));
      let nameOption = orderSelect.element(by.css('option[value="name"]'));
      let phoneNameColumn = element.all(by.css('.phones .name'));

      function getNames() {
        return phoneNameColumn.map(function(elem) {
          return elem.getText();
        });
      }

      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter

      expect(getNames()).toEqual([
        'Motorola XOOM\u2122 with Wi-Fi',
        'MOTOROLA XOOM\u2122'
      ]);

      nameOption.click();

*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { by, element } from 'protractor';
import { BasePo } from '../../base/base.po';

export class DataObjectDetailPage extends BasePo {

  // element to reach to the detail page from list page
  public dataListFirstLink = element.all(by.linkText('View Data Object')).get(0);


  public screenTitle = element(by.css('.header-content .detail-header'));
  public keyValueTitle = element(by.css('.detail-title'));
  public schemaInfoTitle = element(by.css('.sub-header'));

  // partition selectors
  public partitionInfoContainer = element(by.css('.partition-details-container'));
  public partitionInfoHeaderLabel = this.partitionInfoContainer.element(by.className('sub-header-label'));
  public keyLabel = this.partitionInfoContainer.element(by.className('details-label'));
  public valueLabel = this.partitionInfoContainer.element(by.className('details-label'));

  public partitions = this.partitionInfoContainer.all(by.css('.partition-value'));
  public partitionValueContainer = this.partitionInfoContainer.all(by.css('.partition-value')).get(0);
  public subPartitionValueContainer = this.partitionInfoContainer.all(by.css('.partition-value')).get(1);
  public subPartitionValue = this.subPartitionValueContainer.all(by.css('.col-6'));

beforeEach(() => {
    browser.get('/forms/ts/formBuilder/index.html');
    inputs = element.all(by.css('input'));
    paragraphs = element.all(by.css('p'));
  });

it('test second hour week gr', async () => {
            const grEl = element.all(by.tagName('jigsaw-tile-option')),
                clockEl = element(by.css('.list-unstyled .accordion-toggle .glyphicon-time')),
                activeWeekEl = element(by.css('.datepicker-days .table-condensed .active'));
            grEl.get(0).click();
            clockEl.click();
            await browser.wait(ExpectedConditions.presenceOf(element(by.css('.timepicker-hour'))));
            expect(element(by.css('.timepicker-second')).getAttribute('TITLE')).toBe('Pick Second');
            grEl.get(2).click();
            clockEl.click();
            await browser.wait(ExpectedConditions.presenceOf(element(by.css('.timepicker-hour'))));
            expect(element(by.css('.timepicker-hour')).getAttribute('TITLE')).toBe('Pick Hour');
            grEl.get(4).click();
            expect(activeWeekEl.all(by.tagName('TD')).get(0).getCssValue('background-color')).toBe('rgba(65, 173, 220, 1)');
            expect(activeWeekEl.all(by.tagName('TD')).get(6).getCssValue('background-color')).toBe('rgba(65, 173, 220, 1)');
        })
    });

*/

import { by, element, ElementFinder } from 'protractor';
import { BrowserVisibility, BrowserActions, CardTextItemPage } from '@alfresco/adf-testing';

export class CardViewComponentPage {

    addButton: ElementFinder = element(by.className('adf-card-view__key-value-pairs__add-btn'));
    selectValue = 'mat-option';
    nameCardTextItem: CardTextItemPage = new CardTextItemPage('name');
    intField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-int']`));
    floatField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-float']`));
    valueInputField: ElementFinder = element(by.xpath(`//*[contains(@id,'input') and @placeholder='Value']`));
    nameInputField: ElementFinder = element(by.xpath(`//*[contains(@id,'input') and @placeholder='Name']`));
    consoleLog: ElementFinder = element(by.className('app-console'));
    deleteButton: ElementFinder = element.all(by.className('adf-card-view__key-value-pairs__remove-btn')).first();
    select: ElementFinder = element(by.css('mat-select[data-automation-class="select-box"]'));
    checkbox: ElementFinder = element(by.css(`mat-checkbox[data-automation-id='card-boolean-boolean']`));
    resetButton: ElementFinder = element(by.css(`#adf-reset-card-log`));
    listContent: ElementFinder = element(by.css('.mat-select-panel'));
    editableSwitch: ElementFinder = element(by.id('app-toggle-editable'));
    clearDateSwitch: ElementFinder = element(by.id('app-toggle-clear-date'));
    noneOptionSwitch: ElementFinder = element(by.id('app-toggle-none-option'));

    async clickOnAddButton(): Promise {
        await BrowserActions.click(this.addButton);
    }

    async checkNameTextLabelIsPresent(): Promise {
        await this.nameCardTextItem.checkLabelIsPresent();
    }

checkListIsSorted(sortOrder, locator) {
        let deferred = protractor.promise.defer();
        Util.waitUntilElementIsVisible(element.all(locator).first());
        let initialList = [];
        element.all(locator).each(function (currentElement) {
            currentElement.getText().then(function (text) {
                initialList.push(text);
            });
        }).then(function () {
            let sortedList = initialList;
            sortedList = sortedList.sort();
            if (sortOrder === false) {
                sortedList = sortedList.reverse();
            }
            deferred.fulfill(initialList.toString() === sortedList.toString());
        });
        return deferred.promise;
    }

getAllRowsColumnValues(locator) {
        let deferred = protractor.promise.defer();
        Util.waitUntilElementIsVisible(element.all(locator).first());
        let initialList = [];

        element.all(locator).each(function (currentElement) {
            currentElement.getText().then(function (text) {
                if (text !== '') {
                    initialList.push(text);
                }
            });
        }).then(function () {
            deferred.fulfill(initialList);
        });

        return deferred.promise;
    }

function getUsersStruct() {
    return {
      user: element.all(by.css('ng-component li')).get(0),
      userId: element.all(by.css('ng-component span')).get(0)
    };
  }

beforeEach(async () => {
      await browser.get('/tabs');
      tabLabels = element.all(by.css('.mat-tab-label'));
      tabBodies = element.all(by.css('mat-tab-body'));
    });