Urf 6 refactor all

.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000/api

jsconfig.json

@@ -4,6 +4,7 @@
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",
+    "strict": false,
     "moduleResolution": "bundler",
     "paths": {
       "@/*": [

src/api/index.js

@@ -0,0 +1,25 @@
+import {
+  getReserve,
+  postReserve,
+  putReserve,
+  deleteReserve,
+  getReserveItems,
+  getReserveItem,
+  getReserveSpaces,
+  getReserveSpace,
+  getReserveItemAvailableTime,
+  getReserveSpaceAvailableTime,
+  getReserveVerify,
+} from "./reserve.js";
+
+export const apiGetReserve = getReserve;
+export const apiPostReserve = postReserve;
+export const apiPutReserve = putReserve;
+export const apiDeleteReserve = deleteReserve;
+export const apiGetReserveItems = getReserveItems;
+export const apiGetReserveItem = getReserveItem;
+export const apiGetReserveSpaces = getReserveSpaces;
+export const apiGetReserveSpace = getReserveSpace;
+export const apiGetReserveItemAvailableTime = getReserveItemAvailableTime;
+export const apiGetReserveSpaceAvailableTime = getReserveSpaceAvailableTime;
+export const apiGetReserveVerify = getReserveVerify;

src/api/reserve.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+const reserveRequest = axios.create({
+  baseURL: `${API_URL}/v1/reserve`,
+});
+
+export const getReserve = (params) =>
+  reserveRequest.get("/reserve", { params: params });
+export const postReserve = (data) => 
+  reserveRequest.post("/reserve", data);
+export const putReserve = (data, params) =>
+  reserveRequest.put("/reserve", { params: params }, data);
+export const deleteReserve = (params) =>
+  reserveRequest.delete("/reserve", { params: params });
+
+export const getReserveItems = () => 
+  reserveRequest.get("/items");
+export const getReserveItem = (params) =>
+  reserveRequest.get("/item", { params: params });
+
+export const getReserveSpaces = () => 
+  reserveRequest.get("/Spaces");
+export const getReserveSpace = (params) =>
+  reserveRequest.get("/Space", { params: params });
+
+export const getReserveItemAvailableTime = (params) =>
+  reserveRequest.get("/item_available_time", { params, params });
+export const getReserveSpaceAvailableTime = (params) =>
+  reserveRequest.get("/space_available_time", { params, params });
+
+export const getReserveVerify = (params) =>
+  reserveRequest.get("/verify", { params, params });

src/components/basic/DatePicker.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-menu 
+    v-model="is_menu_open" 
+    :close-on-content-click="false" 
+    transition="scale-transition" 
+    offset-y max-width="290px"
+    min-width="290px">
+    <template v-slot:activator="{ props }">
+      <v-text-field v-bind="props" label="日期" v-model="format_date"></v-text-field>
+    </template>
+    <v-date-picker v-model="date_input" locale="zh-TW"></v-date-picker>
+  </v-menu>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useDateFormat } from '@vueuse/core'
+
+const is_menu_open = ref(false)
+const date_input = defineModel('date_input')
+
+const format_date = computed(() => {
+  if (date_input.value == null) return ""
+  /* setTimeout(() => {
+    is_menu_open.value = false
+  }, 120) */
+  is_menu_open.value = false
+  return useDateFormat(date_input.value, 'YYYY-MM-DD').value
+})
+</script>

src/components/form/BasicInfo.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card color="grey-lighten-2">
+    <v-container>
+      <v-row>
+        <v-col class="v-col-auto">
+          <v-card title="基本資料" color="grey-lighten-1">
+          </v-card>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.name" label="名字" />
+        </v-col>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.org" label="申請單位" />
+        </v-col>
+        <v-col class="v-col-md-4 v-col-sm-6 v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.department" label="申請人系級" />
+        </v-col>
+        <v-col class="v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.email" label="email" />
+        </v-col>
+        <v-col class="v-col-12">
+          <v-text-field :rules="[rules.required]" v-model="basic_info.reason" label="借用理由" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup>
+const basic_info = defineModel('basic_info')
+const rules = {
+  required: value => !!value || 'Field is required',
+}
+</script>

src/components/form/ItemDisplay.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-row v-if="wh.width.value < width_rwd && item_data.length != 0" v-for="(i, index) in item_data">
+    <v-col>
+      <v-card color="grey-lighten-3">
+        <v-container>
+          <v-row class="align-center" v-if="submit_flag">
+            <v-col class="v-col-12">
+              <span >物品名稱：</span>
+              {{ i[0] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >借用日期：</span>
+              {{ i[1] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >歸還日期：</span>
+              {{ i[2] }}
+            </v-col>
+            <v-col class="v-col-12">
+              <span >數　　量：</span>
+              {{ i[3] }}
+            </v-col>
+          </v-row>
+          <v-row class="align-center" v-else>
+            <v-col class="v-col-sm-2 v-col-12">
+              <span >物品名稱：</span>
+              {{ i[0] }}
+            </v-col>
+            <v-col class="v-col-sm-3 v-col-12">
+              <span >借用日期：</span>
+              {{ i[1] }}
+            </v-col>
+            <v-col class="v-col-sm-3 v-col-12">
+              <span >歸還日期：</span>
+              {{ i[2] }}
+            </v-col>
+            <v-col class="v-col-sm-2  v-col-12">
+              <span >數　　量：</span>
+              {{ i[3] }}
+            </v-col>
+            <v-col class="v-col-sm-2 v-col-12" >
+              <v-btn @click="delitem(index)" >刪除</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </v-col>
+  </v-row>
+  <v-row v-if="wh.width.value > width_rwd && item_data.length != 0">
+    <v-col>
+      <v-table>
+        <thead>
+          <tr>
+            <th>物品名稱</th>
+            <th>借用日期</th>
+            <th>歸還日期</th>
+            <th>數量</th>
+            <th>  </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(i,index) in item_data" :key="i">
+            <td>
+              {{ i[0] }}
+            </td>
+            <td>
+              {{ i[1] }}
+            </td>
+            <td>
+              {{ i[2] }}
+            </td>
+            <td>
+              {{ i[3] }}
+            </td>
+            <td v-if="btn_flag">
+              <v-btn @click="delitem(index)" >刪除</v-btn>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { useWindowSize } from '@vueuse/core'
+
+const wh = useWindowSize()
+const props = defineProps(['width_rwd','btn_flag','submit_flag'])
+const width_rwd = props.width_rwd
+const btn_flag = props.btn_flag
+const submit_flag = props.submit_flag
+const item_data = defineModel('item_data')
+const delitem = (index) => {
+  item_data.value.splice(index, 1)
+}
+</script>

src/components/form/ItemSelector.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-row>
+    <v-col class="v-col-auto">
+      <v-card title="物品" color="grey-lighten-1"></v-card>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col class="v-col-sm-3 v-col-12 ">
+      <v-select label="物品" :items="item_list[1]" v-model="item_temp"></v-select>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <DatePicker v-model:date_input="date_input1"></DatePicker>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <DatePicker v-model:date_input="date_input2"></DatePicker>
+    </v-col>
+    <v-col class="v-col-sm-3 v-col-12">
+      <v-text-field label="數量" type="number" v-model="quantity_temp"></v-text-field><!-- multiple -->
+    </v-col>
+    <v-col class="v-col-sm-4 v-col-12">
+      <v-btn @click="addobj()">新增</v-btn>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col>
+      <v-alert v-if="alert" color="error" icon="$error" :title="alert_title" :text="alert_text" elevation="4">
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { useDateFormat } from '@vueuse/core'
+import { ref } from 'vue';
+
+const props = defineProps(['item_list'])
+const item_data = defineModel('item_data')
+const alert_title = ref("時段無法借用")
+const alert_text = ref("可以查詢時間表，確認此時段的借用情況")
+const date_input1 = ref()
+const date_input2 = ref()
+const quantity_temp = ref()
+const item_temp = ref('')
+const alert = ref(false)
+const alert_title_list = ["物品數量不可為負數或零","時段無法借用","起始時間晚於結束時間"]
+const alert_text_list = ["請確認需要的物品數量是否正確","可以查詢時間表，確認次時段的借用情況","請將起始時間與結束時間對調"]
+//  [小於0, 被借光了, 時間順序錯誤]
+
+const addobj = async () => {
+  const format_temp1 = useDateFormat(date_input1.value, "YYYY-MM-DDTHH:mm").value
+  const format_temp2 = useDateFormat(date_input2.value, "YYYY-MM-DDTHH:mm").value
+  let check = -1
+  await axios.get("http://localhost:3000/api/v1/reserve/integral_item_availability",
+    {
+      params: {
+        item_id: props.item_list[0][item_temp.value],
+        start_datetime: format_temp1,
+        end_datetime: format_temp2
+      }
+    },).then((response) => {
+      check = response['data']['data']['available_quantity']
+    })
+  let alert_timer
+  if (quantity_temp.value <= 0) {
+    set_alert(alert_timer, alert_title_list[0], alert_text_list[0])
+    return
+  }
+  if (check < quantity_temp.value) {
+    set_alert(alert_timer, alert_title_list[1], alert_text_list[1])
+    return
+  }
+  const date1 = new Date(date_input1.value)
+  const date2 = new Date(date_input2.value)
+  if (date1.getTime() > date2.getTime()) {
+    set_alert(alert_timer, alert_title_list[2], alert_text_list[2])
+    return
+  }
+  else if (item_temp.value != "" && date_input1.value != "" && date_input2.value != "" && quantity_temp.value != 0) {
+    item_data.value.push([item_temp.value, useDateFormat(format_temp1, "YYYY-MM-DD").value, useDateFormat(format_temp2, "YYYY-MM-DD").value, quantity_temp.value])
+    console.log(item_data)
+  }
+}
+
+const set_alert = (timer, title, text) => {
+  clearTimeout(timer)
+  alert.value = true
+  alert_title.value = title
+  alert_text.value = text
+  timer = setTimeout(() => {
+    alert.value = false
+  }, 5000)
+}
+</script>