completed the task MeetupView в script setup

js-tasks-ru · Oct 4, 2024 · aa04ba7 · aa04ba7
1 parent 3b08e08
commit aa04ba7
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 126 deletions.
diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgenda.vue
@@ -1,26 +1,17 @@
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 import MeetupAgendaItem from './MeetupAgendaItem.vue'
 
-export default defineComponent({
-  name: 'MeetupAgenda',
-
-  components: {
-    MeetupAgendaItem,
-  },
-
-  props: {
-    agenda: {
-      type: Array,
-      required: true,
-    },
+const props = defineProps({
+  agenda: {
+    type: Array,
+    required: true,
   },
 })
 </script>
 
 <template>
   <ul class="agenda">
-    <li v-for="agendaItem in agenda" :key="agendaItem.id" class="agenda__item">
+    <li v-for="agendaItem in props.agenda" :key="agendaItem.id" class="agenda__item">
       <MeetupAgendaItem :agenda-item="agendaItem" />
     </li>
   </ul>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue b/04-sfc/10-MeetupView-script-setup/MeetupAgendaItem.vue
@@ -1,7 +1,14 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
+const props = defineProps({
+  agendaItem: {
+    type: Object,
+    required: true,
+  },
+});
+
 const agendaItemDefaultTitles = {
   registration: 'Регистрация',
   opening: 'Открытие',
@@ -11,7 +18,7 @@ const agendaItemDefaultTitles = {
   afterparty: 'Afterparty',
   talk: 'Доклад',
   other: 'Другое',
-}
+};
 
 const agendaItemIcons = {
   registration: 'key',
@@ -22,47 +29,26 @@ const agendaItemIcons = {
   closing: 'key',
   afterparty: 'cal-sm',
   other: 'cal-sm',
-}
-
-export default defineComponent({
-  name: 'MeetupAgendaItem',
+};
 
-  components: {
-    UiIcon,
-  },
-
-  props: {
-    agendaItem: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const icon = computed(() => agendaItemIcons[props.agendaItem.type])
-    const title = computed(() => agendaItemDefaultTitles[props.agendaItem.type])
-    return {
-      icon,
-      title,
-    }
-  },
-})
+const icon = computed(() => agendaItemIcons[props.agendaItem.type])
+const title = computed(() => agendaItemDefaultTitles[props.agendaItem.type])
 </script>
 
 <template>
   <div class="agenda-item">
     <div class="agenda-item__col">
       <UiIcon :icon="icon" />
     </div>
-    <div class="agenda-item__col">{{ agendaItem.startsAt }} - {{ agendaItem.endsAt }}</div>
+    <div class="agenda-item__col">{{ props.agendaItem.startsAt }} - {{ props.agendaItem.endsAt }}</div>
     <div class="agenda-item__col">
       <h3 class="agenda-item__title">{{ title }}</h3>
-      <p v-if="agendaItem.speaker" class="agenda-item__talk">
-        <span>{{ agendaItem.speaker }}</span>
+      <p v-if="props.agendaItem.speaker" class="agenda-item__talk">
+        <span>{{ props.agendaItem.speaker }}</span>
         <span class="agenda-item__dot"></span>
-        <span class="agenda-item__lang">{{ agendaItem.language }}</span>
+        <span class="agenda-item__lang">{{ props.agendaItem.language }}</span>
       </p>
-      <p v-if="agendaItem.description">{{ agendaItem.description }}</p>
+      <p v-if="props.agendaItem.description">{{ props.agendaItem.description }}</p>
     </div>
   </div>
 </template>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupCover.vue b/04-sfc/10-MeetupView-script-setup/MeetupCover.vue
@@ -1,31 +1,22 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed } from 'vue'
 
-export default defineComponent({
-  name: 'MeetupCover',
-
-  props: {
-    title: {
-      type: String,
-    },
-
-    image: {
-      type: String,
-    },
+const props = defineProps( {
+  title: {
+    type: String,
   },
 
-  setup(props) {
-    const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined))
-    return {
-      bgStyle,
-    }
+  image: {
+    type: String,
   },
-})
+});
+
+const bgStyle = computed(() => (props.image ? { '--bg-url': `url('${props.image}')` } : undefined));
 </script>
 
 <template>
   <div class="meetup-cover" :style="bgStyle">
-    <h1 class="meetup-cover__title">{{ title }}</h1>
+    <h1 class="meetup-cover__title">{{ props.title }}</h1>
   </div>
 </template>
 

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue b/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue
@@ -1,19 +1,13 @@
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'MeetupDescription',
-
-  props: {
-    description: {
-      type: String,
-    },
-  },
-})
+<script setup>
+const props = defineProps({
+  description: {
+    type: String,
+  }
+});
 </script>
 
 <template>
