Skip to content
This repository has been archived by the owner on Aug 12, 2020. It is now read-only.

Task 7.7: Layout, struktur og responsivitet under alle komponenter i mappen 'categories' ændret og øget. #54

Merged
merged 9 commits into from
Dec 18, 2019
Merged

Task 7.7: Layout, struktur og responsivitet under alle komponenter i mappen 'categories' ændret og øget. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1471078
Flex fjernet, da det var redundant.
dani832m Dec 17, 2019
acd63e6
Collapse på kategorier og splittegninger.
dani832m Dec 17, 2019
21546d6
EditCategory fixet.
dani832m Dec 17, 2019
e7d40c3
EditCategory fixet.
dani832m Dec 17, 2019
311cc09
EditSubCategory fixet.
dani832m Dec 17, 2019
7188fd6
AddNewCategory fixet.
dani832m Dec 17, 2019
57dc644
AddNewSubCategory fixet.
dani832m Dec 17, 2019
663cbec
Margin ordnet.
dani832m Dec 17, 2019
54d797c
Små tilføjelser.
dani832m Dec 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions src/components/categories/AddNewCategory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,27 @@ import { gql } from 'apollo-boost';
import client from '../../config/apolloClient';

// Importér Reactstrap komponenter
import { Form, InputGroup, FormGroup, Input, Button, Alert } from 'reactstrap';
import {
Form,
InputGroup,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
Button,
Alert
} from 'reactstrap';

