From a03914da354105779e84043fb1386235b1be8cdb Mon Sep 17 00:00:00 2001
From: Recep GUNES <recepgunes2@outlook.com>
Date: Mon, 4 Sep 2023 21:38:01 +0300
Subject: [PATCH] night backup

---
 internal-services.yml                         |  6 +--
 src/Buffer/WebAPI/Program.cs                  |  8 +++
 src/ExpiryChecker/WebAPI/Program.cs           |  8 +++
 src/Fronted/webui/.env                        |  2 +-
 src/Fronted/webui/.env.Production             |  2 +-
 src/Fronted/webui/package-lock.json           | 22 ++++----
 src/Fronted/webui/src/App.vue                 | 26 ++++-----
 .../webui/src/components/SearchBar.vue        | 30 ++++-------
 .../webui/src/components/UrlDetail.vue        | 53 +++++++++----------
 src/Fronted/webui/src/components/UrlTable.vue | 37 +++++++++----
 src/Fronted/webui/src/types/UrlTableRef.ts    |  5 ++
 src/Gateway/Gateway.WebAPI/Program.cs         |  8 +++
 src/Shortener/WebAPI/Program.cs               |  8 +++
 13 files changed, 124 insertions(+), 91 deletions(-)
 create mode 100644 src/Fronted/webui/src/types/UrlTableRef.ts

diff --git a/internal-services.yml b/internal-services.yml
index 0e4cb3f..8a576c3 100644
--- a/internal-services.yml
+++ b/internal-services.yml
@@ -40,7 +40,7 @@ services:
     environment:
       ASPNETCORE_ENVIRONMENT: Production
     ports:
-      - 5043:80
+      - 8081:80
     depends_on:
       - expiry_check_api
       - shortener_api
@@ -52,11 +52,11 @@ services:
   webui:
     image: ${DOCKER_REGISTRY-}webui
     ports:
-      - 8080:80
+     - 8080:80
     build:
       context: src/Fronted/webui
       dockerfile: Dockerfile
     depends_on:
       - apigateway
     networks:
-      - fronted
+     - fronted
diff --git a/src/Buffer/WebAPI/Program.cs b/src/Buffer/WebAPI/Program.cs
index 921670a..9938b17 100644
--- a/src/Buffer/WebAPI/Program.cs
+++ b/src/Buffer/WebAPI/Program.cs
@@ -32,6 +32,14 @@
 
 app.UseRouting();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()
diff --git a/src/ExpiryChecker/WebAPI/Program.cs b/src/ExpiryChecker/WebAPI/Program.cs
index 0a6d9e6..d902709 100644
--- a/src/ExpiryChecker/WebAPI/Program.cs
+++ b/src/ExpiryChecker/WebAPI/Program.cs
@@ -20,6 +20,14 @@
 
 app.UseRouting();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()
diff --git a/src/Fronted/webui/.env b/src/Fronted/webui/.env
index cc3d0c9..f289b0d 100644
--- a/src/Fronted/webui/.env
+++ b/src/Fronted/webui/.env
@@ -1,2 +1,2 @@
 VUE_APP_TITLE=Url Shortener App
-VUE_APP_API_GATEWAY_URL=http://localhost:5043
+VUE_APP_API_GATEWAY_URL=http://localhost:8081
diff --git a/src/Fronted/webui/.env.Production b/src/Fronted/webui/.env.Production
index 7b3483d..f289b0d 100644
--- a/src/Fronted/webui/.env.Production
+++ b/src/Fronted/webui/.env.Production
@@ -1,2 +1,2 @@
 VUE_APP_TITLE=Url Shortener App
