@farm-investimentos/front-mfe-components 9.1.2 → 9.2.2

package/src/components/Logger/Logger.stories.js

@@ -59,3 +59,58 @@ export const Primary = () => ({
 	},
 	template: `<farm-logger :items="items" />`,
 });
+
+export const Details = () => ({
+	data() {
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+			],
+		};
+	},
+	template: `<farm-logger :items="items" />`,
+});

package/src/components/Logger/LoggerItem/ILoggerItem.ts

@@ -4,6 +4,7 @@ interface ILoggerItem {
 	formattedDate: string;
 	message: string;
 	status: string;
+	details: Function;
 }
 
 export default ILoggerItem;

package/src/components/Logger/LoggerItem/LoggerItem.stories.js

@@ -74,3 +74,43 @@ export const CustomIcon = () => ({
 	},
 	template: `<farm-logger-item :item="item" />`,
 });
+
+export const Details = () => ({
+	data() {
+		return {
+			items: [
+				{
+					icon: 'book',
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Reprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Reprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'primary',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+			],
+		};
+	},
+	template: `<div><farm-logger-item v-for="item of items" :key="item.status" :item="item" /></div>`,
+});

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -19,6 +19,14 @@
 				{{ item.userName }}
 			</span>
 		</div>
+		<farm-btn
+			v-if="hasDetails"
+			:color="buttonColor"
+			plain
+			title="Ver Detalhes"
+			@click="callDetails"
+			>Ver Detalhes</farm-btn
+		>
 	</section>
 </template>
 <script lang="ts">
@@ -33,8 +41,13 @@ export default Vue.extend({
 		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
 	},
+	methods: {
+		callDetails(): void {
+			this.item.details();
+		},
+	},
 	computed: {
-		mdiIconName() {
+		mdiIconName(): string {
 			if (this.item.icon) {
 				return `${this.item.icon}`;
 			}
@@ -43,9 +56,21 @@ export default Vue.extend({
 			}
 			return `${this.item.status === 'success' ? 'check' : 'close'}`;
 		},
+		buttonColor(): string {
+			if (this.item.status === 'success') {
+				return 'secondary';
+			} else if (this.item.status === 'error') {
+				return 'error';
+			}
+
+			return 'primary';
+		},
+		hasDetails(): boolean {
+			return !!this.item.details;
+		},
 	},
 });
 </script>
 <style lang="scss" scoped>
-@import './LoggerItem.scss'
+@import './LoggerItem.scss';
 </style>

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -49,5 +49,45 @@ describe('LoggerItem component', () => {
 			expect(component.mdiIconName).toEqual('close');
 		});
 
+		it('Should return success button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'success',
+				},
+			});
+			expect(component.buttonColor).toEqual('secondary');
+		});
+
+		it('Should return error button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'error',
+				},
+			});
+			expect(component.buttonColor).toEqual('error');
+		});
+
+		it('Should return default button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'primary',
+				},
+			});
+			expect(component.buttonColor).toEqual('primary');
+		});
+
+		it('Should not have a detail button', async () => {
+			await wrapper.setProps({
+				item: {
+					details: () => {},
+				},
+			});
+
+			expect(component.hasDetails).toBeTruthy();
+		});
+
+		it('Should not have a detail button', () => {
+			expect(component.hasDetails).toBeFalsy();
+		});
 	});
 });

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -3,21 +3,52 @@ import MultipleFilePicker from './MultipleFilePicker.vue';
 export default {
 	title: 'Form/MultipleFilePicker',
 	component: MultipleFilePicker,
+	parameters: {
+		docs: {
+			description: {
+				component: `Multiple File Picker<br />
+				selector: <em>farm-multiple-filepicker</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	template: '<MultipleFilePicker />',
+	template: '<farm-multiple-filepicker />',
 });
 
 export const MaxFileSize = () => ({
-	template: '<MultipleFilePicker :maxFileSize="5" />',
+	template: '<farm-multiple-filepicker :maxFileSize="5" />',
 });
 
 export const MaxFilesNumber = () => ({
-	template: '<MultipleFilePicker :maxFileSize="5" :maxFilesNumber="1" />',
+	template: '<farm-multiple-filepicker :maxFileSize="5" :maxFilesNumber="1" />',
 });
 
 export const Download = () => ({
 	template:
-		'<MultipleFilePicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
+		'<farm-multiple-filepicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
+});
+
+export const InvalidFiles = () => ({
+	data() {
+		return {
+			fileTypes:
+				'.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
+		};
+	},
+	methods: {
+		onInvalidFiles(files) {
+			alert(`${files.length} invalid file(s)`);
+		},
+	},
+	template: `<div>
+		<farm-multiple-filepicker
+			:maxFileSize="5"
+			:maxFilesNumber="3"
+			:acceptedFileTypes="fileTypes"
+			@onInvalidFiles="onInvalidFiles" />
+	</div>`,
 });

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -94,8 +94,6 @@
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import DefaultButton from '../Buttons/DefaultButton';
-import Icon from '../Icon';
 import { sizeOf } from '@farm-investimentos/front-mfe-libs-ts';
 
 export type DownloadFiles = {
@@ -106,10 +104,7 @@ export type DownloadFiles = {
 
 export default Vue.extend({
 	name: 'farm-multiple-filepicker',
-	components: {
-		'farm-btn': DefaultButton,
-		'farm-icon': Icon,
-	},
+
 	props: {
 		/*
 		 * Accepted file types
@@ -200,15 +195,11 @@ export default Vue.extend({
 				this.$emit('onFileChange', newValue);
 				return;
 			}
-			const invalidTypeArray = newValue.filter(file => {
-				if (
+			const invalidTypeArray = newValue.filter(
+				file =>
 					this.acceptedFileTypes !== '*' &&
 					this.acceptedFileTypes.indexOf(file.type) === -1
-				) {
-					return true;
-				}
-				return false;
-			});
+			);
 
 			if (invalidTypeArray.length > 0) {
 				const validTypeArray = newValue.filter(file => {
@@ -217,7 +208,7 @@ export default Vue.extend({
 					}
 					return true;
 				});
-
+				this.$emit('onInvalidFiles', [...invalidTypeArray]);
 				this.files = validTypeArray;
 				return;
 			}

package/src/examples/Modal.stories.js

@@ -1,5 +1,4 @@
 import { withDesign } from 'storybook-addon-designs';
-import { DialogHeader, DialogFooter } from '../main';
 
 export default {
 	title: 'Display/Dialog/Examples',

package/src/examples/Table.stories.js

@@ -1,4 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
+import DataTableEmptyWrapper from '../components/DataTableEmptyWrapper';
+import DataTablePaginator from '../components/DataTablePaginator';
 
 const headers = [
 	{

package/src/main.ts

@@ -50,6 +50,7 @@ export {
 };
 
 export * from './components/AlertReload';
+export * from './components/ButtonToggle';
 export * from './components/Buttons/DefaultButton';
 export * from './components/Buttons/DangerButton';
 export * from './components/Buttons/ConfirmButton';