sr-npm 1.0.11 → 1.0.13

package/pages/careersPage.js

@@ -0,0 +1,457 @@
+const { getAllPositions } = require('../backend/queries');
+const {wixData} = require('wix-data');
+const { window } = require('@wix/site-window');
+const { query,queryParams,onChange} = require("wix-location-frontend");
+const { location } = require("@wix/site-location");
+
+const {
+    debounce,
+    getFilter,
+  } = require('../public/filterUtils');
+  const { filterBrokenMarkers } = require('../public/utils');
+  let currentLoadedItems =100;
+  const itemsPerPage = 100;
+  let allJobs=[]
+  const RESET_ALL = 'RESET_ALL';
+  let pageParamSet=0;
+  let thisObjectVar;
+  let queryPageVar;
+  let queryKeyWordVar;
+  let queryDepartmentVar;
+  let queryLocationVar;
+  let queryJobTypeVar;
+  let searchInputBlurredFirstTime=true;
+  let deletedParam=false;
+async function careersPageOnReady(_$w,thisObject,queryParams) {
+console.log("queryParams: ", queryParams);
+const { page, keyWord, department, location,jobType } = queryParams;
+queryPageVar=page;
+queryKeyWordVar=keyWord;
+queryDepartmentVar=department;
+queryLocationVar=location;
+queryJobTypeVar=jobType;
+thisObjectVar=thisObject;
+allJobs=await getAllPositions();
+await activateAutoLoad(_$w);
+await bind(_$w);
+await init(_$w);
+await handleUrlParams(_$w);
+
+}
+
+  
+function activateAutoLoad(_$w)
+{
+    _$w("#jobsDataset").onReady(() => {
+        updateCount(_$w);
+        _$w("#section2").onViewportEnter(() => {
+            if (currentLoadedItems<_$w("#jobsDataset").getTotalCount()) {
+                loadMoreJobs(_$w);  
+            }   
+            else {
+                console.log("no more jobs")
+            }        
+        });
+    });  
+}
+
+async function loadMoreJobs(_$w) {
+    let shouldLoad = false;
+    if (pageParamSet == 0) {
+        shouldLoad = true;
+    } else if (query.page % 2 == pageParamSet % 2) {
+        shouldLoad = true;
+    } else {
+        pageParamSet = Number(pageParamSet) + 1;
+    }
+    if (shouldLoad) {
+        _$w("#jobsDataset").loadMore();
+        console.log("loading more jobs");
+        currentLoadedItems = currentLoadedItems + itemsPerPage;
+        const data = _$w("#positionsRepeater").data;
+        console.log("data length is :    ", data.length);
+        setPageParamInUrl();
+    }
+}
+
+
+async function setPageParamInUrl() {
+    if(queryPageVar){
+        queryParams.add({ page: Number(queryPageVar) + 1 })
+        queryPageVar=Number(queryPageVar) + 1
+    }
+    else{
+        queryParams.add({ page: 2 })
+        queryPageVar=2
+    }
+
+   
+}
+async function handleUrlParams(_$w) {
+    if (queryKeyWordVar) {
+        await handleKeyWordParam(_$w,queryKeyWordVar);
+    }
+    if (queryPageVar) {
+        await handlePageParam(_$w);    
+    }
+    if (queryDepartmentVar) {
+        await handleDepartmentParam(_$w,queryDepartmentVar);
+    }
+    if (queryLocationVar) {
+        await handleLocationParam(_$w,queryLocationVar);
+    }
+    if (queryJobTypeVar) {
+        await handleJobTypeParam(_$w,queryJobTypeVar);
+    }
+    await applyFilters(_$w, true); // Skip URL update since we're handling initial URL params
+}
+
+async function handleKeyWordParam(_$w,keyWord) {
+    _$w('#searchInput').value = keyWord;
+    // Use applyFilters to maintain consistency instead of directly setting filter
+}
+
+async function handlePageParam(_$w) {
+    
+    if(allJobs.length/itemsPerPage<queryPageVar){
+        console.log(`max page is: ${allJobs.length/itemsPerPage}`)
+        queryParams.add({ page: allJobs.length/itemsPerPage }) 
+    }
+    if(queryPageVar<=1){
+        console.log("min page is  : 2")
+        pageParamSet=2;
+        queryParams.add({ page: 2 })
+    }
+    if (queryPageVar) {   
+        pageParamSet=queryPageVar;
+        //scrolls a bit to load the dataset data
+        await window.scrollTo(0, 200,{scrollAnimation:false});
+        for (let i = 2; i <= queryPageVar; i++) {
+           await _$w("#jobsDataset").loadMore();
+            currentLoadedItems=currentLoadedItems+itemsPerPage
+        }
+        // the timeout is to wait for the repeater to render, then scroll to the last item.
+            setTimeout(() => {
+            const data = _$w("#positionsRepeater").data;
+            if (data && data.length > 0) {
+                //the dataset each time it loads 100 items
+                const lastIndex = data.length - itemsPerPage;
+                _$w("#positionsRepeater").forEachItem(async ($item, itemData, index) => {
+                    if (index === lastIndex) {
+                        await $item("#positionItem").scrollTo();
+                        console.log("finishied scrolling inside handlePageParam")
+                    }
+                });
+            }
+        }, 200); 
+        }
+    
+}
+
+async function bind(_$w) {
+	await _$w('#jobsDataset').onReady(async () => {
+		await updateCount(_$w);
+        await updateMapMarkers(_$w);
+		
+	});
+
+	if (await window.formFactor() === "Mobile") {
+		_$w('#dropdownsContainer').collapse();
+    } 
+
+}
+
+function init(_$w) {
+    const debouncedSearch = debounce(()=>applyFilters(_$w), 400,thisObjectVar);
+    _$w('#searchInput').onInput(debouncedSearch);
+    _$w('#searchInput').onBlur(()=>{
+        if(searchInputBlurredFirstTime && _$w('#searchInput').value.trim() !== '')
+        {
+        _$w('#searchInput').focus();
+        searchInputBlurredFirstTime=false;
+        }
+    });
+    _$w('#dropdownDepartment, #dropdownLocation, #dropdownJobType').onChange(()=>{
+        console.log("dropdown onChange is triggered");
+        applyFilters(_$w);
+    });
+	_$w('#resetFiltersButton, #clearSearch').onClick(()=>resetFilters(_$w));
+
+	_$w('#openFiltersButton').onClick(()=>{
+		_$w('#dropdownsContainer, #closeFiltersButton').expand();
+	});
+
+	_$w('#closeFiltersButton').onClick(()=>{
+		_$w('#dropdownsContainer, #closeFiltersButton').collapse();
+	});
+
+    //URL onChange
+    onChange(async ()=>{
+       await handleBackAndForth(_$w);
+    });
+}
+
+
+async function handleBackAndForth(_$w){
+        const newQueryParams=await location.query();
+        console.log("newQueryParams: ", newQueryParams);
+        if(newQueryParams.department){
+            queryDepartmentVar=newQueryParams.department;
+        }
+        else{
+            queryDepartmentVar=undefined;
+            deletedParam=true;
+            _$w('#dropdownDepartment').value = '';
+        }
+        if(newQueryParams.location){
+            queryLocationVar=newQueryParams.location;
+        }
+        else{
+            queryLocationVar=undefined;
+            deletedParam=true
+            _$w('#dropdownLocation').value = '';
+        }
+        if(newQueryParams.keyWord){
+            queryKeyWordVar=newQueryParams.keyWord;
+        }
+        else{
+            queryKeyWordVar=undefined;
+            deletedParam=true;
+            _$w('#searchInput').value = '';
+        }
+        if(newQueryParams.jobType){
+            queryJobTypeVar=newQueryParams.jobType;
+        }
+        else{
+            queryJobTypeVar=undefined;
+            deletedParam=true;
+            _$w('#dropdownJobType').value = '';
+        }
+        await handleUrlParams(_$w);
+        
+}
+
+async function applyFilters(_$w, skipUrlUpdate = false) {
+    console.log("applying filters");
+	const dropdownFiltersMapping = [
+		{ elementId: '#dropdownDepartment', field: 'department', value: _$w('#dropdownDepartment').value },
+		{ elementId: '#dropdownLocation', field: 'cityText', value: _$w('#dropdownLocation').value },
+		{ elementId: '#dropdownJobType', field: 'remote', value: _$w('#dropdownJobType').value},
+		{ elementId: '#searchInput', field: 'title', value: _$w('#searchInput').value }
+		];
+    console.log("dropdownFiltersMapping: ", dropdownFiltersMapping);
+    
+
+
+	let filters = [];
+	let value;
+	
+	dropdownFiltersMapping.forEach(filter => {
+		// Handle RESET_ALL values
+		if (filter.value === RESET_ALL) {
+			_$w(filter.elementId).value = '';
+			filter.value = '';
+		}
+
+		// build filters
+		if (filter.value && filter.value.trim() !== '') {
+            if (!skipUrlUpdate) {
+                if(filter.field === 'title'){
+                    queryParams.add({ keyWord: filter.value });
+                }
+                if(filter.field === 'department'){
+                    queryParams.add({ department: encodeURIComponent(filter.value) });
+                }
+                if(filter.field === 'cityText'){
+                    queryParams.add({ location:  encodeURIComponent(filter.value) });
+                }
+                if(filter.field === 'remote'){
+                    if(filter.value === 'true'){
+                        queryParams.add({ jobType: encodeURIComponent("remote") });
+                    }
+                    else{
+                        queryParams.add({ jobType: encodeURIComponent("onsite") });
+                    }
+                }
+            }
+			if(filter.field === 'remote') {	
+				value = filter.value === 'true';
+			} else {
+				value = filter.value;
+			}
+			filters.push({ field: filter.field, searchTerm: value });
+		}
+    else{
+        if (!skipUrlUpdate) {
+            if(filter.field === 'title'){
+                queryParams.remove(["keyWord" ]);
+            }
+            if(filter.field === 'department'){
+                console.log("removing department from url")
+                queryParams.remove(["department" ]);
+            }
+            if(filter.field === 'cityText'){
+                console.log("removing location from url")
+                queryParams.remove(["location" ]);
+            }
+            if(filter.field === 'remote'){
+                console.log("removing jobType from url")
+                queryParams.remove(["jobType" ]);
+            }
+        }
+    }
+	});
+	
+	const filter = await getFilter(filters, 'and');
+    await _$w('#jobsDataset').setFilter(filter);
+    await _$w('#jobsDataset').refresh();
+    
+	const count = await updateCount(_$w);
+    console.log("updating map markers");
+    await updateMapMarkers(_$w);
+    console.log("updating map markers completed");
+    count ? _$w('#resultsMultiState').changeState('results') : _$w('#resultsMultiState').changeState('noResults');
+    
+    
+    // Update reset button state
+	const hasActiveFilters = filters.length > 0;
+	hasActiveFilters? _$w('#resetFiltersButton').enable() : _$w('#resetFiltersButton').disable();
+    
+    
+}
+
+async function resetFilters(_$w) {
+	_$w('#searchInput, #dropdownDepartment, #dropdownLocation, #dropdownJobType').value = '';
+
+    await _$w('#jobsDataset').setFilter(wixData.filter());
+    await _$w('#jobsDataset').refresh();
+
+	_$w('#resultsMultiState').changeState('results');
+
+	_$w('#resetFiltersButton').disable();
+
+    queryParams.remove(["keyWord", "department","page","location","jobType"]);
+    
+
+	await updateCount(_$w);
+    console.log("reseting map markers");
+    await updateMapMarkers(_$w);
+    console.log("reseting map markers completed");
+}
+
+async function updateCount(_$w) {
+	const count = await _$w('#jobsDataset').getTotalCount();
+    _$w('#numOfPositionText').text = `Showing ${count} Open Positions`;
+
+	return count;
+}
+
+async function handleDepartmentParam(_$w,department) {
+    const departmentValue = decodeURIComponent(department);
+    
+        
+    
+    let dropdownOptions = _$w('#dropdownDepartment').options;
+    console.log("dropdown options:", dropdownOptions);
+    const optionsFromCMS=await wixData.query("AmountOfJobsPerDepartment").find();
+    //+1 because of the "All" option
+
+    if(dropdownOptions.length!==optionsFromCMS.items.length+1){
+        fixDropdownOptions('#dropdownDepartment',optionsFromCMS, _$w);
+    }
+
+    if (_$w('#dropdownDepartment').options.find(option => option.value === departmentValue))
+    {
+        console.log("department value found in dropdown options ",departmentValue);
+        _$w('#dropdownDepartment').value = departmentValue;
+    }
+    else{
+        console.warn("department value not found in dropdown options");
+        queryParams.remove(["department" ]);
+
+    }
+    
+    
+     
+}
+
+function fixDropdownOptions(dropdown,optionsFromCMS, _$w){
+    let dropdownOptions = [];
+    dropdownOptions=[{
+        label: "All",
+        value: "RESET_ALL"
+    }]
+    dropdownOptions.push(...optionsFromCMS.items.map(item=>({
+        label: item.title,
+        value: item.title
+    })));
+    _$w(dropdown).options=dropdownOptions;
+    console.warn("something is wrong with the dropdown options, fixing it");
+
+}
+
+async function handleLocationParam(_$w,location) {
+    const locationValue = decodeURIComponent(location);
+    let dropdownOptions = _$w('#dropdownLocation').options;
+    console.log("location dropdown options:", dropdownOptions);
+    const optionsFromCMS=await wixData.query("cities").find();
+    //+1 because of the "All" option
+    if(dropdownOptions.length!==optionsFromCMS.items.length+1){
+        fixDropdownOptions('#dropdownLocation',optionsFromCMS, _$w);
+    }
+    
+    const option=_$w('#dropdownLocation').options.find(option => option.value.toLowerCase() === locationValue.toLowerCase())
+
+    if(option){
+        _$w('#dropdownLocation').value = option.value;
+    }
+    else{
+        console.warn("location value not found in dropdown options");
+        queryParams.remove(["location"]);
+    }
+    
+}
+
+async function handleJobTypeParam(_$w,jobType) {
+    const jobTypeValue = decodeURIComponent(jobType);
+    let dropdownOptions = _$w('#dropdownJobType').options;
+    console.log("jobType dropdown options:", dropdownOptions);
+    let option;
+    if(jobTypeValue.toLowerCase()==="remote"){
+        option="true";
+    }
+    if(jobTypeValue.toLowerCase()==="onsite"){
+        option="false";
+    }
+    if(option){
+        _$w('#dropdownJobType').value = option;
+    }
+    else{
+        console.warn("jobType value not found in dropdown options");
+        queryParams.remove(["jobType"]);
+    }
+}
+
+async function updateMapMarkers(_$w){
+    const numOfItems = await _$w('#jobsDataset').getTotalCount();
+    const items = await _$w('#jobsDataset').getItems(0, numOfItems);
+    const markers = filterBrokenMarkers(items.items).map(item => {
+            const location = item.locationAddress.location;
+            return {
+                location: {
+                    latitude: location.latitude,
+                    longitude: location.longitude
+                },
+                address: item.locationAddress.formatted,
+                title: item.title
+            };
+        });
+    //@ts-ignore
+    _$w('#googleMaps').setMarkers(markers);
+
+}
+
+
+module.exports = {
+    careersPageOnReady,
+  };

