@farm-investimentos/front-mfe-components 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.0.0",
+	"version": "3.2.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -0,0 +1,37 @@
+import MultipleSelectShortener from './MultipleSelectShortener';
+
+export default {
+	title: 'Example/MultipleSelectShortener',
+	component: MultipleSelectShortener,
+};
+
+export const Primary = () => ({
+	components: { MultipleSelectShortener },
+	data() {
+		return {
+			items: {
+				id: 0,
+				label: `Convidar`,
+			},
+		};
+	},
+	template: '<MultipleSelectShortener :item="items" :index="0" :itemsLength="1"/>',
+});
+
+export const Secondary = () => ({
+	components: { MultipleSelectShortener },
+	data() {
+		return {
+			items: [
+				{
+					id: 0,
+					label: `Convidar`
+				},
+			],
+		};
+	},
+	template: '<MultipleSelectShortener :item="{...items}" :index="1" :itemsLength="3"/>',
+});
+
+Primary.storyName = 'Básico';
+Secondary.storyName = 'Multiplos';

package/src/components/MultipleSelectShortener/MultipleSelectShortener.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="align-center">
+		<span class="mr-1 label" v-if="index === 0">{{ item[labelKey] }}</span>
+		<span class="label" v-if="index === 1">
+			(+{{ itemsLength - 1 }} {{ itemsLength > 2 ? 'outros' : 'outro' }} )
+		</span>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'farm-multiple-select-shortener',
+	props: {
+		/**
+		 * Key used to get value from item
+		 */
+		labelKey: {
+			type: String,
+			default: 'label',
+		},
+		/**
+		 * Item from v-select
+		 */
+		item: {
+			type: Object,
+		},
+		/**
+		 * Index from slot
+		 */
+		index: {
+			type: Number,
+		},
+		/**
+		 * Items count
+		 */
+		itemsLength: {
+			type: Number,
+		},
+	},
+});
+</script>
+
+<style scoped>
+.label {
+	font-size: 0.75rem;
+}
+</style>

