Skip to content

Commit

Permalink
#59 Alles Material löschen Funktion hinzugefügt
Browse files Browse the repository at this point in the history
Button um alles Material der Abteilung zu löschen auf der Material Seite der eigenen Abteilung hinzugefügt.

Buttons für den Excel Import und Export auf die Material Seite der eigenen Abteilung verschoben. Vorher unter Abteilung => Settings.

Kleine visuelle Verbesserungen.
  • Loading branch information
JeremiasBachmann committed Nov 5, 2023
1 parent 8e0c6da commit ba1304d
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 64 deletions.
64 changes: 7 additions & 57 deletions src/components/abteilung/settings/AbteilungSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,13 @@ import { useNavigate } from 'react-router';
import { Abteilung } from 'types/abteilung.type';
import { useContext, useState } from 'react';
import { firestore, functions } from 'config/firebase/firebase';
import { abteilungenCollection } from 'config/firebase/collections';
import { abteilungenCollection, abteilungenMaterialsCollection } from 'config/firebase/collections';
import moduleStyles from '../Abteilung.module.scss'
import { ability } from 'config/casl/ability';
import { slugify } from 'util/FormUtil';
import { Can } from 'config/casl/casl';
import { DeleteOutlined, FileExcelOutlined } from '@ant-design/icons';
import { DeleteOutlined } from '@ant-design/icons';
import { validateMessages } from 'util/FormValdationMessages';
import { excelToJson, exportMaterialsToXlsx } from 'util/ExcelUtil';
import { ExcelImport } from './ExcelImport';
import { ExcelJson } from 'types/excel.type';
import {CategorysContext, MaterialsContext, StandorteContext} from '../AbteilungDetails';

