Merge pull request #623 from dump-hr/lukazuljevic/admin-app-improvements

Add export feature; Add date of agreement with sponsors

Author: lukazuljevic

apps/admin/src/components/FileUpload/FileUpload.module.scss

@@ -0,0 +1,45 @@
+.dragNDropWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 400px;  
+}
+
+.dragNDropArea {
+  border: 1px dashed #ccc;
+  padding: 30px;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 150px;
+  box-sizing: border-box;
+}
+
+.dragNDropAreaText {
+  font-size: 16px;
+  color: #bbb;
+  width: 100%;
+}
+
+.previewWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 400px;
+  gap: 8px;
+}
+
+.img {
+  display: block;
+  max-width: 100%;
+  max-height:350px;
+  object-fit: contain;
+  border-radius: 4px;
+}

apps/admin/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,51 @@
+import { useDropzone } from 'react-dropzone';
+
+import { Button } from '../Button';
+import c from './FileUpload.module.scss';
+
+type FileUploadProps = {
+  src: string | ArrayBuffer | null | undefined;
+  label?: string;
+  accept?: string | undefined;
+  handleUpload: (files: File[]) => void;
+  handleRemove: () => void;
+};
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+  src,
+  label = null,
+  accept = 'image/*',
+  handleUpload,
+  handleRemove,
+}) => {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      handleUpload(acceptedFiles);
+    },
+  });
+
+  return (
+    <div className={c.dragNDropWrapper}>
+      {label && <p>{label}</p>}
+      {!src && (
+        <div className={c.dragNDropArea} {...getRootProps()}>
+          <input accept={accept} {...getInputProps()} />
+          {isDragActive ? (
+            <p className={c.dragNDropAreaText}>Drop the files here ...</p>
+          ) : (
+            <p className={c.dragNDropAreaText}>
+              Drag 'n' drop some files here, or click to select files
+            </p>
+          )}
+        </div>
+      )}
+
+      {src && (
+        <div className={c.previewWrapper}>
+          <img className={c.img} src={src as string} alt='preview' />
+          <Button onClick={() => handleRemove()}>Remove</Button>
+        </div>
+      )}
+    </div>
+  );
+};

apps/admin/src/components/FileUpload/index.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

apps/admin/src/components/PotentialSponsorsTable/PotentialSponsorsTable.module.scss

@@ -35,8 +35,8 @@
 
 
   select {
-      @extend .buttonBase;
-      padding: 12px 12px;
+  @extend .buttonBase;
+  padding: 12px 12px;
   background: #F0F0F0;
   border: none;
   color: #929292;
@@ -58,11 +58,11 @@
     border-bottom: 1px solid #ddd;
     background: white;
     font-weight: bold;
-    min-width: 140px;
+    min-width: 125px;
     vertical-align: middle;
 
   }
