问:
"make" comment does not work after "cmake" on Mac OSX
Trying to install a plugin to Gazebo 11 on my Macbook Air M1. I will try to perform co-simulation between Simulink and Gazebo. After extracting gazeboplugin.zip , I applied

```<code>mkdir build
cd build
</code>```

Then I tried

```<code>cmake ..
</code>```

I got an error

```<code>CMake Error at CMakeLists.txt:32 (message):
  The compiler /Library/Developer/CommandLineTools/usr/bin/c++ has no C++11
  support.  Please use a different C++ compiler.
</code>```

Then I solved this by changing  cmakelists.txt from

```<code>#/* Copyright 2019-2020 The MathWorks, Inc. */
##########################################
# CMakeLists.txt for gazebo_plugin_for_simulink #
##########################################

cmake_minimum_required(VERSION 2.8)

PROJECT(gazebo_plugin_for_simulink)

#################################
# Specify the CMake module path #
#################################

SET(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${CMAKE_SOURCE_DIR}/cmake/")

set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS}  -Wall  -O3 -march=native ")
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -Wall   -O3 -march=native")

# Check C++11 or C++0x support
include(CheckCXXCompilerFlag)
CHECK_CXX_COMPILER_FLAG("-std=c++17" COMPILER_SUPPORTS_CXX17)
CHECK_CXX_COMPILER_FLAG("-std=c++11" COMPILER_SUPPORTS_CXX11)
CHECK_CXX_COMPILER_FLAG("-std=c++0x" COMPILER_SUPPORTS_CXX0X)

if(COMPILER_SUPPORTS_CXX11)
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")
   add_definitions(-DCOMPILEDWITHC11)
   message(STATUS "Using flag -std=c++11.")
elseif(COMPILER_SUPPORTS_CXX0X)
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++0x")
   add_definitions(-DCOMPILEDWITHC0X)
   message(STATUS "Using flag -std=c++0x.")
elseif(COMPILER_SUPPORTS_CXX17)
    set (CMAKE_CXX_STANDARD 17)
    message(STATUS "Using C++17 standard")
else()
   message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 support. Please use a different C++ compiler.")
endif()
SET(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11 -pthread")

IF(${CMAKE_CXX_COMPILER_ID} STREQUAL "Clang")
  SET(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -stdlib=libstdc++ -Wno-deprecated-declarations -Wno-unused-function")
ENDIF()

find_package(Boost 1.58.0 REQUIRED COMPONENTS date_time)
find_package(gazebo REQUIRED)

# Gazebo Minumum Supported version number
SET(GAZEBO_MIN_SUPPORTED_VERSION "9")
# Gazebo Maximum Supported version number
SET(GAZEBO_MAX_SUPPORTED_VERSION "11")

message(STATUS "Found Gazebo ${GAZEBO_VERSION}: major version is ${GAZEBO_MAJOR_VERSION}")

# Validate Installed Gazebo version
if("${GAZEBO_MAJOR_VERSION}" VERSION_LESS "${GAZEBO_MIN_SUPPORTED_VERSION}" OR "${GAZEBO_MAJOR_VERSION}" VERSION_GREATER "${GAZEBO_MAX_SUPPORTED_VERSION}" )

  message(FATAL_ERROR "\nThe installed version of Gazebo is not supported for Gazebo Co-Simulation Plugin generation.\n"
   " The Gazebo Co-Simulation Plugin supports,\n"
   "    minimum Gazebo version: gazebo ${GAZEBO_MIN_SUPPORTED_VERSION}.x series\n"
   "    maximum Gazebo version: gazebo ${GAZEBO_MAX_SUPPORTED_VERSION}.x series\n")

endif()

include_directories(
include/
msgsproto/
${Boost_INCLUDE_DIR}
${GAZEBO_INCLUDE_DIRS}
)

link_directories(
  ${GAZEBO_LIBRARY_DIRS}
)

###############################################
# USE => cmake .. -DTESTING=ON  to trun ON testing

option(TESTING "plugin testing" OFF)

if(TESTING)
   ADD_SUBDIRECTORY(msgsproto/pkgtest)
endif()

ADD_SUBDIRECTORY(msgsproto)
ADD_SUBDIRECTORY(src/transport)
ADD_SUBDIRECTORY(src/gazeboserver)
ADD_SUBDIRECTORY(src/gazebocustom)
ADD_SUBDIRECTORY(src/gazeboplugin)

if(TESTING)
   ADD_SUBDIRECTORY(src/gazeboplugin/pkgtest)
   ADD_SUBDIRECTORY(src/gazeboserver/gazebomsghandler/pkgtest)
   ADD_SUBDIRECTORY(src/gazebocustom/gazebocustommsghandler/pkgtest)
endif()
</code>```

to

```<code># Sets the C++ compiler
# Available: C++11, C++14 and C++17
cmake_minimum_required(VERSION 3.25)
project(ProjectName)
include(CheckCXXCompilerFlag)

CHECK_CXX_COMPILER_FLAG("-std=c++17" COMPILER_SUPPORTS_CXX17)
CHECK_CXX_COMPILER_FLAG("-std=c++14" COMPILER_SUPPORTS_CXX14)
CHECK_CXX_COMPILER_FLAG("-std=c++11" COMPILER_SUPPORTS_CXX11)
CHECK_CXX_COMPILER_FLAG("-std=c++0x" COMPILER_SUPPORTS_CXX0X)

if( (${CMAKE_VERSION} VERSION_GREATER "3.8.2") OR (${CMAKE_VERSION} VERSION_EQUAL "3.8.2") )

  if(COMPILER_SUPPORTS_CXX17)
    set (CMAKE_CXX_STANDARD 17)
    message(STATUS "Using C++17 standard")
  elseif(COMPILER_SUPPORTS_CXX14)
    set (CMAKE_CXX_STANDARD 14)
    message(STATUS "Using C++14 standard")
  elseif(COMPILER_SUPPORTS_CXX11)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  elseif(COMPILER_SUPPORTS_CXX0X)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  else()
    message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 or above support. Please use a different C++ compiler.")
  endif()

else()

  if(COMPILER_SUPPORTS_CXX14)
    set (CMAKE_CXX_STANDARD 14)
    message(STATUS "Using C++14 standard")
  elseif(COMPILER_SUPPORTS_CXX11)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  elseif(COMPILER_SUPPORTS_CXX0X)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  else()
    message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 or above support. Please use a different C++ compiler.")
  endif()

endif()
</code>```

After solving ( I guess ) this issue I got this after making cmake ..

```<code>mfurkanozata@Furkans-MacBook-Air build % cmake ..

-- Using C++17 standard

-- Configuring done

-- Generating done

-- Build files have been written to: /Users/mfurkanozata/src/GazeboPlugin
</code>```

Finally I aplly make command and got nothing. The plugin was not built and as usual after applying

```<code>gazebo ../world/multiSensorPluginTest.world --verbose
</code>```

I got this error

```<code>[Err] [Plugin.hh:212] Failed to load plugin lib/libGazeboCoSimPlugin.so: dlopen(lib/libGazeboCoSimPlugin.so, 0x0009): tried: 'lib/libGazeboCoSimPlugin.so' (no such file), '/System/Volumes/Preboot/Cryptexes/OSlib/libGazeboCoSimPlugin.so' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/lib/../lib/lib/libGazeboCoSimPlugin.so' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/bin/../lib/lib/libGazeboCoSimPlugin.so' (no such file), '/usr/lib/lib/libGazeboCoSimPlugin.so' (no such file, not in dyld cache), 'lib/libGazeboCoSimPlugin.so' (no such file)

Failed to load plugin lib/libGazeboCoSimPlugin.dylib: dlopen(lib/libGazeboCoSimPlugin.dylib, 0x0009): tried: 'lib/libGazeboCoSimPlugin.dylib' (no such file), '/System/Volumes/Preboot/Cryptexes/OSlib/libGazeboCoSimPlugin.dylib' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/lib/../lib/lib/libGazeboCoSimPlugin.dylib' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/bin/../lib/lib/libGazeboCoSimPlugin.dylib' (no such file), '/usr/lib/lib/libGazeboCoSimPlugin.dylib' (no such file, not in dyld cache), 'lib/libGazeboCoSimPlugin.dylib' (no such file)
</code>```
```<code></code>```

Can you help me in this issue?