function AddNewCategory() {
/* Klientens cache ryddes, så vi er sikkre på, at den nye
kategori tilføjes, uden man behøver rerendere hele DOM'en */
client.cache.reset();

// States med React Hooks
const [name, setName] = useState('');
const [alertStatus, setAlertStatus] = useState(false);

// Defineret mutation
const ADD_CATEGORY = gql`
mutation addCategory($name: String!) {
addCategory(name: $name) {
Expand Down Expand Up @@ -48,16 +59,21 @@ function AddNewCategory() {
<Form className="form" onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText className="inputGroupTextStyles">
Navn
</InputGroupText>
</InputGroupAddon>
<Input
required
className="inputStyles"
className="inputStylesCategory"
type="text"
name="name"
id="categoryName"
minLength="1"
maxLength="50"
value={name}
placeholder="Navn..."
placeholder="Navn på kategori..."
onChange={event => setName(event.target.value)}
/>
</InputGroup>
Expand Down
33 changes: 27 additions & 6 deletions src/components/categories/AddNewSubCategory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,28 @@ import client from '../../config/apolloClient';
import GetCategories from './GetCategories';

// Importér Reactstrap komponenter
import { Form, InputGroup, FormGroup, Input, Button, Alert } from 'reactstrap';
import {
Form,
InputGroup,
InputGroupAddon,
InputGroupText,
FormGroup,
Input,
Button,
Alert
} from 'reactstrap';

function AddNewSubCategory() {
/* Klientens cache ryddes, så vi er sikkre på, at den nye
underkategori tilføjes, uden man behøver rerendere hele DOM'en */
client.cache.reset();

// States med React Hooks
const [name, setName] = useState('');
const [imagePath, setImagePath] = useState('');
const [alertStatus, setAlertStatus] = useState(false);

// Defineret mutation
const ADD_SUB_CATEGORY = gql`
mutation addSubCategory(
$name: String!
Expand Down Expand Up @@ -64,16 +75,21 @@ function AddNewSubCategory() {
<Form className="form" onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText className="inputGroupTextStyles">
Navn
</InputGroupText>
</InputGroupAddon>
<Input
required
className="inputStyles"
className="inputStylesCategory"
type="text"
name="name"
id="categoryName"
minLength="1"
maxLength="50"
value={name}
placeholder="Navn..."
placeholder="Navn på splittegning..."
onChange={event => setName(event.target.value)}
/>
</InputGroup>
Expand All @@ -85,15 +101,20 @@ function AddNewSubCategory() {
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText className="inputGroupTextStyles">
Billedsti
</InputGroupText>
</InputGroupAddon>
<Input
className="inputStyles"
className="inputStylesCategory"
type="text"
name="imagePath"
id="subCategoryImagePath"
minLength="1"
maxLength="50"
value={imagePath}
placeholder="Billedesti..."
placeholder="Stien til billedet..."
onChange={event => setImagePath(event.target.value)}
/>
</InputGroup>
Expand All @@ -103,7 +124,7 @@ function AddNewSubCategory() {
<Alert color="success">Splittegningen blev oprettet.</Alert>
)}
{/* Knap til at indsende indtastede data */}
<Button type="submit" className="btnStyles">
<Button type="submit" className="btnStyles mb-5">
Tilføj splittegning
</Button>
</Form>
Expand Down
42 changes: 14 additions & 28 deletions src/components/categories/Categories.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,45 @@
@import url('../../assets/css/globalStyles.css');
@import url("../../assets/css/globalStyles.css");

.flexElements {
display: flex;
justify-content: space-between;
}

.fontAwesomeIconNavStyles {
.showHideTextStyles {
font-size: 1rem;
margin-right: 0.4rem;
margin-left: 1rem;
}

.inputStylesCategory {
.inputGroupTextStyles {
margin-bottom: 0.5rem;
color: #1a1a1a !important;
background-color: #f8f8f8 !important;
border: 1px #f0f6ea solid !important;
border-radius: 0.4rem !important;
border-radius: 0.4rem 0 0 0.4rem !important;
box-shadow: 1px 1px 2px #ececec;
margin-bottom: 0.5rem;
margin-right: 0.5rem;
max-width: 20vw;
display: inline !important;
}

.btnStylesCategory {
margin-bottom: 0.5rem;
color: #4b713d !important;
background-color: #e2eed8 !important;
.inputStylesCategory {
border: 1px #f0f6ea solid !important;
border-radius: 0.4rem !important;
box-shadow: 1px 1px 2px #ececec;
display: inline !important;
max-width: 20vw;
}

.btnStylesCategory:hover {
background-color: #f6fdf2 !important;
margin-bottom: 0.5rem;
}

.inputStylesSubCategory {
border: 1px #f0f6ea solid !important;
border-radius: 0.4rem !important;
border-radius: 0 0.4rem 0.4rem 0 !important;
box-shadow: 1px 1px 2px #ececec;
margin-bottom: 0.5rem;
max-width: 20vw;
}

.btnStylesSubCategory {
margin-bottom: 2.3rem;
.btnStylesCategory {
margin-bottom: 0.5rem;
color: #4b713d !important;
background-color: #e2eed8 !important;
border: 1px #f0f6ea solid !important;
border-radius: 0.4rem !important;
border-radius: 0 0.4rem 0.4rem 0 !important;
box-shadow: 1px 1px 2px #ececec;
max-width: 20vw;
}

.btnStylesSubCategory:hover {
.btnStylesCategory:hover {
background-color: #f6fdf2 !important;
}
116 changes: 75 additions & 41 deletions src/components/categories/Categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,90 @@
import React from 'react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import AddNewCategory from './AddNewCategory';
import AddNewSubCategory from './AddNewSubCategory';
import EditCategory from './EditCategory';
import EditSubCategory from './EditSubCategory';
import './Categories.css';

// Importér Reactstrap komponenter
import { Col, Row } from 'reactstrap';
import { Col, Row, Collapse } from 'reactstrap';

// Komponent, der renderer alle kategorier i rækker og kolonner!
/*
Parent Component, der indeholder Sub Components, som giver
mulighed for at tilføje og ændre kategorier samt tilføje og
ændre splittegninger (underkategorier)
*/
function Categories() {
// States med React Hooks, der håndterer toggle-status
const [catToggleIsOpen, setCatToggleIsOpen] = useState(false);
const [subCatToggleIsOpen, setSubCatToggleIsOpen] = useState(false);

// Toggle-funktioner
const categoriesToggle = () => setCatToggleIsOpen(!catToggleIsOpen);
const subCategoriesToggle = () => setSubCatToggleIsOpen(!subCatToggleIsOpen);

return (
<React.Fragment>
<Row>
<Col>
<Row>
<Col>
<div className="flexElements">
<h3 className="mb-3">Kategorier</h3>
</div>
<Row>
<Col>
<Row>
<Col>
<h4 className="mb-3">Tilføj kategori</h4>
<AddNewCategory />
</Col>
</Row>
<Row>
<Col>
<h4 className="my-3">Tilføj splittegning</h4>
<AddNewSubCategory />
</Col>
</Row>
</Col>
<Col>
<Row>
<Col className="mb-2">
<div className="flexElements">
<h4 className="mb-3">Kategorier</h4>
<Link
onClick={categoriesToggle}
className="showHideTextStyles linkStyles mb-3"
>
Vis/skjul
</Link>
</div>
{catToggleIsOpen === false && (
<span>
Tryk på "Vis/skjul" for at vise og skjule listen med kategorier.
</span>
)}
<Collapse isOpen={catToggleIsOpen} className="fadeIn">
<EditCategory />
</Col>
</Row>
<Row>
<Col>
<div className="flexElements">
<h3 className="mb-3">Splittegninger</h3>
</div>
</Collapse>
</Col>
</Row>
<Row>
<Col>
<div className="flexElements">
<h4 className="my-3">Splittegninger</h4>
<Link
onClick={subCategoriesToggle}
className="showHideTextStyles linkStyles my-3"
>
Vis/skjul
</Link>
</div>
{subCatToggleIsOpen === false && (
<span>
Tryk på "Vis/skjul" for at vise og skjule listen med
splittegninger.
</span>
)}
<Collapse isOpen={subCatToggleIsOpen} className="fadeIn">
<EditSubCategory />
</Col>
</Row>
</Col>
<Col>
<Row>
<Col>
<div className="flexElements">
<h3 className="mb-3">Tilføj kategori</h3>
</div>
<AddNewCategory />
</Col>
</Row>
<Row>
<Col>
<div className="flexElements">
<h3 className="mb-3">Tilføj splittegning</h3>
</div>
<AddNewSubCategory />
</Col>
</Row>
</Col>
</Row>
</React.Fragment>
</Collapse>
</Col>
</Row>
</Col>
</Row>
);
}

Expand Down
Loading