Merge pull request #195 from OnroerendErfgoed/feature/105_no_rows_ove…

…rlay_component

Feature/105 no rows overlay component

src/__tests__/NoRowsOverlay.cy.ts

@@ -0,0 +1,32 @@
+import { defineComponent } from 'vue';
+import NoRowsOverlay from '@/components/dumb/NoRowsOverlay.vue';
+
+describe('NoRowsOverlay', () => {
+  const TestComponent = defineComponent({
+    components: { NoRowsOverlay },
+    data: () => {
+      return {
+        params: {
+          noRowsMessage: 'No rows available',
+        },
+      };
+    },
+    template: '<no-rows-overlay :params="params"/>',
+  });
+
+  beforeEach(() => {
+    cy.mount(TestComponent);
+  });
+
+  it('has a wrapper with class ag-overlay-loading-center', () => {
+    cy.dataCy('ag-overlay').should('have.class', 'ag-overlay-loading-center');
+  });
+
+  it('renders a warning icon', () => {
+    cy.dataCy('warning-icon').should('exist').should('have.attr', 'data-icon', 'circle-exclamation');
+  });
+
+  it('renders the given no rows message', () => {
+    cy.dataCy('ag-overlay').invoke('text').should('contain', 'No rows available');
+  });
+});

src/components/dumb/NoRowsOverlay.vue

@@ -0,0 +1,12 @@
+<template>
+  <div data-cy="ag-overlay" class="ag-overlay-loading-center">
+    <font-awesome-icon data-cy="warning-icon" :icon="['fas', 'circle-exclamation']" />
+    {{ props.params.noRowsMessage }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+const props = defineProps<{ params: { noRowsMessage: string } }>();
+</script>

src/components/dumb/index.ts

@@ -5,6 +5,7 @@ import FilterRadio from './FilterRadio.vue';
 import FilterSelect from './FilterSelect.vue';
 import FilterText from './FilterText.vue';
 import InputPhone from './InputPhone.vue';
+import NoRowsOverlay from './NoRowsOverlay.vue';
 import OeAutocomplete from './OeAutocomplete.vue';
 import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
@@ -24,6 +25,7 @@ export {
   FilterSelect,
   FilterText,
   InputPhone,
+  NoRowsOverlay,
   OeAutocomplete,
   OeButton,
   OeContainer,

src/stories/dumb-components/no-rows-overlay.stories.ts

@@ -0,0 +1,21 @@
+import NoRowsOverlay from '@components/dumb/NoRowsOverlay.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const meta: Meta<typeof NoRowsOverlay> = {
+  title: 'Dumb components/NoRowsOverlay',
+  component: NoRowsOverlay,
+  tags: ['autodocs'],
+  argTypes: {
+    params: { control: 'object' },
+  },
+  args: {
+    params: {
+      noRowsMessage: 'No rows available',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NoRowsOverlay>;
+
+export const Default: Story = {};