@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Tables/TeachTable.md

@@ -0,0 +1,696 @@
+```vue
+<template>
+    <div>
+        <div class="table-examples__summary">
+            Table with count, search, sort, row selection, and max height
+            <ul class="table-examples__list">
+                <li>Teach Admin - Organizations</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__1"
+            name="Organizations"
+            rows-max-height="558px"
+            :count="table1.rows.length"
+            :rows="table1.rows"
+            :columns="table1.columns"
+            :default-selected-row-id="table1.defaultSelectedRowId"
+            :show-search="true"
+            :show-selected="true"
+            :grid="grid"
+            :table-content-styles="{
+                borderWidth: '1px 1px 0 1px',
+                borderColor: '#dfe3e7',
+                borderStyle: 'solid',
+            }"
+            :table-column-labels-styles="{
+                paddingLeft: '16px',
+                backgroundColor: '#f4f5f9',
+            }"
+            :table-row-styles="{
+                paddingLeft: '16px',
+            }"
+            @sort="table1.updateSortSettings"
+            @searchStringChanged="table1.searchStringChanged"
+            @rowClicked="table1.rowClicked"
+        />
+        <div class="table-examples__summary">
+            Table with actions, count, sort, row selection, and row ordering
+            <ul class="table-examples__list">
+                <li>Teach Stats Sidebar - Groups</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__11"
+            name="Groups"
+            :count="table11.rows.length"
+            :actions="table11.actions"
+            :rows="table11.rows"
+            :columns="table11.columns"
+            :default-selected-row-id="table11.defaultSelectedRowId"
+            :show-drag-and-drop="table11.showDragAndDrop"
+            :show-selected="true"
+            :grid="grid"
+            :table-content-styles="{
+                borderWidth: '1px 1px 0 1px',
+                borderColor: '#dfe3e7',
+                borderStyle: 'solid',
+            }"
+            :table-column-labels-styles="{
+                paddingLeft: '16px',
+                backgroundColor: '#f4f5f9',
+            }"
+            :table-row-styles="{
+                paddingLeft: '16px',
+            }"
+            @rowClicked="table11.rowClicked"
+            @actionClicked="table11.actionClicked"
+            @sort="table11.updateSortSettings"
+            @rowMoved="table11.rowMoved"
+        />
+        <div class="table-examples__summary">
+            Table with actions, count and total, search, sort, filters, and row selection
+            <ul class="table-examples__list">
+                <li>Teach Stats Sidebar - Students</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__12"
+            name="Students"
+            :count="table12.rows.length"
+            :total="table12.rows.length"
+            :actions="table12.actions"
+            :columns="table12.columns"
+            :rows="table12.rows"
+            :show-search="true"
+            :show-filters="true"
+            :filter-chips="table12.filterChips"
+            :default-sort="{ column: table12.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-selected="true"
+            :default-selected-row-id="table12.defaultSelectedRowId"
+            :grid="grid"
+            :table-content-styles="{
+                borderWidth: '1px 1px 0 1px',
+                borderColor: '#dfe3e7',
+                borderStyle: 'solid',
+            }"
+            :table-column-labels-styles="{
+                paddingLeft: '16px',
+                backgroundColor: '#f4f5f9',
+            }"
+            :table-row-styles="{
+                paddingLeft: '16px',
+            }"
+            @rowClicked="table12.rowClicked"
+            @searchStringChanged="table12.updateSearchString"
+            @actionClicked="table12.actionClicked"
+            @sort="table12.updateSortSettings"
+        />
+        <div class="table-examples__summary">
+            Open Table with count, search, sort, row selection, and pagination
+            <ul class="table-examples__list">
+                <li>Teach Admin - Instructors</li>
+                <li>Teach Admin - Instructor's Visible Groups</li>
+                <li>Teach Admin - Students</li>
+                <li>Teach Admin - Student's Groups</li>
+                <li>Teach Admin - Groups</li>
+                <li>Teach Admin - Group's Students</li>
+                <li>Teach Admin - Exams</li>
+                <li>Teach Admin - Licenses</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__2"
+            name="Open Table with count, default sort, pagination, search, and row selection"
+            theme="open"
+            :count="table2.rows.length"
+            :rows="table2.rows"
+            :columns="table2.columns"
+            :default-sort="{ column: table2.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-pagination="true"
+            :per-page="5"
+            :show-search="true"
+            :show-selected="true"
+            :grid="grid"
+            @sort="table2.updateSortSettings"
+            @searchStringChanged="table2.searchStringChanged"
+            @rowClicked="table2.rowClicked"
+        />
+        <div class="table-examples__summary">
+            Open Table with sort, row edit, row segment control, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Settings - Groups</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__3"
+            theme="open"
+            :rows="table3.rows"
+            :columns="table3.columns"
+            :default-sort="{ column: table3.columns[1], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-row-edit="true"
+            tooltip-text="Edit Group"
+            :show-row-segment-control="true"
+            segment-control-label="Segment Control Example"
+            :grid="grid"
+            @segmentControlChange="table3.segmentControlChange"
+            @sort="table3.updateSortSettings"
+            @editClicked="table3.editClicked"
+        />
+        <div class="table-examples__summary">
+            Open Table with sort, row edit, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Settings - Instructors</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__4"
+            theme="open"
+            :rows="table4.rows"
+            :columns="table4.columns"
+            :default-sort="{ column: table4.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-row-edit="true"
+            tooltip-text="Edit Prep"
+            :grid="grid"
+            @sort="table4.updateSortSettings"
+            @editClicked="table4.editClicked"
+        />
+        <div class="table-examples__summary">
+            Open Table with sort, row edit, checked rows, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Settings - Seats</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__5"
+            theme="open"
+            :rows="table5.rows"
+            :columns="table5.columns"
+            :default-sort="{ column: table5.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-row-edit="true"
+            :show-checkboxes="true"
+            :disable-row-checked-color="true"
+            :initial-checked-rows="[ 1 ]"
+            tooltip-text="Edit Prep"
+            :grid="grid"
+            @sort="table5.updateSortSettings"
+            @checkedRowsChanged="table5.checkedRowsChanged"
+        />
+        <div class="table-examples__summary">
+            Open Table with search, sort, row edit, pagination, row buttons, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Settings - Students</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__6"
+            theme="open"
+            :rows="table6.rows"
+            :columns="table6.columns"
+            :default-sort="{ column: table6.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-row-edit="true"
+            :show-search="true"
+            :show-pagination="true"
+            :show-row-button="true"
+            :row-button-styles="{ width: '102px' }"
+            plural-item-name="Students"
+            row-button-text="Cancel Invite"
+            tooltip-text="Edit Invite"
+            :grid="grid"
+            @sort="table6.updateSortSettings"
+            @searchStringChanged="table6.updateSearchString"
+            @editClicked="table6.editClicked"
+            @rowButtonClicked="table6.buttonClicked"
+        />
+        <div class="table-examples__summary">
+            Open Table with search, sort, checked rows, pagination, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Add Group Side Panel - Add Students</li>
+                <li>Teach Edit Group -> Select Students Side Panel - Students</li>
+                <li>Teach Admin -> Add Exams Side Panel - Exams</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__7"
+            theme="open"
+            :rows="table7.rows"
+            :columns="table7.columns"
+            :default-sort="{ column: table7.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-search="true"
+            :show-pagination="true"
+            :show-checkboxes="true"
+            plural-item-name="Students"
+            :grid="grid"
+            @sort="table7.updateSortSettings"
+            @searchStringChanged="table7.updateSearchString"
+            @checkedRowsChanged="table7.updatedCheckedRows"
+        />
+        <div class="table-examples__summary">
+            Open Table with search, sort, row buttons, pagination, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Add Group Side Panel - Preview Group</li>
+                <li>Teach Edit Group Side Panel - Group Students</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__8"
+            theme="open"
+            :rows="table8.rows"
+            :columns="table8.columns"
+            :default-sort="{ column: table8.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :show-search="true"
+            :show-pagination="true"
+            :show-row-button="true"
+            plural-item-name="Students"
+            row-button-text="Remove"
+            :grid="grid"
+            @sort="table8.updateSortSettings"
+            @searchStringChanged="table8.updateSearchString"
+            @rowButtonClicked="table8.rowButtonClicked"
+        />
+        <div class="table-examples__summary">
+            Open Table with sort and no header label
+            <ul class="table-examples__list">
+                <li>Teach Add Students Side Panel - Add Emails</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__9"
+            theme="open"
+            :rows="table9.rows"
+            :columns="table9.columns"
+            :default-sort="{ column: table9.columns[0], direction: 1 }"
+            :sort-toggle-order="[ 1, -1 ]"
+            :show-header="false"
+            :grid="grid"
+            @sort="table9.updateSortSettings"
+        />
+        <div class="table-examples__summary">
+            Open Table with sort, row buttons, and no header label
+            <ul class="table-examples__list">
+                <li>Teach Edit Instructor Side Panel - Exams</li>
+                <li>Teach Edit Student Side Panel - Student Groups</li>
+            </ul>
+        </div>
+        <Table
+            class="table-examples__10"
+            theme="open"
+            :rows="table10.rows"
+            :columns="table10.columns"
+            :show-header="false"
+            :show-row-button="true"
+            row-button-text="Remove"
+            :row-button-styles="{ width: '69px' }"
+            :grid="grid"
+            @rowButtonClicked="table10.rowButtonClicked"
+            @sort="table10.updateSortSettings"
+        />
+    </div>
+</template>
+
+<script>
+import Table from '../Tables/Table.vue'
+
+// const grid = {
+//     'display': 'inline-grid',
+//     'grid-template-columns': 'repeat(2, minmax(150px, 1fr))',
+// }
+const grid = undefined
+
+const rows1 = [{
+    id: 1,
+    exampleApp: 'Teach Admin',
+    data: 'Organizations',
+}]
+const columns1 = [{
+    name: 'App Context',
+    propName: 'exampleApp',
+    styles: {
+        'min-width': '260px',
+    },
+}, {
+    name: 'Data',
+    propName: 'data',
+    styles: {
+        'min-width': '260px',
+    },
+}]
+const table1 = {
+    rows: rows1,
+    columns: columns1,
+    defaultSelectedRowId: 1,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    searchStringChanged: (searchString) => {
+        // noop
+    },
+    rowClicked: (row) => {
+        // noop
+    }
+}
+
+const rows2 = [{
+    id: 1,
+    exampleApp: 'Teach Admin',
+    data: 'Instructors',
+}, {
+    id: 2,
+    exampleApp: 'Teach Admin',
+    data: 'Instructor\'s Visible Groups',
+}, {
+    id: 3,
+    exampleApp: 'Teach Admin',
+    data: 'Students',
+}, {
+    id: 4,
+    exampleApp: 'Teach Admin',
+    data: 'Student\'s Groups',
+}, {
+    id: 5,
+    exampleApp: 'Teach Admin',
+    data: 'Groups',
+}, {
+    id: 6,
+    exampleApp: 'Teach Admin',
+    data: 'Group\'s Students',
+}, {
+    id: 7,
+    exampleApp: 'Teach Admin',
+    data: 'Exams',
+}, {
+    id: 8,
+    exampleApp: 'Teach Admin',
+    data: 'Licenses',
+}]
+const columns2 = columns1
+const table2 = {
+    rows: rows2,
+    columns: columns2,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    searchStringChanged: (searchString) => {
+        // noop
+    },
+    rowClicked: (row) => {
+        // noop
+    }
+}
+
+const rows3 = [{
+    id: 1,
+    exampleApp: 'Teach Settings',
+    data: 'Groups',
+}]
+const columns3 = columns1
+const table3 = {
+    rows: rows3,
+    columns: columns3,
+    segmentControlChange: (controlChange) => {
+        // noop
+    },
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    editClicked: (row) => {
+        // noop
+    }
+}
+
+const rows4 = [{
+    id: 1,
+    exampleApp: 'Teach Settings',
+    data: 'Instructors',
+}]
+const columns4 = columns1
+const table4 = {
+    rows: rows4,
+    columns: columns4,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    editClicked: (row) => {
+        // noop
+    }
+}
+
+const rows5 = [{
+    id: 1,
+    exampleApp: 'Teach Settings',
+    data: 'Seats',
+}]
+const columns5 = columns1
+const table5 = {
+    rows: rows5,
+    columns: columns5,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    checkedRowsChanged: (checkedRows) => {
+        // noop
+    }
+}
+
+const rows6 = [{
+    id: 1,
+    exampleApp: 'Teach Settings',
+    data: 'Students',
+}]
+const columns6 = columns1
+const table6 = {
+    rows: rows6,
+    columns: columns6,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    updateSearchString: (searchString) => {
+        // noop
+    },
+    editClicked: (row) => {
+        // noop
+    },
+    buttonClicked: (row) => {
+        // noop
+    }
+}
+
+const rows7 = [{
+    id: 1,
+    exampleApp: 'Teach Add Group Side Panel',
+    data: 'Add Students',
+}, {
+    id: 2,
+    exampleApp: 'Teach Edit Group -> Select Students Side Panel',
+    data: 'Students',
+}, {
+    id: 3,
+    exampleApp: 'Teach Admin -> Add Exams Side Panel',
+    data: 'Exams',
+}]
+const columns7 = columns1
+const table7 = {
+    rows: rows7,
+    columns: columns7,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    updateSearchString: (searchString) => {
+        // noop
+    },
+    updatedCheckedRows: (checkedRows) => {
+        // noop
+    }
+}
+
+const rows8 = [{
+    id: 1,
+    exampleApp: 'Teach Add Group Side Panel',
+    data: 'Preview Group',
+}, {
+    id: 2,
+    exampleApp: 'Teach Edit Group Side Panel',
+    data: 'Group Students',
+}]
+const columns8 = columns1
+const table8 = {
+    rows: rows8,
+    columns: columns8,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    updateSearchString: (searchString) => {
+        // noop
+    },
+    rowButtonClicked: (checkedRows) => {
+        // noop
+    }
+}
+
+const rows9 = [{
+    id: 1,
+    exampleApp: 'Teach Add Students Side Panel',
+    data: 'Add Emails',
+}]
+const columns9 = columns1
+const table9 = {
+    rows: rows9,
+    columns: columns9,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+}
+
+const rows10 = [{
+    id: 1,
+    exampleApp: 'Teach Edit Instructor Side Panel',
+    data: 'Exams',
+}, {
+    id: 2,
+    exampleApp: 'Teach Edit Student Side Panel',
+    data: 'Student Groups',
+}]
+const columns10 = columns1
+const table10 = {
+    rows: rows10,
+    columns: columns10,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    rowButtonClicked: (row) => {
+        // noop
+    }
+}
+
+const rows11 = [{
+    id: 1,
+    exampleApp: 'Teach Stats Sidebar',
+    data: 'Groups',
+}]
+const columns11 = columns1
+const table11 = {
+    actions: [{
+        id: 1,
+        icon: 'edit',
+        text: 'Edit Groups',
+    }],
+    rows: rows11,
+    columns: columns11,
+    defaultSelectedRowId: 1,
+    showDragAndDrop: false,
+    actionClicked: (action) => {
+        if (action.text === 'Edit Groups') {
+            table11.showDragAndDrop = !table11.showDragAndDrop
+        }
+    },
+    rowClicked: (row) => {
+        // noop
+    },
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    rowMoved: (row) => {
+        // noop
+    }
+}
+
+const rows12 = [{
+    id: 1,
+    exampleApp: 'Teach Stats Sidebar',
+    data: 'Students',
+}]
+const columns12 = columns1
+const table12 = {
+    actions: [{
+        id: 2,
+        icon: 'add',
+        text: 'Add Students',
+    }],
+    filterChips: [{
+        id: 1,
+        text: 'Example Filter',
+    }],
+    rows: rows12,
+    columns: columns12,
+    defaultSelectedRowId: 1,
+    showDragAndDrop: false,
+    actionClicked: (action) => {
+        // noop
+    },
+    rowClicked: (row) => {
+        // noop
+    },
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    updateSearchString: (searchString) => {
+        // noop
+    }
+}
+
+export default {
+    components: {
+        Table,
+    },
+    data () {
+        return {
+            grid,
+            table1,
+            table2,
+            table3,
+            table4,
+            table5,
+            table6,
+            table7,
+            table8,
+            table9,
+            table10,
+            table11,
+            table12,
+        }
+    },
+}
+</script>
+
+<style>
+.table-examples__1,
+.table-examples__2,
+.table-examples__3,
+.table-examples__4,
+.table-examples__5,
+.table-examples__6,
+.table-examples__7,
+.table-examples__8,
+.table-examples__9,
+.table-examples__10,
+.table-examples__11,
+.table-examples__12 {
+    margin-bottom: 72px;
+}
+
+.table-examples__summary {
+    background-color: #f4f5f9;
+    padding: 10px;
+    margin-bottom: 12px;
+    border-radius: 6px;
+}
+
+.table-examples__list {
+    margin: 0;
+}
+</style>
+```