package/pages/homePage.js

@@ -0,0 +1,136 @@
+const {
+    debounce,
+    getFilter,
+  } = require('../public/filterUtils');
+  const { handleOnLocationClick } = require('../public/mapUtils');
+  const { filterBrokenMarkers } = require('../public/utils');
+const { location } = require('@wix/site-location');
+let thisObjectVar;
+let searchByCityFlag=false;
+async function homePageOnReady(_$w,thisObject) {
+    thisObjectVar=thisObject;
+    await bind(_$w);
+    await init(_$w);
+    
+  }
+
+  function bind(_$w) {
+    _$w('#teamRepeater').onItemReady(($item, itemData) => {
+        $item('#teamButton').label = `View ${itemData.count} Open Positions`;
+        $item('#teamButton').onClick(()=>{
+            const department = encodeURIComponent(itemData.title);
+            location.to(`/positions?department=${department}`);
+        });
+    });
+
+    _$w('#citiesDataset').onReady(async () => {
+        const numOfItems = await _$w('#citiesDataset').getTotalCount();
+        const items = await _$w('#citiesDataset').getItems(0, numOfItems);
+        let baseUrl = await location.baseUrl();
+        const markers = filterBrokenMarkers(items.items).map(item => {
+            const location = item.locationAddress.location;
+            const cityName = encodeURIComponent(item.title); // Use the city name from the item
+            const cityLinkUrl = `${baseUrl}/positions?location=${cityName}`; // Add city as search parameter
+            return {
+                location: {
+                    latitude: location.latitude,
+                    longitude: location.longitude
+                },
+                 address: item.locationAddress.formatted,
+                 title: item.title,
+                link: cityLinkUrl,
+                linkTitle:`View ${item.count} Open Positions`
+            };
+        });
+        //@ts-ignore
+        _$w('#googleMaps').setMarkers(markers);
+    });
+}
+
+function init(_$w) {
+    const debouncedInput = debounce(()=>handleSearchInput(_$w), 400,thisObjectVar);
+
+    _$w('#searchInput').onInput(debouncedInput);
+    _$w('#searchInput').maxLength = 40;
+    _$w('#searchButton').onClick(()=>handleSearch(_$w('#searchInput').value));
+
+    _$w('#searchInput').onKeyPress((event) => {
+        if (event.key === 'Enter') {
+            handleSearch(_$w('#searchInput').value);
+        }
+    });
+
+    _$w('#searchInput').onFocus(() => {
+        if (_$w(`#resultsContainer`).collapsed) {
+            _$w(`#resultsContainer`).expand();
+        }
+    });
+
+    _$w('#searchInput').onBlur(() => {
+        setTimeout(() => {
+            if (!_$w(`#resultsContainer`).collapsed) {
+                _$w(`#resultsContainer`).collapse();
+            }
+        }, 250);
+    });
+
+    _$w('#locationItem').onClick((event)=>{
+        handleOnLocationClick(event, '#locationsRepeater', '#googleMaps', _$w);
+    });
+}
+
+async function handleSearchInput(_$w) {
+    let searchInput;
+    let count;
+
+    searchInput = _$w('#searchInput').value;
+    const trimmedInput = searchInput.trim();
+    const searchByTitle=[{field: 'title', searchTerm: trimmedInput}];
+    const searchByCity=[{field: 'cityText', searchTerm: trimmedInput}];
+
+    
+    let filter = await getFilter(searchByTitle);
+
+    await _$w('#jobsDataset').setFilter(filter);
+    await _$w('#jobsDataset').refresh();
+
+    count = _$w('#jobsDataset').getTotalCount();
+
+    if (count > 0) {
+        searchByCityFlag=false;
+        _$w('#resultsContainer').expand();
+        _$w('#searchMultiStateBox').changeState('results');
+    } else {    
+        filter=await getFilter(searchByCity);
+        await _$w('#jobsDataset').setFilter(filter);
+        await _$w('#jobsDataset').refresh();
+        count = _$w('#jobsDataset').getTotalCount();
+        if(count > 0)
+        {
+            searchByCityFlag=true;
+            _$w('#resultsContainer').expand();
+            _$w('#searchMultiStateBox').changeState('results');
+        }
+        else{
+            searchByCityFlag=false;
+            _$w('#searchMultiStateBox').changeState('noResults');
+        }
+    }
+}
+
+function handleSearch(searchInput) {
+    const trimmedInput = searchInput.trim();
+    if (trimmedInput) {
+        if(searchByCityFlag){
+            location.to(`/positions?location=${trimmedInput}`);
+        }
+        else{
+            location.to(`/positions?keyWord=${trimmedInput}`);
+        }
+    }
+}
+
+
+module.exports = {
+    homePageOnReady,
+  };