Body:
Trying to install a plugin to Gazebo 11 on my Macbook Air M1. I will try to perform co-simulation between Simulink and Gazebo. After extracting gazeboplugin.zip , I applied

mkdir build
cd build

Then I tried

cmake ..

I got an error

CMake Error at CMakeLists.txt:32 (message):
  The compiler /Library/Developer/CommandLineTools/usr/bin/c++ has no C++11
  support.  Please use a different C++ compiler.

Then I solved this by changing  cmakelists.txt from

#/* Copyright 2019-2020 The MathWorks, Inc. */
##########################################
# CMakeLists.txt for gazebo_plugin_for_simulink #
##########################################

cmake_minimum_required(VERSION 2.8)

PROJECT(gazebo_plugin_for_simulink)

#################################
# Specify the CMake module path #
#################################

SET(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${CMAKE_SOURCE_DIR}/cmake/")

set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS}  -Wall  -O3 -march=native ")
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -Wall   -O3 -march=native")

# Check C++11 or C++0x support
include(CheckCXXCompilerFlag)
CHECK_CXX_COMPILER_FLAG("-std=c++17" COMPILER_SUPPORTS_CXX17)
CHECK_CXX_COMPILER_FLAG("-std=c++11" COMPILER_SUPPORTS_CXX11)
CHECK_CXX_COMPILER_FLAG("-std=c++0x" COMPILER_SUPPORTS_CXX0X)

if(COMPILER_SUPPORTS_CXX11)
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")
   add_definitions(-DCOMPILEDWITHC11)
   message(STATUS "Using flag -std=c++11.")
elseif(COMPILER_SUPPORTS_CXX0X)
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++0x")
   add_definitions(-DCOMPILEDWITHC0X)
   message(STATUS "Using flag -std=c++0x.")
elseif(COMPILER_SUPPORTS_CXX17)
    set (CMAKE_CXX_STANDARD 17)
    message(STATUS "Using C++17 standard")
else()
   message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 support. Please use a different C++ compiler.")
