(null);
filteredProjects = computed(() => {
const search = this.searchValue().toLowerCase();
@@ -104,6 +108,11 @@ export class MyProjectsComponent implements OnInit {
});
}
+ navigateToProject(project: Project): void {
+ this.activeProject.set(project);
+ this.#router.navigate(['/my-projects', project.id]);
+ }
+
ngOnInit() {
this.#store.dispatch(GetProjects);
}
diff --git a/src/app/features/my-projects/project/files/file-detail/file-detail.component.html b/src/app/features/my-projects/project/files/file-detail/file-detail.component.html
new file mode 100644
index 000000000..a800862fd
--- /dev/null
+++ b/src/app/features/my-projects/project/files/file-detail/file-detail.component.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Download As Zip
+
+
+
+
+
+ Create Folder
+
+
+
+
+
+ Upload File
+
+
+
+
+
+ @for (file of files(); track file.downloads) {
+
+
+ @if (file.downloadType && file.type !== "folder") {
+ @if (file.downloadType === "doc") {
+
+ } @else {
+
+ }
+ } @else {
+
+ }
+
+
+ {{ file.name }}
+
+
+
{{ file.downloads }} Downloads
+
+
+ {{ file.size }}
+
+
+ {{ file.modifiedAt | date: "MMM d, y hh:mm a" }}
+
+
+
+ }
+
+
(null);
+ readonly #router = inject(Router);
+
+ selectFolder(folder: FileItem): void {
+ if (this.folderOpened()) {
+ this.folderOpened.set(false);
+ this.files.set(FILES);
+
+ return;
+ }
+
+ if (folder.children && folder.children.length > 0) {
+ this.folderOpened.set(true);
+ this.files.set([folder, ...folder.children]);
+ }
+ }
+
+ navigateToFile(file: FileItem): void {
+ if (file.type === 'file') {
+ this.#router.navigate(['/my-projects', 'project', 'files', file.id]);
+ }
+ }
+}
diff --git a/src/app/features/my-projects/project/files/project-files.entities.ts b/src/app/features/my-projects/project/files/project-files.entities.ts
new file mode 100644
index 000000000..8ba92723e
--- /dev/null
+++ b/src/app/features/my-projects/project/files/project-files.entities.ts
@@ -0,0 +1,50 @@
+export type FolderType = 'file' | 'folder';
+
+export type FileType = 'pdf' | 'doc';
+
+export interface FileItem {
+ id?: number;
+ name: string;
+ type: FolderType;
+ downloadType?: FileType;
+ downloads?: number;
+ size?: string;
+ modifiedAt?: Date;
+ children?: FileItem[];
+}
+
+export const FILES: FileItem[] = [
+ {
+ name: 'folder name example',
+ type: 'folder',
+ children: [
+ {
+ id: 0,
+ name: 'filerandomname.doc',
+ type: 'file',
+ downloadType: 'doc',
+ downloads: 12,
+ size: '1.2 MB',
+ modifiedAt: new Date('2023-10-01T12:00:00'),
+ },
+ {
+ id: 1,
+ name: 'filerandomname.pdf',
+ type: 'file',
+ downloadType: 'pdf',
+ downloads: 12,
+ size: '1.2 MB',
+ modifiedAt: new Date('2023-10-01T12:00:00'),
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: 'filerandomname.doc',
+ type: 'file',
+ downloadType: 'doc',
+ downloads: 12,
+ size: '1.2 MB',
+ modifiedAt: new Date('2023-10-01T12:00:00'),
+ },
+];
diff --git a/src/app/features/my-projects/project/metadata/metadata.ts b/src/app/features/my-projects/project/metadata/metadata.ts
new file mode 100644
index 000000000..3caf33f60
--- /dev/null
+++ b/src/app/features/my-projects/project/metadata/metadata.ts
@@ -0,0 +1,32 @@
+export interface MetadataTemplate {
+ title: string;
+ description: string;
+}
+
+export const metadataTemplates: MetadataTemplate[] = [
+ {
+ title: 'OSF Enhanced Metadata',
+ description:
+ 'Additional metadata for OSF records, derived from the DataCite 4.4 Schema',
+ },
+ {
+ title: 'Human Cognitive Neuroscience Data',
+ description:
+ 'This is a template to describe human cognitive neuroscience data.',
+ },
+ {
+ title: 'Psych-DS Official Template',
+ description:
+ 'A community standard providing a systematic way of formatting and documenting datasets',
+ },
+ {
+ title: 'mateBUS',
+ description:
+ 'A metadata template for applied psychology and organizational research
',
+ },
+ {
+ title: 'LDbase Project Metadata Form ver. 2',
+ description:
+ 'The LDbase template is for projects in the fields of education, learning, and human development.',
+ },
+];
diff --git a/src/app/features/my-projects/project/metadata/project-metadata.component.html b/src/app/features/my-projects/project/metadata/project-metadata.component.html
new file mode 100644
index 000000000..ea547b7c3
--- /dev/null
+++ b/src/app/features/my-projects/project/metadata/project-metadata.component.html
@@ -0,0 +1,40 @@
+
+
+ Select a Metadata Template
+
+
+ OSF has partnered with
CEDAR to provide more ways
+ to annotate your research with domain or community-specific metadata
+ records. If you would like to request the addition of a new metadata
+ template, contact us at
support@osf.io.
+
+
+
+ @for (meta of metadataTemplates; track meta.title) {
+
+ }
+
diff --git a/src/app/features/my-projects/project/metadata/project-metadata.component.scss b/src/app/features/my-projects/project/metadata/project-metadata.component.scss
new file mode 100644
index 000000000..cad8088a3
--- /dev/null
+++ b/src/app/features/my-projects/project/metadata/project-metadata.component.scss
@@ -0,0 +1,8 @@
+@use "assets/styles/variables" as var;
+
+.metadata {
+ border: 1px solid var(--grey-2);
+ border-radius: 12px;
+ flex-basis: 550px;
+ height: 188px;
+}
diff --git a/src/app/features/my-projects/project/metadata/project-metadata.component.ts b/src/app/features/my-projects/project/metadata/project-metadata.component.ts
new file mode 100644
index 000000000..18fca27f9
--- /dev/null
+++ b/src/app/features/my-projects/project/metadata/project-metadata.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { metadataTemplates } from '@osf/features/my-projects/project/metadata/metadata';
+import { Button } from 'primeng/button';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'osf-project-metadata',
+ imports: [SubHeaderComponent, Button, RouterLink],
+ templateUrl: './project-metadata.component.html',
+ styleUrl: './project-metadata.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProjectMetadataComponent {
+ @HostBinding('class') classes = 'flex flex-1 flex-column gap-4 w-full h-full';
+ protected readonly metadataTemplates = metadataTemplates;
+}
diff --git a/src/app/features/my-projects/project/overview/project-overview.component.html b/src/app/features/my-projects/project/overview/project-overview.component.html
new file mode 100644
index 000000000..02a720b53
--- /dev/null
+++ b/src/app/features/my-projects/project/overview/project-overview.component.html
@@ -0,0 +1,241 @@
+
+
+
+
+
+
+
Wiki
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt ....
+
+
+
Read more
+
+
+
+
Components
+
+
+
+
+
+
+
+
Michael Pasek
+
+
+ Description: Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+ dolor in eprehenderit i...
+
+
+
+
+
+
+
+
+
+
Michael Pasek
+
+
+ Description: Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+ dolor in eprehenderit i...
+
+
+
+
+
+
+
+
Linked Projects
+
+
+
Name Example
+
+
+
+ Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ eprehenderit i...
+
+
+
+
+
+
Recent Activity
+
+
+
+
+
Feb 5, 2025 04:37 AM
+
+
+
+
+
+
Feb 5, 2025 04:37 AM
+
+
+
+
+
+
Feb 5, 2025 04:37 AM
+
+
+
+
+
+
('');
- searchValue = model.required();
+ searchValue = model();
onSearchChange(value: string): void {
this.searchValue.set(value);
diff --git a/src/assets/images/files/doc.svg b/src/assets/images/files/doc.svg
new file mode 100644
index 000000000..0755bd04a
--- /dev/null
+++ b/src/assets/images/files/doc.svg
@@ -0,0 +1,4 @@
+
+
+
diff --git a/src/assets/images/files/pdf.svg b/src/assets/images/files/pdf.svg
new file mode 100644
index 000000000..f2bd18821
--- /dev/null
+++ b/src/assets/images/files/pdf.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/assets/images/project/arnold-ven.png b/src/assets/images/project/arnold-ven.png
new file mode 100644
index 000000000..fbe982d02
Binary files /dev/null and b/src/assets/images/project/arnold-ven.png differ
diff --git a/src/assets/images/project/center-for-os.png b/src/assets/images/project/center-for-os.png
new file mode 100644
index 000000000..64955a25a
Binary files /dev/null and b/src/assets/images/project/center-for-os.png differ
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 6d985814c..55e893e42 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -1,3 +1,4 @@
+@use "primeicons/primeicons.css";
@use "fonts";
@use "variables" as var;
@use "mixins" as mix;