1 files changed, 202 insertions, 0 deletions
diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue
new file mode 100644
index 00000000..7322d03e
--- /dev/null
+++ b/src/views/SystemDescription/Info/SystemDescription.vue
@@ -0,0 +1,202 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- System table -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.ServerConfig') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <table-system ref="system" />
+          <!-- Notes Administration -->
+          <section class="notes-section">
+            <div class="semi-bold-12px textarea-description">
+              <span>{{ $t('SystemDescription.title.Notes') }}</span>
+            </div>
+            <div class="textarea-container">
+              <div class="buttons-container">
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-bold.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-underline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-link.svg"
+                  />
+                </button>
+                <div class="line"></div>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-list.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
+                  />
+                </button>
+              </div>
+              <textarea
+                id=""
+                name="area"
+                placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
+                cols="30"
+                rows="10"
+                class="notes-textarea"
+              ></textarea>
+            </div>
+          </section>
+        </b-collapse>
+      </div>
+      <!-- Control -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.Control') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <control-system />
+        </b-collapse>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import TableSystem from './InventoryTableSystem';
+import ControlSystem from './InventoryControlSystem';
+// import PageSection from '@/components/Global/PageSection';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    ControlSystem,
+    TableSystem,
+    // PageSection,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.server-info-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+//section style
+.notes-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.textarea-description {
+  margin: 5px 0 10px 2rem;
+}
+
+.buttons-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notes-button {
+  width: 2rem;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  background-color: $surface-secondary;
+  border: none;
+  &:hover {
+    border-radius: 8px;
+    background-color: $faint-secondary-primary-5-hover;
+  }
+}
+
+.line {
+  display: inline-block;
+  width: 1px;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  border-left: 1px solid rgba(26, 62, 91, 0.2);
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  margin: 0 1rem 1rem 1rem;
+  background-color: $surface-secondary;
+}
+
+.notes-textarea {
+  resize: none;
+  border: none;
+  flex: 0 0 auto;
+  margin: 0 1rem 1rem 1rem;
+  border-radius: 8px;
+  background-color: $white;
+}
+</style>