Skip to content

50 edit resource #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 11, 2024
Merged

50 edit resource #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ac7196a
allow multiple files in dropzone
aashimgarg May 8, 2024
5350a3f
add edit resource component
aashimgarg May 8, 2024
51a4680
add DATA_TABLE with rowActions
aashimgarg May 8, 2024
1f2ec91
add custom column action to data table
aashimgarg May 8, 2024
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
78 changes: 40 additions & 38 deletions ...dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import React from 'react';
import Link from 'next/link';
import router from 'next/router';
import {
Button,
ButtonGroup,
Combobox,
Divider,
DropZone,
Icon,
Expand All @@ -12,6 +15,7 @@ import { bytesToSize } from '@/lib/utils';
import { Icons } from '@/components/icons';
import { LinkButton } from '@/components/Link';
import { EditDistribution } from './EditDistribution';
import { EditResource } from './EditResource';

export function DistributionList({
setPage,
Expand Down Expand Up @@ -40,21 +44,19 @@ const NoList = ({
const fileTypes = ['PDF', 'CSV', 'XLS', 'XLSX', 'TXT'];

const [fileSelected, setFileSelected] = React.useState(false);

const [file, setFile] = React.useState<File>();
const [file, setFile] = React.useState<File[]>([]);

const handleDropZoneDrop = React.useCallback(
(_dropFiles: File[], acceptedFiles: File[]) => {
setFile(acceptedFiles[0]);
setFile((files) => [...files, ...acceptedFiles]);
setFileSelected(true);
},
[]
);

function handleFileDelete(props: React.MouseEvent<HTMLButtonElement>) {
props.stopPropagation();
setFileSelected(false);
setFile(undefined);
function handleFileDelete(index: any) {
const updatedFiles = [...file.slice(0, index), ...file.slice(index + 1)];
setFile(updatedFiles);
}

const hint = (
Expand All @@ -76,42 +78,42 @@ const NoList = ({
</>
);

const fileUpload = !file && <DropZone.FileUpload actionHint={hint} />;
const uploadedFile = file && (
<div className="flex h-full items-center justify-center py-16">
<div className="surfaceDefault flex items-center gap-3 rounded-05 px-3 py-2">
<Icon source={Icons.check} size={24} color="success" />
<div className="flex flex-col">
<div className="max-w-[180px]">
<Text variant="headingMd" truncate>
{file.name}
</Text>
</div>
<Text variant="bodyMd" color="subdued">
{bytesToSize(file.size)}
</Text>
const fileUpload = file.length === 0 && (
<DropZone.FileUpload actionHint={hint} />
);
const uploadedFile = file.length > 0 && (
<div className="flex h-full items-center justify-center px-2 py-14">
<div className="flex-col">
<div>
<Icon source={Icons.check} size={24} color="success" />
<div className="flex">{file[0].name.substring(0, 15) + ' ...'} </div>
<Text variant="bodySm">{file[0].size} bytes</Text>
</div>
<Button
size="slim"
icon={<Icon source={Icons.delete} size={24} />}
kind="tertiary"
accessibilityLabel="delete resource"
onClick={handleFileDelete}
/>
</div>
</div>
);

return (
<DropZone
name="file_details"
label="Upload"
onDrop={handleDropZoneDrop}
labelHidden
className="min-h-[70vh] bg-baseGraySlateSolid5"
>
{uploadedFile}
{fileUpload}
</DropZone>
<>
{fileSelected ? (
<EditResource
uploadedFile={uploadedFile}
handleDropZoneDrop={handleDropZoneDrop}
file={file}
/>
) : (
<DropZone
name="file_details"
label="Upload"
allowMultiple={true}
onDrop={handleDropZoneDrop}
labelHidden
className="min-h-[70vh] bg-baseGraySlateSolid5"
>
{uploadedFile}
{fileUpload}
</DropZone>
)}
</>
);
};
269 changes: 269 additions & 0 deletions ...le]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
import React from 'react';
import Link from 'next/link';
import GraphqlTable from '@/app/[locale]/dashboard/components/GraphqlTable/graphqlTable';
import { IconTrash } from '@tabler/icons-react';
import {
Button,
ButtonGroup,
Checkbox,
Combobox,
DataTable,
Divider,
DropZone,
Icon,
IconButton,
Text,
TextField,
} from 'opub-ui';

import { Icons } from '@/components/icons';

export const EditResource = ({
uploadedFile,
handleDropZoneDrop,
file,
}: any) => {
const fileUpload = file.length === 0 && <DropZone.FileUpload />;

const table = {
columns: [
{
accessorKey: 'field_key',
header: 'FIELD KEY',
},
{
accessorKey: 'display_name',
header: 'DISPLAY NAME',
},
{
accessorKey: 'description',
header: 'DESCRIPTION',
},
{
accessorKey: 'format',
header: 'FORMAT',
},
{
header: 'DELETE',
cell: ({ row }: any) => (
<IconButton
size="medium"
icon={Icons.delete}
color='interactive'
onClick={(e) =>console.log(row.original) }
>
Delete
</IconButton>
),
},
],
rows: [
{
field_key: 'date',
display_name: 'Date',
description: 'Date on which measurements are taken',
format: 'Date',
},
{
field_key: 'date',
display_name: 'Date',
description: 'Date on which measurements are taken',
format: 'Date',
},
{
field_key: 'date',
display_name: 'Date',
description: 'Date on which measurements are taken',
format: 'Date',
},
],
};

return (
<div className=" bg-basePureWhite px-6 py-8">
<div className="flex items-center gap-2">
<Text>Resource Name :</Text>
<div className=" w-3/6">
<Combobox
name="geo_list"
label="Resource"
labelHidden
placeholder="Search Locations"
list={[
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
]}
displaySelected
required
error="This field is required"
/>
</div>
<Button className="mx-5">ADD NEW RESOURCE</Button>
<Link href="/" className="flex w-1/6 items-center justify-end gap-2">
<Text color="interactive">
Go back to <br />
Resource List
</Text>
<Icon source={Icons.cross} color="interactive" />
</Link>
</div>
<Divider className="mb-8 mt-6" />
<div className="flex justify-center">
<Button className="w-1/3">SAVE RESOURCE</Button>
</div>
<div className="mt-8 flex items-stretch gap-10">
<div className="flex w-3/4 flex-col">
<div className="mb-10 flex gap-6 ">
<div className="w-2/3">
<TextField
label="Resource Name"
name="error"
required
helpText="To know about best practices for naming Resources go to our User Guide"
/>
</div>
<div className="w-1/3">
<Combobox
name="geo_list"
label="Data Standard Followed"
placeholder="Search Locations"
list={[
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
]}
displaySelected
required
error="This field is required"
/>
</div>
</div>
<TextField
defaultValue=""
label="Description"
multiline={4}
name="multi-line"
/>
</div>
<div className="w-1/4 items-stretch ">
<DropZone
name="file_details"
label="Change file for this Resource"
onDrop={handleDropZoneDrop}
className=" bg-basePureWhite"
>
{uploadedFile}
{fileUpload}
</DropZone>
</div>
</div>
<div className=" my-8 flex items-center gap-4 border-1 border-solid border-baseGraySlateSolid7 px-7 py-4 ">
<div className="flex w-1/6 items-center justify-center gap-1">
<Checkbox name="checkbox" onChange={() => console.log('hi')}>
Enabel Preview
</Checkbox>
<Icon source={Icons.info} />
</div>

<div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
<div className="flex items-center gap-5 px-8">
<Text>
Select Rows to be <br /> shown in the Preview
</Text>
<Combobox
name="geo_list"
label="From Row Number"
placeholder="Search Locations"
list={[
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
]}
displaySelected
required
error="This field is required"
/>
<Combobox
name="to_row_number"
label="To Row Number"
placeholder="Search Locations"
list={[
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
{
label:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
value:
'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
},
]}
displaySelected
required
error="This field is required"
/>
</div>
<div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
<div className="flex w-1/6 justify-center ">
<Text>See Preview</Text>
</div>
</div>
<div className="flex justify-between">
<Text>Fields in the Resource</Text>
<div className="flex">
<Link className="mx-4 flex items-center gap-1" href="/">
<Text>Refetch Fields</Text>{' '}
<Icon source={Icons.info} color="interactive" />
</Link>
<Link className="flex items-center gap-1" href="/">
<Text> Reset Fields </Text>{' '}
<Icon source={Icons.info} color="interactive" />
</Link>
</div>
</div>
<Text variant="headingXs" as="span" fontWeight="regular">
The Field settings apply to the Resource on a master level and can not
be changed in Access Models.
</Text>
<div className="mt-3">
<DataTable
columns={table.columns}
rows={table.rows}
hideFooter={true}
defaultRowCount={10}
/>
</div>
</div>
);
};