From 018c5748dd6eb288225523f7a20577d53ffe4183 Mon Sep 17 00:00:00 2001
From: Takane-A <23.t.akiyama.nutfes@gmail.com>
Date: Sun, 24 Mar 2024 20:04:18 +0900
Subject: [PATCH] [feat] create an outline of rental adjustment page (#1504)

---
 .../nuxt-project/components/CombineButton.vue | 89 +++++++++++++++++++
 .../pages/adjustment_rental_time/index.vue    | 17 +++-
 2 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 admin_view/nuxt-project/components/CombineButton.vue

diff --git a/admin_view/nuxt-project/components/CombineButton.vue b/admin_view/nuxt-project/components/CombineButton.vue
new file mode 100644
index 000000000..bbcb67c20
--- /dev/null
+++ b/admin_view/nuxt-project/components/CombineButton.vue
@@ -0,0 +1,89 @@
+<template>
+    <button class="combine-button" @click="on_click" :style="CombineButtonOption" :disabled='disabled'>
+      <nuxt-link v-if="to !== ''" :to="to">
+        <!-- <span class="material-icons">{{ iconName }}</span> -->
+        <!-- <slot></slot> -->
+      </nuxt-link>
+      <!-- <span class="material-icons" v-else>{{ iconName }}</span> -->
+      <slot></slot>
+    </button>
+</template>
+<script>
+export default {
+  name: "CombineButton",
+  props: {
+    // iconName: {
+    //   type: String,
+    //   required: true,
+    //   //default: "search",
+    // },
+    on_click: {
+      type: Function,
+      required: false,
+    },
+    to: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+<style scoped>
+.combine-button {
+  border-radius: 0px;
+  width: 180px;
+  height: 35px;
+  padding: 5px 5px 5px 5px;
+  backdrop-filter: blur(4px);
+  text-align: center;
+  font-size: 12px;
+  letter-spacing: 2px;
+  color: var(--accent-0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  transition: all 0.2s 0s ease;
+  z-index: 0;
+  gap: 5px;
+}
+.combine-button:before {
+  border-radius: 0px;
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  transition: 0.5s;
+  opacity: 1;
+  background: rgba(40, 40, 40, 1);
+  backdrop-filter: blur(4px);
+}
+.combine-button:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -2;
+  left: 0;
+  transition: 0.5s;
+  background: linear-gradient(
+    45deg,
+    var(--primary) 0%,
+    var(--button-secondary) 100%
+  );
+}
+.combine-button:hover:before {
+  opacity: 0;
+}
+.combine-button:active {
+    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
+} 
+</style>
diff --git a/admin_view/nuxt-project/pages/adjustment_rental_time/index.vue b/admin_view/nuxt-project/pages/adjustment_rental_time/index.vue
index b53d1969e..b4fb64f4a 100644
--- a/admin_view/nuxt-project/pages/adjustment_rental_time/index.vue
+++ b/admin_view/nuxt-project/pages/adjustment_rental_time/index.vue
@@ -8,13 +8,14 @@
 
     <SubSubHeader>
       <template v-slot:refinement>
-        <SearchDropDown
+        <div style="margin-right: 35%;"></div>
+        <!-- <SearchDropDown
         :nameList="yearList"
         :on_click="refinementGroups"
         value="year_num"
         >
           {{ refYears }}
-        </SearchDropDown>
+        </SearchDropDown> -->
         <SearchDropDown
         :nameList="groupCategories"
         :on_click="refinementGroups"
@@ -22,6 +23,10 @@
         >
           {{ refGroupCategories }}
         </SearchDropDown>
+        <div style="margin-right: 2%;"></div>
+        <CombineButton :on_click="Clicked">団体名で結合</CombineButton>
+        <CombineButton :on_click="Clicked">借り場で結合</CombineButton>
+        <CombineButton :on_click="Clicked">物品で結合</CombineButton>
       </template>
     </SubSubHeader>
 
@@ -103,13 +108,19 @@ export default {
               "ID",
               "団体名",
               "使用場",
-              "仮り場",
+              "借り場",
               "物品",
               "個数",
               "人数",
               "時間",
               "",
           ],
+          groupCategories: [
+            { name: "準備日" },
+            { name: "1日目" },
+            { name: "2日目" },
+            { name: "片付け日" }
+          ],
           isOpenAddModal: false,
           stocker_place: [],
           roomName: [],