From 3ac9bbd674d7267bec785b166e130256510d7562 Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Thu, 10 Aug 2023 12:57:08 +0800
Subject: [PATCH 1/7] Add new resource button and draggable
 resource(unfinished)

---
 src/pages/Home/sections/ResourceTier.vue | 45 +++++++++++++++++-------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 000b6b9..3e226f7 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-4 mx-auto lg:w-3/4 w-full text-center py-24 pt-16 flex flex-col space-y-5"
+    class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5"
   >
     <h1 class="mb-4 text-4xl font-semibold tracking-tight leading-none">
       Resource Tier List
@@ -8,22 +8,37 @@
     <!--Resource Tier Container-->
     <div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
       <div
-        class="flex flex-col space-y-2"
+        class="flex flex-col space-y-2 "
+        :class="{'bg-blue-100': true}"
         v-for="resourceTier in resourceList"
         :key="resourceTier.ResourceTierID"
       >
-        <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">
-          {{ resourceTier.ResourceTierName }}
-        </h2>
-        <div
-          v-for="resource in resourceTier.Resources"
-          :key="resource.ResourceName"
-          class="border p-3 bg-gray-100"
-        >
-          {{ resource.ResourceName }}
-        </div>
+        <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">{{ resourceTier.ResourceTierName }}</h2>
+        <div draggable="true" v-for="resource in resourceTier.Resources" :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer ">{{ resource.ResourceName }}</div>
       </div>
     </div>
+     <!--Add State Button Container-->
+     <div class="pt-2 flex justify-center space-x-2">
+            <button type="button" @click="toggleAddStateModal"
+             href="#" class="inline-flex justify-center 
+             items-center py-4 px-5 text-base font-medium 
+             text-center text-white rounded-lg bg-green-700
+              hover:bg-green-800 focus:ring-4 focus:ring-blue-300
+               dark:focus:ring-green-900">
+                Add  Resource
+                
+            </button>
+            <button v-if="isChanging" type="button" @click="toggleAddStateModal"
+             href="#" class="inline-flex justify-center 
+             items-center py-4 px-5 text-base font-medium 
+             text-center text-white rounded-lg bg-blue-700
+              hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
+               dark:focus:ring-blue-900">
+              Submit Changes
+               
+            </button>
+           
+        </div>
   </div>
 </template>
 
@@ -33,5 +48,11 @@ export default {
   mounted() {
     console.log(this.resourceList);
   },
+  data(){
+    return{
+      isChanging: false,
+      isDragging: false
+    }
+  }
 };
 </script>

From f418af5d3c7a6dc2168a1e65252502cef778f491 Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Mon, 14 Aug 2023 14:03:08 +0800
Subject: [PATCH 2/7] Add drag and drop to modify the resource tier list.

---
 src/App.vue                              |  99 +++++++++++++++++++-
 src/pages/Home/sections/ResourceTier.vue | 112 +++++++++++++++++------
 2 files changed, 179 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 329a2d0..8bb4a70 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,69 @@
     <!--App Container-->
     <div class="flex flex-row text-center shadow-lg bg-white h-fit">
       <!--Sidebar -->
-      <router-view
-        @openRegionPage="openRegionPage"
-        @openStatePage="openStatePage"
-      ></router-view>
+      <div
+        class="hidden w-1/5 md:flex flex-col justify-between bg-gray-300 text-blue-400 border border-white border-x-2"
+      >
+      <div class="sticky left-0 top-0">
+        <div class="p-2 border-white border flex justify-center">
+          <img src="./assets/ces_logo.png" class="h-24 hover:scale-110" />
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="/">Home</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="state-list">State List</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="region-list">Region List</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="trade-agreement">Trade Agreement</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="resource-tier">Resource Tier</router-link>
+        </div>
+      </div>
+      </div>
+      <!--Content-->
+      <div class="md:w-4/5 w-full flex flex-col">
+        <router-view
+          :state-list="stateList"
+          :region-data="stateRegion"
+          :resource-list="resourceList"
+          :date="date"
+          :biome-list="biomeList"
+          :corruption-list="corruptionLevelList"
+          :development-list="developmentLevelList"
+          @advance-season="advanceSeason"
+          @add-region="addNewRegion"
+          @add-state="addNewState"
+          @open-state="openState()"
+          @save-new-resources="addNewResources"
+        ></router-view>
+      </div>
+    </div>
+    <!--Sidebar Menu for small screen-->
+    <Teleport to="#app">
+    <div class="md:hidden flex flex-row 
+  justify-between sticky text-center bottom-0
+  bg-gray-200 mx-810 text-blue-400 border-2 border-white space-x-0">
+    
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="/">Home</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="state-list">State List</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="region-list">Region List</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <a href="">Trade Agreement</a>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <a href="">Resource Tiers</a>
+        </div>
     </div>
   </div>
 </template>
