Merge branch 'main' of https://github.com/abunai-dev/UncertaintySourc…

…eArchive

app/src/App.vue

@@ -49,7 +49,7 @@ header {
 
 main {
   max-width: 2500px;
-  flex: 1;
+  flex: 2;
   display: flex;
   justify-content: center;
 }
@@ -103,14 +103,15 @@ p {
 
 .content {
   clear: both;
-  display: flexbox;
+  display: flex;
   margin: 40px auto;
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;
   border-radius: 0.25rem;
   background: #fff;
   color: #2c3e50;
   font-size: 1rem;
-  max-width: 1500px;
+  max-width: 2000px;
+  max-height: fit-content;
 }
 </style>

app/src/assets/main.css

@@ -1,7 +1,7 @@
 @import './base.css';
 
 #app {
-  max-width: 1500px;
+  max-width: 1920px;
   margin: 0 auto;
   padding: 2rem;
 
@@ -28,8 +28,9 @@ a,
   }
 
   #app {
-    display: grid;
+    display: flex;
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
+    place-items: center;
   }
 }

app/src/components/AppContent.vue

@@ -1,15 +1,18 @@
 <template>
-    <div class="entry" v-if="!showTable">
-        <button @click="toggleShowTable()">Back</button>
+    <div class="entry" v-if="showUncertainty || showUncertaintyCreator">
+        <button class="button" @click="toggleShowTable()" @keyup="processKeyDown">Back</button>
+    </div>
+    <div class="entry" v-if="showClassification">
+        <button class="button" @click="toggleShowUncertainty()" @keyup="processKeyDown">Back</button>
     </div>
     <div class="table" v-if="showTable">
-        <TableInstance @selected-uncertainty="setCurrentUncertainty" :filter-by-Option="currentFilterBy" :search-value="currentSearchValue"/>
-        <div class="button">
-            <button @click="toggleShowUncertaintyCreator()">Add new uncertainty</button>
+        <TableInstance @selected-uncertainty="setCurrentUncertainty"/>
+        <div>
+            <button class="button" @click="toggleShowUncertaintyCreator()"> Add new uncertainty </button>
         </div>
     </div>
     <div class="uncertainty-detail" v-if="(showUncertainty) && (currentUncertainty != null)">
-        <UncertaintyDetail :uncertainty="currentUncertainty" @selected-classification-category="setClassificationCategory" @selected-keyword="setSearchValue" @selected-uncertainty-id="setSearchValue"/>
+        <UncertaintyDetail :uncertainty="currentUncertainty" @selected-classification-category="setClassificationCategory" @selected-keyword="setKeyword" @selected-uncertainty-id="setSearchValue"/>
     </div>
     <div class="classification-detail" v-if="(showClassification) && (currentClassificationCategory != null)">
         <CategoryOverviewPage :statedcategory="currentClassificationCategory" @filter-by="setFilteredTable"/>
@@ -28,15 +31,16 @@ import type { Category } from '@/util/types/Category';
 import CategoryOverviewPage from './category/CategoryOverviewPage.vue';
 import type { Option } from '@/util/types/Option';
 import UncertaintyCreator from './uncertaintycreation/UncertaintyCreator.vue';
+import {tableState} from '@/util/types/TableState';
+
+window.addEventListener('keydown', processKeyDown);
 
 const showTable = ref(true);
 const showUncertainty = ref(false);
 const showClassification = ref(false);
-const currentSearchValue = ref('');
 const showUncertaintyCreator = ref(false);
 let currentUncertainty = ref(null) as Ref<Uncertainty | null>;
 let currentClassificationCategory= ref(null) as Ref<Category | null>;
-let currentFilterBy = ref(null) as Ref< {category: Category, option: Option} | null>;
 
 function toggleShowTable() {
     showTable.value = true;
@@ -45,8 +49,7 @@ function toggleShowTable() {
     showUncertaintyCreator.value = false;
     currentUncertainty = ref(null) as Ref<Uncertainty | null>;
     currentClassificationCategory= ref(null) as Ref<Category | null>;
-    currentFilterBy = ref(null) as Ref< {category: Category, option: Option} | null>;
-    currentSearchValue.value = '';
+    console.log(tableState)
     console.log("The value is set to show the table " )
 }
 
@@ -71,6 +74,7 @@ function toggleShowClassification() {
     }
 }
 