-  <div class="meetup-description">{{ description }}</div>
+  <div class="meetup-description">{{ props.description }}</div>
 </template>
 
 <style scoped>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue b/04-sfc/10-MeetupView-script-setup/MeetupInfo.vue
@@ -1,54 +1,40 @@
-<script>
-import { computed, defineComponent } from 'vue'
+<script setup>
+import { computed } from 'vue'
 import { UiIcon } from '@shgk/vue-course-ui'
 
-export default defineComponent({
-  name: 'MeetupInfo',
-
-  components: {
-    UiIcon,
+const props = defineProps({
+  organizer: {
+    type: String,
   },
 
-  props: {
-    organizer: {
-      type: String,
-    },
-
-    place: {
-      type: String,
-    },
-
-    date: {
-      type: Number,
-    },
+  place: {
+    type: String,
   },
 
-  setup(props) {
-    const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
-    const localDate = computed(() =>
-      new Date(props.date).toLocaleString(navigator.language, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
-    )
-    return {
-      isoDate,
-      localDate,
-    }
+  date: {
+    type: Number,
   },
-})
+});
+
+const isoDate = computed(() => new Date(props.date).toISOString().slice(0, 10))
+const localDate = computed(() =>
+  new Date(props.date).toLocaleString(navigator.language, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }),
+)
 </script>
 
 <template>
   <ul class="meetup-info">
     <li>
       <UiIcon icon="user" class="meetup-info__icon" />
-      {{ organizer }}
+      {{ props.organizer }}
     </li>
     <li>
       <UiIcon icon="map" class="meetup-info__icon" />
-      {{ place }}
+      {{ props.place }}
     </li>
     <li>
       <UiIcon icon="cal-lg" class="meetup-info__icon" />

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupView.vue b/04-sfc/10-MeetupView-script-setup/MeetupView.vue
@@ -1,40 +1,54 @@
-<script>
-import { defineComponent } from 'vue'
+<script setup>
 import { UiAlert, UiContainer } from '@shgk/vue-course-ui'
 import MeetupAgenda from './MeetupAgenda.vue'
 import MeetupDescription from './MeetupDescription.vue'
 import MeetupCover from './MeetupCover.vue'
 import MeetupInfo from './MeetupInfo.vue'
 
-export default defineComponent({
-  name: 'MeetupView',
-
-  components: {
-    UiAlert,
-    UiContainer,
-  },
-})
+const props = defineProps({
+  meetup: {
+    type: Object,
+  }
+});
 </script>
 
 <template>
   <div>
     <!-- Обложка митапа -->
+    <MeetupCover
+      :title="props.meetup.title"
+      :image="props.meetup.image"
+    />
 
     <UiContainer>
       <div class="meetup">
         <div class="meetup__content">
           <h2>Описание</h2>
 
           <!-- Описание митапа -->
+          <MeetupDescription
+            :description="props.meetup.description"
+          />
 
           <h2>Программа</h2>
 
           <!-- Программа митапа -->
+          <MeetupAgenda
+            v-if="props.meetup.agenda.length > 0"
+            :agenda="props.meetup.agenda"
+          />
           <!-- Или при пустой программе - сообщение "Программа пока пуста..." в UiAlert -->
-          <UiAlert></UiAlert>
+          <UiAlert v-else>
+            Программа пока пуста...
+          </UiAlert>
         </div>
         <div class="meetup__aside">
           <!-- Краткая информация о митапе -->
+          <MeetupInfo
+            :organizer="props.meetup.organizer"
+            :place="props.meetup.place"
+            :date="props.meetup.date"
+          />
 
           <div class="meetup__aside-buttons"></div>
         </div>