8116728705

Committed 01 Mar 2024 08:16PM UTC coverage: 91.895%. Remained the same

Build # 8116728705

Build Type

Pull #3081

github

Committed by

web-flow

Commit Message

Merge a9689dd60 into 0cd2bf31b

Pull Request Pull Request #3081: reapply Jim's drop openssl conf

Run Details

17483 of 19025 relevant lines covered (91.89%)

9.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/myuw_vue/components/_common/term-selector.vue

<template>
  <uw-tabs
    v-model="selectedTab"
    pills
    bottom-border
    :nav-wrapper-class="['mb-3', $mq === 'mobile' ? 'px-2' : 'p-0']"
  >
    <!--
      Only mounts the tab when it is selected, so the data should be
      fetched on mount for the components in here
     -->
    <template #tabs>
      <uw-tab-button
        v-for="(tab, i) in displayedTabs"
        :key="i"
        :panel-id="panleId(tab)"
        title-item-class="text-nowrap myuw-text-lg me-2 mb-1"
        title-link-class="rounded-0 px-2 py-1 h-100 text-body"
      >
        {{ tab.quarter + " '" + (tab.year % 100) }}
      </uw-tab-button>
      <uw-tab-dropdown
        v-if="dropdownTabs.length > 1"
        v-model="selectedOption"
        panel-id="dropdown"
        :options-list="dropdownTabsSelectable"
        :title-item-class="{
          'ms-auto': $mq !== 'mobile',
          'text-nowrap': true,
          'myuw-text-lg': true
        }"
      >
      </uw-tab-dropdown>
    </template>
    <template #panels>
      <uw-tab-panel
          v-for="(tab, i) in displayedTabs"
          :key="i"
          :panel-id="panleId(tab)">
        <slot :tab="tab" />
      </uw-tab-panel>
      <uw-tab-panel v-if="selectedOption > 0" panel-id="dropdown">
        <slot :tab="dropdownTabs[selectedOption]" />
      </uw-tab-panel>
    </template>
  </uw-tabs>
</template>

<script>
import {
  faChevronDown,
} from '@fortawesome/free-solid-svg-icons';
import Tabs from '../_templates/tabs/tabs.vue';
import TabButton from '../_templates/tabs/button.vue';
import TabDropdown from '../_templates/tabs/dropdown.vue';
import TabPanel from '../_templates/tabs/panel.vue';

export default {
  components: {
    'uw-tabs': Tabs,
    'uw-tab-button': TabButton,
    'uw-tab-dropdown': TabDropdown,
    'uw-tab-panel': TabPanel,
  },
  model: {
    prop: 'selectedTerm',
    event: 'selected'
  },
  props: {
    // Current here means the year right now not the selected year
    currentYear: {
      type: Number,
      required: true,
    },
    // Current here means the quarter right now not the selected quarter
    currentQuarter: {
      type: String,
      required: true,
    },
    allTabs: {
      type: Array,
      required: true,
    },
    selectedTerm: {
      type: String,
      default: null,
    }
  },
  data() {
    const currentIndex = this.allTabs.findIndex((tab) =>
      tab.quarter.toLowerCase() == this.currentQuarter &&
      tab.year == this.currentYear,
    );
    // Bug on Mac OS:
    // 1. Click on Past Terms, click somewhere else to close the dropdown.
    // 2. Click on the Past terms again. can't select in the dropdown
    let displayedTabs = this.allTabs.slice(currentIndex, currentIndex + 3);
    let dropdownTabs = this.allTabs.slice(0, -3).reverse();
    let dropdownTabsSelectable = dropdownTabs.map((tab, i) => {
      return {
        value: i + 1,
        text: `${tab.quarter} '${tab.year % 100}`,
      };
    });
    dropdownTabs.unshift({label: 'Past Terms'});
    dropdownTabsSelectable.unshift({
      value: 0,
      text: 'Past Terms',
      disabled: true,
    });
    let selectedTab = 0;
    let selectedOption = 0;
    if (this.selectedTerm) {
      let i = displayedTabs.findIndex((tabData) =>
        `${tabData.year},${tabData.quarter?.toLowerCase()}` === this.selectedTerm
      );
      if (i > -1) {
        selectedTab = i;
      } else {
        i = dropdownTabs.findIndex((tabData) =>
          `${tabData.year},${tabData.quarter?.toLowerCase()}` === this.selectedTerm
        );
        if (i > -1) {
          selectedOption = i;
          selectedTab = 3;
        }
      }
    }
    let selectedTermInner = this.selectedTerm;
    if (!selectedTermInner) {
      if (selectedTab < 3) {
        selectedTermInner = displayedTabs[selectedTab].label;
      } else {
        selectedTermInner = dropdownTabs[selectedOption].label;
      }
    }
    return {
      selectedTab,
      selectedOption,
      selectedTermInner,
      displayedTabs,
      dropdownTabs,
      dropdownTabsSelectable,
      faChevronDown,
    };
  },
  watch: {
    selectedOption(newValue, oldValue) {
      this.updateSelectedTerm();
    },
    selectedTab() {
      this.updateSelectedTerm();
    },
    selectedTermInner(newValue, oldValue) {
      this.$emit('selected', newValue);
      this.$logger.termSelected(newValue);
    },
  },
  created() {
    this.$logger.termSelected(this.selectedTermInner);
  },
  methods: {
    updateSelectedTerm() {
      if (this.selectedTab < 3) {
        this.selectedTermInner = this.displayedTabs[this.selectedTab].label;
      } else {
        this.selectedTermInner = this.dropdownTabs[this.selectedOption].label;
      }
    },
    panleId(tab) {
      return tab.quarter + (tab.year % 100);
    },
  },
};
</script>