package/src/components/MultipleSelectShortener/__tests__/MultipleSelectShortener.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import MultipleSelectShortener from '../index';
+
+describe('MultipleSelectShortener component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultipleSelectShortener, {
+			propsData: {
+				item: {},
+				index: 0,
+				labelKey: '',
+				itemsLength: 0,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/MultipleSelectShortener/index.js

@@ -0,0 +1,4 @@
+import MultipleSelectShortener from './MultipleSelectShortener';
+
+export { MultipleSelectShortener };
+export default MultipleSelectShortener;

package/src/components/ResetTableRowSelection/ResetTableRowSelection.vue

@@ -12,7 +12,7 @@ import Vue from 'vue';
 import VBtn from 'vuetify/lib/components/VBtn';
 import VIcon from 'vuetify/lib/components/VIcon';
 export default Vue.extend({
-	// name: 'farm-tablerowselection',
+	name: 'farm-tablerowselection',
 	components: {
 		VBtn,
 		VIcon,

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -0,0 +1,29 @@
+import SelectModalOptions from './SelectModalOptions';
+
+export default {
+	title: 'Example/SelectModalOptions',
+	component: SelectModalOptions,
+};
+
+export const Primary = () => ({
+	components: { SelectModalOptions },
+	data() {
+		return {
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+			],
+			selectedValue: null,
+		};
+	},
+	template: `<div>
+	<SelectModalOptions
+		:items="items"
+		v-model="selectedValue"
+		label="label"
+		inputId="some-id" />
+		<br />selected value: {{ selectedValue }}
+	</div>`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -0,0 +1,273 @@
+<template>
+	<v-col cols="12" sm="12" :md="config.md ? config.md : 2" class="v-col-fieldset-default">
+		<label :for="inputId">
+			{{ label }}
+			<span class="required" v-if="config.required">*</span>
+		</label>
+		<v-text-field
+			append-icon="mdi-magnify "
+			color="secondary"
+			outlined
+			dense
+			readonly
+			:id="inputId"
+			:value="selectedValueText"
+			@click="openModal"
+		></v-text-field>
+
+		<v-dialog content-class="modal-default modal-default-small" v-model="showModal">
+			<DialogHeader class="dialog-header" :title="modalTitle" @onClose="closeModal" />
+
+			<v-main class="mt-9">
+				<Loader class="text-center mb-2" v-if="isLoading" />
+				<fieldset class="fieldset-default mx-4 mb-3" v-if="!isLoading">
+					<label for="searchInput"> {{ label }} </label>
+					<v-text-field
+						color="secondary"
+						id="searchInput"
+						outlined
+						dense
+						hide-details
+						:placeholder="placeholder"
+						v-model="searchValue"
+					/>
+				</fieldset>
+
+				<v-data-table
+					v-if="!isLoading"
+					id="inputModalOptionsTable"
+					class="v-data-table__clickable v-data-table__select-modal"
+					hide-default-footer
+					hide-default-header
+					:items="items"
+					:headers="headers"
+					:options.sync="pagination"
+					:search="searchValue"
+					:custom-filter="customFilter"
+					@click:row="handleClick"
+					@pagination="handlePagination"
+				>
+					<template slot="no-data">
+						<DataTableEmptyWrapper />
+					</template>
+					<template slot="no-results">
+						<DataTableEmptyWrapper />
+					</template>
+					<template v-slot:[`item.label`]="{ item }">
+						<td :title="getItemLabel(item)" aria-role="button">
+							{{ getItemLabel(item) }}
+						</td>
+					</template>
+
+					<template v-slot:footer>
+						<DataTablePaginator
+							class="my-6"
+							hidePerPageOptions
+							:initialLimitPerPage="pagination.itemsPerPage"
+							:page="pagination.page"
+							:totalPages="pagination.pages"
+							@onChangePage="onChangePage"
+						/>
+					</template>
+				</v-data-table>
+			</v-main>
+			<DialogFooter :hasConfirm="false" @onClose="closeModal" />
+		</v-dialog>
+	</v-col>
+</template>
+<script>
+import Vue from 'vue';
+import VTextField from 'vuetify/lib/components/VTextField';
+import { VCol } from 'vuetify/lib/components/VGrid';
+import { VMain } from 'vuetify/lib/components/VMain';
+import { VDataTable } from 'vuetify/lib/components/VDataTable/';
+import { VDialog } from 'vuetify/lib/components/VDialog/';
+import { DialogHeader, DialogFooter, DataTableEmptyWrapper, DataTablePaginator } from '../../main';
+
+export default Vue.extend({
+	name: 'farm-select-modal-options',
+	components: {
+		VTextField,
+		VCol,
+		VMain,
+		VDataTable,
+		VDialog,
+		DialogHeader,
+		DialogFooter,
+		DataTableEmptyWrapper,
+		DataTablePaginator,
+	},
+	props: {
+		/**
+		 * Input Label
+		 */
+		label: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Input ID
+		 */
+		inputId: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Key used to get value from selected item
+		 */
+		selectIdentifier: {
+			type: String,
+			default: 'id',
+		},
+		/**
+		 * Format label from each item
+		 * If value is a function, it is evaluted (use it to build complex strings)
+		 * Otherwise, will get item value from the key with the prop value
+		 */
+		itemLabelFormatter: {
+			default: 'name',
+		},
+		/**
+		 * Items to be shown in the table
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Function that will be called when user focus/click the input
+		 */
+		loadFn: {
+			type: Function,
+			default: () => {},
+		},
+		/**
+		 * Request Status from the loader function
+		 */
+		loadingRequestStatus: {
+			default: 'IDLE',
+		},
+		/**
+		 * Title from the modal
+		 */
+		modalTitle: {
+			type: String,
+			default: 'Selecione um item',
+		},
+		/**
+		 * General configuration
+		 */
+		config: {
+			default: () => ({ md: 2, required: false }),
+		},
+		/**
+		 * Placeholder from the search input
+		 */
+		placeholder: {
+			type: String,
+			default: 'Pesquise',
+		},
+		/**
+		 * v-model
+		 */
+		value: {
+			required: true,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+		isLoading() {
+			return this.loadingRequestStatus === 'START';
+		},
+		selectedValueText: {
+			get() {
+				return this.selectedItem ? this.getItemLabel(this.selectedItem) : '';
+			},
+		},
+		totalPages() {
+			if (this.items !== undefined) {
+				return Math.ceil(this.items.length / 10);
+			}
+			return 0;
+		},
+	},
+	data() {
+		return {
+			selectedValue: {},
+			showModal: false,
+			selectedItem: null,
+			searchValue: '',
+			headers: [
+				{
+					text: 'Label',
+					sortable: false,
+					value: 'label',
+					align: 'left',
+				},
+			],
+			pagination: {
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			},
+		};
+	},
+	watch: {
+		value(newValue) {
+			if (!newValue || newValue === undefined) {
+				this.selectedItem = null;
+			}
+		},
+		items(newValue) {
+			this.pagination.pages = Math.ceil(newValue.length / 10);
+		},
+	},
+	methods: {
+		handlePagination(tablePagination) {
+			if (
+				tablePagination.page === 1 &&
+				tablePagination.itemsLength !== this.pagination.pages
+			) {
+				this.pagination.pages = Math.ceil(tablePagination.itemsLength / 10);
+			}
+		},
+		openModal() {
+			this.loadFn();
+			this.showModal = true;
+		},
+		closeModal() {
+			this.showModal = false;
+		},
+		onChangePage(newPage) {
+			this.pagination.page = newPage;
+		},
+		getItemLabel(item) {
+			if (typeof this.itemLabelFormatter === 'function') {
+				return this.itemLabelFormatter(item);
+			}
+			return item[this.itemLabelFormatter];
+		},
+		handleClick(item) {
+			this.inputVal = item[this.selectIdentifier];
+			this.showModal = false;
+			this.selectedItem = item;
+		},
+		customFilter(_, search, item) {
+			const label = this.getItemLabel(item);
+			return label.toLowerCase().includes(search.toLowerCase());
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+.v-text-field {
+	cursor: pointer;
+}
+</style>

package/src/components/SelectModalOptions/__tests__/SelectModalOptions.spec.js

@@ -0,0 +1,130 @@
+import { shallowMount } from '@vue/test-utils';
+import SelectModalOptions from '../SelectModalOptions';
+
+describe('SelectModalOptions component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(SelectModalOptions, {
+			propsData: {
+				value: 1,
+				inputId: 'some-id',
+				label: '',
+				pagination: {
+					page: 1,
+					itemsPerPage: 10,
+					pages: 0,
+				},
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('SelectModalOptions created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should open modal', () => {
+			component.openModal();
+			expect(component.showModal).toBeTruthy();
+		});
+
+		it('Should close close', () => {
+			component.closeModal();
+			expect(component.showModal).toBeFalsy();
+		});
+
+		it('Should get item value', async () => {
+			expect(component.getItemLabel({ name: 'a' })).toEqual('a');
+
+			await wrapper.setProps({ itemLabelFormatter: item => item.name + ' ' + item.id });
+			expect(component.getItemLabel({ name: 'a', id: 'b' })).toEqual('a b');
+		});
+
+		it('Should handle click', () => {
+			component.handleClick({ name: 'a', id: 1 });
+			expect(component.inputVal).toEqual(1);
+			expect(component.selectedItem.id).toEqual(1);
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should check if is loading', () => {
+			expect(component.isLoading).toBeFalsy();
+		});
+
+		it('Should return 0 when items are empty', () => {
+			expect(component.totalPages).toBe(0);
+		});
+
+		it('Should return 0 when items are empty', async () => {
+			await wrapper.setProps({
+				items: new Array(30).fill(0),
+			});
+			expect(component.totalPages).toBe(3);
+		});
+
+		it('Should return 0 when items are empty', async () => {
+			await wrapper.setProps({
+				items: new Array(30).fill(0),
+			});
+			expect(component.totalPages).toBe(3);
+		});
+	});
+
+	describe('Watch methods', () => {
+		it('Should reset selectedItem', () => {
+			component.$options.watch.value.call(component, undefined);
+			expect(component.selectedItem).toEqual(null);
+		});
+		it('Should reset selectedItem', () => {
+			component.$options.watch.items.call(component, new Array(50));
+
+			expect(component.pagination.pages).toBe(5);
+		});
+		it('Should change pagination', () => {
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+			component.handlePagination({
+				page: 1,
+				itemsLength: 1,
+			});
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 1,
+			});
+		});
+		it('Should not change pagination', () => {
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+			component.handlePagination({
+				page: 2,
+				itemsLength: 30,
+			});
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+		});
+
+		it('Should change page', () => {
+			component.onChangePage(2);
+			expect(component.pagination.page).toBe(2);
+		});
+
+		it('Should do customFilter', () => {
+			expect(component.customFilter({}, 'key', { name: '21321' })).toBeFalsy();
+			expect(component.customFilter({}, 'key', { name: 'aS KEY SDSA' })).toBeTruthy();
+		});
+	});
+});

package/src/components/SelectModalOptions/index.js

@@ -0,0 +1,4 @@
+import SelectModalOptions from './SelectModalOptions';
+
+export { SelectModalOptions };
+export default SelectModalOptions;

package/src/main.js

@@ -54,3 +54,5 @@ export * from './components/Buttons/RemoveButton/';
 export * from './components/Logos/ProductLogo/';
 export * from './components/Logos/OriginatorLogo/';
 export * from './components/ResetTableRowSelection/';
+export * from './components/MultipleSelectShortener/';
+export * from './components/SelectModalOptions/';