feat: open tenders screen

packages/Upphandling/api/tenders.js

@@ -1,10 +1,16 @@
 import axios from 'axios'
 
-export const getTenders = async () => {
-  const { data } = await axios.get('https://api.upphandling.app/tenders')
+export const getTenders = async (disId) => {
+  const { data } = await axios.get(`https://api.upphandling.app/dis/${disId}/tenders`)
   return data
 }
 
+export const getTender = async (tenderId) => {
+  const { data } = await axios.get(`https://api.upphandling.app/tenders/${tenderId}`)
+  return data
+}
+
+
 export const createTender = async (tender) => {
   console.log('creating tender', JSON.stringify(tender, null, 2))
   const { data } = await axios.post('https://api.upphandling.app/tenders', tender).catch((error) => { 

packages/Upphandling/components/CompanyDetails.js

@@ -9,7 +9,6 @@ export const CompanyDetails = ({company}) => (
       Företagsinformation
     </Text>
     <Field
-      style={styles.field}
       label="Företagsnamn"
       disabled
       placeholder="Ert företagsnamn"
@@ -18,66 +17,55 @@ export const CompanyDetails = ({company}) => (
     <Field
       value={company?.phoneNumber}
       disabled
-      style={styles.field}
       label="Telefonnummer"
       placeholder="Telefonnummer" />
     <Field
       value={company?.email}
       disabled
-      style={styles.field}
       label="E-post"
       placeholder="E-post" />
     <Field
       value={company?.address}
       disabled
-      style={styles.field}
       label="Adress"
       placeholder="Adress" />
     <Field
       value={company?.zipCode + ' ' + company?.town}
       disabled
-      style={styles.field}
       label="Postnummer"
       placeholder="Postnummer" />
     {company.country ? (
       <Field
         value={company?.country}
         disabled
-        style={styles.field}
         label="Land"
         placeholder="Land" />
     ) : null}
     <Field
       value={company?.industryText}
       disabled
-      style={styles.field}
       label="Verksamhet"
       placeholder="Programvaruleverantör etc" />
     <Field
       value={company?.legalGroupText}
       disabled
-      style={styles.field}
       label="Typ av organisation"
       placeholder="Aktiebolag/Handelsbolag etc" />
     <Field
       value={company?.website}
-      style={styles.field}
       label="Hemsida"
       placeholder="Hemsida" />
     <Field
       value={company?.numberEmployeesInterval}
       disabled
-      style={styles.field}
       label="Antal anställda"
       placeholder="Antal anställda" />
     <Field
-      style={styles.field}
       disabled
       status="success"
       label="Moms registrerad"
       value={company?.vatReg ? `Ja (${company?.vatRegDate})` : 'Nej'} />
     <Field
-      style={styles.field}
       disabled
       label="VD"
       placeholder="VD / firmatecknare"

packages/Upphandling/components/Field.js

@@ -2,15 +2,15 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { Divider, Layout, Text } from '@ui-kitten/components'
 
-export const Field = ({style, label, value, ...layoutProps}) => {
+export const Field = ({style, label, children, value, ...layoutProps}) => {
 
   return (
     <React.Fragment>
       <Layout level="1" {...layoutProps} style={[styles.container, style]}>
         <Text appearance="hint" category="s2">
           {label}
         </Text>
-        <Text category="s2">{value}</Text>
+        <Text category="s2">{value}{children}</Text>
       </Layout>
       <Divider />
     </React.Fragment>
@@ -19,6 +19,7 @@ export const Field = ({style, label, value, ...layoutProps}) => {
 
 const styles = StyleSheet.create({
   container: {
+    padding: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',

packages/Upphandling/components/ImageOverlay.js

@@ -1,20 +1,28 @@
 import React from 'react'
-import {ImageBackground, StyleSheet, View} from 'react-native'
+import { ImageBackground, StyleSheet, View } from 'react-native'
+import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const DEFAULT_OVERLAY_COLOR = 'rgba(53,34,171,0.4)'
 
-export const ImageOverlay = ({style, children, ...imageBackgroundProps}) => {
-  const {overlayColor, ...imageBackgroundStyle} = StyleSheet.flatten(style)
+export const ImageOverlay = ({
+  style,
+  children,
+  onPress,
+  ...imageBackgroundProps
+}) => {
+  const { overlayColor, ...imageBackgroundStyle } = StyleSheet.flatten(style)
 
   return (
-    <ImageBackground {...imageBackgroundProps} style={imageBackgroundStyle}>
-      <View
-        style={[
-          StyleSheet.absoluteFill,
-          {backgroundColor: overlayColor || DEFAULT_OVERLAY_COLOR},
-        ]}
-      />
-      {children}
-    </ImageBackground>
+    <TouchableOpacity onPress={onPress}>
+      <ImageBackground {...imageBackgroundProps} style={imageBackgroundStyle}>
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: overlayColor || DEFAULT_OVERLAY_COLOR },
+          ]}
+        />
+        {children}
+      </ImageBackground>
+    </TouchableOpacity>
   )
 }

packages/Upphandling/components/Issues.js

@@ -9,17 +9,7 @@ import React from 'react'
 import { View } from 'react-native'
 import { useIssues } from '../hooks/useGithub'
 import { ImageOverlay } from './ImageOverlay'
-
-const tag = (label, index) => (
-  <Button
-    key={index}
-    style={styles.detailItem}
-    appearance="outline"
-    size="small"
-  >
-    {label.name}
-  </Button>
-)
+import { Tag } from './Tag'
 
 export const Issues = ({ url, selected, onSelectedChange }) => {
   if (!url) return <Text>No repo</Text>
@@ -63,7 +53,7 @@ export const Issues = ({ url, selected, onSelectedChange }) => {
               {issue.body}
             </Text>
             <View style={styles.tags}>
-              {issue.labels.map((label, index) => tag(label, index))}
+              {issue.labels.map((label, index) => <Tag key={index}>{label.name}</Tag>)}
             </View>
           </View>
         </View>
@@ -93,7 +83,7 @@ const styles = StyleService.create({
     borderRadius: 16,
   },
   body: {
-    overflow: '',
+    // overflow: '', //ILLEGAL!
     maxHeight: 100,
   },
 })

packages/Upphandling/components/Tag.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {
+  Button,
+  Card,
+  CheckBox,
+  StyleService,
+  Text,
+} from '@ui-kitten/components'
+
+export const Tag = ({children}) => (
+  <Button
+    style={styles.tag}
+    appearance="outline"
+    size="tiny"
+  >
+    {children}
+  </Button>
+)
+
+
+
+const styles = StyleService.create({
+  tag: {
+    borderRadius: 16,
+  },
+})

packages/Upphandling/components/TechnologyPicker.js

@@ -2,13 +2,21 @@ import React, { useState } from 'react'
 import {
   Autocomplete,
   AutocompleteItem,
+  Button,
+  ButtonGroup,
   Icon,
+  Layout,
   StyleService,
-  Toggle,
+  Text,
 } from '@ui-kitten/components'
 import technologyIcons from '../data/technologies.json'
 import { View } from 'react-native'
 
+const StarIcon = <Icon name="star" />
+const BulbIcon = <Icon name="bulb" />
+const RemoveIcon = <Icon name="close" />
+const AwardIcon = <Icon name="award" />
+
 export const TechnologyPicker = ({ technologies, onChange, style }) => {
   const [newCompetence, setNewCompetence] = useState()
 
@@ -42,35 +50,59 @@ export const TechnologyPicker = ({ technologies, onChange, style }) => {
           />
         ))}
       </Autocomplete>
-      <View style={styles.grid}>
+      <Layout style={styles.grid}>
         {Object.entries(technologies)
           .filter(([, val]) => val)
           .map(([key]) => (
-            <Toggle
-              checked={technologies[key]}
-              style={styles.gridItem}
-              onChange={(checked) =>
-                onChange({ ...technologies, [key]: checked })
-              }
-            >
-              {key}
-            </Toggle>
+            <View>
+              <Text>{key}</Text>
+              <ButtonGroup style={styles.gridItem} size="small">
+                <Button
+                  accessoryLeft={RemoveIcon}
+                  onPress={() =>
+                    onChange({ ...technologies, [key]: 0 })
+                  }
+                >{RemoveIcon}</Button>
+                <Button
+                  accessoryLeft={BulbIcon}
+                  appearance={technologies[key] === 5 ? 'filled' : 'outline'}
+                  disabled={technologies[key] === 1}
+                  onPress={() => onChange({ ...technologies, [key]: 1 })}
+                >
+                  1 år
+                </Button>
+                <Button
+                  appearance={technologies[key] === 5 ? 'filled' : 'outline'}
+                  disabled={technologies[key] === 3}
+                  onPress={() => onChange({ ...technologies, [key]: 3 })}
+                >
+                  3 år
+                </Button>
+                <Button
+                  accessoryLeft={AwardIcon}
+                  status="danger"
+                  appearance={technologies[key] === 5 ? 'filled' : 'outline'}
+                  disabled={technologies[key] === 5}
+                  onPress={() => onChange({ ...technologies, [key]: 5 })}
+                >
+                  &gt;5 år
+                </Button>
+              </ButtonGroup>
+            </View>
           ))}
-      </View>
+      </Layout>
     </>
   )
 }
 
 const styles = StyleService.create({
   grid: {
-    justifyContent: 'space-between',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    margin: 16,
+    flexDirection: 'column',
+    marginHorizontal: 16,
+    flex: 1,
   },
   gridItem: {
-    justifyContent: 'flex-start',
-    marginVertical: 16,
-    minWidth: '40%',
+    marginVertical: 8,
+    height: 40,
   },
 })