<style lang="scss" scoped>
select {
  &::-ms-expand {
    display: none;
  }

  -webkit-appearance: none; 
  appearance: none;
  background: initial;
  border: initial;
  border-radius: inherit;
  padding: 0;
  font-size: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;

  padding-left: 0.5rem;
  padding-right: 2.0rem;
}

.select-parent {
  position: relative;

  .down-arrow {
    position: absolute;
    right: 0.5rem;
    top: 0.36rem;
    z-index: 1;
    pointer-events: none;
  }
}
</style>

1	<template>	×
2	<uw-tabs
3	v-model="selectedTab"
4	pills
5	bottom-border
6	:nav-wrapper-class="['mb-3', $mq === 'mobile' ? 'px-2' : 'p-0']"
7	>
8	<!--
9	Only mounts the tab when it is selected, so the data should be
10	fetched on mount for the components in here
11	-->
12	<template #tabs>
13	<uw-tab-button
14	v-for="(tab, i) in displayedTabs"
15	:key="i"
16	:panel-id="panleId(tab)"
17	title-item-class="text-nowrap myuw-text-lg me-2 mb-1"
18	title-link-class="rounded-0 px-2 py-1 h-100 text-body"
19	>
20	{{ tab.quarter + " '" + (tab.year % 100) }}
21	</uw-tab-button>
22	<uw-tab-dropdown
23	v-if="dropdownTabs.length > 1"
24	v-model="selectedOption"
25	panel-id="dropdown"
26	:options-list="dropdownTabsSelectable"
27	:title-item-class="{
28	'ms-auto': $mq !== 'mobile',
29	'text-nowrap': true,
30	'myuw-text-lg': true
31	}"
32	>
33	</uw-tab-dropdown>
34	</template>
35	<template #panels>
36	<uw-tab-panel
37	v-for="(tab, i) in displayedTabs"
38	:key="i"
39	:panel-id="panleId(tab)">
40	<slot :tab="tab" />
41	</uw-tab-panel>
42	<uw-tab-panel v-if="selectedOption > 0" panel-id="dropdown">
43	<slot :tab="dropdownTabs[selectedOption]" />
44	</uw-tab-panel>
45	</template>
46	</uw-tabs>
47	</template>
48		×
49	<script>
50	import {	×
51	faChevronDown,
52	} from '@fortawesome/free-solid-svg-icons';
53	import Tabs from '../_templates/tabs/tabs.vue';	×
54	import TabButton from '../_templates/tabs/button.vue';	×
55	import TabDropdown from '../_templates/tabs/dropdown.vue';	×
56	import TabPanel from '../_templates/tabs/panel.vue';	×
57
58	export default {
59	components: {
60	'uw-tabs': Tabs,
61	'uw-tab-button': TabButton,
62	'uw-tab-dropdown': TabDropdown,
63	'uw-tab-panel': TabPanel,
64	},
65	model: {
66	prop: 'selectedTerm',
67	event: 'selected'
68	},
69	props: {
70	// Current here means the year right now not the selected year
71	currentYear: {
72	type: Number,
73	required: true,
74	},
75	// Current here means the quarter right now not the selected quarter
76	currentQuarter: {
77	type: String,
78	required: true,
79	},
80	allTabs: {
81	type: Array,
82	required: true,
83	},
84	selectedTerm: {
85	type: String,
86	default: null,
87	}
88	},
89	data() {
90	const currentIndex = this.allTabs.findIndex((tab) =>
91	tab.quarter.toLowerCase() == this.currentQuarter &&
92	tab.year == this.currentYear,
93	);
94	// Bug on Mac OS:
95	// 1. Click on Past Terms, click somewhere else to close the dropdown.
96	// 2. Click on the Past terms again. can't select in the dropdown
97	let displayedTabs = this.allTabs.slice(currentIndex, currentIndex + 3);
98	let dropdownTabs = this.allTabs.slice(0, -3).reverse();
99	let dropdownTabsSelectable = dropdownTabs.map((tab, i) => {
100	return {
101	value: i + 1,
102	text: `${tab.quarter} '${tab.year % 100}`,
103	};
104	});
105	dropdownTabs.unshift({label: 'Past Terms'});
106	dropdownTabsSelectable.unshift({
107	value: 0,
108	text: 'Past Terms',
109	disabled: true,
110	});
111	let selectedTab = 0;
112	let selectedOption = 0;
113	if (this.selectedTerm) {
114	let i = displayedTabs.findIndex((tabData) =>
115	`${tabData.year},${tabData.quarter?.toLowerCase()}` === this.selectedTerm
116	);
117	if (i > -1) {
118	selectedTab = i;
119	} else {
120	i = dropdownTabs.findIndex((tabData) =>
121	`${tabData.year},${tabData.quarter?.toLowerCase()}` === this.selectedTerm
122	);
123	if (i > -1) {
124	selectedOption = i;
125	selectedTab = 3;
126	}
127	}
128	}
129	let selectedTermInner = this.selectedTerm;
130	if (!selectedTermInner) {
131	if (selectedTab < 3) {
132	selectedTermInner = displayedTabs[selectedTab].label;
133	} else {
134	selectedTermInner = dropdownTabs[selectedOption].label;
135	}
136	}
137	return {
138	selectedTab,
139	selectedOption,
140	selectedTermInner,
141	displayedTabs,
142	dropdownTabs,
143	dropdownTabsSelectable,
144	faChevronDown,
145	};
146	},
147	watch: {
148	selectedOption(newValue, oldValue) {
149	this.updateSelectedTerm();
150	},
151	selectedTab() {
152	this.updateSelectedTerm();
153	},
154	selectedTermInner(newValue, oldValue) {
155	this.$emit('selected', newValue);
156	this.$logger.termSelected(newValue);
157	},
158	},
159	created() {
160	this.$logger.termSelected(this.selectedTermInner);
161	},
162	methods: {
163	updateSelectedTerm() {
164	if (this.selectedTab < 3) {
165	this.selectedTermInner = this.displayedTabs[this.selectedTab].label;
166	} else {
167	this.selectedTermInner = this.dropdownTabs[this.selectedOption].label;
168	}
169	},
170	panleId(tab) {
171	return tab.quarter + (tab.year % 100);
172	},
173	},
174	};
175	</script>
176
177	<style lang="scss" scoped>
178	select {
179	&::-ms-expand {
180	display: none;
181	}
182
183	-webkit-appearance: none;
184	appearance: none;
185	background: initial;
186	border: initial;
187	border-radius: inherit;
188	padding: 0;
189	font-size: inherit;
190	text-transform: inherit;
191	color: inherit;
192	cursor: pointer;
193
194	padding-left: 0.5rem;
195	padding-right: 2.0rem;
196	}
197
198	.select-parent {
199	position: relative;
200
201	.down-arrow {
202	position: absolute;
203	right: 0.5rem;
204	top: 0.36rem;
205	z-index: 1;
206	pointer-events: none;
207	}
208	}
209	</style>

uw-it-aca / myuw / 8116728705

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous