Merge pull request #43 from traP-jp/client/feat/createEvent

createEvent
traP-jp · Jun 15, 2024 · b134e72 · b134e72
2 parents 400377f + d312981
commit b134e72
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 73 deletions.
diff --git a/client/dist/assets/CreateEvent-DJ4s88DB.js b/client/dist/assets/CreateEvent-DJ4s88DB.js
diff --git a/client/dist/assets/CreateEvent-yDzVgAwM.css b/client/dist/assets/CreateEvent-yDzVgAwM.css
diff --git a/client/dist/assets/index-BIm4NMQU.css b/client/dist/assets/index-BIm4NMQU.css
diff --git a/client/dist/assets/index-CXIPBPax.js b/client/dist/assets/index-CXIPBPax.js
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+    <script type="module" crossorigin src="/assets/index-CXIPBPax.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BIm4NMQU.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/client/dist/vite.svg b/client/dist/vite.svg
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -5,7 +5,7 @@ import Navigation from "./components/Navigation.vue";
 <template>
   <div style="position: absolute; top: 0; left: 0; width: 100vw">
     <Navigation />
-    <div style="max-width: 50rem; margin: auto; margin-top: 6rem">
+    <div style="max-width: 50rem; margin: auto; margin-top: 2rem">
       <RouterView />
     </div>
   </div>

diff --git a/client/src/components/CreateEvent/CreateEvent.vue b/client/src/components/CreateEvent/CreateEvent.vue
@@ -2,6 +2,8 @@
 import { ref } from "vue";
 import type { VAutocomplete } from "vuetify/lib/components/index.mjs";
 import DateSelector from "./DateSelector.vue";
+import { mdiPlus, mdiClose } from "@mdi/js";
+import { format } from "date-fns";
 
 type FilterFunction = Exclude<
   VAutocomplete["$props"]["customFilter"],
@@ -25,7 +27,6 @@ const count = ref(0);
 const eventName = ref("");
 const eventDescription = ref("");
 const invitees = ref<User[]>([]);
-const startDate = ref(new Date());
 
 const userSearchFilter: FilterFunction = (_, query, item?) => {
   const name = item?.raw.name ?? "";
@@ -36,6 +37,18 @@ const userSearchFilter: FilterFunction = (_, query, item?) => {
     displayName.toLowerCase().includes(query.toLowerCase())
   );
 };
+
+const dialog = ref(false);
+const Dates = ref<{ startDate: Date; endDate: Date }[]>([]);
+
+const addDates = (dates: { startDate: Date; endDate: Date }[]) => {
+  Dates.value = [...Dates.value, ...dates];
+  Dates.value.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
+};
+
+const removeDate = (index: number) => {
+  Dates.value.splice(index, 1);
+};
 </script>
 
 <template>