@@ -26,6 +85,38 @@ export default {
     };
   },
   methods: {
+    addNewState(data){
+      let addStateData = {...data}
+      console.log(addStateData,'report')
+      window.ipcRenderer.send("State:addState",addStateData);
+      window.ipcRenderer.once("State:addStateOK", (e, res) => {
+        console.log(res,'state added')
+      });
+    },
+    addNewRegion(data){
+      const {regionName,stateId,corruptionId,biomeId,developmentId, population, taxRate, desc} = data
+      let addRegionObj = {
+        biome: {biomeId},
+        corruption: {corruptionId},
+        desc,
+        development: {developmentId},
+        population,
+        regionName,
+        state: {stateId},
+        taxRate
+      }
+      window.ipcRenderer.send("Region:addRegion",JSON.stringify(addRegionObj));
+      window.ipcRenderer.once("Region:addRegionOK", (e, res) => {
+        console.log(res,'legiun added')
+      });
+    },
+    addNewResources(newResourceList){
+      console.log(newResourceList,'nueva resource list')
+      window.ipcRenderer.send("Resource:updateResourceAll",JSON.stringify(newResourceList));
+      window.ipcRenderer.once("Resource:updateResourceAllOK", (e, res) => {
+        console.log(res,'legiun added')
+      });
+    },
     setLanding() {
       this.hasLanded = true;
       localStorage.setItem("landed", true);
diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 3e226f7..0b172b7 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -1,57 +1,113 @@
 <template>
-  <div
-    class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5"
-  >
+  <div class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5">
     <h1 class="mb-4 text-4xl font-semibold tracking-tight leading-none">
       Resource Tier List
     </h1>
     <!--Resource Tier Container-->
     <div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
-      <div
-        class="flex flex-col space-y-2 "
-        :class="{'bg-blue-100': true}"
-        v-for="resourceTier in resourceList"
-        :key="resourceTier.ResourceTierID"
-      >
+      <div class="flex flex-col space-y-2 " :class="{ 'bg-blue-100': isDragging, 'bg-red-200': resourceTier.isDraggedOver}" @dragover.prevent="dragOverList(resourceTier)"
+      @drop="onDragDrop(resourceTier)" @dragleave="leaveDraggedOverList(resourceTier)"
+        @dragenter.prevent v-for=" (resourceTier, tierIndex) in resourceList" :key="resourceTier.ResourceTierID">
         <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">{{ resourceTier.ResourceTierName }}</h2>
-        <div draggable="true" v-for="resource in resourceTier.Resources" :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer ">{{ resource.ResourceName }}</div>
+        <div @dragstart="startDrag(index,resourceTier,tierIndex)" @dragend="stopDrag" draggable="true" v-for="(resource, index) in resourceTier.Resources"
+          :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer " :class="{'bg-yellow-200': resource.isChanged}">{{ resource.ResourceName }}</div>
       </div>
     </div>
-     <!--Add State Button Container-->
-     <div class="pt-2 flex justify-center space-x-2">
-            <button type="button" @click="toggleAddStateModal"
-             href="#" class="inline-flex justify-center 
+    <!--Add State Button Container-->
+    <div class="pt-2 flex justify-center space-x-2">
+      <button type="button" @click="toggleAddStateModal" href="#" class="inline-flex justify-center 
              items-center py-4 px-5 text-base font-medium 
              text-center text-white rounded-lg bg-green-700
               hover:bg-green-800 focus:ring-4 focus:ring-blue-300
                dark:focus:ring-green-900">
-                Add  Resource
-                
-            </button>
-            <button v-if="isChanging" type="button" @click="toggleAddStateModal"
-             href="#" class="inline-flex justify-center 
+        Add Resource
+
+      </button>
+      <button v-if="isChanging" type="button" @click="onResourceSubmit" href="#" class="inline-flex justify-center 
              items-center py-4 px-5 text-base font-medium 
              text-center text-white rounded-lg bg-blue-700
               hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
                dark:focus:ring-blue-900">
-              Submit Changes
-               
-            </button>
-           
-        </div>
+        Submit Changes
+
+      </button>
+
+    </div>
   </div>
 </template>
 
 <script>
+
 export default {
   props: ["resourceList"],
+  emits:['save-new-resources'],
   mounted() {
-    console.log(this.resourceList);
+    console.log(this.resourceList,'resources');
+    for(let tier of this.resourceList){
+      tier.isDraggedOver = false
+      for(let resources of tier.Resources){
+        resources.isChanged = false
+      }
+    }
+    this.tierResourceList = [...this.resourceList]
   },
-  data(){
-    return{
+  data() {
+    return {
       isChanging: false,
-      isDragging: false
+      isDragging: false,
+      draggedResourceIdx:'',
+      originTierIdx: null,
+      targetTierIdx:null,
+      originTier:null,
+      tierResourceList: [],
+    }
+  },
+  methods: {
+    startDrag(resourceIndex,tier,tierIndex) {
+      this.isDragging = true
+      this.draggedResourceIdx = resourceIndex
+  
+      this.originTier = tier
+      this.originTierIdx = tierIndex
+      
+    },
+    stopDrag() {
+      this.isDragging = false
+      console.log('consolation')
+    },
+    dragOverList(tier) {
+      tier.isDraggedOver = true
+    },
+    leaveDraggedOverList(tier){
+      tier.isDraggedOver = false
+    },
+    onDragDrop(tier){
+
+  
+      tier.isDraggedOver = false
+      if(this.originTier.ResourceTierID === tier.ResourceTierID){
+        return;
+      }
+
+      let newOriginTier = {...this.originTier}
+      console.log(this.draggedResourceIdx,'television')
+      let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx,1)
+      targetElement[0].isChanged = true;
+      console.log(targetElement,'new guys')
+
+      let newTier = {...tier}
+      console.log(newTier,'before')
+      newTier.Resources.push(targetElement[0])
+   
+
+      let newResourceTierList = [...this.tierResourceList];
+      newResourceTierList.splice(this.originTierIdx,1,newOriginTier)
+      newResourceTierList.splice(this.targetTierIdx,1,newTier)
+      this.tierResourceList = [...newResourceTierList]
+      this.isChanging = true;
+    },
+    onResourceSubmit(){
+      this.$emit('save-new-resources',this.tierResourceList)
     }
   }
 };

From 8a7e237eb30c10e057ce0bde842a85649a1b13e0 Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Mon, 14 Aug 2023 14:09:58 +0800
Subject: [PATCH 3/7] Add a fix where the colour of resource doesnt change if
 its the same as the origin.

---
 src/pages/Home/sections/ResourceTier.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 0b172b7..52bcfdb 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -10,7 +10,7 @@
         @dragenter.prevent v-for=" (resourceTier, tierIndex) in resourceList" :key="resourceTier.ResourceTierID">
         <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">{{ resourceTier.ResourceTierName }}</h2>
         <div @dragstart="startDrag(index,resourceTier,tierIndex)" @dragend="stopDrag" draggable="true" v-for="(resource, index) in resourceTier.Resources"
-          :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer " :class="{'bg-yellow-200': resource.isChanged}">{{ resource.ResourceName }}</div>
+          :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer " :class="{'bg-yellow-200': resource.isChanged && resourceTier.ResourceTierID !== resource.originTierIndex}">{{ resource.ResourceName }}</div>
       </div>
     </div>
     <!--Add State Button Container-->
@@ -47,6 +47,7 @@ export default {
       tier.isDraggedOver = false
       for(let resources of tier.Resources){
         resources.isChanged = false
+        resources.originTierIndex = tier.ResourceTierID
       }
     }
     this.tierResourceList = [...this.resourceList]

From 26a4f1a8e32123f01b8fc0b0ec8a8ebb0acb0a98 Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Wed, 16 Aug 2023 12:03:54 +0800
Subject: [PATCH 4/7] Finish the submit resources feature

---
 src/App.vue                              |  6 +-
 src/pages/Home/sections/ResourceTier.vue | 86 +++++++++++++++---------
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8bb4a70..c0de921 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,7 +43,7 @@
           @add-region="addNewRegion"
           @add-state="addNewState"
           @open-state="openState()"
-          @save-new-resources="addNewResources"
+          @save-new-resources="saveNewResources"
         ></router-view>
       </div>
     </div>
@@ -110,9 +110,9 @@ export default {
         console.log(res,'legiun added')
       });
     },
-    addNewResources(newResourceList){
+    saveNewResources(newResourceList){
       console.log(newResourceList,'nueva resource list')
-      window.ipcRenderer.send("Resource:updateResourceAll",JSON.stringify(newResourceList));
+      window.ipcRenderer.send("Resource:updateResourceAll",newResourceList);
       window.ipcRenderer.once("Resource:updateResourceAllOK", (e, res) => {
         console.log(res,'legiun added')
       });
diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 52bcfdb..ed39788 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -5,12 +5,17 @@
     </h1>
     <!--Resource Tier Container-->
     <div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
-      <div class="flex flex-col space-y-2 " :class="{ 'bg-blue-100': isDragging, 'bg-red-200': resourceTier.isDraggedOver}" @dragover.prevent="dragOverList(resourceTier)"
-      @drop="onDragDrop(resourceTier)" @dragleave="leaveDraggedOverList(resourceTier)"
-        @dragenter.prevent v-for=" (resourceTier, tierIndex) in resourceList" :key="resourceTier.ResourceTierID">
+      <div class="flex flex-col space-y-2 "
+        :class="{ 'bg-blue-100': isDragging, 'bg-red-200': resourceTier.isDraggedOver }"
+        @dragover.prevent="dragOverList(resourceTier)" @drop="onDragDrop(resourceTier, tierIndex)"
+        @dragleave="leaveDraggedOverList(resourceTier)" @dragenter.prevent
+        v-for=" (resourceTier, tierIndex) in resourceList" :key="resourceTier.ResourceTierID">
         <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">{{ resourceTier.ResourceTierName }}</h2>
-        <div @dragstart="startDrag(index,resourceTier,tierIndex)" @dragend="stopDrag" draggable="true" v-for="(resource, index) in resourceTier.Resources"
-          :key="resource.ResourceName" class="border p-3 bg-gray-100 cursor-pointer " :class="{'bg-yellow-200': resource.isChanged && resourceTier.ResourceTierID !== resource.originTierIndex}">{{ resource.ResourceName }}</div>
+        <div @dragstart="startDrag(index, resourceTier, tierIndex)" @dragend="stopDrag" draggable="true"
+          v-for="(resource, index) in resourceTier.Resources" :key="resource.ResourceName"
+          class="border p-3 bg-gray-100 cursor-pointer "
+          :class="{ 'bg-yellow-200': resource.isChanged && resourceTier.ResourceTierID !== resource.originTierIndex }">{{
+            resource.ResourceName }}</div>
       </div>
     </div>
     <!--Add State Button Container-->
@@ -40,37 +45,38 @@
 
 export default {
   props: ["resourceList"],
-  emits:['save-new-resources'],
+  emits: ['save-new-resources'],
   mounted() {
-    console.log(this.resourceList,'resources');
-    for(let tier of this.resourceList){
+    console.log(this.resourceList, 'resources');
+    for (let tier of this.resourceList) {
       tier.isDraggedOver = false
-      for(let resources of tier.Resources){
+      for (let resources of tier.Resources) {
         resources.isChanged = false
         resources.originTierIndex = tier.ResourceTierID
       }
     }
-    this.tierResourceList = [...this.resourceList]
+    this.tierResourceList = structuredClone(this.resourceList);
+    console.log(this.tierResourceList, 'tier Resourcce list')
   },
   data() {
     return {
       isChanging: false,
       isDragging: false,
-      draggedResourceIdx:'',
+      draggedResourceIdx: '',
       originTierIdx: null,
-      targetTierIdx:null,
-      originTier:null,
+      targetTierIdx: null,
+      originTier: null,
       tierResourceList: [],
     }
   },
   methods: {
-    startDrag(resourceIndex,tier,tierIndex) {
+    startDrag(resourceIndex, tier, tierIndex) {
       this.isDragging = true
       this.draggedResourceIdx = resourceIndex
-  
+
       this.originTier = tier
       this.originTierIdx = tierIndex
-      
+
     },
     stopDrag() {
       this.isDragging = false
@@ -79,36 +85,52 @@ export default {
     dragOverList(tier) {
       tier.isDraggedOver = true
     },
-    leaveDraggedOverList(tier){
+    leaveDraggedOverList(tier) {
       tier.isDraggedOver = false
     },
-    onDragDrop(tier){
+    onDragDrop(tier, index) {
+      this.targetTierIdx = index
 
-  
       tier.isDraggedOver = false
-      if(this.originTier.ResourceTierID === tier.ResourceTierID){
+      if (this.originTier.ResourceTierID === tier.ResourceTierID) {
         return;
       }
 
-      let newOriginTier = {...this.originTier}
-      console.log(this.draggedResourceIdx,'television')
-      let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx,1)
+      let newOriginTier = { ...this.originTier }
+      console.log(this.draggedResourceIdx, 'television')
+      let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
       targetElement[0].isChanged = true;
-      console.log(targetElement,'new guys')
+      targetElement[0].ResourceTierID = tier.ResourceTierID
+      console.log(targetElement, 'new guys')
 
-      let newTier = {...tier}
-      console.log(newTier,'before')
+      let newTier = { ...tier }
+      console.log(newTier, 'before')
       newTier.Resources.push(targetElement[0])
-   
+      console.log(newTier, 'after')
+      console.log(this.tierResourceList, 'lets see here')
+      let newResourceTierList = structuredClone(this.tierResourceList);
+      console.log(newResourceTierList, 'new resource tier')
+      newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
+      console.log(newResourceTierList, 'new resource tier after adding 1')
+      newResourceTierList.splice(this.targetTierIdx, 1, newTier)
 
-      let newResourceTierList = [...this.tierResourceList];
-      newResourceTierList.splice(this.originTierIdx,1,newOriginTier)
-      newResourceTierList.splice(this.targetTierIdx,1,newTier)
       this.tierResourceList = [...newResourceTierList]
       this.isChanging = true;
     },
-    onResourceSubmit(){
-      this.$emit('save-new-resources',this.tierResourceList)
+    onResourceSubmit() {
+      let newResources = []
+      for (let tier of this.tierResourceList) {
+        for (let resource of tier.Resources) {
+          console.log(resource,'nueva resource')
+          newResources.push({
+            ResourceID: resource.ResourceID.toString(),
+            ResourceName: resource.ResourceName.toString(),
+            ResourceTierID: resource.ResourceTierID.toString()
+          })
+        }
+      }
+      console.log(newResources,'new-result')
+      this.$emit('save-new-resources', newResources)
     }
   }
 };

From bec65e2d6999795f2e9e9955f31cb17aeab2a2d5 Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Tue, 12 Sep 2023 15:07:25 +0800
Subject: [PATCH 5/7] Created the deletion area

---
 src/pages/Home/sections/ResourceTier.vue | 37 ++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index ed39788..80e5d29 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -18,6 +18,12 @@
             resource.ResourceName }}</div>
       </div>
     </div>
+    <div class="relative py-12 mx-auto border-2 border-red-500 
+    bg-red-300 w-3/5"
+    @dragover.prevent="dragOverList(resourceTier)" @drop="onDragDrop(resourceTier, tierIndex)"
+        @dragleave="leaveDraggedOverList(resourceTier)" @dragenter.prevent>
+
+    </div>
     <!--Add State Button Container-->
     <div class="pt-2 flex justify-center space-x-2">
       <button type="button" @click="toggleAddStateModal" href="#" class="inline-flex justify-center 
@@ -38,6 +44,8 @@
       </button>
 
     </div>
+    <!---->
+   
   </div>
 </template>
 
@@ -104,19 +112,38 @@ export default {
       console.log(targetElement, 'new guys')
 
       let newTier = { ...tier }
-      console.log(newTier, 'before')
       newTier.Resources.push(targetElement[0])
-      console.log(newTier, 'after')
-      console.log(this.tierResourceList, 'lets see here')
       let newResourceTierList = structuredClone(this.tierResourceList);
-      console.log(newResourceTierList, 'new resource tier')
       newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
-      console.log(newResourceTierList, 'new resource tier after adding 1')
       newResourceTierList.splice(this.targetTierIdx, 1, newTier)
 
       this.tierResourceList = [...newResourceTierList]
       this.isChanging = true;
     },
+    onDragDropDelete(){
+      // this.targetTierIdx = index
+
+      // tier.isDraggedOver = false
+      // if (this.originTier.ResourceTierID === tier.ResourceTierID) {
+      //   return;
+      // }
+
+      // let newOriginTier = { ...this.originTier }
+      // console.log(this.draggedResourceIdx, 'television')
+      // let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
+      // targetElement[0].isChanged = true;
+      // targetElement[0].ResourceTierID = tier.ResourceTierID
+      // console.log(targetElement, 'new guys')
+
+      // let newTier = { ...tier }
+      // newTier.Resources.push(targetElement[0])
+      // let newResourceTierList = structuredClone(this.tierResourceList);
+      // newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
+      // newResourceTierList.splice(this.targetTierIdx, 1, newTier)
+
+      // this.tierResourceList = [...newResourceTierList]
+      // this.isChanging = true;
+    },
     onResourceSubmit() {
       let newResources = []
       for (let tier of this.tierResourceList) {

From 1fa430fe64ae2e06a782e5f0002d2e356b1c1d7f Mon Sep 17 00:00:00 2001
From: WryanCartie <wryancartie@gmail.com>
Date: Mon, 2 Oct 2023 16:06:05 +0800
Subject: [PATCH 6/7] Added deletion area and dragging items into the deletion
 area

---
 src/pages/Home/sections/ResourceTier.vue | 204 +++++++++++++++--------
 1 file changed, 131 insertions(+), 73 deletions(-)

diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 80e5d29..05011dc 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -1,164 +1,222 @@
 <template>
-  <div class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5">
+  <div
+    class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5"
+  >
     <h1 class="mb-4 text-4xl font-semibold tracking-tight leading-none">
       Resource Tier List
     </h1>
     <!--Resource Tier Container-->
     <div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
-      <div class="flex flex-col space-y-2 "
-        :class="{ 'bg-blue-100': isDragging, 'bg-red-200': resourceTier.isDraggedOver }"
-        @dragover.prevent="dragOverList(resourceTier)" @drop="onDragDrop(resourceTier, tierIndex)"
-        @dragleave="leaveDraggedOverList(resourceTier)" @dragenter.prevent
-        v-for=" (resourceTier, tierIndex) in resourceList" :key="resourceTier.ResourceTierID">
-        <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">{{ resourceTier.ResourceTierName }}</h2>
-        <div @dragstart="startDrag(index, resourceTier, tierIndex)" @dragend="stopDrag" draggable="true"
-          v-for="(resource, index) in resourceTier.Resources" :key="resource.ResourceName"
-          class="border p-3 bg-gray-100 cursor-pointer "
-          :class="{ 'bg-yellow-200': resource.isChanged && resourceTier.ResourceTierID !== resource.originTierIndex }">{{
-            resource.ResourceName }}</div>
+      <div
+        class="flex flex-col space-y-2"
+        :class="{
+          'bg-blue-100': isDragging,
+          'bg-red-200': resourceTier.isDraggedOver,
+        }"
+        @dragover.prevent="dragOverList(resourceTier)"
+        @drop="onDragDrop(resourceTier, tierIndex)"
+        @dragleave="leaveDraggedOverList(resourceTier)"
+        @dragenter.prevent
+        v-for="(resourceTier, tierIndex) in tierResourceList"
+        :key="resourceTier.ResourceTierID"
+      >
+        <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">
+          {{ resourceTier.ResourceTierName }}
+        </h2>
+        <div
+          @dragstart="startDrag(index, resourceTier, tierIndex)"
+          @dragend="stopDrag"
+          draggable="true"
+          v-for="(resource, index) in resourceTier.Resources"
+          :key="resource.ResourceName"
+          class="border p-3 bg-gray-100 cursor-pointer"
+          :class="{
+            'bg-yellow-200':
+              resource.isChanged &&
+              resourceTier.ResourceTierID !== resource.originTierIndex,
+          }"
+        >
+          {{ resource.ResourceName }}
+        </div>
       </div>
     </div>
-    <div class="relative py-12 mx-auto border-2 border-red-500 
-    bg-red-300 w-3/5"
-    @dragover.prevent="dragOverList(resourceTier)" @drop="onDragDrop(resourceTier, tierIndex)"
-        @dragleave="leaveDraggedOverList(resourceTier)" @dragenter.prevent>
+    <!--Deletion Area-->
+    <div
+      class="relative py-12 mx-auto border-2 border-red-500 bg-red-300 w-3/4"
+      :class="{'bg-red-400': isOnDeletion}"
+    
+      @drop="onDeleteResource(resourceTier, tierIndex)"
+      @dragleave="leaveDeletionArea"
+      @dragover.prevent="dragOverDelete"
+      @dragenter.prevent
+    >
+      <div class="w-full lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 px-2 grid gap-4" v-if="deletedResourceList.length > 0">
+       
+          <div
+            @dragstart="startDrag(index, resourceTier, tierIndex)"
+            @dragend="stopDrag"
+            draggable="true"
+            v-for="(resource, index) in deletedResourceList"
+            :key="resource.ResourceName"
+            class="border p-3 bg-gray-100 cursor-pointer"
+            :class="{
+              'bg-yellow-200':
+                resource.isChanged &&
+                resourceTier.ResourceTierID !== resource.originTierIndex,
+            }"
+          >
+            {{ resource.ResourceName }}
+          </div>
+        </div>
 
     </div>
     <!--Add State Button Container-->
     <div class="pt-2 flex justify-center space-x-2">
-      <button type="button" @click="toggleAddStateModal" href="#" class="inline-flex justify-center 
-             items-center py-4 px-5 text-base font-medium 
-             text-center text-white rounded-lg bg-green-700
-              hover:bg-green-800 focus:ring-4 focus:ring-blue-300
-               dark:focus:ring-green-900">
+      <button
+        type="button"
+        @click="toggleAddStateModal"
+        href="#"
+        class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-green-900"
+      >
         Add Resource
-
       </button>
-      <button v-if="isChanging" type="button" @click="onResourceSubmit" href="#" class="inline-flex justify-center 
-             items-center py-4 px-5 text-base font-medium 
-             text-center text-white rounded-lg bg-blue-700
-              hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
-               dark:focus:ring-blue-900">
+      <button
+        v-if="isChanging"
+        type="button"
+        @click="onResourceSubmit"
+        href="#"
+        class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+      >
         Submit Changes
-
       </button>
-
     </div>
     <!---->
-   
   </div>
 </template>
 
 <script>
-
 export default {
   props: ["resourceList"],
-  emits: ['save-new-resources'],
+  emits: ["save-new-resources"],
   mounted() {
-    console.log(this.resourceList, 'resources');
+    console.log(this.resourceList, "resources");
     for (let tier of this.resourceList) {
-      tier.isDraggedOver = false
+      tier.isDraggedOver = false;
       for (let resources of tier.Resources) {
-        resources.isChanged = false
-        resources.originTierIndex = tier.ResourceTierID
+        resources.isChanged = false;
+        resources.originTierIndex = tier.ResourceTierID;
       }
     }
     this.tierResourceList = structuredClone(this.resourceList);
-    console.log(this.tierResourceList, 'tier Resourcce list')
+    console.log(this.tierResourceList, "tier Resourcce list");
   },
   data() {
     return {
       isChanging: false,
       isDragging: false,
-      draggedResourceIdx: '',
+      isOnDeletion: false,
+      draggedResourceIdx: "",
       originTierIdx: null,
       targetTierIdx: null,
       originTier: null,
       tierResourceList: [],
-    }
+      deletedResourceList: [],
+    };
   },
   methods: {
     startDrag(resourceIndex, tier, tierIndex) {
-      this.isDragging = true
-      this.draggedResourceIdx = resourceIndex
-
-      this.originTier = tier
-      this.originTierIdx = tierIndex
+      this.isDragging = true;
+      this.draggedResourceIdx = resourceIndex;
 
+      this.originTier = tier;
+      this.originTierIdx = tierIndex;
     },
     stopDrag() {
-      this.isDragging = false
-      console.log('consolation')
+      this.isDragging = false;
+      console.log("consolation");
     },
     dragOverList(tier) {
-      tier.isDraggedOver = true
+      tier.isDraggedOver = true;
     },
+    dragOverDelete(){
+      this.isOnDeletion = true;
+      
+    },
+    leaveDeletionArea(){
+      this.isOnDeletion = false
+    },  
     leaveDraggedOverList(tier) {
-      tier.isDraggedOver = false
+      tier.isDraggedOver = false;
     },
     onDragDrop(tier, index) {
-      this.targetTierIdx = index
+      this.targetTierIdx = index;
 
-      tier.isDraggedOver = false
+      tier.isDraggedOver = false;
       if (this.originTier.ResourceTierID === tier.ResourceTierID) {
         return;
       }
 
-      let newOriginTier = { ...this.originTier }
-      console.log(this.draggedResourceIdx, 'television')
-      let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
+      let newOriginTier = { ...this.originTier };
+      console.log(this.draggedResourceIdx, "television");
+      let targetElement = newOriginTier.Resources.splice(
+        this.draggedResourceIdx,
+      
+      );
       targetElement[0].isChanged = true;
-      targetElement[0].ResourceTierID = tier.ResourceTierID
-      console.log(targetElement, 'new guys')
+      targetElement[0].ResourceTierID = tier.ResourceTierID;
+      console.log(targetElement, "new guys");
 
-      let newTier = { ...tier }
-      newTier.Resources.push(targetElement[0])
+      let newTier = { ...tier };
+      newTier.Resources.push(targetElement[0]);
       let newResourceTierList = structuredClone(this.tierResourceList);
-      newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
-      newResourceTierList.splice(this.targetTierIdx, 1, newTier)
+      newResourceTierList.splice(this.originTierIdx, 1, newOriginTier);
+      newResourceTierList.splice(this.targetTierIdx, 1, newTier);
 
-      this.tierResourceList = [...newResourceTierList]
+      this.tierResourceList = [...newResourceTierList];
       this.isChanging = true;
     },
-    onDragDropDelete(){
+    onDeleteResource(){
+      console.log('annyeong',this.tierResourceList[this.originTierIdx])
+      let deletedResource = this.tierResourceList[this.originTierIdx].Resources.splice(this.draggedResourceIdx,1)[0];
+      console.log(deletedResource,'dayo')
+      this.deletedResourceList.push(deletedResource);
+      console.log(this.deletedResourceList[0],'haseyo')
+    },
+    onDragDropDelete() {
       // this.targetTierIdx = index
-
       // tier.isDraggedOver = false
       // if (this.originTier.ResourceTierID === tier.ResourceTierID) {
       //   return;
       // }
-
       // let newOriginTier = { ...this.originTier }
       // console.log(this.draggedResourceIdx, 'television')
       // let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
       // targetElement[0].isChanged = true;
       // targetElement[0].ResourceTierID = tier.ResourceTierID
       // console.log(targetElement, 'new guys')
-
       // let newTier = { ...tier }
       // newTier.Resources.push(targetElement[0])
       // let newResourceTierList = structuredClone(this.tierResourceList);
       // newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
       // newResourceTierList.splice(this.targetTierIdx, 1, newTier)
-
       // this.tierResourceList = [...newResourceTierList]
       // this.isChanging = true;
     },
     onResourceSubmit() {
-      let newResources = []
+      let newResources = [];
       for (let tier of this.tierResourceList) {
         for (let resource of tier.Resources) {
-          console.log(resource,'nueva resource')
+          console.log(resource, "nueva resource");
           newResources.push({
             ResourceID: resource.ResourceID.toString(),
             ResourceName: resource.ResourceName.toString(),
-            ResourceTierID: resource.ResourceTierID.toString()
-          })
+            ResourceTierID: resource.ResourceTierID.toString(),
+          });
         }
       }
-      console.log(newResources,'new-result')
-      this.$emit('save-new-resources', newResources)
-    }
-  }
+      console.log(newResources, "new-result");
+      this.$emit("save-new-resources", newResources);
+    },
+  },
 };
 </script>

From 54ff6bbf8851259ea5d91fa7aaec07a82b59b32d Mon Sep 17 00:00:00 2001
From: Wryan Cartie Halim <33276404+WryanCartie@users.noreply.github.com>
Date: Sat, 10 May 2025 23:44:08 +0700
Subject: [PATCH 7/7] Fix minor bugs in the resource tier.

---
 src/pages/Home/sections/ResourceTier.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 05011dc..15be5ec 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -157,14 +157,12 @@ export default {
       }
 
       let newOriginTier = { ...this.originTier };
-      console.log(this.draggedResourceIdx, "television");
+
       let targetElement = newOriginTier.Resources.splice(
-        this.draggedResourceIdx,
-      
-      );
+        this.draggedResourceIdx,1);
       targetElement[0].isChanged = true;
       targetElement[0].ResourceTierID = tier.ResourceTierID;
-      console.log(targetElement, "new guys");
+    
 
       let newTier = { ...tier };
       newTier.Resources.push(targetElement[0]);
@@ -176,11 +174,9 @@ export default {
       this.isChanging = true;
     },
     onDeleteResource(){
-      console.log('annyeong',this.tierResourceList[this.originTierIdx])
+  
       let deletedResource = this.tierResourceList[this.originTierIdx].Resources.splice(this.draggedResourceIdx,1)[0];
-      console.log(deletedResource,'dayo')
       this.deletedResourceList.push(deletedResource);
-      console.log(this.deletedResourceList[0],'haseyo')
     },
     onDragDropDelete() {
       // this.targetTierIdx = index