endif()
SET(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11 -pthread")

IF(${CMAKE_CXX_COMPILER_ID} STREQUAL "Clang")
  SET(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -stdlib=libstdc++ -Wno-deprecated-declarations -Wno-unused-function")
ENDIF()

find_package(Boost 1.58.0 REQUIRED COMPONENTS date_time)
find_package(gazebo REQUIRED)

# Gazebo Minumum Supported version number
SET(GAZEBO_MIN_SUPPORTED_VERSION "9")
# Gazebo Maximum Supported version number
SET(GAZEBO_MAX_SUPPORTED_VERSION "11")

message(STATUS "Found Gazebo ${GAZEBO_VERSION}: major version is ${GAZEBO_MAJOR_VERSION}")

# Validate Installed Gazebo version
if("${GAZEBO_MAJOR_VERSION}" VERSION_LESS "${GAZEBO_MIN_SUPPORTED_VERSION}" OR "${GAZEBO_MAJOR_VERSION}" VERSION_GREATER "${GAZEBO_MAX_SUPPORTED_VERSION}" )

  message(FATAL_ERROR "\nThe installed version of Gazebo is not supported for Gazebo Co-Simulation Plugin generation.\n"
   " The Gazebo Co-Simulation Plugin supports,\n"
   "    minimum Gazebo version: gazebo ${GAZEBO_MIN_SUPPORTED_VERSION}.x series\n"
   "    maximum Gazebo version: gazebo ${GAZEBO_MAX_SUPPORTED_VERSION}.x series\n")

endif()

include_directories(
include/
msgsproto/
${Boost_INCLUDE_DIR}
${GAZEBO_INCLUDE_DIRS}
)

link_directories(
  ${GAZEBO_LIBRARY_DIRS}
)

###############################################
# USE => cmake .. -DTESTING=ON  to trun ON testing

option(TESTING "plugin testing" OFF)

if(TESTING)
   ADD_SUBDIRECTORY(msgsproto/pkgtest)
endif()

ADD_SUBDIRECTORY(msgsproto)
ADD_SUBDIRECTORY(src/transport)
ADD_SUBDIRECTORY(src/gazeboserver)
ADD_SUBDIRECTORY(src/gazebocustom)
ADD_SUBDIRECTORY(src/gazeboplugin)

if(TESTING)
   ADD_SUBDIRECTORY(src/gazeboplugin/pkgtest)
   ADD_SUBDIRECTORY(src/gazeboserver/gazebomsghandler/pkgtest)
   ADD_SUBDIRECTORY(src/gazebocustom/gazebocustommsghandler/pkgtest)
endif()

to

# Sets the C++ compiler
# Available: C++11, C++14 and C++17
cmake_minimum_required(VERSION 3.25)
project(ProjectName)
include(CheckCXXCompilerFlag)

CHECK_CXX_COMPILER_FLAG("-std=c++17" COMPILER_SUPPORTS_CXX17)
CHECK_CXX_COMPILER_FLAG("-std=c++14" COMPILER_SUPPORTS_CXX14)
CHECK_CXX_COMPILER_FLAG("-std=c++11" COMPILER_SUPPORTS_CXX11)
CHECK_CXX_COMPILER_FLAG("-std=c++0x" COMPILER_SUPPORTS_CXX0X)

if( (${CMAKE_VERSION} VERSION_GREATER "3.8.2") OR (${CMAKE_VERSION} VERSION_EQUAL "3.8.2") )

  if(COMPILER_SUPPORTS_CXX17)
    set (CMAKE_CXX_STANDARD 17)
    message(STATUS "Using C++17 standard")
  elseif(COMPILER_SUPPORTS_CXX14)
    set (CMAKE_CXX_STANDARD 14)
    message(STATUS "Using C++14 standard")
  elseif(COMPILER_SUPPORTS_CXX11)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  elseif(COMPILER_SUPPORTS_CXX0X)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  else()
    message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 or above support. Please use a different C++ compiler.")
  endif()

else()

  if(COMPILER_SUPPORTS_CXX14)
    set (CMAKE_CXX_STANDARD 14)
    message(STATUS "Using C++14 standard")
  elseif(COMPILER_SUPPORTS_CXX11)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  elseif(COMPILER_SUPPORTS_CXX0X)
    set (CMAKE_CXX_STANDARD 11)
    message(STATUS "Using C++11 standard")
  else()
    message(FATAL_ERROR "The compiler ${CMAKE_CXX_COMPILER} has no C++11 or above support. Please use a different C++ compiler.")
  endif()

endif()

After solving ( I guess ) this issue I got this after making cmake ..

mfurkanozata@Furkans-MacBook-Air build % cmake ..

-- Using C++17 standard

-- Configuring done

-- Generating done

-- Build files have been written to: /Users/mfurkanozata/src/GazeboPlugin

Finally I aplly make command and got nothing. The plugin was not built and as usual after applying

gazebo ../world/multiSensorPluginTest.world --verbose

I got this error

[Err] [Plugin.hh:212] Failed to load plugin lib/libGazeboCoSimPlugin.so: dlopen(lib/libGazeboCoSimPlugin.so, 0x0009): tried: 'lib/libGazeboCoSimPlugin.so' (no such file), '/System/Volumes/Preboot/Cryptexes/OSlib/libGazeboCoSimPlugin.so' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/lib/../lib/lib/libGazeboCoSimPlugin.so' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/bin/../lib/lib/libGazeboCoSimPlugin.so' (no such file), '/usr/lib/lib/libGazeboCoSimPlugin.so' (no such file, not in dyld cache), 'lib/libGazeboCoSimPlugin.so' (no such file)

Failed to load plugin lib/libGazeboCoSimPlugin.dylib: dlopen(lib/libGazeboCoSimPlugin.dylib, 0x0009): tried: 'lib/libGazeboCoSimPlugin.dylib' (no such file), '/System/Volumes/Preboot/Cryptexes/OSlib/libGazeboCoSimPlugin.dylib' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/lib/../lib/lib/libGazeboCoSimPlugin.dylib' (no such file), '/opt/homebrew/Cellar/gazebo11/11.12.0_2/bin/../lib/lib/libGazeboCoSimPlugin.dylib' (no such file), '/usr/lib/lib/libGazeboCoSimPlugin.dylib' (no such file, not in dyld cache), 'lib/libGazeboCoSimPlugin.dylib' (no such file)

Can you help me in this issue?


来源: stackexchange

问:
How to download my app source code from Google Cloud?
I have ancient app on google cloud (google app engine)

In ancient times I was able to download from google cloud using appcfg.py

But with new cloud console can't.

Using debug url doesn't help. It shows only app.yml and 404.html

It says Debugger encountered a problem. Please view the side panel for more details.

On side panel The debugger could not find a debug target for the application default - 20170408t131011 .

I've turned on debugger from sidepanel and linked billing account, still - nothing helps =(

Storage is empty

here my app.yml

 runtime: php55
 api_version: 1
 threadsafe: true
 default_expiration: "24h"

 handlers:
 - url: /
   static_files: public/index.html
   upload: public/index.html
   secure: always

 - url: /(.*)
   static_files: public/\1
   upload: public/(.*)
   secure: always
```

ContentLicense: CC BY-SA 4.0


问:
Increase hexadecimal places
I'm trying to increase the number of places a hexadecimal is using.
I've managed to do this when I'm using String, by using String.format("%04X", bytes).

But my source is of ByteArray and I would like to avoid partially converting it to String, change the number of places and then convert it back into bytes.

So the idea is in my source I have something like this 0D which I want to be 000D in my final representation. But I want to achieve this before fully converting my source to hex representation.

Is there a more direct way to achieve this?

Title: Increase hexadecimal places


问:
update out of stock product on product category
I have to change 'out of stock' on the category page,
I do the code on function.php but does not work on the product category page</p>
```<code>add_filter( 'woocommerce_get_availability', 'change_out_of_stock_text_woocommerce', 1, 2);

function change_out_of_stock_text_woocommerce( $availability, $product_to_check ) {

    // Change Out of Stock Text
    if ( ! $product_to_check->is_in_stock() ) {

        $availability['availability'] = __('sold', 'woocommerce');

    }
    return $availability;
}

</code>```

Body:
I have to change 'out of stock' on the category page,
I do the code on function.php but does not work on the product category page

add_filter( 'woocommerce_get_availability', 'change_out_of_stock_text_woocommerce', 1, 2);

function change_out_of_stock_text_woocommerce( $availability, $product_to_check ) {

    // Change Out of Stock Text
    if ( ! $product_to_check->is_in_stock() ) {

        $availability['availability'] = __('sold', 'woocommerce');

    }
    return $availability;
}


问:
Binder validation is not working properly in vaadin Hilla (23.3.0)
When I tried to implement validation  code in Hilla(1.3.0), the validation message is not showing near the text-field, but it is  showing in the notification area.

I expecting to get the error message near the text-field.

```<code>this.binder.for(model.name).addValidator(
      new Size({
      message: 'Please pick a username 3 to 15 symbols long',
      min:3
      }));
</code>```

output

Body:
When I tried to implement validation  code in Hilla(1.3.0), the validation message is not showing near the text-field, but it is  showing in the notification area.

I expecting to get the error message near the text-field.

this.binder.for(model.name).addValidator(
      new Size({
      message: 'Please pick a username 3 to 15 symbols long',
      min:3
      }));

output


问:
10th degree polynomial regression function the easy way?
I am quite new to R and I am asked to generate the 10th degree polynomial regression function. During the course I learned it that way for example a 3 degree polynomial regression:

```<code>reg_poly3 = lm_robust(testscr ~ avginc + I(avginc^2) + I(avginc^3), data=school)
</code>```

I find it very annoying to do this for the 10th degree so is there an easy way for example with a for loop or so?

Body:
I am quite new to R and I am asked to generate the 10th degree polynomial regression function. During the course I learned it that way for example a 3 degree polynomial regression:

reg_poly3 = lm_robust(testscr ~ avginc + I(avginc^2) + I(avginc^3), data=school)

I find it very annoying to do this for the 10th degree so is there an easy way for example with a for loop or so?


问:
org.apache.poi.ss.usermodel.Sheet.getLastRowNum() always return 1048575
I try to get last row index in Excel file using apache poi but getLastRowNum() always returns wrong number of rows and the number is always 1048575 .

My xlsx is simple. It has only three rows with content.

Here is the relevant code snippet:

```<code>Sheet sheet = workbook.getSheetAt(0);
            int rowNum = sheet.getLastRowNum();
            log.info("LastRowNum " + rowNum);
</code>```

Apache POI version:

```<code><dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>5.2.2</version>
        </dependency>
</code>```

OS: "Arch Linux"

JAVA Version:

```<code>openjdk version "17.0.5" 2022-10-18
OpenJDK Runtime Environment Temurin-17.0.5+8 (build 17.0.5+8)
OpenJDK 64-Bit Server VM Temurin-17.0.5+8 (build 17.0.5+8, mixed mode, sharing)
</code>```

I try upgrading apache poi but this doesn't fix the things.

Body:
I try to get last row index in Excel file using apache poi but getLastRowNum() always returns wrong number of rows and the number is always 1048575 .

My xlsx is simple. It has only three rows with content.

Here is the relevant code snippet:

Sheet sheet = workbook.getSheetAt(0);
            int rowNum = sheet.getLastRowNum();
            log.info("LastRowNum " + rowNum);

Apache POI version:

<dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>5.2.2</version>
        </dependency>

OS: "Arch Linux"

JAVA Version:

openjdk version "17.0.5" 2022-10-18
OpenJDK Runtime Environment Temurin-17.0.5+8 (build 17.0.5+8)
OpenJDK 64-Bit Server VM Temurin-17.0.5+8 (build 17.0.5+8, mixed mode, sharing)

I try upgrading apache poi but this doesn't fix the things.


问:
Javascript / Typescript - How to avoid duplicated code
I have a piece of code that basically repeats itself. The only difference is the type of params and scan invokes this.getDbClient().scan(params) and query invokes this.getDbClient().query(params)

```<code>static scanTable = async (params: DynamoDB.DocumentClient.ScanInput) => {
    let items;
    let scanResults: any[] = [];
    do {
        items = await this.getDbClient().scan(params).promise();
        (items.Items || []).forEach((item) => scanResults.push(item));
        params.ExclusiveStartKey = items.LastEvaluatedKey;
    } while (typeof items.LastEvaluatedKey !== 'undefined');

    return scanResults;
}

static queryTable = async (params: DynamoDB.DocumentClient.QueryInput) => {
    let items;
    let scanResults: any[] = [];
    do {
        items = await this.getDbClient().query(params).promise();
        (items.Items || []).forEach((item) => scanResults.push(item));
        params.ExclusiveStartKey = items.LastEvaluatedKey;
    } while (typeof items.LastEvaluatedKey !== 'undefined');

    return scanResults;
}
</code>```

I tried to extract the function and use

```<code>async (params: DynamoDB.DocumentClient.ScanInput | DynamoDB.DocumentClient.QueryInput)
</code>```

and then trying to do

```<code>if params instanceof DynamoDB.DocumentClient.ScanInput call `scan(params)`
else if params instanceof DynamoDB.DocumentClient.QueryInput call `query(params)`
</code>```

but it seems that instanceof cannot be used

ERROR: Property 'ScanInput' does not exist on type 'typeof
DocumentClient'.ts(2339)

ERROR: Property 'QueryInput' does not exist on type 'typeof
DocumentClient'.ts(2339)

What can I do here to avoid duplications?

Body:
I have a piece of code that basically repeats itself. The only difference is the type of params and scan invokes this.getDbClient().scan(params) and query invokes this.getDbClient().query(params)

static scanTable = async (params: DynamoDB.DocumentClient.ScanInput) => {
    let items;
    let scanResults: any[] = [];
    do {
        items = await this.getDbClient().scan(params).promise();
        (items.Items || []).forEach((item) => scanResults.push(item));
        params.ExclusiveStartKey = items.LastEvaluatedKey;
    } while (typeof items.LastEvaluatedKey !== 'undefined');

    return scanResults;
}

static queryTable = async (params: DynamoDB.DocumentClient.QueryInput) => {
    let items;
    let scanResults: any[] = [];
    do {
        items = await this.getDbClient().query(params).promise();
        (items.Items || []).forEach((item) => scanResults.push(item));
        params.ExclusiveStartKey = items.LastEvaluatedKey;
    } while (typeof items.LastEvaluatedKey !== 'undefined');

    return scanResults;
}

I tried to extract the function and use

async (params: DynamoDB.DocumentClient.ScanInput | DynamoDB.DocumentClient.QueryInput)

and then trying to do

if params instanceof DynamoDB.DocumentClient.ScanInput call `scan(params)`
else if params instanceof DynamoDB.DocumentClient.QueryInput call `query(params)`

but it seems that instanceof cannot be used

ERROR: Property 'ScanInput' does not exist on type 'typeof
DocumentClient'.ts(2339)

ERROR: Property 'QueryInput' does not exist on type 'typeof
DocumentClient'.ts(2339)

What can I do here to avoid duplications?


问:
Custom buttons in full calender
I am trying to add custom buttons to the full calendar as per the UI requirement. I want to add and subtract one year on right and left custom buttons click. But the problem is when I call this. calendar('prevYear') on click functions, it throws an error this. calendar is not a function as I am accessing the calendar property inside the calendar init phase. How can implement this click function?
I am using alpine.js to initialize the full calendar and define its option. Is there any way to only change the icon of left and right but the function is automatically added by the full calender ?</p>
```<code><div
     x-data="{
         calendar: null,
         events: [

         ],

         init() {
             this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
                 initialDate: '2022-12-19',
                 initialView: 'dayGridMonth',
                 selectable: true,
                 unselectAuto: false,
                 editable: true,
                 customButtons: {
                  prevYear: {
                    text: '<<',
                    click: function() {
                     this.calendar('prevYear')

                    }
                  },
                  nextYear: {
                    text: '>>',
                    click: function() {
                     this.calendar('nextYear')

                    }
                  }
                },
                 headerToolbar: {
                  left: 'prevYear',
                  center: 'title',
                  right: 'nextYear'
                },
                views: {
                  dayGridMonth: {
                    titleFormat: {  year: 'numeric' }

                  }
                },

             })

             this.calendar.render()

         },

     }"
    >
     <div x-ref="calendar"></div>

    </div>
