Ver código fonte

HUE-9485 [frontend] Add a Vue table component

Johan Ahlen 5 anos atrás
pai
commit
b704a14b94

+ 22 - 0
desktop/core/src/desktop/js/components/HueTable.d.ts

@@ -0,0 +1,22 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export interface Column {
+  label: string;
+  key: string;
+}
+
+export type Row = { [key: string]: unknown };

+ 41 - 0
desktop/core/src/desktop/js/components/HueTable.test.ts

@@ -0,0 +1,41 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { shallowMount } from '@vue/test-utils'
+import { Column, Row } from './HueTable';
+import HueTable from './HueTable.vue'
+
+describe('HueTable.vue', () => {
+  it('should render a table', () => {
+    const wrapper = shallowMount(HueTable, {
+      propsData: {
+        columns: <Column[]>[
+          { key: 'a', label: 'A' },
+          { key: 'd', label: 'D' },
+          { key: 'c', label: 'C' },
+          { key: 'b', label: 'B' }
+        ],
+        rows: <Row[]>[
+          { a: '1', b: 5, c: false, d: undefined },
+          { a: '2', b: 6, c: true, d: null },
+          { a: '3', b: 7, c: false },
+          { a: '4', b: 8, c: true },
+        ]
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  })
+})

+ 54 - 0
desktop/core/src/desktop/js/components/HueTable.vue

@@ -0,0 +1,54 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<!--
+  TODO: Decide whether we should have our own or replace with vue-good-table, vue-tables-2, bootstrap-vue etc.
+        More at https://awesome-vue.js.org/components-and-libraries/ui-components.html
+-->
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th v-for="(column, colIndex) in columns" :key="colIndex">{{ column.label }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+        <td v-for="(column, colIndex) in columns" :key="colIndex">{{ row[column.key] }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+  import { Column, Row } from './HueTable';
+
+  @Component
+  export default class HueTable extends Vue {
+    @Prop({ required: false, default: () => [] })
+    rows?: Row[];
+    @Prop({ required: false, default: () => [] })
+    columns?: Column[];
+  }
+</script>
+
+<style lang="scss" scoped></style>

+ 81 - 0
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HueTable.vue should render a table 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th>
+        A
+      </th>
+      <th>
+        D
+      </th>
+      <th>
+        C
+      </th>
+      <th>
+        B
+      </th>
+    </tr>
+  </thead>
+   
+  <tbody>
+    <tr>
+      <td>
+        1
+      </td>
+      <td>
+        
+      </td>
+      <td>
+        false
+      </td>
+      <td>
+        5
+      </td>
+    </tr>
+    <tr>
+      <td>
+        2
+      </td>
+      <td>
+        
+      </td>
+      <td>
+        true
+      </td>
+      <td>
+        6
+      </td>
+    </tr>
+    <tr>
+      <td>
+        3
+      </td>
+      <td>
+        
+      </td>
+      <td>
+        false
+      </td>
+      <td>
+        7
+      </td>
+    </tr>
+    <tr>
+      <td>
+        4
+      </td>
+      <td>
+        
+      </td>
+      <td>
+        true
+      </td>
+      <td>
+        8
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;