@farm-investimentos/front-mfe-components 3.1.0 → 3.3.0

package/package.json

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

package/src/components/Buttons/MultiImportButton/MultiImportButton.scss

@@ -0,0 +1,17 @@
+.v-btn.v-btn--import {
+	background: var(--v-extra-lighten2);
+	color: var(--v-gray-lighten5);
+	.v-icon {
+		margin-right: 1rem;
+	}
+}
+
+.v-list-item {
+	border-bottom: 1px solid var(--v-gray-lighten2);
+	&:last-child {
+		border-bottom: none;
+	}
+}
+.v-list-item--link {
+	font-size: 0.875rem;
+}

package/src/components/Buttons/MultiImportButton/MultiImportButton.stories.js

@@ -0,0 +1,19 @@
+import MultiImport from './MultiImportButton.vue';
+
+export default {
+	title: 'Example/Buttons/MultiImport',
+	component: MultiImport,
+};
+
+export const Primary = () => ({
+	components: { MultiImport },
+	template: '<MultiImport />',
+});
+
+export const List = () => ({
+	components: { MultiImport },
+	template: `<MultiImport :optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]" />`,
+});
+
+Primary.storyName = 'Básico';
+List.storyName = 'Lista';

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -0,0 +1,78 @@
+<template>
+	<v-menu
+		content-class="elevation-1"
+		v-model="togglePopover"
+		:offset-y="true"
+		:rounded="'b t-0'"
+	>
+		<template v-slot:activator="{ on, attrs }">
+			<v-btn
+				v-bind="attrs"
+				v-on="on"
+				dense
+				@onClick="togglePopover = true"
+				class="v-btn--responsive v-btn--import"
+				outlined
+				title="Importar"
+			>
+				Importar
+				<v-icon class="ml-2 mr-0">
+					{{ togglePopover ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+				</v-icon>
+			</v-btn>
+		</template>
+
+		<v-list dense class="pa-0">
+			<v-list-item
+				v-for="option in optionsList"
+				:key="option.listenerKey"
+				link
+				:title="option.title"
+				@click="$emit('onClick', option.listenerKey)"
+			>
+				<v-list-item-content>
+					<v-list-item-title>{{ option.title }}</v-list-item-title>
+				</v-list-item-content>
+			</v-list-item>
+		</v-list>
+	</v-menu>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+import VIcon from 'vuetify/lib/components/VIcon';
+import VList from 'vuetify/lib/components/VList/VList';
+import VMenu from 'vuetify/lib/components/VMenu';
+import VListItem from 'vuetify/lib/components/VList/VListItem';
+import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+
+export default Vue.extend({
+	name: 'farm-btn-multipleimport',
+	components: {
+		VBtn,
+		VIcon,
+		VList,
+		VListItem,
+		VMenu,
+		VListItemContent,
+		VListItemTitle,
+	},
+	props: {
+		/**
+		 * Lista de opções para o menu dropdown
+		 */
+		optionsList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			togglePopover: false,
+		};
+	},
+});
+</script>
+<style scoped lang="scss">
+@import './MultiImportButton.scss';
+</style>

package/src/components/Buttons/MultiImportButton/__tests__/MultiImportButton.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import MultiImportButton from '../MultiImportButton';
+
+describe('MultiImportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(MultiImportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/MultiImportButton/index.js

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

package/src/components/DefaultTextField/DefaultTextField.stories.js

@@ -1,19 +1,43 @@
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
-    title: 'Example/Form/DefaultTextField',
-    component: DefaultTextField,
+	title: 'Example/Form/DefaultTextField',
+	component: DefaultTextField,
 };
 
 export const Primary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'}" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'primary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField v-model="model" :item="item" />',
 });
 
 export const Secondary = () => ({
-    components: { DefaultTextField },
-    template: '<DefaultTextField :item="{ label: \'Nome do campo\'} :required="true" />',
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'secondary',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" required="true" />',
+});
+
+export const ReadOnly = () => ({
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: 'readonly',
+			item: { label: 'Nome do campo', key: 'key' },
+		};
+	},
+	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
 });
 
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Label de obrigatório';
+ReadOnly.storyName = 'Input readonly';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -1,18 +1,19 @@
 <template>
 	<v-col cols="12" sm="12" :md="item.md ? item.md : 2" class="v-col-fieldset-default pl-0">
-		<label :for="`${forKey}-${item.key}`">
+		<label :for="inputId">
 			{{ item.label }}
 			<span class="required" v-if="required && !disabled">*</span>
 		</label>
 		<v-text-field
-			:id="`${forKey}-${item.key}`"
 			color="secondary"
 			v-model="inputVal"
 			outlined
 			dense
 			v-mask="`${mask ? mask : ''}`"
+			:id="inputId"
 			:rules="inputRules"
 			:disabled="disabled"
+			:readonly="readonly"
 		></v-text-field>
 	</v-col>
 </template>
@@ -38,16 +39,20 @@ export default {
 		forKey: {
 			type: String,
 			required: false,
+			default: 'form',
 		},
 		required: {
 			type: Boolean,
 			default: false,
-			required: false,
 		},
 		mask: {
 			type: String,
 			default: null,
 		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	components: {
 		VCol,
@@ -71,6 +76,9 @@ export default {
 			}
 			return [];
 		},
+		inputId() {
+			return `${this.forKey}-${this.item.key}`;
+		},
 	},
 };
 </script>

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

@@ -3,14 +3,16 @@ import DefaultTextField from '../DefaultTextField';
 
 describe('DefaultTextField component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DefaultTextField, {
 			propsData: {
-				item: {},
+				item: { key: 'key' },
 				value: false,
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -22,4 +24,10 @@ describe('DefaultTextField component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should have inputId', () => {
+			expect(component.inputId).toEqual('form-key');
+		});
+	});
 });

package/src/components/MultipleSelectShortener/MultipleSelectShortener.vue

@@ -1,11 +1,9 @@
 <template>
 	<div class="align-center">
-		<div>
-			<span class="mr-1" v-if="index === 0">{{ item[labelKey] }}</span>
-			<span v-if="index === 1">
-				(+{{ itemsLength - 1 }} {{ itemsLength > 2 ? 'outros' : 'outro' }} )
-			</span>
-		</div>
+		<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>
 
@@ -42,3 +40,9 @@ export default Vue.extend({
 	},
 });
 </script>
+
+<style scoped>
+.label {
+	font-size: 0.75rem;
+}
+</style>

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>