knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[example][m] - start of ckan-example

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes
2023-04-19 12:35:37 -03:00
parent 83bffccf52
commit 234bbcec49
26 changed files with 688 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
examples/ckan-example/pages/@org/[org]/[dataset]/index.tsx Normal file
View File

@@ -0,0 +1,188 @@
import { GetServerSideProps } from 'next';
import getConfig from 'next/config';
import React from 'react';
import {
CalendarIcon,
CloudArrowUpIcon,
FolderOpenIcon,
LockClosedIcon,
MapPinIcon,
PaperClipIcon,
ServerIcon,
UserIcon,
} from '@heroicons/react/20/solid';
const dms = getConfig().publicRuntimeConfig.DMS;
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZone: 'UTC',
});
export const getServerSideProps: GetServerSideProps = async (context) => {
const { dataset } = context.query;
const response = await fetch(
`${dms}/api/3/action/package_show?id=${dataset}`
);
const _dataset = await response.json();
return {
props: {
dataset: _dataset.result,
},
};
};
const positions = [
{
id: 1,
title: 'Back End Developer',
type: 'Full-time',
location: 'Remote',
department: 'Engineering',
closeDate: '2020-01-07',
closeDateFull: 'January 7, 2020',
},
{
id: 2,
title: 'Front End Developer',
type: 'Full-time',
location: 'Remote',
department: 'Engineering',
closeDate: '2020-01-07',
closeDateFull: 'January 7, 2020',
},
{
id: 3,
title: 'User Interface Designer',
type: 'Full-time',
location: 'Remote',
department: 'Design',
closeDate: '2020-01-14',
closeDateFull: 'January 14, 2020',
},
];
export default function DatasetPage({ dataset }) {
return (
<div className="overflow-hidden bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div className="lg:pr-8 lg:pt-4">
<div className="lg:max-w-lg">
<h2 className="text-base font-semibold leading-7 text-indigo-600">
{dataset.organization.title
? dataset.organization.title
: dataset.organization.name}
</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
{dataset.title ? dataset.title : dataset.name}
</p>
<p className="mt-6 leading-8 text-gray-600">
{dataset.notes ? dataset.notes : 'No description'}
</p>
<div className="mt-6 border-t border-gray-100">
<dl className="divide-y divide-gray-100">
{dataset.tags.length > 0 && (
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Tags
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{dataset.tags.map((tag) => tag.display_name).join(', ')}
</dd>
</div>
)}
{dataset.url && (
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Url
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{dataset.url}
</dd>
</div>
)}
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Created
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{formatter.format(new Date(dataset.metadata_created))}
</dd>
</div>
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Modified
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{formatter.format(new Date(dataset.metadata_modified))}
</dd>
</div>
</dl>
</div>
</div>
</div>
<div className="lg:pr-8 lg:pt-4">
<h2 className="text-base font-semibold leading-7 text-indigo-600">
Resources
</h2>
<div className="overflow-hidden bg-white shadow sm:rounded-md mt-2">
<ul role="list" className="divide-y divide-gray-200">
{dataset.resources.map((resource) => (
<li key={resource.id}>
<a href={resource.url} className="block hover:bg-gray-50">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="truncate text-sm font-medium text-indigo-600">
{resource.name}
</p>
{resource.datastore_active && (
<div className="ml-2 flex flex-shrink-0">
<p className="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">
Datastore active
</p>
</div>
)}
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
<FolderOpenIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
{resource.format}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
<CalendarIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<p>
Last modified:{' '}
<time dateTime={resource.metadata_modified}>
{formatter.format(
new Date(resource.metadata_modified)
)}
</time>
</p>
</div>
</div>
</div>
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
);
}