-VUE_APP_API_GATEWAY_URL=http://apigateway:80
+VUE_APP_API_GATEWAY_URL=http://localhost:8081
diff --git a/src/Fronted/webui/package-lock.json b/src/Fronted/webui/package-lock.json
index f1631b4..e1a6e74 100644
--- a/src/Fronted/webui/package-lock.json
+++ b/src/Fronted/webui/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "webui",
       "version": "0.1.0",
       "dependencies": {
         "@types/axios": "^0.14.0",
@@ -3739,8 +3740,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -3756,9 +3755,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
-      "optional": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
@@ -14492,6 +14489,7 @@
       "integrity": "sha512-yl+5qhpjd8e1G4cMXfORkkBlvtPCIgmRf3IYCWYDKIQ7m+PPa5iTm4feiNmCMD6yGqQWMhhK/7M3oWGL9boKwg==",
       "dev": true,
       "requires": {
+        "@babel/core": "^7.12.16",
         "@babel/helper-compilation-targets": "^7.12.16",
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
@@ -14504,6 +14502,7 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.1.2",
         "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.8.3",
         "core-js-compat": "^3.8.3",
         "semver": "^7.3.4"
       },
@@ -15271,14 +15270,15 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {},
+      "requires": {
+        "ajv": "^8.0.0"
+      },
       "dependencies": {
         "ajv": {
-          "version": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
           "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "dev": true,
-          "optional": true,
-          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -15290,9 +15290,7 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
           "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true,
-          "optional": true,
-          "peer": true
+          "dev": true
         }
       }
     },
diff --git a/src/Fronted/webui/src/App.vue b/src/Fronted/webui/src/App.vue
index 7392a4d..83a824e 100644
--- a/src/Fronted/webui/src/App.vue
+++ b/src/Fronted/webui/src/App.vue
@@ -2,7 +2,7 @@
   <div class="container border mt-5 rounded bg-light">
     <div class="row mt-5">
       <div class="col">
-        <SearchBar />
+        <SearchBar @request-refresh="refreshUrlTable" />
       </div>
     </div>
     <div class="row my-5">
@@ -12,7 +12,7 @@
     </div>
     <div class="row">
       <div class="col">
-        <UrlTable :urls="urls" />
+        <UrlTable ref="UrlTableRef" />
       </div>
     </div>
   </div>
@@ -21,8 +21,6 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import axios from "axios";
-
 import SearchBar from "./components/SearchBar.vue";
 import UrlTable from "./components/UrlTable.vue";
 import UrlConfiguration from "./components/UrlConfiguration.vue";
@@ -32,22 +30,18 @@ import "bootstrap/dist/js/bootstrap.js";
 
 export default defineComponent({
   name: "App",
+  methods: {
+    refreshUrlTable() {
+      const urlTableRef = this.$refs.UrlTableRef as any; // or a more specific type if you have one
+      if (urlTableRef && typeof urlTableRef.fetchUrls === 'function') {
+        urlTableRef.fetchUrls();
+      }
+    }
+  },
   components: {
     SearchBar,
     UrlTable,
     UrlConfiguration,
   },
-  setup() {
-    const urls = ref([]);
-
-    axios
-      .get(`${process.env.VUE_APP_API_GATEWAY_URL}/get_all_urls`)
-      .then((response) => {
-        urls.value = response.data;
-      });
-    return {
-      urls,
-    };
-  },
 });
 </script>
diff --git a/src/Fronted/webui/src/components/SearchBar.vue b/src/Fronted/webui/src/components/SearchBar.vue
index 0ca724e..214bbad 100644
--- a/src/Fronted/webui/src/components/SearchBar.vue
+++ b/src/Fronted/webui/src/components/SearchBar.vue
@@ -1,27 +1,13 @@
 <template>
   <div class="text-center">
     <div class="input-group w-auto">
-      <input
-        type="text"
-        class="form-control"
-        placeholder="Enter a short path or url"
-        v-model="input"
-      />
-      <button
-        class="btn btn-primary"
-        type="button"
-        @click.prevent="GetOrPublishUrl(input.toString())"
-      >
+      <input type="text" class="form-control" placeholder="Enter a short path or url" v-model="input" />
+      <button class="btn btn-primary" type="button" @click.prevent="GetOrPublishUrl(input.toString())">
         Search
       </button>
     </div>
