From c7b7ec2b8f5f19728f94855053db7462a52016f1 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 30 Jan 2024 12:03:18 -0500 Subject: [PATCH 01/28] Adds generic Flex component This makes it easier to build flexible layouts without rewriting styles each time. Enhance Flex-ability --- src/addons/browser/Browser.svelte | 36 ++++++++++++---------------- src/common/Flex.svelte | 39 +++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 21 deletions(-) create mode 100644 src/common/Flex.svelte diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte index 4bb6408aa..69142066b 100644 --- a/src/addons/browser/Browser.svelte +++ b/src/addons/browser/Browser.svelte @@ -13,6 +13,7 @@ import Pin from "../../common/icons/Pin.svelte"; import Star from "../../common/icons/Star.svelte"; import Credit from "../../common/icons/Credit.svelte"; + import Flex from "../../common/Flex.svelte"; export let visible = false; export let per_page = 10; @@ -80,8 +81,8 @@ -
-
+ + {#if $filter === "active"} {/if} -
- -
+ + + @@ -149,27 +148,22 @@ .search { margin-bottom: 1em; } - .results { + + /* Use of :global is required for passing style to Flex component */ + .browser :global(.results) { flex: 4 1 24em; min-width: 20em; min-height: 0; max-height: 100%; - display: flex; - flex-direction: column; } - .results .list { + .browser :global(.results > .list) { flex: 1 1 24em; - display: flex; - flex-direction: column; align-items: center; background-color: white; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: calc(2 * var(--radius)); overflow-y: scroll; } - .results .pagination { - flex: 0 0 auto; - } .tip { font-size: 0.9em; diff --git a/src/common/Flex.svelte b/src/common/Flex.svelte new file mode 100644 index 000000000..16f32fef4 --- /dev/null +++ b/src/common/Flex.svelte @@ -0,0 +1,39 @@ + + + + + + + From aeb6ab9830c155ecdbe88c742d83e404f478fd3e Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 5 Feb 2024 12:08:43 -0500 Subject: [PATCH 02/28] Updates project list sidebar with browse button --- src/langs/json/en.json | 3 ++- src/pages/app/sidebar/projects/ProjectList.svelte | 6 +++--- .../app/sidebar/projects/stories/ProjectList.stories.svelte | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 967cdb03a..0fd019f74 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -508,7 +508,8 @@ "publishedUrlFieldButton": "Edit" }, "projectsMenu": { - "newProject": "New Project", + "browseProjects": "Browse", + "newProject": "New", "projMembership": "Project Membership", "selectDocs": "Select documents to place them in projects", "createProj": "Create a project to organize and share documents", diff --git a/src/pages/app/sidebar/projects/ProjectList.svelte b/src/pages/app/sidebar/projects/ProjectList.svelte index c1ec98614..d221928e4 100644 --- a/src/pages/app/sidebar/projects/ProjectList.svelte +++ b/src/pages/app/sidebar/projects/ProjectList.svelte @@ -12,8 +12,8 @@ import { ChevronRight16, ChevronDown16 } from "svelte-octicons"; export let user: User; - export let newProject; export let editProject; + export let browseProjects; const expanded = writable(true); function toggleExpanded() { @@ -44,8 +44,8 @@ {/if} {$_("projects.header")} - {$_("projectsMenu.browseProjects")} {#if $expanded} diff --git a/src/pages/app/sidebar/projects/stories/ProjectList.stories.svelte b/src/pages/app/sidebar/projects/stories/ProjectList.stories.svelte index 4be371ab3..17efc566a 100644 --- a/src/pages/app/sidebar/projects/stories/ProjectList.stories.svelte +++ b/src/pages/app/sidebar/projects/stories/ProjectList.stories.svelte @@ -19,8 +19,8 @@ const args = { user: { id: 1 }, - newProject: action("New Project"), editProject: action("Edit Project"), + browseProjects: action("Browse Projects"), }; From 08081a647a5f8849143f0ec542b9fd24901c294b Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 5 Feb 2024 16:03:59 -0500 Subject: [PATCH 03/28] Scaffold project browser --- src/api/fixtures/projects.fixtures.ts | 0 src/manager/layout.js | 8 ++++++++ src/pages/app/App.svelte | 2 ++ src/pages/app/sidebar/Sidebar.svelte | 4 ++-- src/projects/browser/Browser.svelte | 0 5 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 src/api/fixtures/projects.fixtures.ts create mode 100644 src/projects/browser/Browser.svelte diff --git a/src/api/fixtures/projects.fixtures.ts b/src/api/fixtures/projects.fixtures.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/manager/layout.js b/src/manager/layout.js index b819c32bb..f41615e2d 100644 --- a/src/manager/layout.js +++ b/src/manager/layout.js @@ -278,6 +278,14 @@ export function hideData() { layout.dataOpen = false; } +export function browseProjects() { + layout.projectBrowser = true; +} + +export function hideProjectBrowser() { + layout.projectBrowser = false; +} + export function newProject() { layout.projectEdit = null; layout.projectOpen = true; diff --git a/src/pages/app/App.svelte b/src/pages/app/App.svelte index 9fce9bcfe..3b000e381 100644 --- a/src/pages/app/App.svelte +++ b/src/pages/app/App.svelte @@ -6,6 +6,8 @@ import Sidebar from "./sidebar/Sidebar.svelte"; import MainContainer from "./MainContainer.svelte"; + // projects ui + // new add-ons ui import Browser from "../../addons/browser/Browser.svelte"; import Dispatch from "../../addons/dispatch/Dispatch.svelte"; diff --git a/src/pages/app/sidebar/Sidebar.svelte b/src/pages/app/sidebar/Sidebar.svelte index a3944c914..f70ac5809 100644 --- a/src/pages/app/sidebar/Sidebar.svelte +++ b/src/pages/app/sidebar/Sidebar.svelte @@ -11,7 +11,7 @@ import AddonList from "./addons/AddonList.svelte"; import ProjectList from "./projects/ProjectList.svelte"; - import { newProject, editProject } from "../../../manager/layout.js"; + import { browseProjects, editProject } from "../../../manager/layout.js"; import { getMe } from "../../../api/orgAndUser"; import { User } from "../../../api/types/orgAndUser"; @@ -62,7 +62,7 @@
{#if user}
-
+
{/if} diff --git a/src/projects/browser/Browser.svelte b/src/projects/browser/Browser.svelte new file mode 100644 index 000000000..e69de29bb From 7a0ab5a22b4df0b7d0878a7b52510ec5b88603bd Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 5 Feb 2024 16:12:16 -0500 Subject: [PATCH 04/28] Type orgAndUsers fixtures --- ...dUser.fixtures.js => orgAndUser.fixtures.ts} | 17 +++++++++++------ src/api/types/orgAndUser.ts | 2 ++ .../accounts/stories/PremiumMenu.stories.svelte | 2 +- src/pages/app/accounts/stories/mockData.ts | 10 +++++++--- 4 files changed, 21 insertions(+), 10 deletions(-) rename src/api/fixtures/{orgAndUser.fixtures.js => orgAndUser.fixtures.ts} (94%) diff --git a/src/api/fixtures/orgAndUser.fixtures.js b/src/api/fixtures/orgAndUser.fixtures.ts similarity index 94% rename from src/api/fixtures/orgAndUser.fixtures.js rename to src/api/fixtures/orgAndUser.fixtures.ts index 940e187cf..3626d5bf8 100644 --- a/src/api/fixtures/orgAndUser.fixtures.js +++ b/src/api/fixtures/orgAndUser.fixtures.ts @@ -1,4 +1,7 @@ -export const me = { +import { Org, Page, User } from "../types"; +import { GroupOrg, IndividualOrg } from "../types/orgAndUser"; + +export const me: User = { id: 4, avatar_url: "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg", @@ -23,9 +26,10 @@ export const me = { verified_journalist: true, }; -export const users = { +export const users: Page = { next: null, previous: null, + count: 12, results: [ { id: 1, @@ -156,9 +160,10 @@ export const users = { ], }; -export const organizations = { +export const organizations: Page = { next: null, previous: null, + count: 2, results: [ { id: 1, @@ -189,7 +194,7 @@ export const organizations = { ], }; -export const organization = { +export const organization: GroupOrg = { id: 1, avatar_url: "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png", @@ -203,7 +208,7 @@ export const organization = { plan: "Organization", }; -export const proOrg = { +export const proOrg: IndividualOrg = { id: 4, avatar_url: "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg", @@ -217,7 +222,7 @@ export const proOrg = { plan: "Professional", }; -export const freeOrg = { +export const freeOrg: IndividualOrg = { id: 4, avatar_url: "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg", diff --git a/src/api/types/orgAndUser.ts b/src/api/types/orgAndUser.ts index 9ed9b1623..a934c7233 100644 --- a/src/api/types/orgAndUser.ts +++ b/src/api/types/orgAndUser.ts @@ -34,6 +34,8 @@ export interface User { organization: number | Org; organizations: number[]; admin_organizations: number[]; + feature_level?: number; + verified_journalist?: boolean; } export function isOrg(org?: null | number | Org): org is Org { diff --git a/src/pages/app/accounts/stories/PremiumMenu.stories.svelte b/src/pages/app/accounts/stories/PremiumMenu.stories.svelte index 9479bdfeb..5b2ec616f 100644 --- a/src/pages/app/accounts/stories/PremiumMenu.stories.svelte +++ b/src/pages/app/accounts/stories/PremiumMenu.stories.svelte @@ -3,7 +3,7 @@ import PremiumMenu from "../PremiumMenu.svelte"; - import { organizations } from "../../../../api/fixtures/orgAndUser.fixtures.js"; + import { organizations } from "../../../../api/fixtures/orgAndUser.fixtures"; export const meta = { title: "App / Accounts / Menus / Premium", diff --git a/src/pages/app/accounts/stories/mockData.ts b/src/pages/app/accounts/stories/mockData.ts index b68489498..e48c2bdcc 100644 --- a/src/pages/app/accounts/stories/mockData.ts +++ b/src/pages/app/accounts/stories/mockData.ts @@ -6,7 +6,8 @@ import { organizations, proOrg, users, -} from "../../../../api/fixtures/orgAndUser.fixtures.js"; +} from "../../../../api/fixtures/orgAndUser.fixtures"; +import { Org } from "../../../../api/types/orgAndUser.js"; /* Mock Request Handlers */ const mockMeUrl = new URL(`users/me/`, baseApiUrl).toString(); @@ -43,14 +44,17 @@ export const mockGetMe = { ), freeOrgMember: rest.get(mockMeUrl, (req, res, ctx) => res( - ctx.json({ ...me, organization: { ...me.organization, plan: "Free" } }), + ctx.json({ + ...me, + organization: { ...(me.organization as Org), plan: "Free" }, + }), ), ), freeOrgAdmin: rest.get(mockMeUrl, (req, res, ctx) => res( ctx.json({ ...me, - organization: { ...me.organization, plan: "Free" }, + organization: { ...(me.organization as Org), plan: "Free" }, admin_organizations: [...me.admin_organizations, 1], }), ), From e2e001fb50281021cd0e30858970d101052852c2 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 6 Feb 2024 01:14:04 -0500 Subject: [PATCH 05/28] Working in storybook --- src/api/fixtures/projects.fixtures.ts | 95 ++++++++++ src/langs/json/en.json | 5 + src/projects/Browser.svelte | 186 ++++++++++++++++++++ src/projects/ProjectList.svelte | 81 +++++++++ src/projects/ProjectListItem.svelte | 91 ++++++++++ src/projects/ProjectPin.svelte | 55 ++++++ src/projects/browser/Browser.svelte | 0 src/projects/stories/Browser.stories.svelte | 40 +++++ src/projects/stories/mockData.ts | 19 ++ 9 files changed, 572 insertions(+) create mode 100644 src/projects/Browser.svelte create mode 100644 src/projects/ProjectList.svelte create mode 100644 src/projects/ProjectListItem.svelte create mode 100644 src/projects/ProjectPin.svelte delete mode 100644 src/projects/browser/Browser.svelte create mode 100644 src/projects/stories/Browser.stories.svelte create mode 100644 src/projects/stories/mockData.ts diff --git a/src/api/fixtures/projects.fixtures.ts b/src/api/fixtures/projects.fixtures.ts index e69de29bb..3b753514b 100644 --- a/src/api/fixtures/projects.fixtures.ts +++ b/src/api/fixtures/projects.fixtures.ts @@ -0,0 +1,95 @@ +import { Page, Project } from "../types"; + +export let project: Project = { + id: 29, + created_at: "2020-10-23T15:59:33.779478Z", + description: "", + edit_access: null, + add_remove_access: null, + private: false, + slug: "miltary-contractors", + title: "Miltary Contractors", + updated_at: "2020-10-23T15:59:33.896698Z", + user: 1, +}; + +export let projects: Page = { + next: null, + previous: null, + count: 5, + results: [ + { + id: 2, + created_at: "2020-10-27T16:48:08.161751Z", + description: "A sample set. ", + edit_access: null, + add_remove_access: null, + private: false, + slug: "defense-dept-foia", + title: "Defense Dept FOIA", + updated_at: "2020-10-27T16:48:08.168482Z", + user: 4, + }, + { + id: 5, + created_at: "2020-11-10T16:24:55.027446Z", + description: + "DOJ Report on Bush Administration Interrogation Memos and Related Documents released by the house judiciary committee in March 2010.", + edit_access: null, + add_remove_access: null, + private: false, + slug: "interrogation-memo-report-doj", + title: "Interrogation Memo Report (DOJ)", + updated_at: "2020-11-10T16:24:55.070632Z", + user: 4, + }, + { + id: 6, + created_at: "2020-11-10T16:24:55.027659Z", + description: "", + edit_access: null, + add_remove_access: null, + private: false, + slug: "the-financial-crisis", + title: "The Financial Crisis", + updated_at: "2020-11-10T16:24:55.071378Z", + user: 1, + }, + { + id: 17, + created_at: "2020-11-10T16:24:55.036977Z", + description: "", + edit_access: null, + add_remove_access: null, + private: false, + slug: "pulitzer-please", + title: "Pulitzer, Please", + updated_at: "2020-11-10T16:24:55.097554Z", + user: 14, + }, + { + id: 20, + created_at: "2020-11-10T16:09:05.829402Z", + description: "", + edit_access: null, + add_remove_access: null, + private: false, + slug: "illinois", + title: "illinois", + updated_at: "2020-11-10T16:09:05.873311Z", + user: 3, + }, + { + id: 21, + created_at: "2020-11-10T16:24:55.038969Z", + description: "", + edit_access: null, + add_remove_access: null, + private: false, + slug: "documentcloud", + title: "DocumentCloud", + updated_at: "2020-11-10T16:24:55.103407Z", + user: 4, + }, + ], +}; diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 0fd019f74..5cc29a46f 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -516,6 +516,11 @@ "remove": "Remove {n, plural, one {document} other {# documents}} from project", "add": "Add {n, plural, one {document} other {# documents}} to project" }, + "projectBrowser": { + "loading": "Loading projects…", + "retry": "Retry", + "empty": "No projects found." + }, "addonsMenu": { "newAddon": "Request new Add-on from Staff", "selectDocs": "Select documents to dispatch them in add-ons", diff --git a/src/projects/Browser.svelte b/src/projects/Browser.svelte new file mode 100644 index 000000000..25c903d60 --- /dev/null +++ b/src/projects/Browser.svelte @@ -0,0 +1,186 @@ + + + +
+
+

Projects

+
+ + + + + + + +
+ + + diff --git a/src/projects/ProjectList.svelte b/src/projects/ProjectList.svelte new file mode 100644 index 000000000..8e1627311 --- /dev/null +++ b/src/projects/ProjectList.svelte @@ -0,0 +1,81 @@ + + +
+ {#if loading} + + +

{$_("projectBrowser.loading")}

+ {:else if error} + +
+

{error}

+ {#if reload}{/if} + {:else if empty} + +
+

{$_("projectBrowser.empty")}

+ {:else} +
    + {#each items as project (project.id)} +
    • + {/each} +
+ {/if} +
+ + diff --git a/src/projects/ProjectListItem.svelte b/src/projects/ProjectListItem.svelte new file mode 100644 index 000000000..e406a5ca1 --- /dev/null +++ b/src/projects/ProjectListItem.svelte @@ -0,0 +1,91 @@ + + + +
+
+
+ +
+
+

{project.title}

+
+
+ {#if project.description} +
{@html project.description}
+ {/if} +
+ + + diff --git a/src/projects/ProjectPin.svelte b/src/projects/ProjectPin.svelte new file mode 100644 index 000000000..9c82dc4ce --- /dev/null +++ b/src/projects/ProjectPin.svelte @@ -0,0 +1,55 @@ + + + + + diff --git a/src/projects/browser/Browser.svelte b/src/projects/browser/Browser.svelte deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/projects/stories/Browser.stories.svelte b/src/projects/stories/Browser.stories.svelte new file mode 100644 index 000000000..4d555eee2 --- /dev/null +++ b/src/projects/stories/Browser.stories.svelte @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/projects/stories/mockData.ts b/src/projects/stories/mockData.ts new file mode 100644 index 000000000..77e23deea --- /dev/null +++ b/src/projects/stories/mockData.ts @@ -0,0 +1,19 @@ +import { rest } from "msw"; +import { projects } from "../../api/fixtures/projects.fixtures"; +import { baseApiUrl } from "../../api/base.js"; + +const mockUrl = new URL(`projects/`, baseApiUrl).toString(); +/* Mock Request Handlers */ +export const projectHandlers = { + data: rest.get(mockUrl, (req, res, ctx) => res(ctx.json(projects))), + loading: rest.get(mockUrl, (req, res, ctx) => res(ctx.delay("infinite"))), + error: rest.get(mockUrl, (req, res, ctx) => + res( + ctx.status(400, "Ambiguous Error"), + ctx.json("Something went horribly wrong."), + ), + ), + empty: rest.get(mockUrl, (req, res, ctx) => + res(ctx.json({ next: null, previous: null, results: [] })), + ), +}; From 1c89d7a2342f900877b2424f149e10ebcf9a0eed Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 7 Feb 2024 10:15:30 -0500 Subject: [PATCH 06/28] Refactors EditButton into common component --- src/common/EditButton.svelte | 43 +++++++++++++++++++ .../sidebar/projects/ProjectListItem.svelte | 30 +------------ 2 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 src/common/EditButton.svelte diff --git a/src/common/EditButton.svelte b/src/common/EditButton.svelte new file mode 100644 index 000000000..28ed21547 --- /dev/null +++ b/src/common/EditButton.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/src/pages/app/sidebar/projects/ProjectListItem.svelte b/src/pages/app/sidebar/projects/ProjectListItem.svelte index 9c028d842..d4aa1fa9c 100644 --- a/src/pages/app/sidebar/projects/ProjectListItem.svelte +++ b/src/pages/app/sidebar/projects/ProjectListItem.svelte @@ -1,7 +1,7 @@ @@ -16,6 +22,11 @@

{project.title}

+ {#if project.edit_access} +
+ +
+ {/if} {#if project.description}
{@html project.description}
@@ -55,7 +66,7 @@ .description { margin: 0 0.5em; - opacity: 0.6z; + opacity: 0.6; font-size: 0.875em; line-height: 1.4; color: var(--darkgray); @@ -68,7 +79,7 @@ } } - .project-name { + .project-title { margin: 0; font-weight: 600; } diff --git a/src/projects/stories/Browser.stories.svelte b/src/projects/stories/Browser.stories.svelte index 4d555eee2..498d2a3e2 100644 --- a/src/projects/stories/Browser.stories.svelte +++ b/src/projects/stories/Browser.stories.svelte @@ -7,7 +7,7 @@ import { projectHandlers } from "./mockData"; export const meta = { - title: "Projects / Browser", + title: "App / Projects / Browser", tags: ["autodocs"], parameters: { layout: "fullscreen" }, component: Browser, diff --git a/src/projects/stories/ProjectList.stories.svelte b/src/projects/stories/ProjectList.stories.svelte new file mode 100644 index 000000000..0f17286e6 --- /dev/null +++ b/src/projects/stories/ProjectList.stories.svelte @@ -0,0 +1,27 @@ + + + + + + + + diff --git a/src/projects/stories/ProjectListItem.stories.svelte b/src/projects/stories/ProjectListItem.stories.svelte new file mode 100644 index 000000000..42581eda1 --- /dev/null +++ b/src/projects/stories/ProjectListItem.stories.svelte @@ -0,0 +1,63 @@ + + + + + + + + + + + From 15949fb8e9394dab394a9f5cfb3b4e4845a6c271 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 7 Feb 2024 12:28:57 -0500 Subject: [PATCH 08/28] Refactor Filter into common components --- src/addons/browser/Categories.svelte | 2 +- src/addons/browser/Filters.svelte | 2 +- src/{addons/browser => common}/Filter.svelte | 0 src/{addons/browser => common}/stories/Filter.stories.svelte | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/{addons/browser => common}/Filter.svelte (100%) rename src/{addons/browser => common}/stories/Filter.stories.svelte (91%) diff --git a/src/addons/browser/Categories.svelte b/src/addons/browser/Categories.svelte index d4d4813e8..92c065c55 100644 --- a/src/addons/browser/Categories.svelte +++ b/src/addons/browser/Categories.svelte @@ -1,7 +1,7 @@
diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte index 98f066aa0..7e3c720bd 100644 --- a/src/addons/browser/Filters.svelte +++ b/src/addons/browser/Filters.svelte @@ -1,7 +1,7 @@

Projects

+
- + {#if $filter === "public"} + + {/if}
@@ -94,7 +101,7 @@ grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr; gap: 1em; - padding: 1em 1em 0; + padding: 1em 1em 0.5em; height: 100%; width: 100%; max-width: 44em; @@ -103,9 +110,8 @@ .header { grid-column: span 2; display: flex; - flex-direction: column; align-items: baseline; - gap: 0.5em; + gap: 2em; margin-right: 2em; } .header h2 { diff --git a/src/projects/Filters.svelte b/src/projects/Filters.svelte new file mode 100644 index 000000000..0d07f3b2a --- /dev/null +++ b/src/projects/Filters.svelte @@ -0,0 +1,75 @@ + + +
    + {#each Object.entries(FILTERS) as [id, name]} +
  • + + + + +
    • + {/each} +
+ + diff --git a/src/projects/stories/Browser.stories.svelte b/src/projects/stories/Browser.stories.svelte index 498d2a3e2..4b8aae61e 100644 --- a/src/projects/stories/Browser.stories.svelte +++ b/src/projects/stories/Browser.stories.svelte @@ -5,6 +5,7 @@ const args = { visible: true }; import { projectHandlers } from "./mockData"; + import { mockGetMe } from "../../pages/app/accounts/stories/mockData"; export const meta = { title: "App / Projects / Browser", @@ -21,20 +22,20 @@ From 19951fe9628d074747f5868806b7a4e380fa3ceb Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 7 Feb 2024 12:29:40 -0500 Subject: [PATCH 10/28] Updates ProjectListItem --- src/projects/ProjectListItem.svelte | 38 ++++++++++++----------------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/src/projects/ProjectListItem.svelte b/src/projects/ProjectListItem.svelte index 922b1ac1a..c8540f131 100644 --- a/src/projects/ProjectListItem.svelte +++ b/src/projects/ProjectListItem.svelte @@ -4,6 +4,8 @@ import ProjectPin from "./ProjectPin.svelte"; import type { Project } from "../api/types/project"; import EditButton from "../common/EditButton.svelte"; + import { Lock16 } from "svelte-octicons"; + import { projectUrl } from "../search/search.js"; export let project: Project; export let editProject: (project: Project) => void; @@ -13,14 +15,18 @@ console.log("edit_access", project.edit_access); - +
-
+
-
+

{project.title}

+ {#if project.private}{/if}
{#if project.edit_access}
@@ -49,19 +55,10 @@ display: flex; align-items: flex-end; gap: 0.5rem; - margin: 0.5rem; - } - - .badge { - margin-bottom: -0.25em; - font-size: 0.8em; } - .metadata { - display: flex; - align-items: flex-end; - gap: 1rem; - color: var(--darkgray); + .margin { + margin: 0.5rem; } .description { @@ -88,15 +85,12 @@ align-self: center; } - .stretch { - flex: 1 1 auto; - } - - .author a:hover { - opacity: 0.7; + .center { + display: inline-flex; + align-items: center; } - p { - margin: 0; + .stretch { + flex: 1 1 auto; } From 7a0bb704a2da0071894be43275f0676d5eba51c8 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 7 Feb 2024 12:29:46 -0500 Subject: [PATCH 11/28] Adds Project Browser into app --- src/pages/app/App.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/app/App.svelte b/src/pages/app/App.svelte index 3b000e381..08840e448 100644 --- a/src/pages/app/App.svelte +++ b/src/pages/app/App.svelte @@ -7,6 +7,7 @@ import MainContainer from "./MainContainer.svelte"; // projects ui + import ProjectBrowser from "../../projects/Browser.svelte"; // new add-ons ui import Browser from "../../addons/browser/Browser.svelte"; @@ -14,7 +15,7 @@ import Runs from "../../addons/runs/Runs.svelte"; import { setHash, router } from "../../router/router.js"; - import { layout } from "../../manager/layout.js"; + import { hideProjectBrowser, layout } from "../../manager/layout.js"; import { orgsAndUsers } from "../../manager/orgsAndUsers.js"; // hash routing, like in Viewer.svelte @@ -147,6 +148,11 @@
+ + Date: Wed, 7 Feb 2024 12:42:40 -0500 Subject: [PATCH 12/28] Only list pinned projects in sidebar --- src/api/fixtures/projects.fixtures.ts | 1 + src/langs/json/en.json | 3 ++- src/pages/app/sidebar/projects/ProjectList.svelte | 13 ++++++++----- .../app/sidebar/projects/ProjectListItem.svelte | 8 ++++---- src/pages/app/stories/mock.ts | 2 +- 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/api/fixtures/projects.fixtures.ts b/src/api/fixtures/projects.fixtures.ts index 8c9c165e4..669f968fd 100644 --- a/src/api/fixtures/projects.fixtures.ts +++ b/src/api/fixtures/projects.fixtures.ts @@ -42,6 +42,7 @@ export let projects: Page = { title: "Defense Dept FOIA", updated_at: "2020-10-27T16:48:08.168482Z", user: 4, + pinned: true, }, { id: 5, diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 5cc29a46f..7dd7c47a6 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -572,7 +572,8 @@ "yourPubDocuments": "Your Public Documents", "orgDocuments": "{name}’s Documents", "newProject": "New Project", - "createProject": "Create your first project by clicking “New Project” above." + "createProject": "Create your first project by clicking “New Project” above.", + "pinsEmpty": "Pinned projects will appear here for quick access" }, "organizations": { "sameOrgUsers": "Users in organization" diff --git a/src/pages/app/sidebar/projects/ProjectList.svelte b/src/pages/app/sidebar/projects/ProjectList.svelte index d221928e4..a9b5a5691 100644 --- a/src/pages/app/sidebar/projects/ProjectList.svelte +++ b/src/pages/app/sidebar/projects/ProjectList.svelte @@ -28,11 +28,14 @@ return projects; } - async function getProjectList() { - return sort(await getProjects(user.id)); + async function getPinnedList() { + const pinned = (await getProjects(user.id)).filter( + (project) => project.pinned, + ); + return sort(pinned); } - const promise = getProjectList(); + const promise = getPinnedList(); @@ -44,7 +47,7 @@ {/if} {$_("projects.header")} - @@ -65,7 +68,7 @@ {/each} {:else} - {$_("projects.createProject")} + {$_("projects.pinsEmpty")} {/if}
{:catch} diff --git a/src/pages/app/sidebar/projects/ProjectListItem.svelte b/src/pages/app/sidebar/projects/ProjectListItem.svelte index d4aa1fa9c..e58a85f81 100644 --- a/src/pages/app/sidebar/projects/ProjectListItem.svelte +++ b/src/pages/app/sidebar/projects/ProjectListItem.svelte @@ -1,6 +1,6 @@ - + {#if onEditClick} @@ -30,8 +30,8 @@ background: rgba(0, 0, 0, 0.03); } - .folder { - fill: var(--primary); + .pin { + fill: var(--highlight-orange); } .title { diff --git a/src/pages/app/stories/mock.ts b/src/pages/app/stories/mock.ts index 83726841d..3d406ef43 100644 --- a/src/pages/app/stories/mock.ts +++ b/src/pages/app/stories/mock.ts @@ -4,7 +4,7 @@ import { baseApiUrl } from "../../../api/base.js"; import usersFixture from "../fixtures/users.json"; import orgFixtures from "../fixtures/organizations.json"; import listFixture from "../../../addons/fixtures/addon-list.json"; -import { projectList } from "../../../api/test/fixtures/project"; +import { projects as projectList } from "../../../api/fixtures/projects.fixtures"; import { emptyList } from "../../../api/test/fixtures/empty"; import meFixture from "../fixtures/me.json"; import runFixtures from "../fixtures/addon_runs.json"; From 3544eb6c377ec01365d4788d1fd797872ec4e747 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 13 Feb 2024 13:24:08 -0500 Subject: [PATCH 13/28] update type imports --- src/projects/Browser.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/projects/Browser.svelte b/src/projects/Browser.svelte index ac6bd1446..4177907ed 100644 --- a/src/projects/Browser.svelte +++ b/src/projects/Browser.svelte @@ -1,7 +1,6 @@ + - -
-
-
- -
-
-

{project.title}

- {#if project.private}{/if} -
- {#if project.edit_access} +
+ + +
+
- +
+
+

{project.title}

+ {#if project.private}{/if} +
+ {#if project.edit_access} +
+ +
+ {/if} +
+ {#if project.description} +
{@html project.description}
{/if}
- {#if project.description} -
{@html project.description}
- {/if} -
- + +
diff --git a/src/manager/projects.js b/src/manager/projects.js index fed7dd706..8b442e8f4 100644 --- a/src/manager/projects.js +++ b/src/manager/projects.js @@ -50,13 +50,18 @@ export async function initProjects(me) { projects.projects = newProjects.map((project) => new Project(project)); } -export async function createNewProject(title, description) { - const project = await newProject(title, description); +export async function createNewProject(title, description, isPrivate) { + const project = await newProject(title, description, isPrivate); projects.projects = [...projects.projects, new Project(project)]; } -export async function editProject(project, title, description) { - const updatedProject = await updateProject(project.id, title, description); +export async function editProject(project, title, description, isPrivate) { + const updatedProject = await updateProject( + project.id, + title, + description, + isPrivate, + ); projects.projects = projects.projects.map((oldProject) => { if (project.id == oldProject.id) { return new Project(updatedProject); From 5d4d7a9e90b855f47116b0a368a0ab06caa5843d Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 20 Feb 2024 15:27:15 -0500 Subject: [PATCH 26/28] Decouples ProjectDialog from application state - Creates container component for connecting with application state - Creates presentational component with corresponding storybook --- src/common/dialog/ProjectDialog.svelte | 194 ++++++++---------- .../dialog/ProjectDialogContainer.svelte | 83 ++++++++ .../stories/ProjectDialog.stories.svelte | 63 ++++++ src/pages/app/MainContainer.svelte | 4 +- 4 files changed, 234 insertions(+), 110 deletions(-) create mode 100644 src/common/dialog/ProjectDialogContainer.svelte create mode 100644 src/common/dialog/stories/ProjectDialog.stories.svelte diff --git a/src/common/dialog/ProjectDialog.svelte b/src/common/dialog/ProjectDialog.svelte index fcd6c8aad..2cc243d60 100644 --- a/src/common/dialog/ProjectDialog.svelte +++ b/src/common/dialog/ProjectDialog.svelte @@ -1,136 +1,99 @@ - - import { layout, showCollaborators, embedProject } from "@/manager/layout.js"; +
- -
-

+ +
+

{#if editing} {$_("dialogProjectDialog.editProject")} {:else} {$_("dialogProjectDialog.createProject")} {/if}

-
- -

+

+ + +