export interface AbteilungSettingsProps {
abteilung: Abteilung
Expand All @@ -27,25 +23,8 @@ export const AbteilungSettings = (props: AbteilungSettingsProps) => {

const navigate = useNavigate();

//fetch materials
const materialsContext = useContext(MaterialsContext);
const materials = materialsContext.materials;
const matLoading = materialsContext.loading;

//fetch categories
const categoriesContext = useContext(CategorysContext);
const categories = categoriesContext.categories;
const catLoading = categoriesContext.loading;

//fetch categories
const standorteContext = useContext(StandorteContext);
const standorte = standorteContext.standorte;
const standorteLoading = standorteContext.loading;

const [form] = Form.useForm<Abteilung>();
const [updateLoading, setUpdateLoading] = useState(false);
const [excelData, setExcelData] = useState<ExcelJson | undefined>();
const [showImportModal, setShowImportModal] = useState<boolean>(false);

const [slug, setSlug] = useState<string>(abteilung.slug);

Expand Down Expand Up @@ -225,14 +204,10 @@ export const AbteilungSettings = (props: AbteilungSettingsProps) => {
</Form.Item>
</Col>
<Can I='update' this={abteilung}>
<Col span={8}>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type='primary' htmlType='submit' disabled={updateLoading}>
Speichern
</Button>
</Form.Item>
</Col>
<Col span={8}>
<Col span={16}>
<Button style={{ marginRight: '10px' }} type='primary' htmlType='submit' disabled={updateLoading}>
Speichern
</Button>
<Popconfirm
title='Möchtest du diese Abteilung wirklich löschen?'
onConfirm={() => delteAbteilung(abteilung)}
Expand All @@ -241,38 +216,13 @@ export const AbteilungSettings = (props: AbteilungSettingsProps) => {
cancelText='Nein'
>
<Button type='ghost' danger icon={<DeleteOutlined />} disabled={updateLoading}>
Löschen
Abteilung Löschen
</Button>
</Popconfirm>
</Col>
<Col span={8}>
<Button icon={<FileExcelOutlined />} onClick={()=> exportMaterialsToXlsx(abteilung, categories, materials, standorte)}>Excel export</Button>
</Col>
<Col span={8}>
<Form.Item
label='Material hochladen'
name='upload'
>
<Input
type='file'
name='excelFile'
id='uploadExcel'
onChange={async (e) => {
const res = await excelToJson(e);
if(res) {
setExcelData(res)
setShowImportModal(true)
} else {
message.error('Leider ist ein Fehler beim lesen der Datei aufgetreten 2');
}
}}
/>
</Form.Item>
</Col>
</Can>
</Row>
</Form>
<ExcelImport abteilung={abteilung} excelData={excelData} showModal={showImportModal} setShow={setShowImportModal}/>
</div>
</Row>
}
41 changes: 41 additions & 0 deletions src/components/material/DeleteMaterial.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Button, Popconfirm, message } from 'antd';
import {Abteilung} from 'types/abteilung.type';
import { firestore } from 'config/firebase/firebase';
import { abteilungenCollection, abteilungenMaterialsCollection} from "config/firebase/collections";
import { DeleteOutlined } from '@ant-design/icons';
import { useContext, useState } from 'react';

export interface DeleteMaterialProps {
abteilung: Abteilung
}

export const DeleteMaterialButton = (props: DeleteMaterialProps) => {
const { abteilung} = props;
const [updateLoading] = useState(false);

const delteMaterial = async () => {
await firestore().collection(abteilungenCollection).doc(abteilung.id).collection(abteilungenMaterialsCollection).get().then((snapshot) => {
snapshot.docs.forEach((doc) => {
doc.ref.delete();
});
}).then(() => {
message.info(`Alles Material von ${abteilung.name} wurde erfolgreich gelöscht`);
}).catch((ex) => {
message.error(`Es ist ein Fehler aufgetreten: ${ex}`);
});
}

return <>
<Popconfirm
title='Möchtest du wirklich alles Material dieser Abteilung löschen?'
onConfirm={() => delteMaterial()}
onCancel={() => { }}
okText='Ja'
cancelText='Nein'
>
<Button type='ghost' danger icon={<DeleteOutlined />} disabled={updateLoading}>
Material Löschen
</Button>
</Popconfirm>
</>
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Button, Col, message, Modal, Row, Select, Spin } from "antd";
import { abteilungenCategoryCollection, abteilungenCollection } from "config/firebase/collections";
import { Button, Col, message, Modal, Row, Select, Spin, Popconfirm } from "antd";
import { abteilungenCategoryCollection, abteilungenMaterialsCollection, abteilungenCollection } from "config/firebase/collections";
import { firestore } from "config/firebase/firebase";
import { useContext, useState } from "react";
import { Abteilung } from "types/abteilung.type";
import { Categorie } from "types/categorie.types";
import { ExcelJson } from "types/excel.type";
import { Material } from "types/material.types";
import { massImportMaterial } from "util/MaterialUtil";
import {CategorysContext, StandorteContext} from "../AbteilungDetails";
import {CategorysContext, StandorteContext} from "components/abteilung/AbteilungDetails";

export interface ExcelImportProps {
abteilung: Abteilung
Expand Down Expand Up @@ -54,6 +54,17 @@ export const ExcelImport = (props: ExcelImportProps) => {
return '';
}

const replaceMaterial = async () => {
await firestore().collection(abteilungenCollection).doc(abteilung.id).collection(abteilungenMaterialsCollection).get().then((snapshot) => {
snapshot.docs.forEach((doc) => {
doc.ref.delete();
});
prepareMaterial()
}).catch((ex) => {
message.error(`Es ist ein Fehler aufgetreten: ${ex}`);
});
}

const prepareMaterial = async (): Promise<Material[]> => {
const material: Material[] = [];

Expand Down Expand Up @@ -171,7 +182,6 @@ export const ExcelImport = (props: ExcelImportProps) => {

}


//create categories
const promieses = newCategories.map(catName => {
return firestore().collection(abteilungenCollection).doc(abteilung.id).collection(abteilungenCategoryCollection).add({ name: catName } as Categorie).then(doc => {
Expand Down Expand Up @@ -228,9 +238,20 @@ export const ExcelImport = (props: ExcelImportProps) => {
<Button key='back' onClick={() => { setShow(false) }}>
Abbrechen
</Button>,
<Button key='import' type='primary' disabled={!name || catLoading} onClick={() => { prepareMaterial() }}>
Importieren
</Button>
<Button key='importAdd' type='primary' disabled={!name || catLoading} onClick={() => { prepareMaterial() }}>
Importieren hinzufügen
</Button>,
<Popconfirm
title='Möchtest du wirklich alles bestehendes Material dieser Abteilung löschen?'
onConfirm={() => replaceMaterial()}
onCancel={() => { }}
okText='Ja'
cancelText='Nein'
>
<Button key='importReplace' type='primary' disabled={!name || catLoading}>
Importieren ersetzen
</Button>
</Popconfirm>
]}
>
<Row gutter={[16, 16]}>
Expand Down
35 changes: 35 additions & 0 deletions src/components/material/ExportMaterial.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Button} from 'antd';
import {Abteilung} from 'types/abteilung.type';
import { useContext } from 'react';
import { exportMaterialsToXlsx } from 'util/ExcelUtil';
import {CategorysContext, MaterialsContext, StandorteContext} from 'components/abteilung/AbteilungDetails';

export interface ExportMaterialProps {
abteilung: Abteilung
}

export const ExportMaterialButton = (props: ExportMaterialProps) => {
const { abteilung} = props;

//fetch materials
const materialsContext = useContext(MaterialsContext);
const materials = materialsContext.materials;
const matLoading = materialsContext.loading;

//fetch categories
const categoriesContext = useContext(CategorysContext);
const categories = categoriesContext.categories;
const catLoading = categoriesContext.loading;

//fetch categories
const standorteContext = useContext(StandorteContext);
const standorte = standorteContext.standorte;
const standorteLoading = standorteContext.loading;


return <>
<Button type='primary' onClick={()=> exportMaterialsToXlsx(abteilung, categories, materials, standorte)}>
Excel export
</Button>
</>
}
42 changes: 42 additions & 0 deletions src/components/material/ImportAddMaterial.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { message,Button } from 'antd';
import {Abteilung} from 'types/abteilung.type';
import { useState } from 'react';
import { ExcelJson } from 'types/excel.type';
import { ExcelImport } from './ExcelImport';
import { excelToJson } from 'util/ExcelUtil';
import React from 'react'

export interface importAddMaterialProps {
abteilung: Abteilung
}

export const ImportAddMaterialButton = (props: importAddMaterialProps) => {
const { abteilung} = props;
const [excelData, setExcelData] = useState<ExcelJson | undefined>();
const [showImportModal, setShowImportModal] = useState<boolean>(false);
const [updateLoading] = useState(false);
let excelInput = React.useRef<HTMLInputElement>(null);

return <>
<input
style={{ display: 'none' }}
type='file'
name='excelFile'
id='uploadExcel'
ref = {excelInput}
onChange={async (e) => {
const res = await excelToJson(e);
if(res) {
setExcelData(res)
setShowImportModal(true)
} else {
message.error('Leider ist ein Fehler beim lesen der Datei aufgetreten 2');
}
}}
/>
<Button type='primary' disabled={updateLoading} onClick={() => excelInput?.current?.click()}>
Excel Import
</Button>
<ExcelImport abteilung={abteilung} excelData={excelData} showModal={showImportModal} setShow={setShowImportModal}/>
</>
}
15 changes: 15 additions & 0 deletions src/views/abteilung/material/abteilungMaterials.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ import moment from 'moment';
import {Material} from 'types/material.types';
import {getAvailableMatCount} from 'util/MaterialUtil';
import {AddStandortButton} from "components/standort/AddStandort";
import {ImportAddMaterialButton} from 'components/material/ImportAddMaterial';
import {DeleteMaterialButton} from 'components/material/DeleteMaterial';
import {ExportMaterialButton} from 'components/material/ExportMaterial';

export type AbteilungMaterialViewProps = {
abteilung: Abteilung;
Expand Down Expand Up @@ -124,6 +127,18 @@ export const AbteilungMaterialView = (props: AbteilungMaterialViewProps) => {
<AddStandortButton abteilungId={abteilung.id} />
</Can>
</Col>
<Can I={'delete'} this={{ __caslSubjectType__: 'Material', abteilungId: abteilung.id } as AbteilungEntityCasl}>
<Col hidden={windowSize[0] < 769} xl={4}>
<ImportAddMaterialButton abteilung={abteilung} />
</Col>
<Col hidden={windowSize[0] < 769} xl={4}>
<ExportMaterialButton abteilung={abteilung} />
</Col>
<Col hidden={windowSize[0] < 769} xl={4}>
<DeleteMaterialButton abteilung={abteilung} />
</Col>
</Can>


{
matLoading || catLoading ?
Expand Down

0 comments on commit ba1304d

Please sign in to comment.