-    <UrlDetail v-if="url != null && url.longUrl" :url-with-detail="url" />
-    <img
-      v-if="isStarted"
-      class="mt-4 img-fluid"
-      src="../assets/loading-gif.gif"
-      style="width: 48px"
-    />
+    <UrlDetail v-if="url != null && url.longUrl" :url-with-detail="url" @detail-shown="refreshTable" />
+    <img v-if="isStarted" class="mt-4 img-fluid" src="../assets/loading-gif.gif" style="width: 48px" />
   </div>
 </template>
 
@@ -29,6 +15,8 @@
 import axios from "axios";
 import { defineComponent } from "vue";
 import Url from "../types/Url";
+import UrlTableRef from "../types/UrlTableRef";
+
 import UrlDetail from "./UrlDetail.vue";
 
 export default defineComponent({
@@ -44,6 +32,9 @@ export default defineComponent({
     };
   },
   methods: {
+    refreshTable() {
+  this.$emit('request-refresh');
+},
     GetOrPublishUrl(input: string) {
       this.isStarted = true; // Start loading
 
@@ -73,8 +64,7 @@ export default defineComponent({
             setTimeout(() => {
               axios
                 .get(
-                  `${
-                    process.env.VUE_APP_API_GATEWAY_URL
+                  `${process.env.VUE_APP_API_GATEWAY_URL
                   }/get_url/${encodeURIComponent(input)}`
                 )
                 .then((final_response) => {
diff --git a/src/Fronted/webui/src/components/UrlDetail.vue b/src/Fronted/webui/src/components/UrlDetail.vue
index 56d62c4..2bc0eaf 100644
--- a/src/Fronted/webui/src/components/UrlDetail.vue
+++ b/src/Fronted/webui/src/components/UrlDetail.vue
@@ -1,44 +1,36 @@
 <template>
-  <div
-    class="alert alert-warning alert-dismissible fade show mt-5"
-    role="alert"
-  >
-  <table class="table table-warning">
-    <thead class="thead-dark text-center">
+  <div class="alert alert-warning alert-dismissible fade show mt-5" role="alert">
+    <table class="table table-warning">
+      <thead class="thead-dark text-center">
         <tr>
-            <th scope="col" colspan="2">URL Details</th>
+          <th scope="col" colspan="2">URL Details</th>
         </tr>
-    </thead>
-    <tbody>
+      </thead>
+      <tbody>
         <tr>
-            <th scope="row">Long Url</th>
-            <td><a :href="urlWithDetail.longUrl">{{ urlWithDetail.longUrl }}</a></td>
+          <th scope="row">Long Url</th>
+          <td><a :href="urlWithDetail.longUrl" :title="urlWithDetail.longUrl">{{ urlWithDetail.longUrl }}</a></td>
         </tr>
         <tr>
-            <th scope="row">Short Path</th>
-            <td>{{ urlWithDetail.shortPath }}</td>
+          <th scope="row">Short Path</th>
+          <td><a :href="`${currentUrl}${urlWithDetail.shortPath}`" :title="urlWithDetail.shortPath">{{ urlWithDetail.shortPath }}</a></td>
         </tr>
         <tr>
-            <th scope="row">Created Date</th>
-            <td>{{ urlWithDetail.createdDate }}</td>
+          <th scope="row">Created Date</th>
+          <td>{{ urlWithDetail.createdDate }}</td>
         </tr>
         <tr>
-            <th scope="row">Expire DateTime</th>
-            <td>{{ urlWithDetail.expireDate }}</td>
+          <th scope="row">Expire DateTime</th>
+          <td>{{ urlWithDetail.expireDate }}</td>
         </tr>
-    </tbody>
-</table>
-    <button
-      type="button"
-      class="btn-close"
-      data-bs-dismiss="alert"
-      aria-label="Close"
-    ></button>
+      </tbody>
+    </table>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
 </template>
-  
+
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, ref, onMounted } from "vue";
 import Url from "../types/Url";
 
 export default defineComponent({
@@ -49,5 +41,12 @@ export default defineComponent({
       type: Object as PropType<Url>,
     },
   },
+  setup(p, { emit }) {
+    onMounted(() => {
+      emit('detail-shown');
+    });
+    const currentUrl = ref(window.location.href);
+    return { currentUrl };
+  },
 });
 </script>
diff --git a/src/Fronted/webui/src/components/UrlTable.vue b/src/Fronted/webui/src/components/UrlTable.vue
index 50ba20b..0ef5a38 100644
--- a/src/Fronted/webui/src/components/UrlTable.vue
+++ b/src/Fronted/webui/src/components/UrlTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="table table-bordered table-stripped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>LongUrl</th>
@@ -9,11 +9,11 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(url, key) in urls" :key="key">
+      <tr v-for="(url, key) in fetchedUrls" :key="key">
         <td>
           <a :href="url.longUrl">{{ url.longUrl }}</a>
         </td>
-        <td>{{ url.shortPath }}</td>
+        <td><a :href="`${currentUrl}${url.shortPath}`" target="_blank">{{ url.shortPath }}</a></td>
         <td>{{ url.createdDate }}</td>
         <td>{{ url.expireDate }}</td>
       </tr>
@@ -21,9 +21,9 @@
   </table>
 </template>
 
-
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, ref, onMounted } from "vue";
+import axios from "axios";
 
 import Url from "../types/Url";
 
@@ -31,14 +31,29 @@ export default defineComponent({
   name: "UrlTable",
   props: {
     urls: {
-      required: true,
       type: Array as PropType<Url[]>,
+      default: () => ([]),
     }
   },
-  mounted(){
-    setInterval(() => {
-      this.$forceUpdate();
-    }, 10000)
-  }
+  setup() {
+    const currentUrl = ref(window.location.href);
+    const fetchedUrls = ref<Url[]>([]);
+
+    const fetchUrls = async () => {
+      try {
+        const response = await axios.get(`${process.env.VUE_APP_API_GATEWAY_URL}/get_all_urls`);
+        fetchedUrls.value = response.data;
+      } catch (error) {
+        console.error("Failed to fetch URLs:", error);
+      }
+    };
+    
+    onMounted(fetchUrls);
+
+    return {
+      currentUrl,
+      fetchedUrls
+    };
+  },
 });
 </script>
diff --git a/src/Fronted/webui/src/types/UrlTableRef.ts b/src/Fronted/webui/src/types/UrlTableRef.ts
new file mode 100644
index 0000000..6a1f4d2
--- /dev/null
+++ b/src/Fronted/webui/src/types/UrlTableRef.ts
@@ -0,0 +1,5 @@
+interface UrlTableRef {
+    fetchUrls: () => void;
+}
+
+export default UrlTableRef
\ No newline at end of file
diff --git a/src/Gateway/Gateway.WebAPI/Program.cs b/src/Gateway/Gateway.WebAPI/Program.cs
index 6a32e3f..d3d16fa 100644
--- a/src/Gateway/Gateway.WebAPI/Program.cs
+++ b/src/Gateway/Gateway.WebAPI/Program.cs
@@ -13,6 +13,14 @@
 
 var app = builder.Build();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()
diff --git a/src/Shortener/WebAPI/Program.cs b/src/Shortener/WebAPI/Program.cs
index 3de6edd..adc1541 100644
--- a/src/Shortener/WebAPI/Program.cs
+++ b/src/Shortener/WebAPI/Program.cs
@@ -32,6 +32,14 @@
 
 app.UseRouting();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()