BASIRA #286 - Locations and creators

app/serializers/places_serializer.rb

@@ -1,5 +1,5 @@
 class PlacesSerializer < BaseSerializer
-  index_attributes :id, :name, :place_type, :lat, :long, :city, :state, :country
+  index_attributes :id, :name, :place_type, :lat, :long, :city, :state, :country, :url
   show_attributes :id, :name, :place_type, :lat, :long, :city, :state, :country, :url, :database_value, :notes,
                   :same_as, :part_of, :authorized_vocabulary_url, qualifications: QualificationsSerializer
 

client/src/components/ArtworkCreators.js

@@ -39,12 +39,9 @@ const ArtworkCreators = (props: Props) => {
                 </SimpleLink>
               </Header>
             </Item.Header>
-            <Item.Meta>
-              { Qualifiables.getValueListValue(item.person, 'Person', 'Nationality') }
-            </Item.Meta>
             <Item.Description>
               <RolesView
-                value={[
+                items={[
                   Qualifiables.getValueListValue(item, 'Person', 'Participation Role'),
                   Qualifiables.getValueListValue(item, 'Person', 'Participation Subrole')
                 ]}
@@ -53,16 +50,16 @@ const ArtworkCreators = (props: Props) => {
             <Item.Description
               content={item.description}
             />
-            <Item.Description
-              content={item.notes}
-            />
             { item.certainty && (
               <Item.Extra>
                 <CertaintyLabel
                   value={item.certainty}
                 />
               </Item.Extra>
             )}
+            <Item.Extra
+              content={item.notes}
+            />
           </Item.Content>
         </Item>
       ))}

client/src/components/ArtworkTitles.css

@@ -1,5 +1,10 @@
-.artwork-titles .icon.white {
-  color: #FFFFFF;
+.artwork-titles.list > .item > .content > .list-header {
+  display: flex;
+  align-items: center;
+}
+
+.artwork-titles.list > .item > .content > .list-header > .icon {
+  margin-left: 0.5em;
 }
 
 .artwork-titles.list > .item > .content > .description {

client/src/components/ArtworkTitles.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
-import { List } from 'semantic-ui-react';
+import { Header, Icon, List } from 'semantic-ui-react';
 import _ from 'underscore';
-import Qualifiables from '../utils/Qualifiables';
 import type { ArtworkTitle } from '../types/ArtworkTitle';
+import Qualifiables from '../utils/Qualifiables';
 import './ArtworkTitles.css';
 
 type Props = {
@@ -24,14 +24,22 @@ const ArtworkTitles = (props: Props) => {
     >
       { _.map(props.items, (item) => (
         <List.Item>
-          <List.Icon
-            color={item.primary ? 'green' : 'white'}
-            name='check circle'
-          />
           <List.Content>
             <List.Header
+              className='list-header'
               content={item.title}
-            />
+            >
+              <Header
+                content={item.title}
+                size='small'
+              />
+              { item.primary && (
+                <Icon
+                  color='green'
+                  name='check circle'
+                />
+              )}
+            </List.Header>
             <List.Description
               content={Qualifiables.getValueListValue(item, 'Artwork', 'Title Type')}
             />

client/src/components/Locations.js

@@ -1,10 +1,9 @@
 // @flow
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Header, Item } from 'semantic-ui-react';
 import _ from 'underscore';
-import CertaintyLabel from './CertaintyLabel';
 import type { Location } from '../types/Location';
 import RolesView from './RolesView';
 import Qualifiables from '../utils/Qualifiables';
@@ -15,9 +14,22 @@ type Props = {
   items: Array<Location>
 };
 
+const LOCATION_SEPARATOR = ', ';
+
 const Locations = (props: Props) => {
   const { t } = useTranslation();
 
+  /**
+   * Concatenates the city, state, and country attributes for the passed place.
+   *
+   * @type {function(*): *}
+   */
+  const getLocationView = useCallback((place) => _.compact([
+    place.city,
+    place.state,
+    place.country
+  ]).join(LOCATION_SEPARATOR), []);
+
   if (!props.items) {
     return null;
   }
@@ -43,40 +55,30 @@ const Locations = (props: Props) => {
               </Header>
             </Item.Header>
             <Item.Meta
-              content={item.place?.country}
+              content={item.place?.place_type}
             />
-            <Item.Description>
-              <RolesView
-                value={[
-                  Qualifiables.getValueListValue(item, 'Location', 'Role'),
-                  Qualifiables.getValueListValue(item, 'Location', 'Subrole')
-                ]}
-              />
-            </Item.Description>
             <Item.Description
-              content={item.description}
+              content={getLocationView(item.place)}
             />
-            <Item.Description
-              content={item.notes}
-            />
-            { item.certainty && (
-              <Item.Extra>
-                <CertaintyLabel
-                  value={item.certainty}
-                />
-              </Item.Extra>
-            )}
-            { item.repository_work_url && (
-              <Item.Extra>
+            { item.place?.url && (
+              <Item.Description>
                 <a
-                  href={item.repository_work_url}
+                  href={item.place.url}
                   rel='noreferrer'
                   target='_blank'
                 >
-                  { t('Common.buttons.viewSource') }
+                  { t('Locations.labels.viewInstitution') }
                 </a>
-              </Item.Extra>
+              </Item.Description>
             )}
+            <Item.Extra>
+              <RolesView
+                items={[
+                  Qualifiables.getValueListValue(item, 'Location', 'Role'),
+                  Qualifiables.getValueListValue(item, 'Location', 'Subrole')
+                ]}
+              />
+            </Item.Extra>
           </Item.Content>
         </Item>
       ))}

client/src/components/RecordPage.js

@@ -11,7 +11,8 @@ import React, {
 import { Link } from 'react-router-dom';
 import {
   Button,
-  Container, Grid,
+  Container,
+  Grid,
   Header as SemanticHeader,
   Loader,
   Menu,
@@ -172,9 +173,6 @@ const Image = (props: ImageProps) => (
     <LazyImage
       src={props.item.file_url}
     />
-    <ImageInfo
-      item={props.item}
-    />
   </div>
 );
 
@@ -203,6 +201,13 @@ const Header = (props: HeaderProps) => (
     >
       { props.children }
     </Grid.Column>
+    <Grid.Column
+      width={16}
+    >
+      <ImageInfo
+        item={props.image}
+      />
+    </Grid.Column>
   </Grid>
 );
 

client/src/components/RolesView.js

@@ -1,23 +1,28 @@
 // @flow
 
 import React from 'react';
+import { Label } from 'semantic-ui-react';
 import _ from 'underscore';
 
 type Props = {
-  value: Array<string>
+  items: Array<string>
 };
 
-const ROLES_SEPARATOR = ', ';
-
 const RolesView = (props: Props) => {
-  const value = _.compact(props.value);
+  const items = _.compact(props.items);
 
-  if (_.isEmpty(value)) {
+  if (_.isEmpty(items)) {
     return null;
   }
 
   return (
-    <span>{ value.join(ROLES_SEPARATOR) }</span>
+    <Label.Group>
+      { _.map(items, (item) => (
+        <Label
+          content={item}
+        />
+      ))}
+    </Label.Group>
   );
 };
 

client/src/i18n/en.json

@@ -159,7 +159,6 @@
     "buttons": {
       "back": "Back",
       "cancel": "Cancel",
-      "viewSource": "View Source",
       "save": "Save"
     },
     "errors": {
@@ -323,6 +322,11 @@
       "edit": "Edit Location"
     }
   },
+  "Locations": {
+    "labels": {
+      "viewInstitution": "View Institution"
+    }
+  },
   "NotesModal": {
     "title": "Internal Notes"
   },