From c260792a17a209c738233558e235f198c447b592 Mon Sep 17 00:00:00 2001 From: jlpereira Date: Wed, 4 Dec 2024 11:47:14 -0300 Subject: [PATCH] Fix image modal, add demo and github actions --- .github/workflows/deploy.yml | 44 ++++++++++++++ package.json | 2 +- src/App.vue | 11 ++-- src/adapters/makeFigure.ts | 12 +++- src/adapters/makeLead.ts | 6 +- src/components/Demo/DemoPanelAPI.vue | 82 +++++++++++++++++++++++++ src/components/Figure/FigureItem.vue | 8 ++- src/components/Modal.vue | 7 --- src/components/VuePinpoint.vue | 11 ++-- src/store/key.ts | 90 +++++++++++++++++----------- src/types/Figure.ts | 1 + src/types/apiConfig.ts | 4 ++ src/types/index.ts | 1 + src/utils/makeRequest.ts | 4 +- 14 files changed, 222 insertions(+), 61 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 src/components/Demo/DemoPanelAPI.vue create mode 100644 src/types/apiConfig.ts diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..6592200 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,44 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + permissions: + contents: write + + steps: + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Install dependencies + run: npm install + + - name: Build public view + run: npm run build + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./dist + + deploy: + needs: build + permissions: + pages: write + id-token: write + + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/package.json b/package.json index c84ddaa..0b99f54 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vue-tsc -b && vite build", + "build": "vite build", "preview": "vite preview", "test": "vitest" }, diff --git a/src/App.vue b/src/App.vue index 686aea1..a91931f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,12 @@ diff --git a/src/adapters/makeFigure.ts b/src/adapters/makeFigure.ts index 1c0f1b1..5b13628 100644 --- a/src/adapters/makeFigure.ts +++ b/src/adapters/makeFigure.ts @@ -1,10 +1,16 @@ -import { Figure } from '@/types' +import { Figure, APIConfig } from '@/types' -export function makeFigure(figure: any): Figure { +export function makeFigure( + figure: any, + { baseUrl, projectToken }: APIConfig +): Figure { return { caption: figure.caption, label: figure.label, position: figure.position, - image: figure.medium + image: figure.medium, + original: `${baseUrl}/${figure.original_png?.substring( + 8 + )}?project_token=${projectToken}` } } diff --git a/src/adapters/makeLead.ts b/src/adapters/makeLead.ts index 73b46c4..f28113c 100644 --- a/src/adapters/makeLead.ts +++ b/src/adapters/makeLead.ts @@ -1,13 +1,13 @@ -import { Lead } from '@/types' +import { APIConfig, Lead } from '@/types' import { makeFigure } from './makeFigure' -export function makeLead(item: any): Lead { +export function makeLead(item: any, config: APIConfig): Lead { return { text: item.text, parentId: item.parent_id, targetId: item.target_id, targetType: item.target_type, position: item.position, - figures: item.figures?.map(makeFigure) || [] + figures: item.figures?.map((item) => makeFigure(item, config)) || [] } } diff --git a/src/components/Demo/DemoPanelAPI.vue b/src/components/Demo/DemoPanelAPI.vue new file mode 100644 index 0000000..d5941d4 --- /dev/null +++ b/src/components/Demo/DemoPanelAPI.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/components/Figure/FigureItem.vue b/src/components/Figure/FigureItem.vue index a62a189..1d7ea54 100644 --- a/src/components/Figure/FigureItem.vue +++ b/src/components/Figure/FigureItem.vue @@ -10,7 +10,8 @@ @close="() => (isModalVisible = false)" > @@ -39,4 +40,9 @@ const isModalVisible = ref(false) border: 1px solid black; cursor: pointer; } + +.pinpoint-figure-image { + max-width: 90vw; + max-height: 90vh; +} diff --git a/src/components/Modal.vue b/src/components/Modal.vue index ad883c6..999b9c1 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -67,12 +67,5 @@ onUnmounted(() => { @media (min-width: 768px) { height: auto; } - - @media (min-width: 640px) { - max-width: 640px; - } - @media (min-width: 768px) { - max-width: 768px; - } } diff --git a/src/components/VuePinpoint.vue b/src/components/VuePinpoint.vue index 41d0616..5fd9bae 100644 --- a/src/components/VuePinpoint.vue +++ b/src/components/VuePinpoint.vue @@ -14,7 +14,7 @@ import Couplet from './Couplet.vue' import PreviousCouplets from './PreviousCouplets.vue' type Props = { - keyId: Number + leadId: Number projectToken: String baseUrl: string } @@ -27,10 +27,13 @@ const error = ref(null) provide('store', store) watch( - () => props.keyId, + [() => props.leadId, () => props.projectToken, () => props.baseUrl], () => { - if (props.keyId) { - store.loadKey(props.keyId).catch((response) => { + store.reset() + store.setConfig(props) + if (props.leadId && props.baseUrl && props.projectToken && props.baseUrl) { + console.log(props.baseUrl) + store.loadKey(props.leadId).catch((response) => { console.log(response.message) error.value = response }) diff --git a/src/store/key.ts b/src/store/key.ts index 4bf2f65..d5f9db9 100644 --- a/src/store/key.ts +++ b/src/store/key.ts @@ -1,4 +1,4 @@ -import { Lead, Entry, Node } from '../types' +import { Lead, Entry, Node, APIConfig } from '../types' import { Metadata } from './../types/Metadata' import { reactive } from 'vue' import { TaxonWorks } from '@/services/TaxonWorks' @@ -14,54 +14,70 @@ type Store = { metadata: Metadata | null entries: Entries leads: Leads + config: APIConfig } -function makeEntries(entries: any) { - return Object.fromEntries( - Object.entries(entries).map(([key, value]) => [key, makeEntry(value)]) - ) +function initStore(config: APIConfig): Store { + return { + currentNode: null, + metadata: null, + entries: {}, + leads: {}, + nodes: {}, + config + } } -function makeLeads(leads: any) { - return Object.fromEntries( - Object.entries(leads).map(([key, value]) => [key, makeLead(value)]) - ) -} +export function useKeyStore(config) { + let service = new TaxonWorks(config) + const state: Store = reactive(initStore(config)) -function mergeEntriesAndLeads(entries: Entries, leads: Leads): Nodes { - const nodes: Nodes = {} + function makeEntries(entries: any) { + return Object.fromEntries( + Object.entries(entries).map(([key, value]) => [key, makeEntry(value)]) + ) + } - for (const [id, lead] of Object.entries(leads)) { - const entry = entries[id] + function setConfig(config: APIConfig) { + state.config = config + service = new TaxonWorks(config) + } - nodes[id] = { - id: parseInt(id, 10), - ...lead, - ...entry - } + function reset() { + Object.assign(state, initStore(config)) + } - if (!entry) { - Object.assign(nodes[id], { children: [] }) - } + function makeLeads(leads: any) { + return Object.fromEntries( + Object.entries(leads).map(([key, value]) => [ + key, + makeLead(value, state.config) + ]) + ) } - return nodes -} + function mergeEntriesAndLeads(entries: Entries, leads: Leads): Nodes { + const nodes: Nodes = {} -export function useKeyStore(config) { - const service = new TaxonWorks(config) - const state: Store = reactive({ - currentNode: null, - metadata: null, - entries: {}, - leads: {}, - nodes: {}, - config - }) + for (const [id, lead] of Object.entries(leads)) { + const entry = entries[id] + + nodes[id] = { + id: parseInt(id, 10), + ...lead, + ...entry + } + + if (!entry) { + Object.assign(nodes[id], { children: [] }) + } + } + + return nodes + } const loadKey = (id: Number) => { return service.getDichotomousKey(id).then(({ data, metadata }) => { - console.log(data) state.entries = makeEntries(data.entries) state.leads = makeLeads(data.leads) state.nodes = mergeEntriesAndLeads(state.entries, state.leads) @@ -77,6 +93,8 @@ export function useKeyStore(config) { return { state, loadKey, - setCurrentNode + setCurrentNode, + setConfig, + reset } } diff --git a/src/types/Figure.ts b/src/types/Figure.ts index aec1ab4..044c31c 100644 --- a/src/types/Figure.ts +++ b/src/types/Figure.ts @@ -3,4 +3,5 @@ export type Figure = { label: string | null position: number image: string + original: string } diff --git a/src/types/apiConfig.ts b/src/types/apiConfig.ts new file mode 100644 index 0000000..4ed1cea --- /dev/null +++ b/src/types/apiConfig.ts @@ -0,0 +1,4 @@ +export type APIConfig = { + baseUrl: string + projectToken: string +} diff --git a/src/types/index.ts b/src/types/index.ts index d0c0a07..4f69121 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -3,3 +3,4 @@ export * from './Figure' export * from './Lead' export * from './Metadata' export * from './Node' +export * from './apiConfig' diff --git a/src/utils/makeRequest.ts b/src/utils/makeRequest.ts index 8525090..874b8c0 100644 --- a/src/utils/makeRequest.ts +++ b/src/utils/makeRequest.ts @@ -34,7 +34,9 @@ export async function makeRequest( const response = await fetch(makeUrlParameters(url, parameters), options) if (!response.ok) { - throw new Error(`Error response: ${response.statusText}`) + throw new Error( + `Error response: ${response.status} ${response.statusText}` + ) } const datosRespuesta = await response.json()