diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 8049eb17..d6475206 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -9,4 +9,4 @@ updates: versioning-strategy: increase groups: all-minor-updates: - update-types: ['minor', 'patch'] + update-types: ['minor', 'patch'] \ No newline at end of file diff --git a/.github/workflows/autoAssigned.yml b/.github/workflows/autoAssigned.yml index 6c761ccd..6586ab99 100644 --- a/.github/workflows/autoAssigned.yml +++ b/.github/workflows/autoAssigned.yml @@ -8,15 +8,14 @@ jobs: auto-assign: runs-on: ubuntu-latest steps: - - name: Check for "EU QUERO!!!" comment - if: contains(github.event.comment.body, 'EU QUERO!!!') - run: | - # Extract the commenter's username - commenter=$(jq -r .comment.user.login $GITHUB_EVENT_PATH) - - # Add the commenter as an assignee to the issue using a Personal Access Token - echo "Assigning $commenter to the issue..." - curl -X POST -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ - -d "{\"assignees\": [\"$commenter\"]}" \ - "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/assignees" - + - name: Check for "EU QUERO!!!" comment + if: contains(github.event.comment.body, 'EU QUERO!!!') + run: | + # Extract the commenter's username + commenter=$(jq -r .comment.user.login $GITHUB_EVENT_PATH) + + # Add the commenter as an assignee to the issue using a Personal Access Token + echo "Assigning $commenter to the issue..." + curl -X POST -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ + -d "{\"assignees\": [\"$commenter\"]}" \ + "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/assignees" \ No newline at end of file diff --git a/.github/workflows/autoMilestone.yml b/.github/workflows/autoMilestone.yml index 6202ee7c..c70d0e9c 100644 --- a/.github/workflows/autoMilestone.yml +++ b/.github/workflows/autoMilestone.yml @@ -8,24 +8,23 @@ jobs: auto-assign-milestone: runs-on: ubuntu-latest steps: - - name: Check for issue creation - run: | - # Extract the milestone name you want to assign - milestone="primeira página" - - # Add the milestone to the issue - echo "Assigning milestone $milestone to the issue..." - curl -X PATCH -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ - -d "{\"milestone\": \"$milestone\"}" \ - "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}" - - name: Add a comment to the issue - run: | - # Comment to be added - comment="### Obrigado por abrir a issue\n### Verifique os nossos guidelines:\n- [Código de conduta](https://github.com/Alecell/octopost/blob/master/CODE_OF_CONDUCT.md)\n- [Contribuição](https://github.com/Alecell/octopost/blob/master/CONTRIBUTING.md)\n- [Guia de Estilo](https://github.com/Alecell/octopost/blob/master/STYLEGUIDE.md)" - - # Add the comment to the issue - echo "Adding comment to the issue..." - curl -X POST -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ - -d "{\"body\": \"$comment\"}" \ - "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/comments" - + - name: Check for issue creation + run: | + # Extract the milestone name you want to assign + milestone="primeira página" + + # Add the milestone to the issue + echo "Assigning milestone $milestone to the issue..." + curl -X PATCH -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ + -d "{\"milestone\": \"$milestone\"}" \ + "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}" + - name: Add a comment to the issue + run: | + # Comment to be added + comment="### Obrigado por abrir a issue\n### Verifique os nossos guidelines:\n- [Código de conduta](https://github.com/Alecell/octopost/blob/master/CODE_OF_CONDUCT.md)\n- [Contribuição](https://github.com/Alecell/octopost/blob/master/CONTRIBUTING.md)\n- [Guia de Estilo](https://github.com/Alecell/octopost/blob/master/STYLEGUIDE.md)" + + # Add the comment to the issue + echo "Adding comment to the issue..." + curl -X POST -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \ + -d "{\"body\": \"$comment\"}" \ + "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/comments" \ No newline at end of file diff --git a/src/components/more-info/assets/calendar.svg b/src/components/more-info/assets/calendar.svg new file mode 100644 index 00000000..c40d1af9 --- /dev/null +++ b/src/components/more-info/assets/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/more-info/assets/plus.svg b/src/components/more-info/assets/plus.svg new file mode 100644 index 00000000..a5fab7be --- /dev/null +++ b/src/components/more-info/assets/plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/more-info/assets/shield.svg b/src/components/more-info/assets/shield.svg new file mode 100644 index 00000000..f7307ebb --- /dev/null +++ b/src/components/more-info/assets/shield.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/more-info/assets/stethoscope.svg b/src/components/more-info/assets/stethoscope.svg new file mode 100644 index 00000000..c481b3f9 --- /dev/null +++ b/src/components/more-info/assets/stethoscope.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/more-info/assets/vaccine.svg b/src/components/more-info/assets/vaccine.svg new file mode 100644 index 00000000..a22167a8 --- /dev/null +++ b/src/components/more-info/assets/vaccine.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/more-info/index.js b/src/components/more-info/index.js new file mode 100644 index 00000000..f67e93ab --- /dev/null +++ b/src/components/more-info/index.js @@ -0,0 +1,145 @@ +import './index.scss'; + +import { Component } from 'pet-dex-utilities'; +import InputText from '../TextInput/index'; + +const mockVaccines = [ + { + year: 2023, + vaccine: 'Antirrábica', + date: '11-02-2023', + doctor: 'Felipa', + }, + { + year: 2023, + vaccine: 'Raiva', + date: '11-02-2023', + doctor: 'Felipa', + }, + { + year: 2023, + vaccine: 'Leptospirose', + date: '12-03-2023', + doctor: 'Felipa', + }, + { + year: 2023, + vaccine: 'Bordetella', + date: '15-04-2023', + doctor: 'Felipa', + }, + { + year: 2023, + vaccine: 'Giardia', + date: '06-10-2023', + doctor: 'Felipa', + }, +]; + +const html = ` +
+
+

