-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat(appaddurl): crowd sourced url (closes #24)
closes #24
- Loading branch information
1 parent
0c0fa8b
commit eeed9ab
Showing
24 changed files
with
321 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,78 @@ | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| import { computed, type PropType, ref, watch } from 'vue' | ||
| import { isValidUrl } from '@/utils/util' | ||
| import { useMutation } from '@vue/apollo-composable' | ||
| import { ADD_SAMPLE } from '@/graphql/mutations/samples' | ||
| import type { Statement } from '@/entities/Statement' | ||
| import { GET_STATEMENTS } from '@/graphql/queries/statements' | ||
| import { useValidateOgUrl } from '@/composables/useValidateOgUrl' | ||
| import AppAddUrlError from '@/components/AppAddUrl/AppAddUrlError.vue' | ||
| import AppAddUrlPreview from '@/components/AppAddUrl/AppAddUrlPreview.vue' | ||
| const showInput = ref(false) | ||
| const input = ref() | ||
| const toggleShowInput = () => { | ||
| showInput.value = !showInput.value | ||
| input.value.focus() | ||
| } | ||
| const props = defineProps({ | ||
| statement: { type: Object as PropType<Statement>, required: true } | ||
| }) | ||
| const inputValue = ref('') | ||
| const canCreate = computed(() => !!inputValue.value && isValidUrl(inputValue.value)) | ||
| const { loading: loadingValidation, data, validate } = useValidateOgUrl() | ||
| watch(data, (n) => { | ||
| if (!n?.error && n?.data.success) { | ||
| addSample() | ||
| } | ||
| }) | ||
| const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE, () => ({ | ||
| variables: { | ||
| objects: { | ||
| statement_id: props.statement?.id, | ||
| url: inputValue.value | ||
| } | ||
| }, | ||
| update: (cache, { data: { insert_samples } }) => { | ||
| let data: any = cache.readQuery({ query: GET_STATEMENTS }) | ||
| data = { | ||
| ...data, | ||
| statements: [...data.statements, insert_samples] | ||
| } | ||
| cache.writeQuery({ query: GET_STATEMENTS, data }) | ||
| inputValue.value = '' | ||
| } | ||
| })) | ||
| </script> | ||
| <template> | ||
| <div class="AppAddUrl font--fira"> | ||
| <button @click="toggleShowInput">{{ showInput ? 'Cancel' : 'Add Inspiration ✨' }}</button> | ||
| <input | ||
| ref="input" | ||
| :class="[showInput ? 'visible opacity-100' : 'invisible opacity-0']" | ||
| placeholder="https://dribbble.com/shots..." | ||
| type="text" | ||
| /> | ||
| <label | ||
| class="mr-3 flex-1" | ||
| title="Add new inspiration" | ||
| aria-label="Add new inspiration" | ||
| for="add-url" | ||
| > | ||
| <input | ||
| required | ||
| name="add-url" | ||
| v-model="inputValue" | ||
| placeholder="e.g https://dribbble.com/shots..." | ||
| type="text" | ||
| /> | ||
| </label> | ||
| <button | ||
| :disabled="!canCreate || loadingValidation || loadingMutation" | ||
| @click="validate(inputValue)" | ||
| > | ||
| Add Inspiration ✨ | ||
| </button> | ||
| </div> | ||
| <AppAddUrlError :msg="data?.error ? 'Provided URL is invalid ❌' : ''" /> | ||
| <AppAddUrlPreview v-if="!data?.error && data?.data" :og-item="data.data" /> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .AppAddUrl { | ||
| @apply flex mb-5 text-sm items-baseline; | ||
| input { | ||
| @apply ml-3 p-3 rounded-lg border transition-all; | ||
| max-height: 43px; | ||
| } | ||
| button { | ||
| @apply p-3 bg-black text-white mt-3 rounded-lg w-44; | ||
| } | ||
| @import 'AppAddUrl'; | ||
| @media (prefers-color-scheme: dark) { | ||
| @import 'AppAddUrl.dark'; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script setup lang="ts"> | ||
| defineProps({ | ||
| msg: String | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="AppAddUrlError font--fira" v-if="msg"> | ||
| {{ msg }} | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .AppAddUrlError { | ||
| @apply p-2 bg-red-500 text-sm rounded-sm; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <script lang="ts" setup> | ||
| import type { PropType } from 'vue' | ||
| import { computed } from 'vue' | ||
| import { truncate } from '@/utils/util' | ||
| import type { OgItem } from '@/composables/useValidateOgUrl' | ||
| import MdiCheckCircleOutline from '@/components/Icons/MdiCheckCircleOutline.vue' | ||
| const ogImage = computed(() => (props.ogItem?.ogImage?.length ? props.ogItem.ogImage[0].url : '')) | ||
| const ogTitle = computed(() => props.ogItem?.ogTitle ?? '') | ||
| const ogDescription = computed(() => props.ogItem?.ogDescription ?? props.ogItem?.requestUrl) | ||
| const ogUrl = computed(() => props.ogItem?.ogUrl ?? '') | ||
| const props = defineProps({ | ||
| ogItem: { | ||
| type: Object as PropType<OgItem> | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <a | ||
| :href="ogUrl" | ||
| target="_blank" | ||
| :title="ogTitle" | ||
| :aria-description="ogDescription" | ||
| class="AppAddUrlPreview font--fira" | ||
| > | ||
| <MdiCheckCircleOutline class="absolute right-1 top-1 text-green-400 text-xl" /> | ||
| <div | ||
| class="AppAddUrlPreview__img" | ||
| v-if="ogImage" | ||
| :style="{ backgroundImage: `url(${ogImage})` }" | ||
| /> | ||
| <div class="AppAddUrlPreview__content"> | ||
| <div class="AppAddUrlPreview__content--title" v-if="ogTitle">{{ truncate(ogTitle, 30) }}</div> | ||
| <div class="AppAddUrlPreview__content--desc" v-if="ogDescription"> | ||
| {{ truncate(ogDescription, 100) }} | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| @import 'AppAddUrlPreview'; | ||
| @media (prefers-color-scheme: dark) { | ||
| @import 'AppAddUrlPreview.dark'; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .AppAddUrl { | ||
| input { | ||
| @apply bg-transparent; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .AppAddUrl { | ||
| @apply flex mb-5 text-sm items-baseline; | ||
| input { | ||
| @apply p-3 rounded-lg border transition-all w-full; | ||
| max-height: 44px; | ||
| } | ||
| button { | ||
| @apply p-3 bg-black text-white mt-3 rounded-lg w-44; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .AppAddUrlPreview { | ||
| @apply bg-transparent; | ||
| &__content { | ||
| @apply text-gray-300; | ||
| &--desc { | ||
| @apply text-gray-500; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .AppAddUrlPreview { | ||
| @apply flex h-auto w-full bg-white border rounded-lg mb-4 transition-all overflow-hidden relative; | ||
|
|
||
| &__img { | ||
| @apply min-w-[33%] w-1/3 rounded-l-lg bg-cover; | ||
| } | ||
| &__content { | ||
| @apply flex flex-col p-3 text-gray-800; | ||
| &--title { | ||
| @apply text-sm; | ||
| } | ||
| &--desc { | ||
| @apply text-xs text-gray-600 mt-2; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .AppLink { | ||
| font-family: 'Fira Mono', serif; | ||
| @apply pl-3 pr-3 rounded-lg flex items-center; | ||
| background: linear-gradient( | ||
| 89.84deg, | ||
| rgba(230, 36, 174, 0.15) 0.34%, | ||
| rgba(94, 58, 255, 0.15) 16.96%, | ||
| rgba(10, 136, 255, 0.15) 34.66%, | ||
| rgba(75, 191, 80, 0.15) 50.12%, | ||
| rgba(137, 206, 0, 0.15) 66.22%, | ||
| rgba(239, 183, 0, 0.15) 82%, | ||
| rgba(246, 73, 0, 0.15) 99.9% | ||
| ); | ||
| border: 1px solid #d9e1ec; | ||
| &__icon { | ||
| @apply w-3 min-w-[0.9rem]; | ||
| } | ||
| &__url { | ||
| @apply text-xs truncate text-ellipsis ml-2; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.