From cff80b027a2ae0f80e5b6abe237ea5a1dc8912d7 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Tue, 27 Sep 2022 15:20:11 +0100 Subject: [PATCH 01/31] in progress --- vue3-apollo-quasar/src/router/index.ts | 6 ++++++ .../src/views/OrgsProfile/OrgsProfile.vue | 11 +++++++++++ vue3-apollo-quasar/src/views/OrgsProfile/index.ts | 2 ++ vue3-apollo-quasar/src/views/index.ts | 1 + 4 files changed, 20 insertions(+) create mode 100644 vue3-apollo-quasar/src/views/OrgsProfile/OrgsProfile.vue create mode 100644 vue3-apollo-quasar/src/views/OrgsProfile/index.ts diff --git a/vue3-apollo-quasar/src/router/index.ts b/vue3-apollo-quasar/src/router/index.ts index 96c5fc9d2..bb570390f 100644 --- a/vue3-apollo-quasar/src/router/index.ts +++ b/vue3-apollo-quasar/src/router/index.ts @@ -11,6 +11,7 @@ import { RepositoryDetails, Redirect, NotFound, + OrgsProfile, } from '../views'; import { requiresAuth, requiresNoAuth } from './utils'; @@ -37,6 +38,11 @@ const routes: Array = [ }, ], }, + { + path: 'orgs/:org', + component: OrgsProfile, + props: true, + }, ], beforeEnter: requiresAuth, }, diff --git a/vue3-apollo-quasar/src/views/OrgsProfile/OrgsProfile.vue b/vue3-apollo-quasar/src/views/OrgsProfile/OrgsProfile.vue new file mode 100644 index 000000000..405a703f9 --- /dev/null +++ b/vue3-apollo-quasar/src/views/OrgsProfile/OrgsProfile.vue @@ -0,0 +1,11 @@ + + + diff --git a/vue3-apollo-quasar/src/views/OrgsProfile/index.ts b/vue3-apollo-quasar/src/views/OrgsProfile/index.ts new file mode 100644 index 000000000..47bf1c310 --- /dev/null +++ b/vue3-apollo-quasar/src/views/OrgsProfile/index.ts @@ -0,0 +1,2 @@ +import OrgsProfile from './OrgsProfile.vue'; +export default OrgsProfile; diff --git a/vue3-apollo-quasar/src/views/index.ts b/vue3-apollo-quasar/src/views/index.ts index d7c2605eb..f7654a1aa 100644 --- a/vue3-apollo-quasar/src/views/index.ts +++ b/vue3-apollo-quasar/src/views/index.ts @@ -1,6 +1,7 @@ export { default as Auth } from './Auth'; export { default as Home } from './Home'; export { default as Profile } from './Profile'; +export { default as OrgsProfile } from './OrgsProfile'; export { default as NotFound } from './404.vue'; // Multi-page directories From 5fb184b50418275b702d755e84da6ca4196d8e7e Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Wed, 28 Sep 2022 10:08:05 +0100 Subject: [PATCH 02/31] chore: added query for organization profile --- .../src/composables/github/index.ts | 1 + .../src/composables/github/queries/index.ts | 1 + .../queries/organization-profile.query.ts | 15 +++++++++++ .../composables/github/types/OrgsProfile.ts | 8 ++++++ .../src/composables/github/types/index.ts | 1 + .../src/composables/github/useOrgProfile.ts | 26 +++++++++++++++++++ 6 files changed, 52 insertions(+) create mode 100644 vue3-apollo-quasar/src/composables/github/queries/organization-profile.query.ts create mode 100644 vue3-apollo-quasar/src/composables/github/types/OrgsProfile.ts create mode 100644 vue3-apollo-quasar/src/composables/github/useOrgProfile.ts diff --git a/vue3-apollo-quasar/src/composables/github/index.ts b/vue3-apollo-quasar/src/composables/github/index.ts index 551f6a4c9..7ce49cdc4 100644 --- a/vue3-apollo-quasar/src/composables/github/index.ts +++ b/vue3-apollo-quasar/src/composables/github/index.ts @@ -13,3 +13,4 @@ export { useRepoPage } from './useRepoPage'; export { useRepoTree } from './useRepoTree'; export { useRepoReadMe } from './useRepoReadMe'; export { useRepoBranch } from './useRepoBranch'; +export { useOrgProfile } from './useOrgProfile'; diff --git a/vue3-apollo-quasar/src/composables/github/queries/index.ts b/vue3-apollo-quasar/src/composables/github/queries/index.ts index 21b801433..1373ef92c 100644 --- a/vue3-apollo-quasar/src/composables/github/queries/index.ts +++ b/vue3-apollo-quasar/src/composables/github/queries/index.ts @@ -2,6 +2,7 @@ export * from './current-user.query'; export * from './user-gists.query'; export * from './user-top-repos.query'; export * from './profile.query'; +export * from './organization-profile.query'; export * from './organization-repos.query'; export * from './issues.query'; diff --git a/vue3-apollo-quasar/src/composables/github/queries/organization-profile.query.ts b/vue3-apollo-quasar/src/composables/github/queries/organization-profile.query.ts new file mode 100644 index 000000000..f969e18ab --- /dev/null +++ b/vue3-apollo-quasar/src/composables/github/queries/organization-profile.query.ts @@ -0,0 +1,15 @@ +import { gql } from '@apollo/client'; + +export const ORGS_PROFILE_QUERY = gql` + query OrgsProfile($username: String!) { + organization(login: $username) { + avatarUrl + description + login + location + websiteUrl + url + name + } + } +`; diff --git a/vue3-apollo-quasar/src/composables/github/types/OrgsProfile.ts b/vue3-apollo-quasar/src/composables/github/types/OrgsProfile.ts new file mode 100644 index 000000000..04f8c6794 --- /dev/null +++ b/vue3-apollo-quasar/src/composables/github/types/OrgsProfile.ts @@ -0,0 +1,8 @@ +export interface OrgsProfile { + avartarUrl: string; + description: string; + login: string; + websiteUrl: string; + url: string; + name: string; +} diff --git a/vue3-apollo-quasar/src/composables/github/types/index.ts b/vue3-apollo-quasar/src/composables/github/types/index.ts index 08a46388b..f6b10076a 100644 --- a/vue3-apollo-quasar/src/composables/github/types/index.ts +++ b/vue3-apollo-quasar/src/composables/github/types/index.ts @@ -3,6 +3,7 @@ export * from './Gist'; export * from './UserTopRepos'; export * from './Profile'; export * from './PullRequest'; +export * from './OrgsProfile'; export * from './Issues'; diff --git a/vue3-apollo-quasar/src/composables/github/useOrgProfile.ts b/vue3-apollo-quasar/src/composables/github/useOrgProfile.ts new file mode 100644 index 000000000..62e9b2407 --- /dev/null +++ b/vue3-apollo-quasar/src/composables/github/useOrgProfile.ts @@ -0,0 +1,26 @@ +import { useQuery, useResult } from '@vue/apollo-composable'; +import { Ref } from 'vue'; +import { ORGS_PROFILE_QUERY } from './queries'; +import { OrgsProfile } from './types'; + +interface UseOrgProfile { + getOrgProfile: (username: string) => { + data: Ref; + loading: Ref; + }; +} + +export const useOrgProfile = (): UseOrgProfile => { + const getOrgProfile = (username: string) => { + const { result, loading } = useQuery(ORGS_PROFILE_QUERY, { + username, + }); + + const data = useResult(result, [], ({ organization }) => ({ + ...organization, + })); + return { data: data as Ref, loading }; + }; + + return { getOrgProfile }; +}; From 0a1f54f2f0d830410546fb522a0fa38c9674e915 Mon Sep 17 00:00:00 2001 From: Jerry Hogan Date: Thu, 29 Sep 2022 09:47:51 +0100 Subject: [PATCH 03/31] .. in progress --- .../OrganizationPageLayout.stories.ts | 13 +- .../OrganizationPageLayout.vue | 244 ++++++++++++++++-- .../components/OrganizationPageLayout/data.ts | 60 +++++ .../mockedOrgProfile.ts | 15 ++ .../ProfilePageLayout/ProfilePageLayout.vue | 73 +----- .../queries/organization-repos.query.ts | 3 + .../github/types/OrganizationRepositories.ts | 5 +- .../composables/github/types/OrgsProfile.ts | 2 +- vue3-apollo-quasar/src/composables/index.ts | 1 + .../src/composables/useSearch.ts | 95 +++++++ vue3-apollo-quasar/src/helpers/getTime.ts | 1 + vue3-apollo-quasar/src/helpers/inArray.ts | 10 + vue3-apollo-quasar/src/helpers/index.ts | 4 + vue3-apollo-quasar/src/helpers/matchText.ts | 2 + .../src/helpers/modifyFilterTypeText.ts | 11 + 15 files changed, 449 insertions(+), 90 deletions(-) create mode 100644 vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts create mode 100644 vue3-apollo-quasar/src/components/OrganizationPageLayout/mockedOrgProfile.ts create mode 100644 vue3-apollo-quasar/src/composables/useSearch.ts create mode 100644 vue3-apollo-quasar/src/helpers/getTime.ts create mode 100644 vue3-apollo-quasar/src/helpers/inArray.ts create mode 100644 vue3-apollo-quasar/src/helpers/matchText.ts create mode 100644 vue3-apollo-quasar/src/helpers/modifyFilterTypeText.ts diff --git a/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.stories.ts b/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.stories.ts index f8b424e68..61a71a406 100644 --- a/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.stories.ts +++ b/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.stories.ts @@ -1,9 +1,12 @@ +import { mockedOrgProfileQuery, mockedOrgRepoQuery } from './mockedOrgProfile'; import OrganizationPageLayout from './OrganizationPageLayout.vue'; export default { title: 'component/Organization Page Layout', component: OrganizationPageLayout, - argTypes: {}, + argTypes: { + username: {}, + }, }; const Template = (args) => ({ @@ -21,3 +24,11 @@ const Template = (args) => ({ }); export const Default = Template.bind({}); +Default.args = { + username: 'thisdot', +}; +Default.parameters = { + msw: { + handlers: [mockedOrgProfileQuery, mockedOrgRepoQuery], + }, +}; diff --git a/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.vue b/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.vue index 62856c919..f4bf5dc7b 100644 --- a/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.vue +++ b/vue3-apollo-quasar/src/components/OrganizationPageLayout/OrganizationPageLayout.vue @@ -1,16 +1,15 @@ + + diff --git a/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts b/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts new file mode 100644 index 000000000..78156c6e7 --- /dev/null +++ b/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts @@ -0,0 +1,60 @@ +export const orgProfile = { + organization: { + avatarUrl: 'https://avatars.githubusercontent.com/u/22839396?v=4', + description: '', + login: 'thisdot', + location: null, + websiteUrl: 'https://thisdot.co/', + url: 'https://github.com/thisdot', + name: 'This Dot', + }, +}; + +export const orgRepos = { + organization: { + repositories: { + edges: [ + { + node: { + id: '1234', + name: 'cream', + description: + 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', + url: '', + forkCount: 2, + stargazerCount: 2, + isFork: true, + isArchived: false, + primaryLanguage: { + id: '1j', + color: 'yellow', + name: 'Javascript', + }, + updatedAt: '4 Sep 2022', + visibility: 'public', + }, + }, + { + node: { + id: '1234', + name: 'cream', + description: + 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', + url: '', + forkCount: 2, + stargazerCount: 2, + isFork: true, + isArchived: false, + primaryLanguage: { + id: '1CS', + color: 'blue', + name: 'CSS', + }, + updatedAt: '4 Sep 2022', + visibility: 'public', + }, + }, + ], + }, + }, +}; diff --git a/vue3-apollo-quasar/src/components/OrganizationPageLayout/mockedOrgProfile.ts b/vue3-apollo-quasar/src/components/OrganizationPageLayout/mockedOrgProfile.ts new file mode 100644 index 000000000..634fdb3f1 --- /dev/null +++ b/vue3-apollo-quasar/src/components/OrganizationPageLayout/mockedOrgProfile.ts @@ -0,0 +1,15 @@ +import { graphql } from 'msw'; +import { orgProfile, orgRepos } from './data'; + +export const mockedOrgProfileQuery = graphql.query( + 'OrgsProfile', + (_, res, ctx) => { + return res(ctx.data(orgProfile)); + }, +); +export const mockedOrgRepoQuery = graphql.query( + 'OrganizationRepos', + (_, res, ctx) => { + return res(ctx.data(orgRepos)); + }, +); diff --git a/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.vue b/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.vue index 67e1fccc6..8e0171b6a 100644 --- a/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.vue +++ b/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.vue @@ -111,7 +111,6 @@ diff --git a/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts b/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts index 78156c6e7..aa990254f 100644 --- a/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts +++ b/vue3-apollo-quasar/src/components/OrganizationPageLayout/data.ts @@ -32,12 +32,16 @@ export const orgRepos = { }, updatedAt: '4 Sep 2022', visibility: 'public', + owner: { + login: 'hdjerry', + }, + nameWithOwner: 'hdjerry/someone', }, }, { node: { - id: '1234', - name: 'cream', + id: '123', + name: 'Gradients', description: 'Using basic pull requests to add your name and github link to BE A MEMBER of ZTM-ng', url: '', @@ -52,6 +56,10 @@ export const orgRepos = { }, updatedAt: '4 Sep 2022', visibility: 'public', + owner: { + login: 'hdjerry', + }, + nameWithOwner: 'hdjerry/someone', }, }, ], diff --git a/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.stories.ts b/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.stories.ts index bd9a1870b..843c7fe06 100644 --- a/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.stories.ts +++ b/vue3-apollo-quasar/src/components/ProfilePageLayout/ProfilePageLayout.stories.ts @@ -20,6 +20,7 @@ const Template = (args) => ({ diff --git a/vue3-apollo-quasar/src/components/ProfilePageLayout/data.ts b/vue3-apollo-quasar/src/components/ProfilePageLayout/data.ts index 978c27dc3..427fa50da 100644 --- a/vue3-apollo-quasar/src/components/ProfilePageLayout/data.ts +++ b/vue3-apollo-quasar/src/components/ProfilePageLayout/data.ts @@ -21,6 +21,10 @@ export const profileRepoData = { }, isPrivate: true, updatedAt: '4 Sep 2022', + owner: { + login: 'hdjerry', + }, + nameWithOwner: 'hdjerry/someone', }, { id: '123', @@ -41,6 +45,10 @@ export const profileRepoData = { }, isPrivate: true, updatedAt: '24 Sep 2021', + owner: { + login: 'hdjerry', + }, + nameWithOwner: 'hdjerry/someone', }, ], pageInfo: { diff --git a/vue3-apollo-quasar/src/components/RepoCard/RepoCard.vue b/vue3-apollo-quasar/src/components/RepoCard/RepoCard.vue index f42db02c5..49eca48ce 100644 --- a/vue3-apollo-quasar/src/components/RepoCard/RepoCard.vue +++ b/vue3-apollo-quasar/src/components/RepoCard/RepoCard.vue @@ -3,7 +3,7 @@

