🚚 Moving or renaming files

components/layout/history.vue

@@ -0,0 +1,488 @@
+<template>
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
+    <ul>
+      <div class="show-on-large-screen">
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="search"
+            :placeholder="$t('search')"
+            v-model="filterText"
+          />
+        </li>
+        <button class="icon">
+          <i class="material-icons">search</i>
+        </button>
+      </div>
+    </ul>
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: filteredHistory.length }"
+      :size="185"
+      :remain="Math.min(5, filteredHistory.length)"
+    >
+      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+        <div class="show-on-large-screen">
+          <button
+            class="icon"
+            :class="{ stared: entry.star }"
+            @click="toggleStar(entry)"
+            v-tooltip="{
+              content: !entry.star ? $t('add_star') : $t('remove_star'),
+            }"
+          >
+            <i class="material-icons">
+              {{ entry.star ? "star" : "star_border" }}
+            </i>
+          </button>
+          <li>
+            <input
+              :aria-label="$t('label')"
+              type="text"
+              readonly
+              :value="entry.label"
+              :placeholder="$t('no_label')"
+              class="bg-color"
+            />
+          </li>
+          <!-- <li>
+            <button
+              class="icon"
+              v-tooltip="{
+                content: !entry.usesScripts
+                  ? 'No pre-request script'
+                  : 'Used pre-request script'
+              }"
+            >
+              <i class="material-icons">
+                {{ !entry.usesScripts ? "http" : "code" }}
+              </i>
+            </button>
+          </li> -->
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip="$t('options')">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  :id="'use-button#' + index"
+                  @click="useHistory(entry)"
+                  :aria-label="$t('edit')"
+                  v-close-popover
+                >
+                  <i class="material-icons">restore</i>
+                  <span>{{ $t("restore") }}</span>
+                </button>
+              </div>
+              <div>
+                <button
+                  class="icon"
+                  :id="'delete-button#' + index"
+                  @click="deleteHistory(entry)"
+                  :aria-label="$t('delete')"
+                  v-close-popover
+                >
+                  <i class="material-icons">delete</i>
+                  <span>{{ $t("delete") }}</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+        </div>
+        <div class="show-on-large-screen">
+          <li class="method-list-item">
+            <input
+              :aria-label="$t('method')"
+              type="text"
+              readonly
+              :value="entry.method"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
+            />
+            <span
+              class="entry-status-code"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
+              >{{ entry.status }}</span
+            >
+          </li>
+        </div>
+        <div class="show-on-large-screen">
+          <li>
+            <input
+              :aria-label="$t('url')"
+              type="text"
+              readonly
+              :value="entry.url"
+              :placeholder="$t('no_url')"
+            />
+          </li>
+          <li>
+            <input
+              :aria-label="$t('path')"
+              type="text"
+              readonly
+              :value="entry.path"
+              :placeholder="$t('no_path')"
+            />
+          </li>
+        </div>
+        <transition name="fade">
+          <div v-if="showMore" class="show-on-large-screen">
+            <li>
+              <input
+                :aria-label="$t('time')"
+                type="text"
+                readonly
+                :value="entry.time"
+                v-tooltip="entry.date"
+              />
+            </li>
+            <li>
+              <input
+                :aria-label="$t('duration')"
+                type="text"
+                readonly
+                :value="entry.duration"
+                :placeholder="$t('no_duration')"
+              />
+            </li>
+            <li>
+              <input
+                :aria-label="$t('prerequest_script')"
+                type="text"
+                readonly
+                :value="entry.preRequestScript"
+                :placeholder="$t('no_prerequest_script')"
+              />
+            </li>
+          </div>
+        </transition>
+      </ul>
+    </virtual-list>
+    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
+      <li>
+        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
+      </li>
+    </ul>
+    <p v-if="history.length === 0" class="info">
+      {{ $t("history_empty") }}
+    </p>
+    <div v-if="history.length !== 0">
+      <div class="flex-wrap" v-if="!isClearingHistory">
+        <button
+          class="icon"
+          id="clear-history-button"
+          :disabled="history.length === 0"
+          @click="enableHistoryClearing"
+        >
+          <i class="material-icons">clear_all</i>
+          <span>{{ $t("clear_all") }}</span>
+        </button>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip="$t('sort')">
+            <i class="material-icons">sort</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="sort_by_label()" v-close-popover>
+                <i class="material-icons">sort_by_alpha</i>
+                <span>{{ $t("label") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_time()" v-close-popover>
+                <i class="material-icons">access_time</i>
+                <span>{{ $t("time") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_status_code()" v-close-popover>
+                <i class="material-icons">assistant</i>
+                <span>{{ $t("status") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_url()" v-close-popover>
+                <i class="material-icons">language</i>
+                <span>{{ $t("url") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_path()" v-close-popover>
+                <i class="material-icons">timeline</i>
+                <span>{{ $t("path") }}</span>
+              </button>
+            </div>
+            <div v-if="showMore">
+              <button class="icon" @click="sort_by_duration()" v-close-popover>
+                <i class="material-icons">timer</i>
+                <span>{{ $t("duration") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="toggleCollapse()">
+                <i class="material-icons">
+                  {{ !showMore ? "first_page" : "last_page" }}
+                </i>
+                <span>{{ !showMore ? $t("show_more") : $t("hide_more") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+      </div>
+      <div class="flex-wrap" v-else>
+        <label for="clear-history-button" class="info">
+          {{ $t("are_you_sure") }}
+        </label>
+        <div>
+          <button
+            class="icon"
+            id="confirm-clear-history-button"
+            @click="clearHistory"
+            v-tooltip="$t('yes')"
+          >
+            <i class="material-icons">done</i>
+          </button>
+          <button
+            class="icon"
+            id="reject-clear-history-button"
+            @click="disableHistoryClearing"
+            v-tooltip="$t('no')"
+          >
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </pw-section>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 284px);
+
+  [readonly] {
+    cursor: default;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.stared {
+  color: #f8e81c !important;
+}
+
+ul,
+ol {
+  flex-direction: column;
+}
+
+.method-list-item {
+  position: relative;
+
+  span {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-family: "Roboto Mono", monospace;
+    font-weight: 400;
+    background-color: transparent;
+    padding: 2px 6px;
+    border-radius: 8px;
+  }
+}
+
+.entry {
+  border-bottom: 1px dashed var(--brd-color);
+  padding: 0 0 8px;
+}
+
+@media (max-width: 720px) {
+  .virtual-list.filled {
+    min-height: 320px;
+  }
+
+  .labels {
+    display: none;
+  }
+}
+</style>
+
+<script>
+import { findStatusGroup } from "../../pages/index"
+import { fb } from "../../functions/fb"
+
+const updateOnLocalStorage = (propertyName, property) =>
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
+
+export default {
+  components: {
+    "pw-section": () => import("../layout/section"),
+    VirtualList: () => import("vue-virtual-scroll-list"),
+  },
+  data() {
+    return {
+      history:
+        fb.currentUser !== null
+          ? fb.currentHistory
+          : JSON.parse(window.localStorage.getItem("history")) || [],
+      filterText: "",
+      showFilter: false,
+      isClearingHistory: false,
+      reverse_sort_label: false,
+      reverse_sort_time: false,
+      reverse_sort_status_code: false,
+      reverse_sort_url: false,
+      reverse_sort_path: false,
+      showMore: false,
+    }
+  },
+  computed: {
+    filteredHistory() {
+      this.history =
+        fb.currentUser !== null
+          ? fb.currentHistory
+          : JSON.parse(window.localStorage.getItem("history")) || []
+      return this.history.filter(entry => {
+        const filterText = this.filterText.toLowerCase()
+        return Object.keys(entry).some(key => {
+          let value = entry[key]
+          value = typeof value !== "string" ? value.toString() : value
+          return value.toLowerCase().includes(filterText)
+        })
+      })
+    },
+  },
+  methods: {
+    clearHistory() {
+      if (fb.currentUser !== null) {
+        fb.clearHistory()
+      }
+      this.history = []
+      this.filterText = ""
+      this.disableHistoryClearing()
+      updateOnLocalStorage("history", this.history)
+      this.$toast.error(this.$t("history_deleted"), {
+        icon: "delete",
+      })
+    },
+    useHistory(entry) {
+      this.$emit("useHistory", entry)
+    },
+    findEntryStatus(entry) {
+      const foundStatusGroup = findStatusGroup(entry.status)
+      return (
+        foundStatusGroup || {
+          className: "",
+        }
+      )
+    },
+    deleteHistory(entry) {
+      if (fb.currentUser !== null) {
+        fb.deleteHistory(entry)
+      }
+      this.history.splice(this.history.indexOf(entry), 1)
+      if (this.history.length === 0) {
+        this.filterText = ""
+      }
+      updateOnLocalStorage("history", this.history)
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+    },
+    addEntry(entry) {
+      this.history.push(entry)
+      updateOnLocalStorage("history", this.history)
+    },
+    enableHistoryClearing() {
+      if (!this.history || !this.history.length) return
+      this.isClearingHistory = true
+    },
+    disableHistoryClearing() {
+      this.isClearingHistory = false
+    },
+    sort_by_time() {
+      let byDate = this.history.slice(0)
+      byDate.sort((a, b) => {
+        let date_a = a.date.split("/")
+        let date_b = b.date.split("/")
+        let time_a = a.time.split(":")
+        let time_b = b.time.split(":")
+        let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2])
+        let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2])
+        if (this.reverse_sort_time) return final_b - final_a
+        else return final_a - final_b
+      })
+      this.history = byDate
+      this.reverse_sort_time = !this.reverse_sort_time
+    },
+    sort_by_status_code() {
+      let byCode = this.history.slice(0)
+      byCode.sort((a, b) => {
+        if (this.reverse_sort_status_code) return b.status - a.status
+        else return a.status - b.status
+      })
+      this.history = byCode
+      this.reverse_sort_status_code = !this.reverse_sort_status_code
+    },
+    sort_by_url() {
+      let byUrl = this.history.slice(0)
+      byUrl.sort((a, b) => {
+        if (this.reverse_sort_url) return a.url === b.url ? 0 : +(a.url < b.url) || -1
+        else return a.url === b.url ? 0 : +(a.url > b.url) || -1
+      })
+      this.history = byUrl
+      this.reverse_sort_url = !this.reverse_sort_url
+    },
+    sort_by_label() {
+      let byLabel = this.history.slice(0)
+      byLabel.sort((a, b) => {
+        if (this.reverse_sort_label) return a.label === b.label ? 0 : +(a.label < b.label) || -1
+        else return a.label === b.label ? 0 : +(a.label > b.label) || -1
+      })
+      this.history = byLabel
+      this.reverse_sort_label = !this.reverse_sort_label
+    },
+    sort_by_path() {
+      let byPath = this.history.slice(0)
+      byPath.sort((a, b) => {
+        if (this.reverse_sort_path) return a.path === b.path ? 0 : +(a.path < b.path) || -1
+        else return a.path === b.path ? 0 : +(a.path > b.path) || -1
+      })
+      this.history = byPath
+      this.reverse_sort_path = !this.reverse_sort_path
+    },
+    sort_by_duration() {
+      let byDuration = this.history.slice(0)
+      byDuration.sort((a, b) => {
+        if (this.reverse_sort_duration)
+          return a.duration === b.duration ? 0 : +(a.duration < b.duration) || -1
+        else return a.duration === b.duration ? 0 : +(a.duration > b.duration) || -1
+      })
+      this.history = byDuration
+      this.reverse_sort_duration = !this.reverse_sort_duration
+    },
+    toggleCollapse() {
+      this.showMore = !this.showMore
+    },
+    toggleStar(entry) {
+      if (fb.currentUser !== null) {
+        fb.toggleStar(entry, !entry.star)
+      }
+      entry.star = !entry.star
+      updateOnLocalStorage("history", this.history)
+    },
+  },
+}
+</script>

components/layout/logo.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 612.001 612.001"
+    style="enable-background:new 0 0 612.001 612.001;"
+    xml:space="preserve"
+  >
+    <defs id="defs11" />
+    <g id="g3826" transform="translate(-516.40798,-163.88978)">
+      <circle
+        :fill="color"
+        transform="scale(1,-1)"
+        style="stroke-width:1.19531453"
+        r="178.70923"
+        cy="-501.55591"
+        cx="822.40845"
+        id="circle3814"
+      />
+      <g id="g3820" transform="translate(516.40798,163.89028)">
+        <g id="g3818">
+          <path
+            :fill="color"
+            id="path3816"
+            data-old_color="#202124"
+            class="active-path"
+            data-original="#202124"
+            d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+#circle3814 {
+  /* fill: var(--fg-color); */
+  fill: transparent;
+}
+/* #path3816 {
+    fill: var(--bg-color);
+  } */
+</style>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+    },
+  },
+}
+</script>

components/layout/section.vue

@@ -0,0 +1,55 @@
+<template>
+  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
+    <legend @click.prevent="collapse">
+      <span>{{ label }}</span>
+      <i class="material-icons">
+        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
+      </i>
+    </legend>
+    <div class="collapsible" :class="{ hidden: isCollapsed(label.toLowerCase()) }">
+      <slot />
+    </div>
+  </fieldset>
+</template>
+
+<style scoped lang="scss">
+fieldset.no-colored-frames legend {
+  color: var(--fg-color);
+}
+</style>
+
+<script>
+export default {
+  computed: {
+    frameColorsEnabled() {
+      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false
+    },
+    sectionString() {
+      return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
+    },
+  },
+
+  props: {
+    label: {
+      type: String,
+      default: "Section",
+    },
+    collapsed: {
+      type: Boolean,
+    },
+  },
+
+  methods: {
+    collapse({ target }) {
+      const parent = target.parentNode.parentNode
+      parent.querySelector(".collapsible").classList.toggle("hidden")
+
+      // Save collapsed section into the collapsedSections array
+      this.$store.commit("setCollapsedSection", this.sectionString)
+    },
+    isCollapsed(label) {
+      return this.$store.state.theme.collapsedSections.includes(this.sectionString) || false
+    },
+  },
+}
+</script>