</code>```

Title: Custom buttons in full calender

Body:
I am trying to add custom buttons to the full calendar as per the UI requirement. I want to add and subtract one year on right and left custom buttons click. But the problem is when I call this. calendar('prevYear') on click functions, it throws an error this. calendar is not a function as I am accessing the calendar property inside the calendar init phase. How can implement this click function?
I am using alpine.js to initialize the full calendar and define its option. Is there any way to only change the icon of left and right but the function is automatically added by the full calender ?

<div
     x-data="{
         calendar: null,
         events: [

         ],

         init() {
             this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
                 initialDate: '2022-12-19',
                 initialView: 'dayGridMonth',
                 selectable: true,
                 unselectAuto: false,
                 editable: true,
                 customButtons: {
                  prevYear: {
                    text: '<<',
                    click: function() {
                     this.calendar('prevYear')

                    }
                  },
                  nextYear: {
                    text: '>>',
                    click: function() {
                     this.calendar('nextYear')

                    }
                  }
                },
                 headerToolbar: {
                  left: 'prevYear',
                  center: 'title',
                  right: 'nextYear'
                },
                views: {
                  dayGridMonth: {
                    titleFormat: {  year: 'numeric' }

                  }
                },

             })

             this.calendar.render()

         },

     }"
    >


问:
Spring JPA to custom API
I am trying to reduce database connections from my service which is using Spring Data JPA to connect to the database. I have created a separate microservice and exposed an API which will return response based on the queries passed in the request body. Is there any simple way to perform this migration as there are multiple database connections happening in my service.

I tried this migration but it requires a lot of code change to integrate this database API.

Title: Spring JPA to custom API


问:
How to find the position of a widget inside of a scrollview w.r.t scroll position/offset?
I have three sections inside of a ScrollView i.e. Personal Info, Education and Experience. I also have a custom header widget with the same names.

I am trying to implement #id like on web for scroll view controller and change header selcted.

I need to highlight the apporpriate header item as I scroll up/down the list and hit the section. The code so far is as follows:

import 'package:app/core/helpers/assets.dart';
import 'package:app/core/palettes/palettes.dart';
import 'package:app/core/utils/responsive_builder_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:intl/intl.dart';

import '../../../view_models/profile_education_model.dart';
import '../../../view_models/profile_experience_model.dart';

final List<ProfileExperienceModel> kExperiences = [
  ProfileExperienceModel(
    positionName: 'Registered Nurse',
    companyNameAndLocation: 'Royal Melbourne Hospital,  Parkville, Australia',
    startDate: DateTime.utc(2017, 3, 12),
    endDate: DateTime.utc(2019, 3, 12),
  ),
  ProfileExperienceModel(
    positionName: 'Registered Nurse',
    companyNameAndLocation: 'Royal Melbourne Hospital,  Parkville, Australia',
    startDate: DateTime.utc(2019, 4, 15),
    isCurrentlyWorking: true,
  ),
];

final List<ProfileEducationModel> kEducations = [
  ProfileEducationModel(
    degreeName: 'Master in Business Studies',
    universityNameAndLocation: 'Tribhuvan University, Nepal',
    startDate: DateTime.utc(2021, 06, 12),
    isCurrentlyStudying: true,
  ),
  ProfileEducationModel(
    degreeName: 'Bachelor in Information Management',
    universityNameAndLocation: 'Tribhuvan University, Nepal',
    startDate: DateTime.utc(2017, 01, 18),
    endDate: DateTime.utc(2021, 01, 12),
  ),
  ProfileEducationModel(
    degreeName: 'Intermediate degree',
    universityNameAndLocation: 'Higher Secondary Education Board (HSEB)',
    startDate: DateTime.utc(2014, 01, 18),
    endDate: DateTime.utc(2016, 01, 01),
  ),
  ProfileEducationModel(
    degreeName: 'School Leaving Certificate (SLC)',
    universityNameAndLocation: 'Govt. of Nepal',
    startDate: DateTime.utc(1998, 01, 18),
    endDate: DateTime.utc(2014, 01, 01),
  ),
];

class ProfilePersonalSummaryPageView extends StatelessWidget {
  const ProfilePersonalSummaryPageView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const kVerticalSeparatorSmall = SizedBox(height: 8);
    const kVerticalSeparator = SizedBox(height: 12);
    const kVerticalSeparatorLarge = SizedBox(height: 16);
    const kVerticalSeparatorVeryLarge = SizedBox(height: 24);

    return Container(
      color: const Color(0xFFF6FAFF),
      child: SingleChildScrollView(
        child: Padding(
          padding: kScaffoldPadding(context: context).copyWith(
            top: 20,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                  'Lorem ipsum'
                  ),
              kVerticalSeparatorLarge,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.phoneIcon,
                  text: '123456789'),
              kVerticalSeparatorSmall,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.emailIcon,
                  text: 'some@email.com'),
              kVerticalSeparatorSmall,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.profileRegistrationIdIcon,
                  text: '1234'),
              kVerticalSeparatorVeryLarge,

              /// region - Experience Block
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  /// Experience Header
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Experience',
                        style:
                            Theme.of(context).textTheme.titleMedium?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                      ),
                      TextButton(
                          onPressed: () {},
                          style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            minimumSize: Size.zero,
                          ),
                          child: Text(
                            'Add',
                            style: Theme.of(context)
                                .textTheme
                                .titleSmall
                                ?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                          )),
                    ],
                  ),

                  kVerticalSeparatorLarge,

                  /// Experiences
                  ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        final experience = kExperiences[index];
                        String workingPeriod =
                            '${DateFormat.yMMM().format(experience.startDate)} - ';

                        if (experience.isCurrentlyWorking &&
                            experience.endDate == null) {
                          workingPeriod = '$workingPeriod Present';
                        } else {
                          workingPeriod =
                              '$workingPeriod ${DateFormat.yMMM().format(experience.endDate!)}';
                        }

                        return Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 8),
                          decoration: const BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                        child: Text(
                                      experience.positionName,
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall
                                          ?.copyWith(
                                              color: Theme.of(context)
                                                  .primaryColor),
                                    )),
                                    const SizedBox(width: 12),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(Icons.more_horiz),
                                      iconSize: 24,
                                      color: Theme.of(context).primaryColor,
                                      visualDensity: const VisualDensity(
                                        horizontal:
                                            VisualDensity.minimumDensity,
                                        vertical: VisualDensity.minimumDensity,
                                      ),
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 4),
                                Text(experience.companyNameAndLocation,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: const Color(0xFF545A60),
                                        )),
                                const SizedBox(height: 8),
                                Text(workingPeriod,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: AppPalette.kTextColorLight,
                                        )),
                              ]),
                        );
                      },
                      separatorBuilder: (context, index) => kVerticalSeparator,
                      itemCount: kExperiences.length)
                ],
              ),

              /// endregion - Experience Block
              kVerticalSeparatorVeryLarge,

              /// region - Education Block
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  /// Education Header
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Education',
                        style:
                            Theme.of(context).textTheme.titleMedium?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                      ),
                      TextButton(
                          onPressed: () {},
                          style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            minimumSize: Size.zero,
                          ),
                          child: Text(
                            'Add',
                            style: Theme.of(context)
                                .textTheme
                                .titleSmall
                                ?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                          )),
                    ],
                  ),

                  kVerticalSeparatorLarge,

                  /// Educations
                  ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        final education = kEducations[index];
                        String studyPeriod =
                            '${DateFormat.y().format(education.startDate)} - ';

                        if (education.isCurrentlyStudying &&
                            education.endDate == null) {
                          studyPeriod = '$studyPeriod Present';
                        } else {
                          studyPeriod =
                              '$studyPeriod ${DateFormat.y().format(education.endDate!)}';
                        }

                        return Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 8),
                          decoration: const BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                        child: Text(
                                      education.degreeName,
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall
                                          ?.copyWith(
                                              color: Theme.of(context)
                                                  .primaryColor),
                                    )),
                                    const SizedBox(width: 12),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(Icons.more_horiz),
                                      iconSize: 24,
                                      color: Theme.of(context).primaryColor,
                                      visualDensity: const VisualDensity(
                                        horizontal:
                                            VisualDensity.minimumDensity,
                                        vertical: VisualDensity.minimumDensity,
                                      ),
                                    ),
                                  ],
                                ),
                                // const SizedBox(height: 4),
                                Text(education.universityNameAndLocation,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: const Color(0xFF545A60),
                                        )),
                                const SizedBox(height: 8),
                                Text(studyPeriod,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: AppPalette.kTextColorLight,
                                        )),
                              ]),
                        );
                      },
                      separatorBuilder: (context, index) => kVerticalSeparator,
                      itemCount: kEducations.length)
                ],
              ),

              /// endregion - Experience Block
            ],
          ),
        ),
      ),
    );
  }
}

Widget personalDetailWidget(
    {required BuildContext context,
    required String svgAsset,
    required String text}) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      SvgPicture.asset(
        svgAsset,
        width: 14,
        height: 14,
      ),
      const SizedBox(width: 12),
      Text(text),
    ],
  );
}
```
<p>File: profile.dart</p>
<pre class="lang-dart prettyprint-override"><code>
import 'package:app/core/themes/theme.dart';
import 'package:app/core/widgets/atoms/shimmer/app_shimmer.dart';
import 'package:app/features/home/presentation/widgets/atoms/mobile/profile/personal_summary.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../../../../../../../core/helpers/assets.dart';
import '../../../../../../../core/widgets/atoms/tab.dart';

class HomeMobilePortraitViewProfileWidget extends StatefulWidget {
  const HomeMobilePortraitViewProfileWidget({Key? key}) : super(key: key);

  @override
  State<HomeMobilePortraitViewProfileWidget> createState() =>
      _HomeMobilePortraitViewProfileWidgetState();
}

class _HomeMobilePortraitViewProfileWidgetState
    extends State<HomeMobilePortraitViewProfileWidget> {
  final _kHeaderHeight = 300.0;
  final _kProfileImageSize = 146.0;
  final _kProfileImageBorder = 8.0;

  ValueNotifier<int> currentSelectedTab = ValueNotifier<int>(0);
  PageController? pageController;

  @override
  void initState() {
    super.initState();

    pageController = PageController();
  }

  @override
  void dispose() {
    pageController?.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final kBackgroundImageHeight = _kHeaderHeight / 2.0;

    List<AppDefaultTab> tabs = [
      AppDefaultTab(
          index: 0,
          title: 'Personal Summary',
          currentSelectedTab: currentSelectedTab),
      AppDefaultTab(
          index: 1,
          title: 'Experience',
          currentSelectedTab: currentSelectedTab),
      AppDefaultTab(
          index: 2, title: 'Education', currentSelectedTab: currentSelectedTab),
    ];

    return Container(
        color: Colors.white,
        child: Column(
          children: [
            /// region - Profile & Bg Image, and name and address
            SizedBox(
              height: _kHeaderHeight,
              child: Stack(children: [
                /// background image
                Container(
                  height: kBackgroundImageHeight,
                  width: MediaQuery.of(context).size.width,
                  color: Theme.of(context).primaryColor,
                  child: CachedNetworkImage(
                    imageUrl:
                        'https://picsum.photos/2400/1800?v=${DateTime.now().toIso8601String()}',
                    height: kBackgroundImageHeight,
                    imageBuilder: (context, imageProvider) => Container(
                      height: kBackgroundImageHeight,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                      ),
                      child: Image(
                          image: imageProvider,
                          height: kBackgroundImageHeight,
                          fit: BoxFit.cover),
                    ),
                    placeholder: (context, url) => Container(
                      height: kBackgroundImageHeight,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                      ),
                      child: AppShimmer(
                        child: Container(
                          color: Colors.red,
                        ),
                      ),
                    ),
                    errorWidget: (context, url, error) => Container(
                      height: kBackgroundImageHeight,
                      decoration: BoxDecoration(
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                  ),
                ),

                /// Name and address
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: _kHeaderHeight / 2,
                      width: MediaQuery.of(context).size.width,
                      color: const Color(0xFFF6FAFF),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Spacer(flex: 3),
                          Text(
                            'Some Name',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context)
                                .textTheme
                                .titleMedium
                                ?.copyWith(fontSize: 18),
                          ),
                          Text(
                            'New York, ',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context)
                                .textTheme
                                .bodyMedium
                                ?.copyWith(
                                  fontFamily: ThemeManager.kFontFamily,
                                  fontSize: 13,
                                  color: const Color(0xFFA1A1A1),
                                  fontWeight: FontWeight.w500,
                                ),
                          ),
                          const Spacer(),
                        ],
                      ),
                    ),
                  ),
                ),

                /// Profile photo
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: CachedNetworkImage(
                      imageUrl:
                          'https://picsum.photos/1600/900?v=${DateTime.now().toIso8601String()}',
                      width: _kProfileImageSize,
                      height: _kProfileImageSize,
                      imageBuilder: (context, imageProvider) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: Image(
                              image: imageProvider,
                              width:
                                  (_kProfileImageSize - _kProfileImageBorder),
                              height:
                                  (_kProfileImageSize - _kProfileImageBorder),
                              fit: BoxFit.cover),
                        ),
                      ),
                      placeholder: (context, url) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: AppShimmer(
                            child: Container(
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                      errorWidget: (context, url, error) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: Image.asset(ImageAssets.avatarPlaceholder,
                              cacheHeight:
                                  (_kProfileImageSize - _kProfileImageBorder)
                                      .toInt(),
                              cacheWidth:
                                  (_kProfileImageSize - _kProfileImageBorder)
                                      .toInt(),
                              fit: BoxFit.cover),
                        ),
                      ),
                    ),
                  ),
                ),
              ]),
            ),

            /// endregion - Profile & Bg Image, and name and address

            /// region -
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Flexible(
                  child: SizedBox(
                    height: 60,
                    child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (listViewBuilderContext, index) =>
                            GestureDetector(
                                onTap: () {
                                  currentSelectedTab.value = index;
                                  // pageController?.jumpToPage(index);
                                },
                                child: tabs[index]),
                        itemCount: tabs.length),
                  ),
                ),
              ],
            ),

            const Expanded(
              child: ProfilePersonalSummaryPageView(),
            ),

            /// endregion -
            ///
          ],
        ));
  }
}