package/pages/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+    ...require('./positionPage'),
+    ...require('./homePage'),
+    ...require('./careersPage'),
+  };
+  

package/pages/positionPage.js

@@ -0,0 +1,34 @@
+const {
+    htmlToText
+  } = require('../public/utils');
+
+  async function positionPageOnReady(_$w) {
+
+    await bind(_$w);
+  }
+
+  async function bind(_$w) {
+    _$w('#datasetJobsItem').onReady(async () => {
+
+        const item = await _$w('#datasetJobsItem').getCurrentItem();
+
+        _$w('#companyDescriptionText').text = htmlToText(item.jobDescription.companyDescription.text);        
+        _$w('#responsibilitiesText').text = htmlToText(item.jobDescription.jobDescription.text);
+        _$w('#qualificationsText').text = htmlToText(item.jobDescription.qualifications.text);
+        _$w('#relatedJobsTitleText').text = `More ${item.department} Positions`;
+    });
+
+    _$w('#relatedJobsDataset').onReady(() => {
+        const count = _$w('#relatedJobsDataset').getTotalCount();
+       if(!count){
+            _$w('#relatedJobsSection').collapse();
+       }
+    });
+}
+
+  
+  
+  module.exports = {
+    positionPageOnReady,
+  };
+  

package/public/filterUtils.js

