jinnyMcKindy

There're some frontend rules which must be followed according to code review and style guide.

BEM

Each component has parent dive whose name matches component name: component-name

Name child classes as parent-name + 2 underlines component-name__child-name

jinnyMcKindy

Для верстки в Bravado есть несколько принципов, которых следует придерживаться

Нейминг по БЭМу

В каждом компоненте есть родительский див, совпадающий с названием компонента: component-name

Дочерние компоненты именуются через 2 нижних подчеркивания component-name__child-name

jinnyMcKindy

type SuccessResult<T> = { data: T, error: void };
type ErrorResult<E> = { data: void, error: E };
type Result<T, E = Error> = SuccessResult<T> | ErrorResult<E>

function isSuccess<T, E>(x: Result<T, E>): x is SuccessResult<T> {
  return Boolean(x.data);
}

function isError<T, E>(x: Result<T, E>): x is ErrorResult<E> {
  return Boolean(x.error);

jinnyMcKindy

@Component
export default class TableSettings extends Vue {
  @Prop({ type: Array, default: () => [] }) headers!: TableHeader[];
  @VModel({ type: Array, default: () => [] })
  visibleHeaders!: TableHeader[];

  private visible: boolean = false;
  protected internalHeaders: TableHeader[] = [];

  @Watch("headers")

jinnyMcKindy

<v-data-table
  v-model="selected"
  :headers="visibleHeaders"
  :items="items"
  :show-select="showSelect"
  :loading="loading"
  v-on="$listeners"
  v-bind="$attrs"
>

jinnyMcKindy

  protected async paginate({
    page,
    itemsPerPage,
  }: {
    page: number;
    itemsPerPage: number;
  }): Promise<void> {
    await this.$apollo.queries.list.refetch({
      ...this.fetchListVariables, //параметры фильтров
      page,

jinnyMcKindy

Query.users(
where: QueryUsersWhereWhereConditions
hasRoles: QueryUsersHasRolesWhereHasConditions
hasCity: QueryUsersHasCityWhereHasConditions
associations: FilterInput
positions: FilterInput
workplaces: WorkplacesFilterInput
specialties: FilterInput
regions: LocationFilterInput
countries: LocationFilterInput

jinnyMcKindy

protected get headers(): TableHeader[] {
  return [
    { value: "id", text: "ID", width: 70, sortable: false },
    {
      value: "fullname",
      text: "ФИО пользователя",
      width: 200,
      sortable: false,
    },
    {

jinnyMcKindy

<Table
  :items="list.data"
  :search-value.sync="filter.search"
  :show-select="showSelect"
  :disable-export="standalone"
  :extra-headers="extraHeaders"
  v-bind="tableBindings"
  v-model="selected"
  @pagination="paginate"
>

jinnyMcKindy

Декларируем типы из graphql файлов

Нужно быстро и не сильно вникая выжать всё самое полезное из graphql файлов. Нам поможет "graphql-codegen", он получит схему с сервера, и опишет типы для наших запросов.

настроим для него конфиг

# codegen.yml