</code>```

I am using ValueNotifier to track the currently selected tab.

Body:
I have three sections inside of a ScrollView i.e. Personal Info, Education and Experience. I also have a custom header widget with the same names.

I am trying to implement #id like on web for scroll view controller and change header selcted.

I need to highlight the apporpriate header item as I scroll up/down the list and hit the section. The code so far is as follows:

import 'package:app/core/helpers/assets.dart';
import 'package:app/core/palettes/palettes.dart';
import 'package:app/core/utils/responsive_builder_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:intl/intl.dart';

import '../../../view_models/profile_education_model.dart';
import '../../../view_models/profile_experience_model.dart';

final List<ProfileExperienceModel> kExperiences = [
  ProfileExperienceModel(
    positionName: 'Registered Nurse',
    companyNameAndLocation: 'Royal Melbourne Hospital,  Parkville, Australia',
    startDate: DateTime.utc(2017, 3, 12),
    endDate: DateTime.utc(2019, 3, 12),
  ),
  ProfileExperienceModel(
    positionName: 'Registered Nurse',
    companyNameAndLocation: 'Royal Melbourne Hospital,  Parkville, Australia',
    startDate: DateTime.utc(2019, 4, 15),
    isCurrentlyWorking: true,
  ),
];

final List<ProfileEducationModel> kEducations = [
  ProfileEducationModel(
    degreeName: 'Master in Business Studies',
    universityNameAndLocation: 'Tribhuvan University, Nepal',
    startDate: DateTime.utc(2021, 06, 12),
    isCurrentlyStudying: true,
  ),
  ProfileEducationModel(
    degreeName: 'Bachelor in Information Management',
    universityNameAndLocation: 'Tribhuvan University, Nepal',
    startDate: DateTime.utc(2017, 01, 18),
    endDate: DateTime.utc(2021, 01, 12),
  ),
  ProfileEducationModel(
    degreeName: 'Intermediate degree',
    universityNameAndLocation: 'Higher Secondary Education Board (HSEB)',
    startDate: DateTime.utc(2014, 01, 18),
    endDate: DateTime.utc(2016, 01, 01),
  ),
  ProfileEducationModel(
    degreeName: 'School Leaving Certificate (SLC)',
    universityNameAndLocation: 'Govt. of Nepal',
    startDate: DateTime.utc(1998, 01, 18),
    endDate: DateTime.utc(2014, 01, 01),
  ),
];

class ProfilePersonalSummaryPageView extends StatelessWidget {
  const ProfilePersonalSummaryPageView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const kVerticalSeparatorSmall = SizedBox(height: 8);
    const kVerticalSeparator = SizedBox(height: 12);
    const kVerticalSeparatorLarge = SizedBox(height: 16);
    const kVerticalSeparatorVeryLarge = SizedBox(height: 24);

    return Container(
      color: const Color(0xFFF6FAFF),
      child: SingleChildScrollView(
        child: Padding(
          padding: kScaffoldPadding(context: context).copyWith(
            top: 20,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                  'Lorem ipsum'
                  ),
              kVerticalSeparatorLarge,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.phoneIcon,
                  text: '123456789'),
              kVerticalSeparatorSmall,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.emailIcon,
                  text: 'some@email.com'),
              kVerticalSeparatorSmall,
              personalDetailWidget(
                  context: context,
                  svgAsset: SvgAssets.profileRegistrationIdIcon,
                  text: '1234'),
              kVerticalSeparatorVeryLarge,

              /// region - Experience Block
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  /// Experience Header
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Experience',
                        style:
                            Theme.of(context).textTheme.titleMedium?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                      ),
                      TextButton(
                          onPressed: () {},
                          style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            minimumSize: Size.zero,
                          ),
                          child: Text(
                            'Add',
                            style: Theme.of(context)
                                .textTheme
                                .titleSmall
                                ?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                          )),
                    ],
                  ),

                  kVerticalSeparatorLarge,

                  /// Experiences
                  ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        final experience = kExperiences[index];
                        String workingPeriod =
                            '${DateFormat.yMMM().format(experience.startDate)} - ';

                        if (experience.isCurrentlyWorking &&
                            experience.endDate == null) {
                          workingPeriod = '$workingPeriod Present';
                        } else {
                          workingPeriod =
                              '$workingPeriod ${DateFormat.yMMM().format(experience.endDate!)}';
                        }

                        return Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 8),
                          decoration: const BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                        child: Text(
                                      experience.positionName,
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall
                                          ?.copyWith(
                                              color: Theme.of(context)
                                                  .primaryColor),
                                    )),
                                    const SizedBox(width: 12),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(Icons.more_horiz),
                                      iconSize: 24,
                                      color: Theme.of(context).primaryColor,
                                      visualDensity: const VisualDensity(
                                        horizontal:
                                            VisualDensity.minimumDensity,
                                        vertical: VisualDensity.minimumDensity,
                                      ),
                                    ),
                                  ],
                                ),
                                const SizedBox(height: 4),
                                Text(experience.companyNameAndLocation,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: const Color(0xFF545A60),
                                        )),
                                const SizedBox(height: 8),
                                Text(workingPeriod,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: AppPalette.kTextColorLight,
                                        )),
                              ]),
                        );
                      },
                      separatorBuilder: (context, index) => kVerticalSeparator,
                      itemCount: kExperiences.length)
                ],
              ),

              /// endregion - Experience Block
              kVerticalSeparatorVeryLarge,

              /// region - Education Block
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  /// Education Header
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Education',
                        style:
                            Theme.of(context).textTheme.titleMedium?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                      ),
                      TextButton(
                          onPressed: () {},
                          style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            minimumSize: Size.zero,
                          ),
                          child: Text(
                            'Add',
                            style: Theme.of(context)
                                .textTheme
                                .titleSmall
                                ?.copyWith(
                                  color: Theme.of(context).primaryColor,
                                ),
                          )),
                    ],
                  ),

                  kVerticalSeparatorLarge,

                  /// Educations
                  ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        final education = kEducations[index];
                        String studyPeriod =
                            '${DateFormat.y().format(education.startDate)} - ';

                        if (education.isCurrentlyStudying &&
                            education.endDate == null) {
                          studyPeriod = '$studyPeriod Present';
                        } else {
                          studyPeriod =
                              '$studyPeriod ${DateFormat.y().format(education.endDate!)}';
                        }

                        return Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 8),
                          decoration: const BoxDecoration(
                            color: Colors.white,
                          ),
                          child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                        child: Text(
                                      education.degreeName,
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: Theme.of(context)
                                          .textTheme
                                          .titleSmall
                                          ?.copyWith(
                                              color: Theme.of(context)
                                                  .primaryColor),
                                    )),
                                    const SizedBox(width: 12),
                                    IconButton(
                                      onPressed: () {},
                                      icon: const Icon(Icons.more_horiz),
                                      iconSize: 24,
                                      color: Theme.of(context).primaryColor,
                                      visualDensity: const VisualDensity(
                                        horizontal:
                                            VisualDensity.minimumDensity,
                                        vertical: VisualDensity.minimumDensity,
                                      ),
                                    ),
                                  ],
                                ),
                                // const SizedBox(height: 4),
                                Text(education.universityNameAndLocation,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: const Color(0xFF545A60),
                                        )),
                                const SizedBox(height: 8),
                                Text(studyPeriod,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(
                                          color: AppPalette.kTextColorLight,
                                        )),
                              ]),
                        );
                      },
                      separatorBuilder: (context, index) => kVerticalSeparator,
                      itemCount: kEducations.length)
                ],
              ),

              /// endregion - Experience Block
            ],
          ),
        ),
      ),
    );
  }
}

Widget personalDetailWidget(
    {required BuildContext context,
    required String svgAsset,
    required String text}) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      SvgPicture.asset(
        svgAsset,
        width: 14,
        height: 14,
      ),
      const SizedBox(width: 12),
      Text(text),
    ],
  );
}

File: profile.dart

import 'package:app/core/themes/theme.dart';
import 'package:app/core/widgets/atoms/shimmer/app_shimmer.dart';
import 'package:app/features/home/presentation/widgets/atoms/mobile/profile/personal_summary.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../../../../../../../core/helpers/assets.dart';
import '../../../../../../../core/widgets/atoms/tab.dart';

class HomeMobilePortraitViewProfileWidget extends StatefulWidget {
  const HomeMobilePortraitViewProfileWidget({Key? key}) : super(key: key);

  @override
  State<HomeMobilePortraitViewProfileWidget> createState() =>
      _HomeMobilePortraitViewProfileWidgetState();
}

class _HomeMobilePortraitViewProfileWidgetState
    extends State<HomeMobilePortraitViewProfileWidget> {
  final _kHeaderHeight = 300.0;
  final _kProfileImageSize = 146.0;
  final _kProfileImageBorder = 8.0;

  ValueNotifier<int> currentSelectedTab = ValueNotifier<int>(0);
  PageController? pageController;

  @override
  void initState() {
    super.initState();

    pageController = PageController();
  }

  @override
  void dispose() {
    pageController?.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final kBackgroundImageHeight = _kHeaderHeight / 2.0;

    List<AppDefaultTab> tabs = [
      AppDefaultTab(
          index: 0,
          title: 'Personal Summary',
          currentSelectedTab: currentSelectedTab),
      AppDefaultTab(
          index: 1,
          title: 'Experience',
          currentSelectedTab: currentSelectedTab),
      AppDefaultTab(
          index: 2, title: 'Education', currentSelectedTab: currentSelectedTab),
    ];

    return Container(
        color: Colors.white,
        child: Column(
          children: [
            /// region - Profile & Bg Image, and name and address
            SizedBox(
              height: _kHeaderHeight,
              child: Stack(children: [
                /// background image
                Container(
                  height: kBackgroundImageHeight,
                  width: MediaQuery.of(context).size.width,
                  color: Theme.of(context).primaryColor,
                  child: CachedNetworkImage(
                    imageUrl:
                        'https://picsum.photos/2400/1800?v=${DateTime.now().toIso8601String()}',
                    height: kBackgroundImageHeight,
                    imageBuilder: (context, imageProvider) => Container(
                      height: kBackgroundImageHeight,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                      ),
                      child: Image(
                          image: imageProvider,
                          height: kBackgroundImageHeight,
                          fit: BoxFit.cover),
                    ),
                    placeholder: (context, url) => Container(
                      height: kBackgroundImageHeight,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                      ),
                      child: AppShimmer(
                        child: Container(
                          color: Colors.red,
                        ),
                      ),
                    ),
                    errorWidget: (context, url, error) => Container(
                      height: kBackgroundImageHeight,
                      decoration: BoxDecoration(
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                  ),
                ),

                /// Name and address
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: _kHeaderHeight / 2,
                      width: MediaQuery.of(context).size.width,
                      color: const Color(0xFFF6FAFF),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Spacer(flex: 3),
                          Text(
                            'Some Name',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context)
                                .textTheme
                                .titleMedium
                                ?.copyWith(fontSize: 18),
                          ),
                          Text(
                            'New York, ',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context)
                                .textTheme
                                .bodyMedium
                                ?.copyWith(
                                  fontFamily: ThemeManager.kFontFamily,
                                  fontSize: 13,
                                  color: const Color(0xFFA1A1A1),
                                  fontWeight: FontWeight.w500,
                                ),
                          ),
                          const Spacer(),
                        ],
                      ),
                    ),
                  ),
                ),

                /// Profile photo
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: CachedNetworkImage(
                      imageUrl:
                          'https://picsum.photos/1600/900?v=${DateTime.now().toIso8601String()}',
                      width: _kProfileImageSize,
                      height: _kProfileImageSize,
                      imageBuilder: (context, imageProvider) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: Image(
                              image: imageProvider,
                              width:
                                  (_kProfileImageSize - _kProfileImageBorder),
                              height:
                                  (_kProfileImageSize - _kProfileImageBorder),
                              fit: BoxFit.cover),
                        ),
                      ),
                      placeholder: (context, url) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: AppShimmer(
                            child: Container(
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                      errorWidget: (context, url, error) => Container(
                        width: _kProfileImageSize,
                        height: _kProfileImageSize,
                        padding: EdgeInsets.all(_kProfileImageBorder),
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(
                              (_kProfileImageSize - _kProfileImageBorder) / 2),
                          child: Image.asset(ImageAssets.avatarPlaceholder,
                              cacheHeight:
                                  (_kProfileImageSize - _kProfileImageBorder)
                                      .toInt(),
                              cacheWidth:
                                  (_kProfileImageSize - _kProfileImageBorder)
                                      .toInt(),
                              fit: BoxFit.cover),
                        ),
                      ),
                    ),
                  ),
                ),
              ]),
            ),

            /// endregion - Profile & Bg Image, and name and address

            /// region -
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Flexible(
                  child: SizedBox(
                    height: 60,
                    child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (listViewBuilderContext, index) =>
                            GestureDetector(
                                onTap: () {
                                  currentSelectedTab.value = index;
                                  // pageController?.jumpToPage(index);
                                },
                                child: tabs[index]),
                        itemCount: tabs.length),
                  ),
                ),
              ],
            ),

            const Expanded(
              child: ProfilePersonalSummaryPageView(),
            ),

            /// endregion -
            ///
          ],
        ));
  }
}

I am using ValueNotifier to track the currently selected tab.


问:
How do I provide Admin username and password to ActiveDirectoryLdapAuthenticationProvider?
Typically, we configure a vanilla LdapAuthenticationProvider with a Dn and a password.

```<code>auth
        .ldapAuthentication()
        .contextSource()
        .url(env.getProperty("spring.ldap.urls") + "/" + env.getProperty("spring.ldap.base"))
        .managerDn(env.getProperty("ldap.managerDn") + "," + env.getProperty("spring.ldap.base"))
        .managerPassword(env.getProperty("spring.ldap.password"))