@@ -0,0 +1,39 @@
+//const { items:wixData } = require('@wix/data');
+const {wixData} = require('wix-data');
+
+
+function getFilter(fieldsToSearch = [], mode = 'or') {
+    const baseFilter = wixData.filter();
+    // if no fields to search, return empty filter
+    if (fieldsToSearch.length === 0) {
+        return baseFilter;
+    }
+
+    // build filters
+    let filter;
+    fieldsToSearch.forEach(({ field, searchTerm }) => {
+        const condition = typeof searchTerm === 'boolean' 
+            ? baseFilter.eq(field, searchTerm)
+            : baseFilter.contains(field, searchTerm);
+
+        filter = filter
+            ? (mode === 'or' ? filter.or(condition) : filter.and(condition))
+            : condition;
+    });
+    return filter;
+}
+
+function debounce(fn, delay = 400,thisObject) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        console.log("thisObject is: ", thisObject);
+        console.log("args is: ", args);
+        timeout = setTimeout(() => fn.apply(thisObject, args), delay);
+    };
+}
+
+module.exports = {
+    getFilter,
+    debounce
+  };

package/public/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+    ...require('./utils'),
+    ...require('./filterUtils'),
+    ...require('./mapUtils'),
+  };
+  

package/public/mapUtils.js

@@ -0,0 +1,16 @@
+function handleOnLocationClick(event, repeaterId, mapId, _$w) {
+    const FOCUS_ZOOM = 13;
+    const { itemId } = event.context;
+    const itemData = _$w(repeaterId).data.find(item => item._id === itemId);
+
+    const location = itemData.locationAddress.location;
+  
+    //@ts-ignore
+    _$w(mapId).setCenter(location);
+    //@ts-ignore
+    _$w(mapId).setZoom(FOCUS_ZOOM);
+}
+
+module.exports = {
+    handleOnLocationClick
+  };