@farm-investimentos/front-mfe-components 9.1.1 → 9.2.1

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/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';

package/src/scss/Sticky-table.scss

@@ -10,7 +10,7 @@ $defaultLefts: 0, 4rem, 4rem;
 		tr td {
 			background-color: white;
 		}
-		tr th {
+		.v-data-table-header tr th {
 			color: var(--v-primary-base);
 			text-transform: uppercase;
 			font-weight: bold;