From 3cf70771cb45cc16ec33ffe44e7a1a4799d8f395 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 23 Jun 2020 23:18:07 +0200
Subject: adding web app base

---
 .../frontend/common/tableIndex.component.js        | 129 +++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 animism-align/frontend/common/tableIndex.component.js

(limited to 'animism-align/frontend/common/tableIndex.component.js')

diff --git a/animism-align/frontend/common/tableIndex.component.js b/animism-align/frontend/common/tableIndex.component.js
new file mode 100644
index 0000000..a34a9e9
--- /dev/null
+++ b/animism-align/frontend/common/tableIndex.component.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { formatDateTime } from '../util'
+import { Loader, Swatch, Dot } from '../common'
+
+/*
+  <TableIndex
+    title="Collections"
+    actions={actions.collection}
+    data={data.collection.index}
+    fields={[
+      { name: 'title', type: 'title', link: row => '/collection/' + row.id + '/show/' },
+      { name: 'username', type: 'string' },
+      { name: 'date', type: 'date' },
+      { name: 'notes', type: 'text' },
+    ]}
+  />
+*/
+
+export default class TableIndex extends Component {
+  componentDidMount() {
+    this.props.actions && this.props.actions.index()
+  }
+
+  render() {
+    const { data, els, title, fields, noHeadings, notFoundMessage } = this.props
+    if (data.loading) {
+      return <Loader />
+    }
+    if (!els && (!data.lookup || !data.order.length)) {
+      return (
+        <div>
+          <h1>{title}</h1>
+          <p className='gray'>
+            {notFoundMessage || ("No " + title)}
+          </p>
+        </div>
+      )
+    }
+    return (
+      <div className='tableIndex'>
+        <h1>{title}</h1>
+        <div className='rows'>
+        {!noHeadings && <RowHeadings fields={fields} />}
+        {els
+          ? els.map(el => <Row key={el.id} row={el} fields={fields} />)
+          : data.order.map(id => <Row key={id} row={data.lookup[id]} fields={fields} />)
+        }
+        </div>
+      </div>
+    )
+  }
+}
+
+const RowHeadings = ({fields}) => {
+  return (
+    <div className='row heading'>
+      {fields.map(field => {
+        if (field.type === 'gallery') return
+        let css = {}
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        return <div key={field.name} className={field.type} style={css}>{(field.title || field.name).replace(/_/g, ' ')}</div>
+      })}
+    </div>
+  )
+}
+
+const Row = ({ row, fields }) => {
+  return (
+    <div className='row tableRow'>
+      {fields.map(field => {
+        let value = field.valueFn ? field.valueFn(row) : row[field.name]
+        let css = {}
+        if (field.type === 'date' && (row.updated_at || row.created_at || value)) {
+          // value = (value || "").split('.')[0]
+          value = formatDateTime(row.updated_at || row.created_at || value)
+        } else if (field.type === 'text') {
+          value = String(value || "").trim().split('\n')[0].replace(/^#+/, '').substr(0, 100)          
+        } else if (field.type === 'color') {
+          value = <Swatch color={value} />
+        } else if (field.type === 'bool') {
+          value = <Dot color={value ? '#11f' : '#fff'} />
+        } else if (field.type === 'str') {
+          value = String(value || "").replace(/_/g, ' ')
+        } else if (field.type === 'gallery') {
+          return <GalleryRow key={field.name} media={value} />
+        }
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        let className
+        if (field.style) {
+          className = field.type + ' ' + field.style
+        } else {
+          className = field.type
+        }
+        value = <div title={value} key={field.name} className={className} style={css}>{value}</div>
+        if (field.link) {
+          return <Link key={field.name} to={field.link(row)}>{value}</Link>
+        }
+        return value
+      })}
+    </div>
+  )
+}
+
+const GalleryRow = ({ media }) => {
+  return (
+    <div className='galleryRow'>
+      <div>
+        {media.map(img => (
+          <Link to={"/media/id/" + img.id + "/"} key={img.url}>
+            <img src={img.url} className='thumbnail' />
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
-- 
cgit v1.2.3-70-g09d2