+
 function toggleShowUncertaintyCreator() {
     showTable.value = false;
     showUncertainty.value = false;
@@ -90,17 +94,61 @@ function setClassificationCategory(category: Category) {
     toggleShowClassification();
 }
 
+function processKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+        if (showUncertainty.value ||showUncertaintyCreator.value) {
+            toggleShowTable();
+        } else if (showClassification.value) {
+            toggleShowUncertainty();
+        }
+    }
+}
+
 function setFilteredTable(payload: {category: Category, option: Option}) {
     console.log("Incoming fitered table value: " + payload.category.name + payload.option.name)
+    if(payload.category.name === 'Location') {
+        tableState.selectedLocation = payload.option.name;
+    } else if (payload.category.name === 'Architectural Element Type') {
+        tableState.selectedArchitecturalType = payload.option.name;
+    } else if (payload.category.name === 'Type') {
+        tableState.selectedType = payload.option.name;
+    } else if (payload.category.name === 'Manageability') {
+        tableState.selectedManageability = payload.option.name;
+    } else if (payload.category.name === 'Resolution Time') {
+        tableState.selectedResolutionTime = payload.option.name;
+    } else if (payload.category.name === 'Reducible by Add') {
+        tableState.selectedReducibleByAdd = payload.option.name;
+    } else if (payload.category.name === 'Impact on Confidentiality') {
+        tableState.selectedImpactOnConfidentiality = payload.option.name;
+    } else if (payload.category.name === 'Severity of Impact') {
+        tableState.selectedSeverityOfImpact = payload.option.name;
+    } else {
+        tableState.searchValue = payload.option.name;
+    }
+    toggleShowTable();
+}
+
+function setKeyword(keyword: string) {
+    console.log("Incoming keyword value: " + keyword)
+    tableState.selectedKeyword = keyword;
     toggleShowTable();
-    currentFilterBy.value = payload;
 }
 
 function setSearchValue(searchValue: string) {
     console.log("Incoming search value: " + searchValue)
+    tableState.searchValue = searchValue;
     toggleShowTable();
-    currentSearchValue.value = searchValue;
 }
+
 </script>
 <style scoped>
-</style>@/util/types/Option
+.table {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.button {
+    padding: 5px;
+    margin-top: 5px;
+}
+</style>

app/src/components/category/CategoryOverviewPage.vue

@@ -6,7 +6,7 @@
         <main>
             <BasicInformation :definition="props.statedcategory.definition" :description="props.statedcategory.description"/>
             <OptionDetailSection :options="props.statedcategory.options" :category="props.statedcategory" @filter-by-option="sendFilterOption"/>
-            <ExampleSection :description="props.statedcategory.exampleScenarios.toString()" :imagePath="imagePath" :collaborationUrl="props.statedcategory.discussionUrl"/>
+            <ExampleSection :description="props.statedcategory.exampleScenario" :imagePath="imagePath" :collaborationUrl="props.statedcategory.discussionUrl"/>
         </main>
 
     </div>

app/src/components/category/OptionDetailItem.vue

@@ -1,11 +1,17 @@
 <template>
     <div class="item">
         <div class="definition-and-button">
-            <p>{{ props.option.name }}: {{ props.option.definition }}</p>
+            <div class="definition-and-button">
+                <p style="font-weight: bold;">{{ props.option.name }}:</p>
+                <p>{{ props.option.definition }}</p>
+            </div>
             <FilterButton buttontext="Show more examples!" @filter="sendFilterOption"/>
         </div>
         <div class="example-list">
-            <p v-for="(example, index) in props.option.exampleScenarios" :key="index">{{example}}</p>
+            <p style="margin-right:5px;">Example:</p>
+            <div class="list">
+                <p v-for="(example, index) in props.option.exampleScenarios" :key="index">{{example}}</p>
+            </div>
         </div>
     </div>
 </template>
@@ -33,24 +39,34 @@
 <style scoped>
 .item {
     flex-direction: row;
-    margin: 5px;
+    margin: 10px;
     padding: 5px;
 }
 .example-list {
-    flex-direction: column;
+    display:flex;
+    margin: 5px;
+    flex-direction: row;
 }
 
 .example-list p {
     text-align: left;
-    flex-direction: column;
 }
 
 .item p {
     text-align: left;
 }
 
 .definition-and-button {
-    flex-direction: column;
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
 }
+.definition-and-button p {
+    margin: 5px;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+}
 </style>@/util/types/Option

app/src/components/category/OptionDetailSection.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="options">
         <header>
-            <h3>options:</h3>
+            <h3>Options:</h3>
          </header>
         <main>
             <OptionDetailItem v-for="(option, index) in props.options" :option="option" :key="index" @filter-byoption="forwardEmit"/>

app/src/components/table/SearchBar.vue

@@ -1,26 +1,26 @@
 <template>
-    <button @click="$emit('toggleSearch')">Filter</button>
           <div class="input">
-            <span>search value:</span>
-            <input type="text" v-model="searchValue" @input="emitSearch"/>
-            <button @click="$emit('reset'), searchValue = ''">Reset</button>
+            <span class="search">search value:</span>
+            <input type="text" v-model="tableState.searchValue"/>
+            <button class="button" @click="$emit('reset'), tableState.searchValue = ''">Reset</button>
           </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
-
-const props = defineProps(
-    {
-        searchValue: {
-            type: String,
-            default: ''
-        }
-    }
-)
-const searchValue = ref(props.searchValue);
-const emits = defineEmits(['search', 'reset', 'toggleSearch']);
-
-function emitSearch() {
-    emits('search', searchValue.value)
-}
+import { tableState } from '@/util/types/TableState';
 </script>
+<style scoped>
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: right;
+  justify-content: right;
+}
+.search {
+  margin-right: 10px;
+}
+.button {
+  margin-left: 10px;
+  margin-top: 0;
+  padding: 5px;
+}
+</style>