- + {{ repoNameWithOwner }} `${props.owner?.login || ''}/${props.name || ''}`, -); const repoNameWithOwner = computed( - () => - `${!props.isProfilePage ? `${props.owner?.login || ''}/` : ''}${ - props.name || '' - }`, + () => `${!props.isProfilePage ? props.nameWithOwner : props.name}`, ); diff --git a/vue3-apollo-quasar/src/components/RepoSubHeader/RepoSubHeader.vue b/vue3-apollo-quasar/src/components/RepoSubHeader/RepoSubHeader.vue index 91cce8a97..aaae78395 100644 --- a/vue3-apollo-quasar/src/components/RepoSubHeader/RepoSubHeader.vue +++ b/vue3-apollo-quasar/src/components/RepoSubHeader/RepoSubHeader.vue @@ -290,6 +290,7 @@ type Props = { forks: number; issuesCount: number; pullRequestsCount: number; + isOrg: boolean; }; export default defineComponent({ @@ -327,6 +328,10 @@ export default defineComponent({ type: Number, required: true, }, + isOrg: { + type: Boolean, + default: false, + }, }, components: { TextWithIconAndCount, @@ -361,7 +366,9 @@ export default defineComponent({ const selectNotification = (value: string) => (notify.value = value); const repo_url = computed(() => `/${props.username}/${props.repoName}`); - const profile_url = computed(() => `/${props.username}`); + const profile_url = computed( + () => `/${props.isOrg ? `orgs/${props.username}` : props.username}`, + ); const stars_count = computed(() => countCalc(props.stars)); const watch_count = computed(() => countCalc(props.watch)); const forks_count = computed(() => countCalc(props.forks)); diff --git a/vue3-apollo-quasar/src/components/SearchFilter/SearchFilter.vue b/vue3-apollo-quasar/src/components/SearchFilter/SearchFilter.vue index 1bcc6912d..1fad6bca0 100644 --- a/vue3-apollo-quasar/src/components/SearchFilter/SearchFilter.vue +++ b/vue3-apollo-quasar/src/components/SearchFilter/SearchFilter.vue @@ -2,7 +2,7 @@
-