</code>```

How should I go about achieving a similar configuration with ActiveDirectoryLdapAuthenticationProvider ?

Snippet of my current progress:

```<code>@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        ActiveDirectoryLdapAuthenticationProvider adProvider = new ActiveDirectoryLdapAuthenticationProvider("domain.org",
                "ldap://activedirectory-url:389");
        adProvider.setConvertSubErrorCodesToExceptions(true);
        adProvider.setUseAuthenticationRequestCredentials(true);
        auth.authenticationProvider(adProvider);
    }

}
</code>```

I'm scratching my head about how to implement the same functionality with ActiveDirectoryLdapAuthenticationProvider. I have searched high and low but I'm at a loss on how to replicate the previous configuration with the Active Directory.

Body:
Typically, we configure a vanilla LdapAuthenticationProvider with a Dn and a password.

auth
        .ldapAuthentication()
        .contextSource()
        .url(env.getProperty("spring.ldap.urls") + "/" + env.getProperty("spring.ldap.base"))
        .managerDn(env.getProperty("ldap.managerDn") + "," + env.getProperty("spring.ldap.base"))
        .managerPassword(env.getProperty("spring.ldap.password"))

How should I go about achieving a similar configuration with ActiveDirectoryLdapAuthenticationProvider ?

Snippet of my current progress:

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        ActiveDirectoryLdapAuthenticationProvider adProvider = new ActiveDirectoryLdapAuthenticationProvider("domain.org",
                "ldap://activedirectory-url:389");
        adProvider.setConvertSubErrorCodesToExceptions(true);
        adProvider.setUseAuthenticationRequestCredentials(true);
        auth.authenticationProvider(adProvider);
    }

}

I'm scratching my head about how to implement the same functionality with ActiveDirectoryLdapAuthenticationProvider. I have searched high and low but I'm at a loss on how to replicate the previous configuration with the Active Directory.


问:
SharePoint Quick Part Label Stopped Working
We are currently migrating our EDMS into SharePoint. As part of this workstream, I recently set up a SharePoint site with a Quick Part Label containing just the version number - as per the instructions here.

This worked fine in testing, now a few users have been added to the site and the migration works have begun. The option for "Label" within Quick Parts has simply dissapeared.

I tried some trouble shooting on Friday and found the following:

Recovering an old document from the recycle bin, still contain a correct version number label.

This label can be copy and pasted to a new document, and it correct applies the label quick part with the new documents version.

I set up a new test site and the Quick Part Label behaved exactly as expected, meaning the issue is within the Live SharePoint site itself.

I turned off labels and reset them. With no success.

I am opening in the app, the library has minor versions, check-in/check-out turned on (and currently approvals are turned off).
I also suspected that OneDrive sync might cause issues, but this again didn't seem to solve anything in the test site.

NB: this is also posted here, I will keep both threads up to date.

Screenshot showing label missing

Update 20/12/22
Since this morning I have now taken the following additional steps:

Added a new content type

Recreated the label for that content type

Change the content type of the document in the library, and the label
option now appears

This seems like a fix, but I am also curious as to limitations of
this method.

Limitations noticed so far: cannot edit SharePoint columns in the
details pane


问:
Could not resolve dependency conflict among @angular/cdk, @angular/core and @angular-material-components/datetime-picker
I'm developing an angular app in which I use Angular-Material. I want to use matdatetimepicker in a form field. I performed some google searches and realized that, I need to install Material Datepicker & Timepicker Package with the npm command `