@@ -77,34 +90,51 @@ const userSearchFilter: FilterFunction = (_, query, item?) => {
   </v-autocomplete>
 
   <h2>日程候補</h2>
+  <v-list :class="$style.list">
+    <TransitionGroup name="list">
+      <v-list-item
+        v-for="(date, index) in Dates"
+        :key="date.startDate.toISOString() + date.endDate.toISOString()"
+      >
+        {{ format(date.startDate, "yyyy年MM月dd日") }}
+        {{ format(date.startDate, "HH:mm") }}
+        ～
+        {{ format(date.endDate, "HH:mm") }}
+        <v-btn @click="removeDate(index)" :icon="mdiClose" variant="plain" />
+      </v-list-item>
+    </TransitionGroup>
+  </v-list>
 
-  <DateSelector />
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p :class="$style.read">Click on the Vite and Vue logos to learn more</p>
-  <v-btn @click="count++">count is {{ count }}</v-btn>
+  <v-btn @click="dialog = true">
+    <v-icon :icon="mdiPlus" />
+    日程を追加
+  </v-btn>
+  <v-dialog v-model="dialog" max-width="800" max-height="600">
+    <DateSelector @close="dialog = false" @update:value="addDates" />
+  </v-dialog>
+  <br />
+  <v-btn color="blue">イベント作成</v-btn>
 </template>
 
 <style module lang="scss">
-.read {
-  color: #888;
+.list {
+  position: relative;
+  overflow: hidden;
+  width: fit-content;
+  margin: auto;
+}
+</style>
+
+<style scoped>
+.list-move, /* 移動する要素にトランジションを適用 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
 }
 </style>
diff --git a/client/src/components/CreateEvent/DateSelector.vue b/client/src/components/CreateEvent/DateSelector.vue
@@ -1,84 +1,110 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { format, parseISO, startOfDay } from "date-fns";
+import {
+  format,
+  startOfDay,
+  setMinutes,
+  setHours,
+  setSeconds,
+  setMilliseconds,
+} from "date-fns";
 
 const emit = defineEmits<{
-  (e: "update:value", value: Date[]): void;
+  (e: "update:value", value: { startDate: Date; endDate: Date }[]): void;
+  (e: "close"): void;
 }>();
 
 const now = new Date();
-console.log(now);
-const dates = ref<Date[]>([now]);
+const dates = ref<Date[]>([]);
 const sortedDates = computed(() =>
-  dates.value.toSorted((a, b) => a.getTime() - b.getTime())
+  dates.value.sort((a, b) => a.getTime() - b.getTime())
 );
 
 const startTime = ref(format(now, "HH:mm"));
 const endTime = ref(format(now, "HH:mm"));
 
 watch([startTime, endTime], () => {
-  console.log(startTime.value, endTime.value);
   if (startTime.value && endTime.value && startTime.value > endTime.value) {
     endTime.value = startTime.value;
   }
-  console.log(startTime.value, endTime.value);
 });
 
-const updateValue = (value: Date[]) => {
+const onClickOK = (value: Date[]) => {
   console.log(value, startTime.value, endTime.value);
+  const [startHour, startMinute] = startTime.value.split(":");
+  const [endHour, endMinute] = endTime.value.split(":");
+  const selectedDates = sortedDates.value.map((date) => {
+    date = setSeconds(setMilliseconds(date, 0), 0);
+    return {
+      startDate: setHours(
+        setMinutes(date, Number(startMinute)),
+        Number(startHour)
+      ),
+      endDate: setHours(setMinutes(date, Number(endMinute)), Number(endHour)),
+    };
+  });
+  console.log(selectedDates);
+  emit("update:value", selectedDates);
+  emit("close");
+};
+const onClickClose = () => {
+  emit("close");
 };
 
 const allowedDates = (value: any) => {
   const today = startOfDay(now);
   return value >= today;
 };
-const dialog = ref(false);
 </script>
 
 <template>
-  <v-btn @click="dialog = !dialog"></v-btn>
-  <v-dialog v-model="dialog" max-width="800" max-height="600">
-    <v-card class="h-100">
-      <v-container
-        class="d-flex justify-center height-100"
-        :class="$style.container"
-      >
+  <v-card class="h-100">
+    <v-container
+      class="d-flex justify-center height-100"
+      :class="$style.container"
+    >
+      <div>
+        <v-date-picker
+          v-model="dates"
+          label="日付"
+          :allowedDates="allowedDates"
+          multiple
+          :class="$style.datePicker"
+        />
         <div>
-          <v-date-picker
-            v-model="dates"
-            label="日付"
-            :allowedDates="allowedDates"
-            multiple
-            :class="$style.datePicker"
-          />
-          <div>
-            <v-btn :class="$style.clear" @click="dates = []"
-              >日付をクリア</v-btn
-            >
-          </div>
+          <v-btn :class="$style.clear" @click="dates = []">日付をクリア</v-btn>
         </div>
-        <div :class="$style.timeContainerWrap" class="w-50">
-          <v-container
-            class="d-flex flex-column justify-end py-0 px-0 mr-0 ml-4"
-            :class="$style.timeContainer"
-          >
-            <v-list :class="$style.scroll" class="hidden-sm-and-down">
+      </div>
+      <div :class="$style.timeContainerWrap" class="w-50">
+        <v-container
+          class="d-flex flex-column justify-end py-0 px-0 mr-0"
+          :class="$style.timeContainer"
+        >
+          <v-list :class="$style.scroll" class="hidden-sm-and-down">
+            <TransitionGroup name="list">
               <v-list-item
                 v-for="date in sortedDates"
                 :key="date.toISOString()"
                 :title="format(date, 'yyyy/MM/dd')"
               />
-            </v-list>
-            <div :class="$style.timeRange">
-              <v-text-field v-model="startTime" label="開始時刻" type="time" />
-              <v-text-field v-model="endTime" label="終了時刻" type="time" />
-            </div>
-            <v-btn @click="updateValue(dates)">OK</v-btn>
-          </v-container>
-        </div>
-      </v-container>
-    </v-card>
-  </v-dialog>
+            </TransitionGroup>
+          </v-list>
+          <div :class="$style.timeRange">
+            <v-text-field v-model="startTime" label="開始時刻" type="time" />
+            <v-text-field v-model="endTime" label="終了時刻" type="time" />
+          </div>
+          <v-row class="justify-space-around" :class="$style.buttonRow">
+            <v-col>
+              <v-btn block @click="onClickClose()">閉じる</v-btn>
+            </v-col>
+            <v-col>
+              <v-btn block @click="onClickOK(dates)">OK</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </div>
+    </v-container>
+  </v-card>
 </template>
 
 <style module lang="scss">
@@ -111,12 +137,18 @@ const dialog = ref(false);
 }
 .timeContainer {
   @media (min-width: 800px) {
+    margin-left: 16px;
     position: absolute;
     top: 0;
     bottom: 0;
   }
 }
 
+.buttonRow {
+  display: flex;
+  flex-grow: 0 !important;
+}
+
 .datePicker {
   margin: auto;
 }
@@ -125,3 +157,17 @@ const dialog = ref(false);
   margin: auto;
 }
 </style>
+
+<style scoped>
+.list-move, /* 移動する要素にトランジションを適用 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+</style>
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -9,7 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ES2023.Array", "ESNext", "DOM"],
     "skipLibCheck": true,
     "noEmit": true,
     "baseUrl": ".",