-      .numberCol {
+  .numberCol {
   width: 40px;
   min-width: 40px;
   text-align: center;

apps/admin/src/components/RewardForm.tsx

@@ -0,0 +1,99 @@
+import { RewardModifyDto } from '@ddays-app/types';
+import { classValidatorResolver } from '@hookform/resolvers/class-validator';
+import { useForm } from 'react-hook-form';
+
+import { useRewardCreate } from '../api/reward/useRewardCreate';
+import { useRewardGetOne } from '../api/reward/useRewardGetOne';
+import { useRewardUpdate } from '../api/reward/useRewardUpdate';
+import { useRewardUpdateImage } from '../api/reward/useRewardUpdateImage';
+import { useRewardRemoveImage } from '../api/reward/useRewardRemoveImage';
+
+import { Button } from '../components/Button';
+import { InputHandler } from '../components/InputHandler';
+import { FileUpload } from '../components/FileUpload';
+import { Question, QuestionType } from '../types/question';
+
+import c from './Form.module.scss';
+
+type RewardFormProps = {
+  id?: number;
+  onSuccess: () => void;
+};
+
+export const RewardForm: React.FC<RewardFormProps> = ({ id, onSuccess }) => {
+  const { data: reward, isLoading } = useRewardGetOne(id);
+
+  const createReward = useRewardCreate();
+  const updateReward = useRewardUpdate();
+  const updateImage = useRewardUpdateImage();
+  const removeImage = useRewardRemoveImage();
+
+  const questions: Question[] = [
+    {
+      id: 'name',
+      type: QuestionType.Field,
+      title: 'Naziv',
+      defaultValue: reward?.name,
+    },
+    {
+      id: 'description',
+      type: QuestionType.TextArea,
+      title: 'Opis',
+      defaultValue: reward?.description,
+    },
+  ];
+
+  const form = useForm<RewardModifyDto>({
+    resolver: classValidatorResolver(RewardModifyDto),
+    defaultValues: {
+      name: reward?.name ?? '',
+      description: reward?.description ?? '',
+    },
+  });
+
+  const handleImageUpload = async (files: File[]) => {
+    if (!id) return;
+    await updateImage.mutateAsync({ id, file: files[0] });
+  };
+
+  const handleImageRemove = async () => {
+    if (!id) return;
+    await removeImage.mutateAsync(id);
+  };
+
+  if (id && isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className={c.formContainer}>
+      {questions.map((q) => (
+        <InputHandler question={q} form={form} key={q.id} />
+      ))}
+
+      {id && (
+        <>
+          <p>Slika:</p>
+          <FileUpload
+            src={reward?.imageUrl}
+            handleUpload={handleImageUpload}
+            handleRemove={handleImageRemove}
+          />
+        </>
+      )}
+
+      <Button
+        onClick={form.handleSubmit(async (formData) => {
+          if (id) {
+            await updateReward.mutateAsync({ ...formData, id });
+          } else {
+            await createReward.mutateAsync(formData);
+          }
+
+          onSuccess();
+        })}>
+        Submit
+      </Button>
+    </div>
+  );
+};

apps/admin/src/components/SponsorContractsTable/tableColumnsContracts.ts

@@ -4,9 +4,9 @@ export const tableColumns = [
   { label: '#', key: 'number', className: c.numberCol },
   { label: 'Firma', key: 'company' },
   { label: 'Predstavnik', key: 'representative' },
-  { label: 'Ime', key: 'name' },
-  { label: 'Adresa', key: 'address' },
-  { label: 'OIB', key: 'oib' },
+  { label: 'Ime firme d.o.o', key: 'name' },
+  { label: 'Adresa firme', key: 'address' },
+  { label: 'OIB firme', key: 'oib' },
   { label: 'Predstavnik firme', key: 'companyRepresentative' },
   {
     label: 'Poz. predstavnika',

apps/admin/src/components/SponsorMaterialsTable/SponsorMaterialsTable.tsx

@@ -117,6 +117,14 @@ export const SponsorMaterialsTable = ({
                     )}
                   </React.Fragment>
                 ))}
+
+              <td style={{ textAlign: 'center' }}>
+                {new Date(material.createdOn).toLocaleDateString('hr-HR', {
+                  day: '2-digit',
+                  month: '2-digit',
+                  year: 'numeric',
+                })}
+              </td>
             </tr>
           ))}
         </tbody>

apps/admin/src/components/SponsorMaterialsTable/tableColumnsMaterials.ts

@@ -19,4 +19,5 @@ export const tableColumns = [
   { label: 'Oprema', key: 'equipment', small: true },
   { label: 'Osobe za akr.', key: 'peopleForAccreditation', small: true },
   { label: 'Uneseni u app', key: 'insertedIntoApp', small: true },
+  { label: 'Datum pristanka', key: 'createdOn' },
 ];

apps/admin/src/components/TableDashboard/TableActions/TableActions.tsx

@@ -12,6 +12,7 @@ type TableActionsProps = {
   onCreateNew?: () => void;
   onEdit?: () => void;
   onDelete?: () => void;
+  onExport?: () => void;
 };
 
 export const TableActions: React.FC<TableActionsProps> = ({
@@ -22,6 +23,7 @@ export const TableActions: React.FC<TableActionsProps> = ({
   onCreateNew,
   onEdit,
   onDelete,
+  onExport,
 }) => {
   return (
     <div className={c.actions}>
@@ -31,7 +33,7 @@ export const TableActions: React.FC<TableActionsProps> = ({
           Dodaj
         </button>
 
-        <button type='button' className={c.grayButton}>
+        <button type='button' className={c.grayButton} onClick={onExport}>
           <ExportIcon />
           Izvezi
         </button>

apps/admin/src/components/TableDashboard/TableDashboard.tsx

@@ -5,6 +5,7 @@ import { TableActions } from './TableActions';
 import { Table } from './Table';
 import { DataRow, Direction } from '../../types/table';
 import toast from 'react-hot-toast';
+import { exportToCSV } from '../../helpers/exportToCsv';
 
 type TableDashboardProps = {
   data: DataRow[];
@@ -144,6 +145,9 @@ export const TableDashboard: React.FC<TableDashboardProps> = ({
         onDelete={
           onDelete ? () => selected.length > 0 && onDelete(selected) : undefined
         }
+        onExport={() =>
+          exportToCSV(sortedData, `${dataType || 'table'}-export.csv`)
+        }
       />
 
       <Table