Skip to content

Commit

Permalink
Refactored code
Browse files Browse the repository at this point in the history
  • Loading branch information
@VampireAotD
VampireAotD committed Dec 24, 2023
1 parent 2dba197 commit 937f9c7
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 105 deletions.
10 changes: 4 additions & 6 deletions scripts/install.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@ function set_compose_bin {
if which docker-compose >/dev/null 2>&1; then
echo docker-compose
return 0
fi

if which docker compose >/dev/null 2>&1; then
elif docker compose version >/dev/null 2>&1; then
echo docker compose
return 0
else
echo "Couldn't find any version of docker compose"
return 1
fi

echo "Couldn't find any version of docker compose"
return 1
}

compose=$(set_compose_bin) || {
Expand Down
38 changes: 38 additions & 0 deletions src/resources/js/features/anime/rating/AnimeRating.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { beforeEach, describe, expect, it } from 'vitest';
import { mount } from '@vue/test-utils';
import AnimeRating from './AnimeRating.vue';
import Rating from 'primevue/rating';
import PrimeVue from 'primevue/config';

describe('AnimeRating test (AnimeRating.vue)', () => {
let wrapper;

beforeEach(() => {
wrapper = mount(AnimeRating, {
props: { modelValue: 5 },
global: {
plugins: [PrimeVue],
},
});
});

it('Will display initial rating', () => {
expect(wrapper.text()).toContain('5 / 10');
const ratingComponent = wrapper.findComponent(Rating);

expect(ratingComponent.props('modelValue')).toBe(5);
});

it('Will update rating when the modelValue prop changes', async () => {
await wrapper.setProps({ modelValue: 8 });
expect(wrapper.text()).toContain('8 / 10');
});

it('Has appropriate ARIA attributes for accessibility', () => {
expect(wrapper.attributes('role')).toBe('status');
expect(wrapper.attributes('aria-live')).toBe('polite');

const ratingComponent = wrapper.findComponent(Rating);
expect(ratingComponent.exists()).toBeTruthy();
});
});
31 changes: 31 additions & 0 deletions src/resources/js/features/anime/rating/AnimeRating.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup lang="ts">
import Rating from 'primevue/rating';
import { computed } from 'vue';
type Props = {
modelValue: number;
};
const props = defineProps<Props>();
const emit = defineEmits<{ 'update:modelValue': [value: number] }>();
const rating = computed({
get: () => props.modelValue,
set: (value: number) => emit('update:modelValue', value),
});
</script>

<template>
<div class="flex gap-2" role="status" aria-live="polite">
<span id="ratingValue">{{ rating }} / 10</span>
<Rating
v-model="rating"
readonly
:stars="10"
:cancel="false"
aria-labelledby="ratingValue"
/>
</div>
</template>

<style scoped></style>
1 change: 1 addition & 0 deletions src/resources/js/features/anime/rating/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as AnimeRating } from './AnimeRating.vue';
5 changes: 3 additions & 2 deletions src/resources/js/features/dashboard/anime-carousel/AnimeCarousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Link } from '@inertiajs/vue3';
import { reactive, ref } from 'vue';
import { SectionTitle } from '@/shared/ui/section-title';
import { Models } from '@/types';
import DeferredContent from 'primevue/deferredcontent';
type Props = {
display: number;
Expand Down Expand Up @@ -46,7 +47,7 @@ const responsiveOptions = ref([
</script>

<template>
<div>
<DeferredContent>
<SectionTitle title="Recently added anime" />

<Carousel
Expand Down Expand Up @@ -82,7 +83,7 @@ const responsiveOptions = ref([
</div>
</template>
</Carousel>
</div>
</DeferredContent>
</template>

<style scoped></style>
172 changes: 75 additions & 97 deletions src/resources/js/pages/Anime/Show.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@
import { AuthenticatedLayout } from '@/widgets/layouts';
import { computed } from 'vue';
import { Head } from '@inertiajs/vue3';
import { ExternalLink } from '@/shared/ui/external-link';
import { Button } from '@/shared/ui/button';
import { Models } from '@/types';
import { ExternalLink } from '@/shared/ui/external-link';
import { AnimeRating } from '@/features/anime/rating';
const props = defineProps<{
anime: Models.Anime;
}>();
const props = defineProps<{ anime: Models.Anime }>();
const rating = computed(() => props.anime.rating);
const links = computed(() => props.anime.urls.map((link) => link.url));
const synonyms = computed(() => props.anime.synonyms.map((synonym) => synonym.synonym));
const genres = computed(() => props.anime.genres.map((genre) => genre.name));
const voiceActingList = computed(() =>
props.anime.voice_acting.map((voiceActing) => voiceActing.name)
const genres = computed((): string =>
props.anime.genres.map((genre) => genre.name).join(', ')
);
const voiceActingList = computed((): string =>
props.anime.voice_acting.map((voiceActing) => voiceActing.name).join(', ')
);
</script>

Expand All @@ -26,109 +27,86 @@ const voiceActingList = computed(() =>
<h2
class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"
>
Details for {{ anime.title }} anime
{{ anime.title }}
</h2>
</template>

<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
>
<section class="p-6 text-gray-600 body-font">
<div class="container px-5 mx-auto flex flex-wrap">
<div
class="lg:w-1/4 h-1/3 mb-10 lg:mb-0 rounded-lg overflow-hidden"
>
<img
:src="anime.image.path"
class="object-cover object-center h-full w-full"
:alt="anime.title"
/>
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm">
<section class="p-2 text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap">
<div class="grid grid-cols-1 mb-5">
<div class="px-1 mb-5 lg:mb-0 overflow-hidden">
<img
:src="anime.image.path"
class="w-full sm:w-64 sm:h-80"
:alt="anime.title"
/>
</div>

<div>
<ExternalLink
v-for="(link, key) in links"
:key="key"
text="Смотреть"
:url="link"
/>
</div>
</div>

<div
class="flex flex-col flex-wrap h-full lg:w-1/2 lg:pl-12 lg:text-left text-center"
class="flex flex-col flex-wrap h-full lg:w-1/2 lg:pl-12 lg:text-left"
>
<div class="flex flex-col lg:items-start items-center">
<div class="flex-grow">
<div class="mb-2">
<h2
class="text-gray-900 text-lg title-font font-medium mb-1 font-semibold dark:text-gray-200 leading-tight"
>
{{ anime.title }}
</h2>

<ul class="list-none">
<li
v-for="(synonym, key) in synonyms"
:key="key"
class="font-medium text-sm text-neutral-300 font-medium"
>
{{ synonym }}
</li>
</ul>
</div>

<div class="mb-2">
<h3
class="text-gray-400 text-md font-medium font-semibold dark:text-gray-200 leading-tight"
>
Links
</h3>
<div class="flex flex-col">
<AnimeRating v-model="rating" class="mb-2" />

<div class="flex flex-wrap">
<ExternalLink
v-for="(link, key) in links"
:key="key"
:url="link"
class="text-neutral-400 hover:underline mr-1"
text="Watch"
/>
</div>
</div>
<div class="mb-2">
<h2
class="text-gray-900 text-4xl title-font font-medium mb-1 font-semibold dark:text-gray-200 leading-tight"
>
{{ anime.title }}
</h2>

<div class="mb-2">
<h3
class="text-gray-400 text-md font-medium font-semibold dark:text-gray-200 leading-tight"
<ul class="list-none text-xs">
<li
v-for="(synonym, key) in synonyms"
:key="key"
>
Genres
</h3>

<div class="flex flex-wrap">
<span
v-for="(genre, key) in genres"
:key="key"
class="cursor-pointer text-neutral-400 hover:underline mr-1"
>
{{ genre }}
</span>
</div>
</div>

<div class="mb-4">
<h3
class="text-gray-400 text-md font-medium font-semibold dark:text-gray-200 leading-tight"
>
Voice acting
</h3>
{{ synonym }}
</li>
</ul>
</div>

<div class="flex flex-wrap">
<span
v-for="(
voiceActing, key
) in voiceActingList"
:key="key"
class="cursor-pointer text-neutral-400 hover:underline mr-1"
>
{{ voiceActing }}
</span>
</div>
</div>
<hr class="my-4 border-t border-gray-200" />

<div class="flex flex-wrap">
<Button variant="danger">Delete</Button>
</div>
<div>
<dl class="grid grid-cols-2 gap-x-4 gap-y-2">
<dt class="text-sm font-medium text-gray-500">
Эпизоды
</dt>
<dd class="mt-1 text-sm text-gray-900">
{{ anime.episodes }}
</dd>
<dt class="text-sm font-medium text-gray-500">
Статус
</dt>
<dd class="mt-1 text-sm text-gray-900">
{{ anime.status }}
</dd>
<dt class="text-sm font-medium text-gray-500">
Жанр
</dt>
<dd class="mt-1 text-sm text-gray-900">
{{ genres }}
</dd>
<dt class="text-sm font-medium text-gray-500">
Озвучка
</dt>
<dd class="mt-1 text-sm text-gray-900">
{{ voiceActingList }}
</dd>
</dl>
</div>
</div>
</div>
Expand Down

0 comments on commit 937f9c7

Please sign in to comment.