Julia Kits 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

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

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

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

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

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

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

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

# codegen.yml

	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);

	@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")

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

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

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

	<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"
	>

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