Conte-nos um pouco mais do seu animal

+

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

+
+
+
+ stethoscope +

O seu pet amigo foi castrado?

+
+
+
+ + +
+
+ + +
+
+
+
+
+ shield +

Cuidados especiais

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+ vaccine +

Vacinas

+
+
+ +
+
+
+
+
`; + +export default function CardPet() { + Component.call(this, { html }); + const inputText = new InputText({ + placeholder: 'Escreva o cuidado especial', + variation: 'outlined', + }); + const inputContainer = this.selected.get('input_text'); + + inputText.mount(inputContainer); + + if (!mockVaccines) { + // eslint-disable-next-line prettier/prettier + this.selected.get('render-vaccines').innerText = 'Nenhuma vacina cadastrada.'; + } else { + // eslint-disable-next-line no-inner-declarations + function cardVaccine(year, vaccine, date, doctor) { + const cardVaccineHtml = ` +

${year}

+
+

${vaccine}

+
+ calendar +

${date}

+
+

Dr. ${doctor}

`; + return cardVaccineHtml; + } + const vaccinesContainer = this.selected.get('render-vaccines'); + const dataVaccines = () => { + //preciso de ajuda para não precisar desabilitar a regra + // eslint-disable-next-line no-restricted-syntax + for (const item of mockVaccines) { + //preciso de ajuda para não precisar desabilitar a regra + // eslint-disable-next-line prettier/prettier + const createCardVaccine = cardVaccine(item.year, item.vaccine, item.date, item.doctor); + const divVaccines = document.createElement('div'); + divVaccines.classList.add('vaccines-container'); + divVaccines.innerHTML = createCardVaccine; + vaccinesContainer.appendChild(divVaccines); + } + }; + dataVaccines(); + } +} + +CardPet.prototype = Object.assign(CardPet.prototype, Component.prototype); diff --git a/src/components/more-info/index.scss b/src/components/more-info/index.scss new file mode 100644 index 00000000..4e792a2b --- /dev/null +++ b/src/components/more-info/index.scss @@ -0,0 +1,152 @@ +.more-info-container { + max-width: 940px; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: #fff; + border-radius: 1.3rem; + color: #39434f; +} + +.more-info-header { + padding: 1.3rem; + width: 100%; + align-items: center; + display: flex; + flex-direction: column; + gap: 1.3rem; + &__title { + font-size: 2rem; + color: #39434f; + } + &__sub-title { + color: #606873; + } +} + +.more-info-card, +.vaccines-container { + max-width: 630px; + min-width: 630px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1.3rem; + &__description, + &__input-group { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.3rem; + max-width: 46%; + } +} + +.render-vaccines { + max-height: 130px; + overflow-y: auto; +} +.render-vaccines::-webkit-scrollbar { + width: 6px; +} + +.render-vaccines::-webkit-scrollbar-thumb { + background-color: #A0AEC0; + border-radius: 6px; +} + +.render-vaccines::-webkit-scrollbar-track { + background-color: #f1f1f1; +} +.vaccines-container{ + &__year, + .vaccines-group{ + display: flex; + width: 100%; + } + &__year{ + font-weight: bold; + } +} +.vaccines-group{ + align-items: center; + justify-content: space-between; + margin-top: 1.3rem; + padding: 1.5rem; + &__date-group{ + display: flex; + align-items: center; + + } + &__title{ + font-weight: bold; + } + &__date-group, + &__doctor{ + color: #808B9A; + } +} + +.label-check-radios, +.button_add { + display: flex; + align-items: center; + gap: 5px; +} +.button_add{ +padding: 1.3rem; +color: #1B85F3; +cursor: pointer; + +border: none; +} +.label-cuidado{ + width: 100%; + color: #606873; + margin-top: 1.3rem; +} +.more-info-card__input-group__checkbox-group { + display: flex; + min-width: 60px; + gap: 1.3rem; +} + +.more-info__card-text-group { + width: 100%; + + input { + width: 100%; + padding: 5px; + border: 0; + border-bottom: 1px solid #606873; + + &::placeholder { + line-height: 21px; + font-size: 0.875rem; + } + } +} + +// apenas marcação exixte uma task para o checkbox que não é minha +// Esconder o input radio +input[type='radio'] { + display: none; +} + +// Estilizar a aparência do label para se parecer com um checkbox +input[type='radio'] + label .checkmark { + display: inline-block; + width: 1.3rem; + height: 1.3rem; + border: 2px solid #999; + border-radius: 3px; + cursor: pointer; +} + +// Estilizar quando o input radio está selecionado +input[type='radio']:checked + label .checkmark { + background-color: #5649e4; + border-color: #5649e4; + color: #fff; +} diff --git a/src/components/more-info/questoes.json b/src/components/more-info/questoes.json new file mode 100644 index 00000000..f518dbd7 --- /dev/null +++ b/src/components/more-info/questoes.json @@ -0,0 +1,23 @@ +[ + { + "id": 1, + "img": "assets/stethoscope.svg", + "title": "O seu pet amigo foi castrado?", + "nameQuestion": "castrado", + "observation": "" + }, + { + "id": 2, + "img": "assets/shield.svg", + "title": "Precisa de cuidados especiais?", + "nameQuestion": "cuidado", + "observation": "" + }, + { + "id": 3, + "img": "assets/vaccine.svg", + "title": "O seu pet amigo foi castrado?", + "nameQuestion": "", + "observation": "" + } +] diff --git a/src/home/index.js b/src/home/index.js index b11f4ddf..b1abed55 100644 --- a/src/home/index.js +++ b/src/home/index.js @@ -1,5 +1,5 @@ import { extractElements } from 'pet-dex-utilities'; -import Navigation from './components/Navigation'; +import Navigation from './components/navigation'; import NoPetRegirestedPage from './components/NoPetRegirestedPage'; import SideMenu from './components/SideMenu'; import './index.scss'; diff --git a/src/home/index.scss b/src/home/index.scss index d58d723e..85927172 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -2,6 +2,16 @@ @use '~styles/colors.scss' as colors; @use '~styles/breakpoints.scss' as breakpoints; + +body { + background-color: #003459; +} +.home-main-container { + display: flex; + justify-content: center; + gap: 1rem; + margin: 40px auto; + .home { width: 100vw; height: 100vh; @@ -61,3 +71,4 @@ } } } +} \ No newline at end of file diff --git a/src/home/main.js b/src/home/main.js new file mode 100644 index 00000000..62ba2516 --- /dev/null +++ b/src/home/main.js @@ -0,0 +1,40 @@ +import './index.scss'; + +import { extractElements } from 'pet-dex-utilities'; + +// import Card from '../components/Card'; +import CardPet from '../components/more-info'; + +// function renderCards(qty, $container) { +// for (let i = 0; i < qty; i += 1) { +// const card = new Card(); +// card.mount($container); +// card.setTitle(`Card ${i}`); +// card.listen('purchase', () => { +// console.log(`purchase de quem usa o componente, esse é o card ${i}`); +// }); + +// const $card = card.selected.get('card-button'); + +// if (i === 2) { +// card.disable(); +// $card.classList.add('card-container__button--disabled'); +// } else { +// $card.classList.add('card-container__button--active'); +// } +// } +// } + +function renderCardMoreInfo($container) { + const cardPet = new CardPet(); + cardPet.mount($container); +} + +document.addEventListener('DOMContentLoaded', () => { + const selected = extractElements([document.body]); + const $container = selected.get('container'); + // const $container2 = selected.get('container2'); + + // renderCards(5, $container); + renderCardMoreInfo($container); +});