```<code>$ npm install @angular-material-components/datetime-picker
</code>```

But npm keeps throwing the following errors:

```<code>$ npm install @angular-material-components/datetime-picker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: deywuro-app@0.0.0
npm ERR! Found: @angular/cdk@13.3.9
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^15.0.1" from @angular-material-components/datetime-picker@9.0.0
npm ERR! node_modules/@angular-material-components/datetime-picker
npm ERR!   @angular-material-components/datetime-picker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jsabrokwah\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsabrokwah\AppData\Local\npm-cache\_logs\2022-12-19T10_59_17_667Z-debug-0.log

</code>```

I then consulted the documentation and realized I have to install datetime-picker version 7 in ensure compatibility with @angular/cdk@"^13.0.0".

So I went ahead to issue the commant; $ npm install @angular-material-components/datetime-picker@7.0 and npm keeps throwing the following error:

```<code>npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: deywuro-app@0.0.0
npm ERR! Found: @angular/common@14.2.12
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.2.0" from the root project
npm ERR!   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^13.0.0" from the root project
npm ERR!     peer @angular/cdk@"^13.0.1" from @angular-material-components/datetime-picker@7.0.1
npm ERR!     node_modules/@angular-material-components/datetime-picker
npm ERR!       @angular-material-components/datetime-picker@"7.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.0.1" from @angular-material-components/datetime-picker@7.0.1
npm ERR! node_modules/@angular-material-components/datetime-picker
npm ERR!   @angular-material-components/datetime-picker@"7.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jsabrokwah\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsabrokwah\AppData\Local\npm-cache\_logs\2022-12-19T11_07_34_825Z-debug-0.log
</code>```

I am stack and don't know what to do...

Here is my package-lock.json file;

```<code>"packages": {
    "": {
      "name": "deywuro-app",
      "version": "0.0.0",
      "dependencies": {
        "@angular/animations": "^14.2.0",
        "@angular/cdk": "^13.0.0",
        "@angular/common": "^14.2.0",
        "@angular/compiler": "^14.2.0",
        "@angular/core": "^14.2.0",
        "@angular/forms": "^14.2.0",
        "@angular/material": "^13.0.0",
        "@angular/platform-browser": "^14.2.0",
        "@angular/platform-browser-dynamic": "^14.2.0",
        "@angular/router": "^14.2.0",
        "@fortawesome/fontawesome-free": "^6.2.1",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.7",
        "@angular/cli": "~14.2.7",
        "@angular/compiler-cli": "^14.2.0",
        "@types/jasmine": "~4.0.0",
        "jasmine-core": "~4.3.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "typescript": "~4.7.2"
      }
    }
</code>```

And my package.json file:

```<code>{
  "name": "deywuro-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.7",
    "@angular/cli": "~14.2.7",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}
</code>```

I've consulted several blogs and similar problems on stackoverflow

But npm keeps throwing same errors

Body:
I'm developing an angular app in which I use Angular-Material. I want to use matdatetimepicker in a form field. I performed some google searches and realized that, I need to install Material Datepicker & Timepicker Package with the npm command `

$ npm install @angular-material-components/datetime-picker

But npm keeps throwing the following errors:

$ npm install @angular-material-components/datetime-picker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: deywuro-app@0.0.0
npm ERR! Found: @angular/cdk@13.3.9
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^15.0.1" from @angular-material-components/datetime-picker@9.0.0
npm ERR! node_modules/@angular-material-components/datetime-picker
npm ERR!   @angular-material-components/datetime-picker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jsabrokwah\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsabrokwah\AppData\Local\npm-cache\_logs\2022-12-19T10_59_17_667Z-debug-0.log

I then consulted the documentation and realized I have to install datetime-picker version 7 in ensure compatibility with @angular/cdk@"^13.0.0".

So I went ahead to issue the commant; $ npm install @angular-material-components/datetime-picker@7.0 and npm keeps throwing the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: deywuro-app@0.0.0
npm ERR! Found: @angular/common@14.2.12
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.2.0" from the root project
npm ERR!   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^13.0.0" from the root project
npm ERR!     peer @angular/cdk@"^13.0.1" from @angular-material-components/datetime-picker@7.0.1
npm ERR!     node_modules/@angular-material-components/datetime-picker
npm ERR!       @angular-material-components/datetime-picker@"7.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.0.1" from @angular-material-components/datetime-picker@7.0.1
npm ERR! node_modules/@angular-material-components/datetime-picker
npm ERR!   @angular-material-components/datetime-picker@"7.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jsabrokwah\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsabrokwah\AppData\Local\npm-cache\_logs\2022-12-19T11_07_34_825Z-debug-0.log

I am stack and don't know what to do...

Here is my package-lock.json file;

"packages": {
    "": {
      "name": "deywuro-app",
      "version": "0.0.0",
      "dependencies": {
        "@angular/animations": "^14.2.0",
        "@angular/cdk": "^13.0.0",
        "@angular/common": "^14.2.0",
        "@angular/compiler": "^14.2.0",
        "@angular/core": "^14.2.0",
        "@angular/forms": "^14.2.0",
        "@angular/material": "^13.0.0",
        "@angular/platform-browser": "^14.2.0",
        "@angular/platform-browser-dynamic": "^14.2.0",
        "@angular/router": "^14.2.0",
        "@fortawesome/fontawesome-free": "^6.2.1",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.7",
        "@angular/cli": "~14.2.7",
        "@angular/compiler-cli": "^14.2.0",
        "@types/jasmine": "~4.0.0",
        "jasmine-core": "~4.3.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.0.0",
        "typescript": "~4.7.2"
      }
    }

And my package.json file:

{
  "name": "deywuro-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.7",
    "@angular/cli": "~14.2.7",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

I've consulted several blogs and similar problems on stackoverflow

But npm keeps throwing same errors


问:
WinBox.js : Minimize a winbox window using a button
I'm trying to minimize a window that I made using WinBox (docs here, GitHub here)

Here is my code:
I first load the library (I've downloaded it on /dist/)

```<code><head>
    <link rel="preload" href="dist/winbox.bundle.min.js" as="script">
    <script src="dist/winbox.bundle.min.js"></script>
</head>
</code>```

Then I just put a test button to make a WinBox and a container with the stuff I want to put in the window (here it's just a button)

```<code><body>
    <input id="winbox" type="button" value="Create Window" />

    <div id="container" style="display: none">
        <div id="content">
            <button id="hide">Minimize (Toggle)</button>
        </div>
    </div>

    <script src="dist/main.js"></script>
</body>
</code>```

And here's my JavaScript (main.js)

First I create the window

```<code>document.getElementById("winbox").onclick = function () {
    var winbox = new WinBox("Controls", {
        mount: document.getElementById("content"),
        border: 4,
    });
};
</code>```

then I try to minimize the window

```<code>document.getElementById("hide").onclick = function () {
    winbox.minimize(!this.min);
};
</code>```

But I get the error on the console

```<code>Uncaught TypeError: winbox.minimize is not a function
    <anonymous> http://127.0.0.1:5501/dist/main.js:12
</code>```

It would mean a lot if someone could help me.

Thanks!

I've also tried to use the method on the GitHub wiki which tells me to use

```<code>winbox.minimize(true);
</code>```

But I get the same error...

Thanks again for your help!

Body:
I'm trying to minimize a window that I made using WinBox (docs here, GitHub here)

Here is my code:
I first load the library (I've downloaded it on /dist/)

    <link rel="preload" href="dist/winbox.bundle.min.js" as="script">

Then I just put a test button to make a WinBox and a container with the stuff I want to put in the window (here it's just a button)

    <input id="winbox" type="button" value="Create Window" />

            <button id="hide">Minimize (Toggle)</button>

And here's my JavaScript (main.js)

First I create the window

document.getElementById("winbox").onclick = function () {
    var winbox = new WinBox("Controls", {
        mount: document.getElementById("content"),
        border: 4,
    });
};

then I try to minimize the window

document.getElementById("hide").onclick = function () {
    winbox.minimize(!this.min);
};

But I get the error on the console

Uncaught TypeError: winbox.minimize is not a function
    <anonymous> http://127.0.0.1:5501/dist/main.js:12

It would mean a lot if someone could help me.

Thanks!

I've also tried to use the method on the GitHub wiki which tells me to use

winbox.minimize(true);

But I get the same error...

Thanks again for your help!